Docker部署SolidJS应用后无法连接localhost:3000的问题

我开发了一个与Django后端通信的SolidJS应用，尝试用Docker容器化前端。执行docker build构建镜像，再用docker-compose up -d启动容器后，访问localhost:3000时出现连接重置错误：

The connection has been reset
The connection to the server was reset while the page was loading.
The site may be temporarily unavailable or overloaded. Try again later;
If you cannot browse any site, check your computer's network connection;
If your computer or network is behind a firewall or proxy, make sure Firefox has permission to access the web.

相关配置 #

Dockerfile #

FROM node:18-alpine
WORKDIR /app/frontend
COPY package.json .
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

docker-compose.yml #

version: "3"
services:
  backend: ...
  frontend:
    build:
      context: ./front
      dockerfile: Dockerfile
    ports:
      - 3000:3000
    depends_on:
      - backend
  database: ...

docker inspect frontend输出 #

[
        {
            "Id": "sha256:e63b7ae38f071c8906affda1d15c1a7cfc5fd0501ae3a50fb5baf9affd749a18",
            "RepoTags": [
                "frontend:latest"
            ],
            "RepoDigests": [],
            "Parent": "",
            "Comment": "buildkit.dockerfile.v0",
            "Created": "2023-06-20T09:11:25.3578755Z",
            "Container": "",
            "ContainerConfig": {
                "Hostname": "",
                "Domainname": "",
                "User": "",
                "AttachStdin": false,
                "AttachStdout": false,
                "AttachStderr": false,
                "Tty": false,
                "OpenStdin": false,
                "StdinOnce": false,
                "Env": null,
                "Cmd": null,
                "Image": "",
                "Volumes": null,
                "WorkingDir": "",
                "Entrypoint": null,
                "OnBuild": null,
                "Labels": null
            },
            "DockerVersion": "",
            "Author": "",
            "Config": {
                "Hostname": "",
                "Domainname": "",
                "User": "",
                "AttachStdin": false,
                "AttachStdout": false,
                "AttachStderr": false,
                "ExposedPorts": {
                    "3000/tcp": {}
                },
                "Tty": false,
                "OpenStdin": false,
                "StdinOnce": false,
                "Env": [
                    "PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin",
                    "NODE_VERSION=18.16.0",
                    "YARN_VERSION=1.22.19"
                ],
                "Cmd": [
                    "npm", "start"
                ],
                "ArgsEscaped": true,
                "Image": "",
                "Volumes": null,
                "WorkingDir": "/app/frontend",
                "Entrypoint": [
                    "docker-entrypoint.sh"
                ],
                "OnBuild": null,
                "Labels": null
            },
            "Architecture": "amd64",
            "Os": "linux",
            "Size": 384471761,
            "VirtualSize": 384471761,
            "GraphDriver": {
                "Data": {
                    "LowerDir": "/var/lib/docker/overlay2/e7pke1lm55bwj3f23ud7bvfk7/diff:/var/lib/docker/overlay2/6zw0grx5i2q6njdy217bopd9f/diff:/var/lib/docker/overlay2/268zgs2pnulrhkpztql5bv9w9/diff:/var/lib/docker/overlay2/ff1f8ebc30e49a9e6d5cbc9e05951d4efa6bb0e84281950a92ca7d8207e4379c/diff:/var/lib/docker/overlay2/eefcc57bd194a7de78d019b92dee4ebdd81ff2cb418c2753322a3e04f860d81b/diff:/var/lib/docker/overlay2/bfa75f821ad0971bb0d6da3f6327f34590a55137bd712a4b0bed92075cfd60d2/diff:/var/lib/docker/overlay2/1d84f525730defee501d69ed6bc3d2b2b74eceb52b630db7fb6aa8a464af9f4a/diff",    
                    "MergedDir": "/var/lib/docker/overlay2/mji5toy5ry18rzqusemmks2uc/merged",        
                    "UpperDir": "/var/lib/docker/overlay2/mji5toy5ry18rzqusemmks2uc/diff",
                    "WorkDir": "/var/lib/docker/overlay2/mji5toy5ry18rzqusemmks2uc/work"
                },
                "Name": "overlay2"
            },
            "RootFS": {
                "Type": "layers",
                "Layers": [
                    "sha256:78a822fe2a2d2c84f3de4a403188c45f623017d6a4521d23047c9fbb0801794c",       
                    "sha256:4f4b74c286d22999d55b839578454a634b9b7879dff5fb3ba880be1f0a745596",       
                    "sha256:04c82a4955a1c02df97f16828b6be2b55f67f1130199fd0ec6fcbe734d47b444",       
                    "sha256:370f4ccb18d741bb12117359cb5accb6191f8cc98e56b284b6fb2cf4e75f8ca2",       
                    "sha256:4678b49dfd54b8e2d4d161fad903d77b5c39af2f304dfc5bf5b126eb00efdea8",       
                    "sha256:45b01810f498eaa0ad6df7afe8e303b57c763fde59ef6bab8eb377c24c2c6c99",       
                    "sha256:3395040bcffc8010976fbfc312039c5652e7c39e5c6d1b2ca5fbe196711a2461",       
                    "sha256:de495181ee371615363f505d537425237a12f3942dce373fb39c2b350c56cc25"        
                ]
            },
            "Metadata": {
                "LastTagTime": "2023-06-20T09:11:25.446862Z"
            }
        }
    ]

1. 修改SolidJS服务器绑定地址 #

SolidJS默认开发服务器仅绑定localhost，容器内的localhost无法被宿主机访问。需要修改启动命令，让服务器监听所有网卡：
打开项目根目录的package.json，调整start脚本：

"scripts": {
  "start": "vite --host 0.0.0.0"
}

（如果是create-solid默认模板，启动命令基于Vite，添加--host 0.0.0.0即可）

2. 检查容器运行状态 #

执行以下命令查看frontend容器是否正常启动：

docker-compose ps

如果容器状态不是Up，查看启动日志定位问题：

docker-compose logs frontend

3. 验证容器内部端口监听 #

进入容器内部，检查3000端口是否被进程占用：

docker exec -it <容器ID> sh
netstat -tulpn | grep 3000

如果没有输出，说明服务器未正常启动，需排查启动命令或代码错误。

4. 优化Docker构建流程（可选） #

• 添加.dockerignore文件排除冗余内容，减少构建体积：

  node_modules
  dist
  .git
  .env
  

• 修改Dockerfile使用更稳定的依赖安装命令：

  FROM node:18-alpine
  WORKDIR /app/frontend
  COPY package*.json ./
  RUN npm ci --only=production
  COPY . .
  EXPOSE 3000
  CMD ["npm", "start"]
  

5. 排查宿主机端口冲突 #

确认宿主机3000端口未被其他进程占用：

# Linux/macOS
lsof -i :3000
# Windows
netstat -ano | findstr :3000

如果端口被占用，修改docker-compose.yml中的端口映射（比如改为3001:3000），再重新启动容器。

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