关于前端:Nginx运行前端项目

很多同学对前端的 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 ~/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/nginx.conf:/etc/nginx/nginx.conf -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

公布代码

用终端或 git bash 关上咱们的我的项目

npm run build # 执行打包，打包结束有 dist 文件
# 咱们能够通过 ftp 把 dist 上传到服务器，不过这样做太原始了，既然咱们有了 ssh 公钥那么能够命令行间接进行上传
zip -r dist.zip dist # 咱们把 dist 文件夹进行压缩，变成 dist.zip
scp -P 2000 ./dist.zip root@123.34.123.123:~/nginx/
# scp 和 ssh 都是差不多的，原本也要明码的，然而因为咱们下面 ssh 曾经配置好了公钥，所以间接就上传了，留神这里的 `-P` 也是端口好，如果是 22 的话可不加，和 ssh 不同的是这里的 P 是大写的，ssh 是小写的。sshTest # 咱们再登录服务器终端
cd ~/nginx
ls # 查看是否有 dist.zip
rm -rf www # 删除原来的 www 目录
unzip dist.zip # 解压 dist.zip
mv dist www # 讲 dist 重新命名为 www 目录
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