Nginx + PM2 实现Express API + React 前端 本地测试服务器搭建
一、工具准备
openSSL：需要针对https请求头 生成对应的 自签名证书。
Nginx：服务器搭建工具
nodeJS: Express API运行环境
PM2: node进程管理器。用于替代npm命令管理 启动命令。
二、openSSL 本地自签名证书生成。
创建服务器空文件夹（这里可以和Nginx程序包位置在一起，也可以单独放置）例如：D:demo
在D:demo 文件夹 下创建 文件 generate_cert.sh
内容：
#!/bin/bash
mkdir -p cert && cd cert
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \-keyout server.key -out server.crt \-subj "/C=CN/ST=Beijing/L=Beijing/O=LocalDev/CN=localhost"执行这个sh,
或者创建 cert文件夹，cmd命令执行命令
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \-keyout server.key -out server.crt \-subj "/C=CN/ST=Beijing/L=Beijing/O=LocalDev/CN=localhost"win系统文件权限问题可能导致 sh执行生成文件夹和文件失败。
这样就生成了这两个自签名文件，可以支持本地的https请求头使用。（浏览器访问会出现不安全提示，需要保存到本地系统可信任证书列表中）
三、Express API 相关配置、程序启动和PM2管理
拷贝Express API 程序到 D:demo 文件夹 下。
相关配置修改（例如环境变量中 环境参数改为生产环境对应值）
ssl相关内容也要配置修改
Express API 程序中 拷贝一份cert 文件夹到程序根目录
app.js入口文件中配置
...
const keyPath = path.join(__dirname, '../cert/localhost+3-key.pem');
const certPath = path.join(__dirname, '../cert/localhost+3.pem');const options = {key: fs.readFileSync(keyPath),cert: fs.readFileSync(certPath)
};
...// 创建HTTPS服务器https.createServer(options, app).listen(process.env.API_PORT, () => {...console.log(`Server running on https://localhost:${process.env.API_PORT}`);});项目根目录下添加ecosystem.config.cjs 文件用于PM2 启动参数配置
module.exports = {apps: [{name: 'PM2启动进程别名',script: './dist/app.js',type: 'module', // 启用ES模块支持watch: false,env: {//PM2启动默认设置环境变量}}]
}cd 到 API程序根目录下 cmd npm run build (package.json 配置的编译命令 其实就是 tsc 命令)
D:demo/API/项目根目录下 会生成一个dist编译后的包。
然后执行 pm2 start "D:\demo\API\ecosystem.config.cjs" 命令（win 需要使用绝对路径）
启动程序
pm2 ls 可以看到 全部的 已管理的 node服务进程，
常用命令 pm2 logs <PM2服务名>、pm2 stop <PM2服务名>、 pm2 save <PM2服务名>
到这一步 Express API 本地 服务就搭建好了可通过https://localhost:端口号/路由地址
的方式访问API接口。
四、React 前端 Nginx 服务发布
https://localhost:端口号/路由地址react 前端程序 通过本地 环境 修改配置 适配 生产环境（例如：代理的API链接直接连接刚刚发布的API连接。还有一些 生产环境变量变动）
运行 npm run build (真实命令tsc -b && vite build)，生产dist包。
拷贝本地生产 dist包 到D:demo文件夹下改名为 前端包对应的名称例如：demo-app.
新建 nginx.conf文件
配置如下
worker_processes 1;
events {worker_connections 1024;
}http {include ...mime.types;//nginx程序目录下的mime.types文件导入（win下用绝对路径）default_type application/octet-stream;sendfile on;keepalive_timeout 65;server {listen 443 ssl;server_name localhost;//自签名文件对应的配置（win下配置绝对路径）ssl_certificate ../cert/server.crt;ssl_certificate_key ../cert/server.key;# 前端服务location / {root ./demo/demo-app; // win下配置绝对路径try_files $uri $uri/ /index.html;index index.html;autoindex off; server_tokens on;add_header X-Content-Type-Options "nosniff";add_header Content-Type "text/html; charset=utf-8";# 允许所有来源访问add_header 'Access-Control-Allow-Origin' '*';# 允许的请求方法add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';# 允许的请求头add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization, X-Requested-With';# 允许带凭证的跨域请求add_header 'Access-Control-Allow-Credentials' 'true';# 预检请求处理if ($request_method = 'OPTIONS') {add_header 'Access-Control-Max-Age' 1728000;add_header 'Content-Type' 'text/plain; charset=utf-8';add_header 'Content-Length' 0;return 204;}}# API代理location /api/ {proxy_pass https://localhost:[端口号]/api/;proxy_ssl_verify off; proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_cache_bypass $http_upgrade;# 跨域传递add_header 'Access-Control-Allow-Origin' '$http_origin';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';}# 静态文件代理location /static/ {proxy_pass https://localhost:[端口号]/static/;proxy_ssl_verify off; proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_cache_bypass $http_upgrade;# 跨域传递add_header 'Access-Control-Allow-Origin' '$http_origin';add_header 'Access-Control-Allow-Credentials' 'true';add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';}}
}具体配置结合业务需求修改。
这块就把 Express API 代理 和 前端的页面配到了一个服务。
之后就cd 到 nginx 程序目录下 cmd nginx -c ../nginx.conf (win用绝对路径)
没有报错，在 浏览器中使用 https://localhost 测试 nginx 服务是否发布成功。
成功会跳转到发布的本地测试服务 首页
也可以用https://[局域网本机IP] 访问测试服务。（局域网内测试使用）
扩展：如果追求安全性可以使用 Docker容器中的 nginx镜像 发布应用。