Nginx中部署多个前端项目——区分路径

1.方案思路：

使用不同的端口号部署不同的项目，或者使用不同路径

这个方案不需要开放额外端口，更省事

2.初始化项目：

将打包好的前端文件传输到Linux中的var/www/路径下面：

3. 清理旧的端口配置

bash 复制代码

sudo rm -f /etc/nginx/conf.d/firework.conf
sudo rm -f /etc/nginx/conf.d/fireworks.conf
sudo rm -f /etc/nginx/sites-enabled/fireworks.conf
sudo rm -f /etc/nginx/sites-available/fireworks.conf

4.确认三个项目的文件都在

bash 复制代码

ls /var/www/fuel-frontend/index.html      # Vue 项目
ls /var/www/fireworks/index.html          # 烟花
ls /var/www/muran-birthday/index.html     # 周岁烟花秀

如果有目录不存在，先创建并上传文件：

复制代码

sudo mkdir -p /var/www/fireworks
sudo mkdir -p /var/www/muran-birthday

5.替换为统一配置

把 fuel-frontend 的旧配置和所有项目合并到一个文件里：

bash 复制代码

# 先删掉旧的 fuel-frontend 配置（不管是 conf.d 还是 sites-enabled 里的）
sudo rm -f /etc/nginx/conf.d/fuel-frontend.conf
sudo rm -f /etc/nginx/sites-enabled/fuel-frontend.conf

# 创建统一配置文件
cat | sudo tee /etc/nginx/conf.d/multi-sites.conf << 'EOF'
server {
    listen 80;
    server_name 【你的云服务器Ip】;

    # 项目 1：fuel-frontend（根路径）
    location / {
        root /var/www/fuel-frontend;
        try_files $uri $uri/ /index.html;
    }

    # 项目 2：fireworks（烟花）
    location /fireworks/ {
        alias /var/www/fireworks/;
        try_files $uri $uri/ /fireworks/index.html;
    }

    # 项目 3：muran-birthday（周岁烟花秀）
    location /birthday/ {
        alias /var/www/muran-birthday/;
        try_files $uri $uri/ /birthday/index.html;
    }

    # API 代理（fuel-frontend 后端接口）
    location /api/ {
        proxy_pass http://127.0.0.1:8080;
        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;
    }
}
EOF

6.设置权限

bash 复制代码

sudo chown -R www-data:www-data /var/www/fireworks /var/www/muran-birthday
sudo chmod -R 755 /var/www/fireworks /var/www/muran-birthday

7.校验 + 重载

bash 复制代码

sudo nginx -t && sudo nginx -s reload

看到 syntax is ok 和 test is successful 就通过了。

8.验证

bash 复制代码

# 逐个测试
curl -I http://127.0.0.1/                    # fuel-frontend
curl -I http://127.0.0.1/fireworks/          # 烟花
curl -I http://127.0.0.1/birthday/           # 周岁烟花秀

三个都返回 200 OK 就成功了。手机浏览器访问

注意事项

fuel-frontend 是 Vue 项目 ：它部署在根路径 /，vite.config.ts 里 base: '/' 不用改，没问题。
fireworks 和 muran-birthday 是纯 HTML 单文件：没有外部资源依赖（CSS/JS 都内联），子路径部署不会有资源 404 问题，直接能用。
如果以后 Vue 项目也要部署到子路径 （比如 /admin/），那 vite 的 base 必须改成 /admin/，否则资源会 404 白屏。
不用开放额外端口：全部走 80 端口，阿里云安全组不用动。