如何在Docker容器中运行Vue Dev Server并配置自定义域名访问

• 报错Invalid Host header：Vue CLI 底层依赖的webpack-dev-server默认开启了Host头校验，仅允许localhost、本地IP等默认域名的请求通过，自定义域名local.myapp.com不在白名单内因此被拦截。
• 报错ERR_EMPTY_RESPONSE：在容器内指定--host=local.myapp.com启动时，服务会绑定到容器内部解析该域名得到的IP，默认容器内/etc/hosts没有配置该域名的映射，会解析到127.0.0.1，仅监听容器本地环回地址的请求，宿主机侧的外部请求无法进入服务层，因此返回空响应。容器内部wget可正常访问，正是因为请求来自容器本地环回地址。

方案1：修改启动命令（无需调整项目代码） #

容器内启动命令替换为以下内容即可：

yarn serve --port=80 --host=0.0.0.0 --allowed-hosts local.myapp.com

参数说明：

• --host=0.0.0.0：让服务监听容器所有网卡的请求，宿主机发来的外部请求可以正常进入服务
• --allowed-hosts local.myapp.com：将自定义域名加入Host头校验白名单，避免拦截报错

方案2：修改vue.config.js配置（永久生效） #

在项目根目录的vue.config.js文件中添加devServer相关配置：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 80,
    allowedHosts: ['local.myapp.com']
  }
}

配置完成后容器内直接执行yarn serve即可正常启动，不需要额外加参数。

注：如果使用的是Vue CLI 4以下的旧版本，allowedHosts配置不生效的话，可以临时替换为disableHostCheck: true关闭Host校验，该配置仅推荐开发环境使用，生产环境不要开启。

你现有的宿主机hosts配置、docker-compose端口映射配置都不需要调整，修改完上述配置后即可通过local.myapp.com正常访问应用。

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