如何将Docker容器内yarn dev运行的Nuxt项目暴露到localhost:3000

问题核心 #

你的Nuxt服务在容器内绑定的是localhost（127.0.0.1），这个地址仅允许容器内部访问，宿主机的请求无法穿透到容器内的服务。虽然容器内curl localhost:3000能正常返回，但宿主机无法通过端口映射访问，根源就在这里。

解决方案 #

1. 修改Nuxt服务的监听地址 #

让Nuxt监听容器的所有网络接口（0.0.0.0），这样才能接受来自宿主机的请求。有两种方式实现：

方式一：修改package.json的dev脚本

直接在dev命令后添加--hostname 0.0.0.0参数：

{
  "name": "XXXXX-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt --hostname 0.0.0.0",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.11.2"
  }
}

方式二：配置nuxt.config.js

如果项目里没有nuxt.config.js，在项目根目录创建该文件，添加server配置：

export default {
  server: {
    host: '0.0.0.0',
    port: 3000
  }
}

2. 启动容器时添加端口映射 #

运行容器时必须通过-p参数把宿主机端口映射到容器的3000端口，比如：

docker run -p 3000:3000 -v $(pwd):/app -w /app [你的镜像名称] yarn dev

• -p 3000:3000：将宿主机的3000端口转发到容器的3000端口
• -v $(pwd):/app：把本地项目目录挂载到容器内的/app目录（方便开发时实时同步代码）
• -w /app：设置容器的工作目录为/app

验证 #

完成上述配置后，启动容器并运行yarn dev，此时宿主机浏览器访问http://localhost:3000就能看到Nuxt的开发页面了。

额外优化（可选） #

你的Dockerfile可以做些小优化，比如指定Node.js版本（避免apt安装的版本不确定），示例：

FROM node:16-bullseye

RUN npm install --global yarn webpack

WORKDIR /app

EXPOSE 3000

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