使用 Express 服务 Vite React 前端的自动化解决方案？

Question

当我构建 MERN 网站时，我通常使用 Vite React 构建前端并使用 Express 构建后端。过去，我使用过不同的主机：例如，前端使用 GitHub.com，后端使用 Render.com。这意味着我需要使用

cors

Node 模块来允许与后端通信。

现在我有了自己的专用服务器，我意识到当你运行

dist/

时，Vite会创建一个

npm run build

文件夹。该文件夹包含一组静态文件。

Express 可以使用

express.static(<relative path>)

传递此类静态文件。我可以将

dist/

文件夹的内容放在 Express 用于静态文件的文件夹中，因此我只需要为单个服务器配置 Nginx。我可以使用

git

在一次操作中将丰富的后端推送到我的专用服务器。不需要CORS，因为前后端同源。

这也适用于 Render 等商业托管服务。

这需要手动移动文件。我想我不是第一个想到这个的人。是否已经存在用于执行此操作的自动化技术（例如节点模块）。还是我必须自己写？

Answer 1

您可以使用 nginx 为前端构建提供服务，并使用 pm2 为后端构建提供服务。

server {
listen 80;

server_name your-domain.com;  # Replace with your domain or IP

root /path/to/your/frontend/build;  # Path to your frontend build directory
index index.html;

location / {
    try_files $uri /index.html;
}}

pm2 启动 backend/server.js --name backend-server

server {
listen 80;

server_name your-domain.com;

# Frontend configuration
root /path/to/your/frontend/build;
index index.html;

location / {
    try_files $uri /index.html;
}

# Backend API configuration
location /api/ {
    proxy_pass http://localhost:3000;  # Replace with your backend server's address
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}}