欢迎关注系列专栏： 《小团队web技术搭建》
《小团队web技术搭建》（一）环境和工具的准备-第一部分
《小团队web技术搭建》（二）环境和工具的准备-第二部分
《小团队web技术搭建》（三）环境和工具的准备-第三部分
《小团队web技术搭建》（四）虚拟机的安装使用
《小团队web技术搭建》（五）项目的简单部署方式
《小团队web技术搭建》（六）自动化部署方式（CI/CD）（一）
《小团队web技术搭建》（七）自动化部署方式（CI/CD）（二）
持续更新中...
为了方便有些读者的理解，我们从比较原始、简单的服务器部署开始讨论，后面的文章再介绍更为合理的方式以及需要的环境、工具。
准备一个基础前端项目
项目只包含一个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 demo1MobaXterm的界面有比较方便的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成功：
这样就算部署成功了。
感谢阅读！欢迎关注系列专栏： 《小团队web技术搭建》
