Nginx运行前端项目

Posted 2021-09-03 陌路凡歌

很多同学对前端的nginx配置不是特别了解，一般都是打包完成之后交给运维或者后端同学进行部署，这里简单介绍一下在一个新服务器上进行单页项目的部署，当然后面也会更新Jenkins等自动化部署的配置。

连接服务器

服务器的连接一般是通过ssh进行远程连接，如何连接：

1. 通过ssh连接软件，如SecureCRT和XShell，这些软件具体就去看教程了，比较简单方便。
2. 通过命令终端的ssh命令进行连接，这是我主要讲的。

ssh连接

账号和密码连接登录

1. linux和macOs

在命令终端直接使用：

ssh -p 2000 root@123.34.123.123
# 注：-p 2000是连接的端口号，如果连接的端口号是22的话可以不用输入-p 2000，root是用户名，123.34.123.123这个是服务器的地址。

回车之后（首次登录会询问是否信任远程连接，输入yes，这里信任远程连接其实也是使用的公钥，输入yes之后远程的主机会把公钥存储在我们的电脑本地，所以下次在进行登录就不会询问是否信任了），输入密码就登录成功了。

2. windows系统

对于win的命令终端我不太熟悉，当然大家有兴趣可以去了解下，这个主要讲的是linux的命令，windows可以用git的命令终端进行ssh连接，步骤和上面一样，git bash你可以把它当作一个简单的linux命令终端使用。下面讲的都是基于liunx命令终端，所以在git bash里面操作吧。

公钥登录

使用上面的方法操作挺麻烦的，每次登陆都要输入一堆东西，那么如何简化这个流程呢，我们可以使用公钥登录进行登陆，gitlab或者github的git提交也有免登陆的公钥配置。

服务器之间是不认识双方的，如何让双方认识呢，这里就使用公钥了，打个比方说你新加入一家公司，公司需要刷卡才能进，你刚来需要填一堆入职信息，然后给你张员工卡，这个公钥就如同你的员工卡，让服务器认识你，下次来就不用每次填入职信息了，故要让远程服务器认识我们的电脑，我们需要把自己电脑上的公钥发送给远程服务器，让服务器认识我的电脑，先查看自己电脑上有没有公钥，没有的话生成一个。

1. 生成公钥

命令终端输入 ssh-keygen，接下来会询问密码，不懂的全部回车就行了(当然ssh-keygen可以加参数的，具体参数就百度吧，这里就不细讲了)，生成一个.ssh目录，具体在哪里看生成的提示，一般是~/.ssh，ls -a可以查看，然后我们cd ~/.ssh。

cd ~
ssh-keygen
ls -a  # .ssh
cd .ssh
ls    # id_rsa(私钥) id_rsa.pub(公钥)

2. 把公钥发送给服务器

ssh-copy-id -i ~/.ssh/id_rsa.pub root@123.34.123.123  # 回车
# 输入密码
# 提示成功后试一试ssh连接
ssh -p 2000 root@123.34.123.123 # 回车，看是否不用输入密码直接登录上了

公钥的地址

3. 配置登陆别名

可以直接登录后，我们可以使用别名，不用每次都输入这一长串，看你用的什么shell，比如我用的zsh

cd ~
vim .zshrc # 用的bash的话修改.bashrc
# 添加
alias sshTest="ssh -p 2000 root@123.34.123.123"
:wq
source .zshrc
sshTest # 看看是否直接连接了
# 远程服务器进入~/.ssh/authorized_keys查看保存的公钥，对其删除后需要重新发送给服务器公钥

构建Nginx服务

Nginx是可以直接安装在服务器上的，但是我们一般都是用docker来跑Nginx的，所以主要讲用docker安装Nginx服务，其实两者差别不大，只是一个直接运行，一个在docker里面运行，以下操作本地跑也行：

# 首先安装docker，自行百度
docker pull nginx  # 拉取Nginx官方镜像
docker images nginx # 查看镜像
docker run --name nginx-test -p 8081:80 -d nginx  # 启动Nginx，服务器的8081端口映射docker的80端口
http://123.34.123.123:8081  # 打开浏览器访问8081端口，看看都没有Nginx提示页面。

ok，这样我们就运行了一个Nginx容器，那么我们如何让我们的页面通过服务器的nginx访问呢？

映射目录

docker的镜像你可以理解成一个沙箱，不理解的话你就把它当作一个linux服务器，我们通过端口映射访问docker里面的东西，比如上面的Nginx，我们访问http://123.34.123.123:8081实际上就是访问nginx-test这个容器的80端口，我们实际上是访问的dokcer里面的东西，要让我们的页面展示出来就只有把页面放到docker里面，那么如何做呢？我们把服务器上的目录挂载映射到docker面就行了，当我们修改了目录里面的东西，重启docker，docker里面的对应目录回同步外面的目录，也就相当于改动了docker里面的东西。

