基于Laravel Sail部署带HTTPS和PWA的Vue容器的问题求助

以下是针对你所有问题的一站式解决方案，基于单Docker Compose文件整合Laravel Sail、Vue前端、Nginx反向代理，同时解决HTTPS、PWA部署等问题：

1. 整合Vue服务到Docker Compose #

替换你的docker-compose.yml为以下内容，新增Vue服务和Nginx反向代理服务：

version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.3
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.3/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3306}:3306'
        environment:
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
        volumes:
            - 'sail-mysql:/var/lib/mysql'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "redis-cli", "ping"]
            retries: 3
            timeout: 5s
    # 新增Vue前端服务
    vue.frontend:
        image: node:20-alpine
        working_dir: /app
        volumes:
            - './frontend:/app'
            - './certs:/app/certs' # 挂载证书目录到Vue容器
        environment:
            - NODE_ENV=development
        command: sh -c "npm install && npm run dev"
        networks:
            - sail
    # 新增Nginx反向代理服务
    nginx.proxy:
        image: nginx:alpine
        ports:
            - '443:443'
            - '80:80'
        volumes:
            - './nginx.conf:/etc/nginx/nginx.conf'
            - './certs:/etc/nginx/certs'
        networks:
            - sail
        depends_on:
            - laravel.test
            - vue.frontend
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local

2. 解决Vue HTTPS连接重置问题 #

修改你的vite.config.ts，指定容器内可访问的证书路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    https: {
      key: './certs/your-domain.key',
      cert: './certs/your-domain.crt'
    },
    host: true,
    port: 5173,
    cors: true,
    strictPort: true
  },
  build: {
    outDir: 'dist'
  }
})

连接重置常见修复点：

• 确保本地certs目录下的证书文件权限正常，执行chmod 644 ./certs/*
• 避免本地端口冲突，若5173被占用，可修改Vue服务的端口映射为5174:5173
• 所有外部请求通过Nginx代理，不要直接访问Vue的5173端口

3. 证书存放与配置 #

1. 在项目根目录创建certs文件夹，将你的域名证书（.crt）和私钥（.key）放入其中
2. Docker Compose已自动将certs目录挂载到Nginx和Vue容器内对应路径，无需额外配置权限（本地已设置644权限前提下）

4. Nginx反向代理配置 #

在项目根目录创建nginx.conf，实现前端请求转发到Vue、后端API转发到Laravel：

events {
    worker_connections 1024;
}

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

    server {
        listen 80;
        server_name your-domain.com;
        # 强制HTTP跳转HTTPS
        return 301 https://$host$request_uri;
    }

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

        ssl_certificate /etc/nginx/certs/your-domain.crt;
        ssl_certificate_key /etc/nginx/certs/your-domain.key;

        ssl_protocols TLSv1.2 TLSv1.3;
        ssl_ciphers HIGH:!aNULL:!MD5;

        # 前端页面请求转发到Vue服务
        location / {
            proxy_pass https://vue.frontend:5173;
            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热更新的WebSocket转发
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        # 后端API请求转发到Laravel服务
        location /api {
            proxy_pass http://laravel.test: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;
        }
    }
}

5. PWA部署兼容性说明 #

Docker部署不会影响PWA功能，只需确保以下几点：

• 确保manifest.json在index.html中正确引入：<link rel="manifest" href="/manifest.json">
• 生产环境可将Vue服务命令改为npm run build && npx serve -s dist，直接运行构建后的静态文件
• 在Nginx配置中添加PWA缓存规则，避免旧资源缓存：

location ~* \.(html|json)$ {
    expires -1;
}

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

• 生产环境必须使用HTTPS，这是PWA安装功能的硬性要求

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