Docker内Astro.js站点无法被Chrome访问，求解决方案

问题根源 #

Astro开发服务器默认只监听容器内部的127.0.0.1（localhost），而Docker的端口映射是将宿主机端口转发到容器的0.0.0.0地址，这就导致宿主机无法连接到容器内仅绑定localhost的服务。

具体解决方法 #

方法1：修改项目package.json的dev脚本 #

进入宿主机上的/project目录，打开package.json文件，把scripts里的dev命令修改为：

"dev": "astro dev --host 0.0.0.0"

这样启动开发服务器时，会监听容器的所有网卡地址，宿主机就能通过端口映射正常访问。

方法2：配置astro.config.mjs文件 #

在项目根目录的astro.config.mjs中添加server监听配置：

import { defineConfig } from 'astro/config';

export default defineConfig({
  server: {
    host: '0.0.0.0'
  }
});

该配置会让Astro默认监听容器的所有地址，无需修改启动命令。

方法3：直接调整docker-compose.yml的启动命令 #

将docker-compose.yml里的npm run dev替换为npm run dev -- --host 0.0.0.0，修改后的command部分如下：

command: >
  sh -c
  "
  cd /project
  && npm install
  && npm run dev -- --host 0.0.0.0 &
  tail -f /dev/null
  "

这里的--用于将后续参数传递给npm脚本对应的Astro命令。

验证修改效果 #

修改完成后，重启容器：

docker-compose down && docker-compose up -d

之后在宿主机访问localhost:3000，即可正常加载Astro默认页面。

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