Ubuntu云实例部署Vite React构建产物：最优方案及Apache可行性咨询

当然可以用Apache来托管Vite React生成的dist静态包，这是非常成熟的静态资源部署方式，同时给你梳理几种可行方案，帮你选择最优解：

一、用Apache部署的具体步骤 #

1. 安装Apache（若实例未安装）

   sudo apt update && sudo apt install apache2
   

2. 复制dist文件到Apache站点目录
   将dist文件夹内的所有内容复制到Apache默认站点根目录（如/var/www/html），或自定义站点目录：

   sudo cp -r /你的dist文件夹路径/* /var/www/html/
   

3. 配置Apache处理React单页路由（关键）
   React是单页应用，直接刷新页面会出现404，需配置重写规则：
   • 启用Apache的rewrite模块：

     sudo a2enmod rewrite
     

   • 编辑默认站点配置文件：

     sudo nano /etc/apache2/sites-available/000-default.conf
     

   • 在<VirtualHost *:80>块内添加以下配置：

     <Directory /var/www/html>
         Options Indexes FollowSymLinks MultiViews
         AllowOverride All
         Require all granted
         RewriteEngine On
         RewriteBase /
         RewriteRule ^index\.html$ - [L]
         RewriteCond %{REQUEST_FILENAME} !-f
         RewriteCond %{REQUEST_FILENAME} !-d
         RewriteRule . /index.html [L]
     </Directory>
     

4. 重启Apache使配置生效

   sudo systemctl restart apache2
   

二、其他可选方案 #

1. 用pm2托管静态服务 #

虽然pm2主打后端进程管理，但它也支持静态文件服务，适合不想额外安装web服务器的场景：

pm2 serve /你的dist文件夹路径 80 --name "react-frontend"

• 说明：80为端口号，若Node后端已占用80，可更换为其他端口（如3000），后续可通过反向代理将前端请求指向该端口。
• 优势：和现有后端服务统一用pm2管理，无需额外维护web服务器。

2. 用Nginx部署（推荐，性能更优） #

Nginx的静态资源处理性能优于Apache，配置更简洁，适合高流量场景：

1. 安装Nginx：

   sudo apt update && sudo apt install nginx
   

2. 复制dist文件到Nginx站点目录：

   sudo cp -r /你的dist文件夹路径/* /var/www/html/
   

3. 配置Nginx处理单页路由和反向代理（若需与后端联动）：
   编辑/etc/nginx/sites-available/default，替换内容为：

   server {
       listen 80 default_server;
       listen [::]:80 default_server;
   
       root /var/www/html;
       index index.html index.htm;
   
       server_name _;
   
       location / {
           try_files $uri $uri/ /index.html;
       }
   
       # 若前端有/api请求需转发到Node后端，添加以下配置
       location /api {
           proxy_pass http://localhost:你的后端端口;
           proxy_set_header Host $host;
           proxy_set_header X-Real-IP $remote_addr;
       }
   }
   

4. 重启Nginx：

   sudo systemctl restart nginx
   

三、最优方案建议 #

如果实例已运行Node后端，优先推荐用Nginx或Apache做反向代理：

• 既能高效托管前端静态资源，又能将前端API请求转发到后端服务，避免跨域问题；
• Nginx在静态资源处理和并发性能上更具优势，适合大多数生产场景；
• 若你已熟悉Apache配置，用Apache也完全没问题，功能上可满足需求。

内容的提问来源于stack exchange，提问作者Bernardo Rebelo