Docker化Vue3+Laravel9 SPA遇连接重置问题求助

我正在开发一个Vue3+Laravel9的单页应用，目前在开发环境和生产环境的虚拟主机上都能正常运行。现在想把它Docker化部署，不需要依赖虚拟主机，但我对Docker了解不多。我复制了示例项目的以下文件到我的项目中：

• laravel/nginx（文件夹）
• laravel/docker-compose.yml（文件）
• laravel/laravel.dockerfile（文件）
• vue/nginx.conf（文件）
• vue/vue.dockerfile（文件）

我只做了两处修改：

1. 在laravel/docker-compose.yml里把MySQL换成了mariadb:10.3.37（这个版本能避免JSON列默认值的问题）：

#Mysql DB
  mysql:
    image: mariadb:10.3.37
    container_name: db
    restart: unless-stopped
    tty: true
    ports:
        - "33061:3306"
    environment:
        MYSQL_ROOT_PASSWORD: secret
        MYSQL_DATABASE: laravel
    volumes:
      - ../mysql:/mysql
    networks:
      - app-network

2. 修改了.env文件的数据库配置和部分URL：

APP_NAME='my application'
APP_ENV=local
APP_KEY=base64:Wh2GGnDZ6YLEjNghheIX4qL+6P9lHuS8sO03L/pCufA=
APP_DEBUG=true
APP_URL=http://localhost
APP_API_URL=http://localhost/api/
APP_API_DEV_URL=http://localhost:8080/

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=secret
DB_ROOT_PASSWORD=secret


BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=cookie
SESSION_LIFETIME=120
SESSION_DOMAIN=.localhost
SANCTUM_STATEFUL_DOMAINS=localhost:8080
SPA_URL=http://localhost:8080

之后我执行了这些命令：

docker-compose up -d
docker-compose exec laravel composer update 
docker-compose exec laravel composer install
docker-compose exec laravel composer dump-autoload

docker-compose exec laravel php artisan key:generate
docker-compose exec laravel php artisan config:cache

docker-compose exec laravel php artisan migrate:fresh

MariaDB里已经成功创建了数据表，但访问localhost:8080时出现以下错误：

The connection was reset
The connection to the server was reset while the page was loading.

The site could be temporarily unavailable or too busy. Try again in a few moments.
If you are unable to load any pages, check your computer’s network connection.
If your computer or network is protected by a firewall or proxy, make sure that Firefox is permitted to access the web.

补充：查看容器状态的结果：

[jaaf@localhost laravel]$ docker container ls --filter label=com.docker.compose.project
CONTAINER ID   IMAGE               COMMAND                  CREATED          STATUS                          PORTS                                         NAMES
5719d4b36179   laravel-webserver   "/docker-entrypoint.…"   44 minutes ago   Up 44 minutes                   0.0.0.0:80->80/tcp, :::80->80/tcp             webserver
9b88d442636c   laravel-vue         "docker-entrypoint.s…"   44 minutes ago   Restarting (1) 51 seconds ago                                                 vue
37743ac9307f   laravel             "docker-php-entrypoi…"   44 minutes ago   Up 44 minutes                   9000/tcp                                      laravel
1cf764c56ad0   mariadb:10.3.37     "docker-entrypoint.s…"   44 minutes ago   Up 44 minutes                   0.0.0.0:33061->3306/tcp, :::33061->3306/tcp   db

从容器状态可以明确看到，vue容器处于**Restarting (1)**循环状态，这就是localhost:8080无法访问的核心原因——Vue服务容器根本没正常启动。以下是具体排查和解决方向：

1. 先获取Vue容器的错误日志 #

执行命令查看容器启动失败的具体原因，这是最直接的排查方式：

docker logs laravel-vue

日志会明确提示错误（比如依赖缺失、构建失败、配置文件语法错误、端口冲突等）。

2. 检查Vue容器的端口映射配置 #

打开docker-compose.yml，确认Vue服务是否配置了正确的端口映射。示例项目的Vue服务应该有类似配置：

vue:
  build: ../vue
  container_name: vue
  restart: unless-stopped
  ports:
    - "8080:80" # 宿主机8080端口映射到容器内部的80端口（Nginx默认端口）
  networks:
    - app-network

如果没有这个端口映射，或者映射端口不匹配，就会导致宿主机无法访问容器服务。

3. 检查Vue构建与Nginx配置 #

• 查看vue.dockerfile，确认构建步骤是否完整：是否执行了npm install安装依赖、是否执行了npm run build生成生产包、是否将构建产物正确复制到Nginx的静态目录（比如/usr/share/nginx/html）。
• 检查vue/nginx.conf，确认根目录指向构建产物路径，且location规则配置正确，没有语法错误。

4. 修正Vue项目的API地址配置 #

Vue项目内部的API请求地址要适配Docker内部网络，比如在Vue的.env文件中，应将API地址设置为VUE_APP_API_URL=http://webserver/api/（Docker内部网络中Laravel的Nginx服务容器名为webserver），而不是使用localhost，避免容器内部无法解析宿主机地址。

5. 修复文件权限问题 #

如果Vue构建产物的目录权限不正确，Nginx无法读取文件，会导致容器启动失败。可以在vue.dockerfile中添加权限设置：

RUN chown -R nginx:nginx /usr/share/nginx/html

快速修复流程示例 #

1. 停止并清理现有容器：

docker-compose down

2. 修改完配置后，重新构建并启动Vue服务：

docker-compose up -d --build vue

3. 再次查看容器状态，确认是否正常运行：

docker container ls

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