关于前端: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 <