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镜像 发布应用。