nginx部署多套vue项目,共用一套后端配置过程

2026-04-17 09:14:01发布 2次浏览

详情描述

1. 项目结构规划

/var/www/
├── vue-app1/          # 第一个Vue项目
│   ├── dist/
│   └── ...
├── vue-app2/          # 第二个Vue项目
│   ├── dist/
│   └── ...
└── backend/          # 后端API
    └── ...

2. Vue项目配置

每个Vue项目的配置（vue.config.js）

// vue-app1/vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app1/' : '/',
  outputDir: 'dist',
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 后端地址
        changeOrigin: true
      }
    }
  }
}

// vue-app2/vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/app2/' : '/',
  outputDir: 'dist',
  // ... 其他配置
}

3. Nginx配置（核心部分）

主配置文件：`/etc/nginx/nginx.conf`

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
}

http {
    # 基础配置
    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 日志格式
    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    # 启用gzip压缩
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml application/javascript application/json;

    # 包含站点配置
    include /etc/nginx/sites-enabled/*;
}

站点配置文件：`/etc/nginx/sites-available/multi-vue-apps`

server {
    listen 80;
    server_name your-domain.com;  # 替换为你的域名
    root /var/www;
    index index.html;

    # 第一个Vue应用 - app1
    location /app1/ {
        alias /var/www/vue-app1/dist/;
        try_files $uri $uri/ /app1/index.html;

        # 缓存静态资源
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # 第二个Vue应用 - app2
    location /app2/ {
        alias /var/www/vue-app2/dist/;
        try_files $uri $uri/ /app2/index.html;

        # 缓存静态资源
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }

    # 统一的API后端（共用配置）
    location /api/ {
        proxy_pass http://localhost:3000;  # 后端服务器地址
        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;

        # CORS配置（如果需要）
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization';

        # 处理预检请求
        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;
        }
    }

    # WebSocket支持（如果需要）
    location /ws/ {
        proxy_pass http://localhost:3000;
        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;
    }

    # 静态资源缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2|ttf|svg|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        access_log off;
    }

    # 错误页面
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        internal;
    }
}

4. 启用和测试配置

# 创建符号链接
sudo ln -s /etc/nginx/sites-available/multi-vue-apps /etc/nginx/sites-enabled/

# 测试配置语法
sudo nginx -t

# 重新加载Nginx
sudo systemctl reload nginx
# 或
sudo nginx -s reload

5. HTTPS配置（可选）

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;

    # SSL配置
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    # 其余配置与上面相同...
}

# HTTP重定向到HTTPS
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

6. 部署脚本示例

#!/bin/bash
# deploy.sh

# 构建Vue应用
echo "构建vue-app1..."
cd /var/www/vue-app1
npm run build

echo "构建vue-app2..."
cd /var/www/vue-app2
npm run build

# 重启后端服务
echo "重启后端服务..."
cd /var/www/backend
pm2 restart all

# 重新加载Nginx
echo "重新加载Nginx配置..."
sudo nginx -s reload

echo "部署完成！"

7. 注意事项

跨域问题：如果前端应用和后端不在同一域名下，需要正确配置CORS 路径问题：确保Vue项目中的路由使用history模式时，Nginx配置正确处理 静态资源缓存：合理配置缓存策略 负载均衡：如果后端有多个实例，可以配置upstream：

upstream backend_servers {
    least_conn;
    server 127.0.0.1:3001;
    server 127.0.0.1:3002;
    server 127.0.0.1:3003;
}

location /api/ {
    proxy_pass http://backend_servers;
    # ... 其他配置
}

这样配置后，你就可以通过以下URL访问不同应用：