theme: channing-cyan

本文正在参加「金石计划 . 瓜分6万现金大奖」

专栏地址：《小团队web技术搭建》
《小团队web技术搭建》（一）环境和工具的准备-第一部分
 《小团队web技术搭建》（二）环境和工具的准备-第二部分
 《小团队web技术搭建》（三）环境和工具的准备-第三部分
 《小团队web技术搭建》（四）虚拟机的安装使用
 《小团队web技术搭建》（五）项目的简单部署方式
未完待续…

为了方便有些读者的理解，我们从比较原始、简单的服务器部署开始讨论，后面的文章再介绍更为合理的方式以及需要的环境、工具。

准备一个基础前端项目

项目只包含一个index.html，以做最简演示，运行结果只显示一行“Hello world!”：

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world!</title>
</head>
<body>
  <h1>Hello world!</h1>
</body>
</html>

将代码上传git，我存放在github这个目录:https://github.com/doterlin/small-team-tech/tree/main/demo/simple-demo

git上传在部署流程中并非是必须的，如果你在部署的时候不需要git来拉取代码的话。

连接服务器

连接远程服务器你需要一个连接工具，比如：MobaXterm、IIS7、SecureCRT(付费)等等。我比较喜欢用的是MobaXterm，并且用它来做演示。

新建一个连接会话，按图示顺序设置完成：

双击刚才新建好的会话，输入密码连接即可完成：

首先我们要做的是想办法上传代码到服务器。

方式1. Git拉取项目

新建一个用于存放项目的目录并进入，目录位置根据自己需要去定：

mkdir -p /www/projects/demo/
cd /www/projects/demo/

clone下来项目，发现git未安装：

git clone git@github.com:doterlin/small-team-tech.git
-bash: git: command not found

我们安装一下git(根据linux版本不同，安装方式不同)：

yum install git

生成ssh key：

ssh-keygen -t rsa -C "your_email"

显示出来public key，然后复制它：

cat ~/.ssh/id_rsa.pub

把key粘贴到git托管平台：

把复制的key粘贴到Key一栏，Title填写一个你能知道是来自哪台机子的名字:

再次进行git clone：

至此我们的代码就算同步到服务器了，当以后有代码更新时就git pull一下代码即可。

方式2. FTP上传项目

我们也可以用看起来更加简单的方式，直接用FTP或SFTP协议（File Transfer Protocol 文件传输协议）上传文件到服务器。

进入之前我们新建的目录，在它下面新建一个目录：

cd /www/projects/demo/
mkdir demo1
cd demo1

MobaXterm的界面有比较方便的FTP支持，点击左侧的SSH brower，勾选下面的Follow teminal folder(或者你可以自己手动进入目录)，再点击上面的upload图标，选择一个目录上传（在此之前我们压缩下项目包，因为不支持上传文件夹）:

现在代码的压缩包已经上传了：

解压：

unzip simple-demo.zip
Archive:  simple-demo.zip
  inflating: index.html

代码上传完毕，部分ssh客户端还支持lrzsz服务，比如SecureCRT，输入rz命令即可选择文件上传：

rz

配置nginx

文件上传完毕，我们需要用代理服务器把他解析到公网。

先查看nginx是否已安装：

nginx -v
nginx version: nginx/1.20.1

如果没安装，请根据自己linux的系统安装和启动nginx。

查看nginx状态和配置文件位置：

nginx -t
nginx: the configuration file /www/server/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /www/server/nginx/conf/nginx.conf test is successful

现在我们知道nginx的配置文件是/www/server/nginx/conf/nginx.conf，接着编辑它：

vim /www/server/nginx/conf/nginx.conf

在http字段里面加入几行配置，解析我们刚才上传的代码，端口号随意（只要不被占用）：

server {
        listen 8989;
        root /www/projects/demo/small-team-tech/demo/simple-demo/;
}

如果你对nginx的配置规则不熟悉，可以使用一些生成工具进行生成（当然我还是建议你去学习下，成本不高），如：https://github.com/digitalocean/nginxconfig.io

接着刷新一下配置：

nginx -s reload

我们尝试在服务器里请求下我们部署的文件，是通的：

curl localhost:8989/index.html

但公网地址http://47.96.177.197:8989/index.html是不通的：

你可能需要检查下防火墙:

# iptables
iptables -L

# ufw
ufw status

# firewalld
firewall-cmd --list-all

以及看看服务器云厂商的端口放行，比如阿里云的添加安全组，下图我们将上面配置的8989加入到某个安全组即可：

重新访问http://47.96.177.197:8989/index.html成功：

这样就算部署成功了。

感谢阅读。

文章版权归作者所有，未经允许请勿转载。

THE END

资讯

《小团队web技术搭建》（五）项目的简单部署方式