Nginx runs the front-end project

Many students are not particularly familiar with the front-end Nginx configuration. Generally, they are packaged and handed over to operation and maintenance or back-end students for deployment. Here is a brief introduction to the deployment of a single-page project on a new server. Of course, Jenkins will be updated later. Wait for the configuration of automated deployment.

connect to the server

The server connection is generally a remote connection through ssh, how to connect:

1. Through ssh connection software, such as SecureCRT and XShell, these software specific to see the tutorial, it is relatively simple and convenient.
2. Connect through the ssh command of the command terminal, this is what I mainly talk about.

ssh connection

Account and password connection login

1. linux and macOs

Use directly in the command terminal:

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

After pressing Enter (the first login will ask whether to trust the remote connection, enter yes, here trusting the remote connection is actually the public key used, after entering yes, the remote host will store the public key locally on our computer, so we will log in next time You will not be asked if you trust it), and the login is successful after entering the password.

2. windows system

I am not familiar with the command terminal of win. Of course, if you are interested, you can learn about it. This is mainly about linux commands. Windows can use the git command terminal to connect to ssh. The steps are the same as above. You can use git bash. Used as a simple linux command terminal. The following are all based on the liunx command terminal, so operate it in git bash.

Public key login

Using the above method is very troublesome. You have to enter a bunch of things every time you log in. So how to simplify this process? We can log in with a public key. The git submission of gitlab or github also has a public key configuration without login.

Servers don’t know both parties. How to make both parties know? The public key is used here. For example, if you join a company, the company needs to swipe your card to enter. You just need to fill in a bunch of entry information, and then give it to You have an employee card, this public key is like your employee card, let the server know you, next time you do not need to fill in the employment information every time, so to let the remote server know our computer, we need to put the Send the public key to the remote server, let the server know my computer, first check if there is a public key on your computer, and generate one if not.

1. Generate public key

Command the terminal to enter ssh-keygen, and then you will be asked for the password. If you don’t understand, just press Enter (Of course ssh-keygen can add parameters, the specific parameters are Baidu, I won’t go into details here), and generate a .ssh directory , Where to see the generated prompt, usually ~/.ssh, ls -a can be viewed, and then we cd ~/.ssh.

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

2. Send the public key to the server

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

Public key address

3. Configure login alias

After you can log in directly, we can use aliases instead of typing this long string every time, depending on what shell you use, such as the zsh I use

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

Build Nginx service

Nginx can be installed directly on the server, but we generally use docker to run Nginx, so we mainly talk about installing Nginx service with docker. In fact, there is not much difference between the two, but one runs directly and the other runs in docker, as follows You can also run locally:

# 首先安装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, so we run an Nginx container, so how do we make our page accessible through the server's nginx?

Mapping directory

You can understand the docker image as a sandbox. If you don’t understand it, you can use it as a linux server. We access the things in docker through port mapping, such as Nginx above. When we visit http://123.34.123.123:8081 , we actually visit nginx-test. The port 80 of the container is actually the stuff in the dokcer we are visiting. The only way to display our page is to put the page in the docker, so how do we do it? We just need to map the directory mount on the server to the docker surface. When we modify the contents of the directory and restart docker, the corresponding directory in the docker synchronizes to the external directory, which is equivalent to changing the things in the 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 basic commands for operating containers

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

Release code

Enter the remote server, ~/nginx/conf modify nginx configuration

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

Open our project with terminal or 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

Visit http://123.34.123.123:8082 to see if it’s the page we packed

Although we optimized the deployment process, it’s much simpler than uploading with ftp each time, but every time we modify the code, it’s an operation, which feels very troublesome, especially when we often need to deploy. At this time we can write a shell command. For packaged deployment, just execute the shell when you want to deploy, foolish operation.

shell deployment

Shell deployment is to package and upload with linux commands, which have been deployed and executed automatically.

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

ok, a shell command is completed, in fact, we synthesize the above command into a package deployment command:

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 "部署完成";

We use the npm command to package, upload the packaged file to the server through scp, and then use ssh to connect to the server to restart nginx. In the next article, I will introduce the configuration of a single page application on nginx. Please look forward to it.

This series of updates can only be organized during weekends and after get off work hours. If there are more content, the update will be slower. I hope it can be helpful to you. Please support it by star or like favorites.

This article address: https://xuxin123.com/web/nginx-web