🟡Nginx部署前端项目

本文最后更新于:2022年9月2日 晚上

操作系统:

  • Windows11
  • ECS: CentOs Stream 9

远程连接

ssh连接服务器

1
ssh ecs-user@xxx.xxx.xxx.xxx

安装nginx

1
2
sudo -i         # root权限
sudo dnf update # 更新

安装

1
sudo dnf install nginx

检测是否安装成功

1
2
nginx -V
# nginx version: nginx/1.20.1

启动

1
2
3
sudo systemctl start nginx
sudo systemctl enable nginx
sudo systemctl status nginx

此时打开ip地址应看到展示的测试页

Nginx常用指令

1
nginx -s reload  # 重启

文件上传

Windows

是在Windows终端执行,不是服务器终端

1
scp <windows文件路径> <服务器名>@<IP地址>:/{{ 保存路径 }}
1
scp ./dist root@123.45.67.89:/usr/share/nginx/html/dist

若服务器登录名不是root会提示权限不够

解决:

1
2
3
4
sudo -i
chmod 777 /usr/share/nginx/html/dist
# 修改该文件夹所有人可读写
# 文件夹内的文件未改变权限

编辑配置文件

单应用

1
sudo vim /etc/nginx/nginx.conf

vim常用编辑指令

i:插入编辑

:wq:保存并退出

修改server属性

etc/nginx/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
listen 80;
listen [::]:80;
server_name xxx.xxx.xxx.xxx;
root /usr/share/nginx/html/dist;
try_files $uri $uri/ /index.html; # 修复vue-router刷新404bug

# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;

error_page 404 /404.html;
location = /404.html {
}

error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}

多应用

可以使用nginx将不同域名路由转发至其它端口

etc/nginx/nginx.conf

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
server {
# ...其它页面
}

server {
listen 80;
server_name todo.qingshaner.com;
location / {
proxy_pass http://localhost:3000; # 转发到3000端口
}
}

server {
listen 3000;
server_name 1.2.3.4;
root /usr/share/nginx/html/todo;
location / {}
}

Nodejs服务

启动Node服务

1
sudo dnf install nodejs -y

校验是否安装成功

1
2
node -v
npm -v

因为使用node main.js使用时当窗口关闭时服务也关闭

使用pm2启服务

1
npm install -g pm2

使用pm2 -v命令提示not found,因为环境变量没有记录

Centos Stream 9安装目录在/usr/local/bin

1
2
cd /etc/profile.d
sudo vim npm.sh # 名字随便取

etc/profile.d/npm.sh

1
2
PATH=$PATH:/usr/local/bin
export PATH

:wq保存后刷新一下环境变量

1
source /etc/profile

此时使用pm2 -v就有了

1
pm2 -v

pm2常用指令

1
2
3
4
5
pm2 start main.js # 开始服务

pm2 stop main.js # 关闭服务

pm2 ls # 列出所有服务

nginx配置

etc/nginx/nginx.conf

1
2
3
4
5
6
7
server {
listen 80;
server_name api.qingshaner.com;
location / {
proxy_pass http://localhost:8081; # 转发到node监听的端口
}
}

🟡Nginx部署前端项目
https://qingshaner.com/Nginx部署前端项目/
作者
清山
发布于
2022年8月30日
许可协议