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之后远程的主机会把公钥存储在我们的电脑本地,所以下次在进行登录就不会询问是否信任了),输入密码就登录成功了。

  1. 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(公钥)
  1. 把公钥发送给服务器
ssh-copy-id -i ~/.ssh/id_rsa.pub root@123.34.123.123  # 回车
# 输入密码
# 提示成功后试一试ssh连接
ssh -p 2000 root@123.34.123.123 # 回车,看是否不用输入密码直接登录上了

公钥的地址

  1. 配置登陆别名

可以直接登录后,我们可以使用别名,不用每次都输入这一长串,看你用的什么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

You may also like...

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注