在同一服务器部署Laravel后端与多Vue前端的配置求助

一、核心思路 #

用Nginx作为反向代理，给不同Vue应用分配独立子路径（比如/app1、/app2），每个Vue应用打包后部署在专属Docker容器中，Nginx根据请求路径转发到对应容器，同时保留Laravel的API路由逻辑。

二、步骤1：更新docker-compose.yml，添加Vue应用服务 #

假设你有两个Vue应用vue-app1和vue-app2，先给每个Vue应用编写Dockerfile（用于构建静态资源并托管）：

Vue应用的Dockerfile示例（以vue-app1为例） #

在vue-app1目录下创建Dockerfile：

# 构建阶段：编译Vue项目
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 运行阶段：用Nginx托管静态文件
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
# 解决SPA路由刷新404问题
COPY nginx.conf /etc/nginx/conf.d/default.conf

同时在vue-app1目录下创建nginx.conf：

server {
    listen 80;
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

修改后的docker-compose.yml #

在原有配置基础上添加两个Vue服务：

version: '3'
services:
  nginx:
    image: nginx:alpine
    container_name: shop_nginx
    restart: unless-stopped
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./:/var/www/shop/backend
      - ./nginx/conf.d/:/etc/nginx/conf.d/
      - ./nginx/ssl/:/etc/nginx/ssl/
    networks:
      - shop
  laravel:
    container_name: shop_laravel
    restart: unless-stopped
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/var/www/shop/backend'
    networks:
      - shop
    depends_on:
      - pgsql
      - redis
  # 第一个Vue应用服务
  vue-app1:
    container_name: shop_vue_app1
    restart: unless-stopped
    build:
      context: ./vue-app1
      dockerfile: Dockerfile
    networks:
      - shop
  # 第二个Vue应用服务
  vue-app2:
    container_name: shop_vue_app2
    restart: unless-stopped
    build:
      context: ./vue-app2
      dockerfile: Dockerfile
    networks:
      - shop
  pgsql:
    container_name: shop_postgres
    restart: unless-stopped
    image: 'postgres:14'
    ports:
      - '5432:5432'
    environment:
      PGPASSWORD: 'shop'
      POSTGRES_DB: 'shop'
      POSTGRES_USER: 'shop'
      POSTGRES_PASSWORD: 'shop'
    volumes:
      - 'shop-pgsql:/var/lib/postgresql/data'
    networks:
      - shop
  redis:
    container_name: shop_redis
    restart: unless-stopped
    image: 'redis:alpine'
    ports:
      - '6379:6379'
    volumes:
      - 'shop-redis:/data'
    networks:
      - shop
networks:
  shop:
    driver: bridge
volumes:
  shop-pgsql:
    driver: local
  shop-redis:
    driver: local

三、步骤2：修改Nginx主配置，实现路由转发 #

更新./nginx/conf.d/default.conf，添加Vue应用的反向代理规则：

server {
    listen 80;
    listen [::]:80;
    server_name shop.laravel; # 替换为你的实际域名

    # 转发Laravel API请求
    location /api {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }

    # 转发第一个Vue应用：访问 /app1 指向vue-app1容器
    location /app1 {
        proxy_pass http://vue-app1:80;
        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;
        # 去除路径前缀，适配Vue应用的根路径
        rewrite ^/app1(.*)$ $1 break;
    }

    # 转发第二个Vue应用：访问 /app2 指向vue-app2容器
    location /app2 {
        proxy_pass http://vue-app2:80;
        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;
        rewrite ^/app2(.*)$ $1 break;
    }

    # Laravel静态资源与PHP处理逻辑
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass laravel:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
}

四、关键配置注意事项 #

• Vue应用路径配置：每个Vue应用需要在vue.config.js中设置publicPath，比如publicPath: '/app1/'，确保打包后的资源路径自动添加前缀，避免404。
• SPA路由模式：如果Vue使用history模式，必须保留Vue容器内的try_files配置，否则刷新页面会出现404。
• 域名解析：在DigitalOcean控制面板中将域名解析到服务器IP，确保Nginx的server_name与实际域名一致。
• SSL配置：如需HTTPS，将SSL证书挂载到./nginx/ssl/目录，添加443端口的server块配置即可。

五、启动服务 #

执行以下命令构建并启动所有容器：

docker-compose up -d --build

启动后可通过以下地址访问：

• http://shop.laravel/api：Laravel后端API
• http://shop.laravel/app1：第一个Vue应用
• http://shop.laravel/app2：第二个Vue应用

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