# 我们先创建Nginx需要挂载的目录

mkdir -p ~/nginx/{conf,www,logs,conf.d}   # nginx里面有三个文件夹，www是放我们要跑的html的，conf和conf.d是放nginx配置文件的，logs是nginx生成的日志

docker cp nginx-test:/etc/nginx/nginx.conf ~/nginx/conf # 我们把之前跑的nginx容器的配置文件拷贝出来放到我们的conf目录里面

vim ~/nginx/conf/nginx.conf # 现在我们的conf目录里面应该有个nginx.conf文件了，可以用vim查看一下

# 假如我们要用8082端口构建我们的服务，那么输入

docker run -d -p 8082:80 --name web -v ~/nginx/www:/usr/share/nginx/html -v ~/nginx/conf:/etc/nginx/conf -v ~/nginx/conf.d:/etc/nginx/conf.d -v ~/nginx/logs:/var/log/nginx nginx

# -v就是进行目录的映射，我们把外部的目录映射到docker里面的目录，-d是让docker在后台运行，-p 8082:80这是端口号的映射，我们通过外部的8082端口访问docker里面的80端口。ok，一个8082的服务就启动起来了
docker ps # 查看一下容器是否有web
cd ~/nginx/www
touch index.html # 创建一个html
vim index.html # 输入12345，:wq
docker restart web # 重启web，打开http://123.34.123.123:8082，查看是否是之前创建的html

docker操作容器基本命令

docker ps # 查看正在运行的全部容器
docker ps -a # 查看全部容器，包括停止的
docker stop xxx # 停止某个容器的运行，xxx是容器id或者是你其的别名比如上面的`web`和`nginx-test`
docker start xxx # 启动某个容器，同上
docker restart xxx # 重启某个容器
docker rm xxx # 删除某个容器，注意rm的容器是要停止的，也就是运行的要先stop再rm

发布代码

进入远程服务器，~/nginx/conf修改nginx配置

location / {
  root   /usr/share/nginx/html/dist; # 在后面加上了一个dist
  index  index.html index.htm;
}

用终端或git bash打开我们的项目

npm run build # 执行打包，打包完毕有dist文件
# 我们可以通过ftp把dist上传到服务器，不过这样做太原始了，既然我们有了ssh公钥那么可以命令行直接进行上传
scp -P 2000 -r ./dist root@123.34.123.123:~/nginx/www/
# scp和ssh都是差不多的，本来也要密码的，但是由于我们上面ssh已经配置好了公钥，所以直接就上传了，注意这里的`-P`也是端口好，如果是22的话可不加，和ssh不同的是这里的P是大写的，ssh是小写的。
# 如果上传失败没权限，可以登录服务器终端设置文件夹权限，sudo chmod 777 ~/nginx/www
sshTest # 我们再登录服务器终端
cd ~/nginx/www
ls # 查看是否存在dist文件夹
docker restart web # 重启Nginx

访问http://123.34.123.123:8082，看看是不是我们打包的页面

虽然我们优化了部署流程，比起每次用ftp上传要简单许多，但是每次修改了代码都是操作一下，感觉很麻烦，特别是经常要部署的时候，这时候我们可以写一个shell命令来进行打包部署，要部署时执行一下shell就行了，傻瓜式操作。

shell部署

shell部署就是用linux的命令进行打包上传已经部署，自动执行。

# 首先在项目根目录创建一个.sh文件
touch build.sh
vim build.sh
echo "Hello World"
:wq
# 当然.sh文件是需要权限的
chmod +x ./build.sh
# 执行./build.sh
# 会打印Hello World

ok，一个shell命令完成了，其实我们把上面的命命令综合一下就成了一个打包部署命令：

host="122.51.109.123";
echo \'执行打包\';
npm run build:prod;
echo \'打包完成\';
echo "上传文件";
scp -r ./dist root@$host:~/nginx/www/;  # 上传dist文件
# rsync  -avzP --delete ./dist/* root@$host:~/nginx/www/dist/;   # 同步命令，和scp差不多，但是是对比本地的文件，进行上传删除
echo "上传完成"
# 连接到远程服务器执行命令，比如你想重启nginx
ssh root@$host > /dev/null 2>&1 << eeooff
docker restart web;
exit;
eeooff
echo "部署完成";

我们用npm命令进行打包，通过scp把打包文件上传到服务器，再用ssh连接到服务器进行nginx的重启，下一篇我会介绍单页应用在nginx上的配置，尽请期待。

本系列更新只有利用周末和下班时间整理，比较多的内容的话更新会比较慢，希望能对你有所帮助，请多多star或点赞收藏支持一下

本文地址：https://xuxin123.com/web/nginx-web