Nginx运行前端项目前端nginxssh

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

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

ssh连接账号和密码连接登录

linux和macOs

在命令终端直接使用：

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

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

windows系统

对于win的命令终端我不太熟悉，当然大家有兴趣可以去了解下，这个主要讲的是linux的命令，windows可以用git的命令终端进行ssh连接，步骤和上面一样，git bash你可以把它当作一个简单的linux命令终端使用。下面讲的都是基于liunx命令终端，所以在git bash里面操作吧。
公钥登录
使用上面的方法操作挺麻烦的，每次登陆都要输入一堆东西，那么如何简化这个流程呢，我们可以使用公钥登录进行登陆，gitlab或者github的git提交也有免登陆的公钥配置。
服务器之间是不认识双方的，如何让双方认识呢，这里就使用公钥了，打个比方说你新加入一家公司，公司需要刷卡才能进，你刚来需要填一堆入职信息，然后给你张员工卡，这个公钥就如同你的员工卡，让服务器认识你，下次来就不用每次填入职信息了，故要让远程服务器认识我们的电脑，我们需要把自己电脑上的公钥发送给远程服务器，让服务器认识我的电脑，先查看自己电脑上有没有公钥，没有的话生成一个。

生成公钥

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

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

把公钥发送给服务器

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

公钥的地址

配置登陆别名

可以直接登录后，我们可以使用别名，不用每次都输入这一长串，看你用的什么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 ~/nignx/{conf,www,logs}# nignx里面有三个文件夹，www是放我们要跑的html的，conf是放nginx配置文件的，logs是nginx生成的日志docker cp nginx-test:/etc/nginx/nginx.conf ~/nginx/conf # 我们把之前跑的nginx容器的配置文件拷贝出来放到我们的conf目录里面vim ~/nignx/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.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 indexindex.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或点赞收藏支持一下
【Nginx运行前端项目】本文地址：https://xuxin123.com/web/nginx-web