🔵Nginx部署前端项目

本文最后更新于：2023年7月28日凌晨

操作系统:

Windows11
ECS: CentOs Stream 9

远程连接

ssh连接服务器

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

安装nginx

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

安装

1	`sudo yum install nginx`

检测是否安装成功

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

启动

nginx

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

Nginx常用指令

service nginx start # 启动
nginx -s reload     # 重启
nginx -s stop       # 关闭
ps -ef | grep nginx # 查看nginx状态

文件上传

Windows

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

scp <windows文件路径> <服务器名>@<IP地址>:/{{ 保存路径 }}

# 将文件夹下的文件及文件夹上传
scp -r ./dist/*  admin@1.2.3.4:/usr/share/nginx/html

# 上传文件夹(/usr/share/nginx/html/dist)
scp ./dist root@123.45.67.89:/usr/share/nginx/html

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

解决:

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

编辑配置文件

单应用

1	`sudo vim /etc/nginx/nginx.conf`

vim常用编辑指令

i:插入编辑

:wq:保存并退出

修改server属性

etc/nginx/nginx.conf

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

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就有了

pm2 -v

pm2常用指令

pm2 start main.js # 开始服务

pm2 stop main.js  # 关闭服务

pm2 ls            # 列出所有服务

nginx配置

etc/nginx/nginx.conf

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

配置HTTPS

去阿里云域名控制台申请并下载nginx证书文件

etc/nginx/nginx.conf

# ...
http {
  # ...
  server {
    listen                 443 ssl;                      # 开启https
    server_name            todo.qingshaner.com;          # 域名
    try_files              $uri $uri/ /index.html;       # 修复vue-router 404
    
    ssl_certificate        /etc/nginx/ssl/todo/todo.pem; # 证书.pem文件位置
    ssl_certificate_key    /etc/nginx/ssl/todo/todo.key; # 证书.key文件位置

    ssl_session_timeout  5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers  on;

  	location / {
      proxy_pass   http://localhost:7348;                # 监听端口
  	}
  }

  # http自动转至https
  server {
     isten               80;
     server_name         todo.qingshaner.com;
     rewrite ^(.*)       https://$server_name$1 permanent;
  }

  server {
	  listen            7348;                        # 本地端口
    server_name       1.2.3.4;                     # 服务器地址
 	  root              /usr/share/nginx/Vue3-Todo;  # 项目位置
    location / {
      try_files $uri $uri/ @router;                # 修复vue-router 404
        index  index.html index.htm;
    }
    location @router {
      rewrite ^.*$ /index.html last;               # 修复vue-router 404
    }
  }
}