访问在 Docker 容器中运行的 Gatsby 应用程序时出现问题

Question

我正在尝试为位于如下文件夹结构中的 Gatsby v5 应用程序设置 Docker：

main-folder
|_ backend (Docker setup working fine)
|_ frontend (trying to set up Docker for this)

在

frontend

目录中，我创建了两个文件：

1. Dockerfile

FROM node:20.11.1-alpine as node

WORKDIR /usr/src/app
COPY package*.json ./

RUN npm install -g gatsby-cli
RUN npm install

COPY . .

2. docker-compose.yml

version: "3.9"

services:
  node:
    build: .
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - "9000:9000"
    command: gatsby develop -H 0.0.0.0
    tty: true

当我运行

docker-compose up

时，我得到以下输出：

You can now view main-folder in the browser.
⠀
  Local:            http://localhost:8000/
  On Your Network:  http://172.18.0.2:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
  Local:            http://localhost:8000/___graphql
  On Your Network:  http://172.18.0.2:8000/___graphql

但是，当我尝试在浏览器中访问

http://localhost:8000/

时，我没有得到任何响应。奇怪的是，访问

http://172.18.0.2:8000/

效果很好。

我想在

http://localhost:9000/

访问我的应用程序，并将

gatsby develop

替换为

npm start

，但每当我在

docker-compose.yml

中进行更改时，应用程序都会编译并运行，但我仍然无法在

http://localhost:8000/

访问它。

我检查了 Docker 日志并检查了设置，但没有发现任何错误。如果您能了解我为何无法在

http://localhost:8000/

访问我的 Gatsby 应用程序，我们将不胜感激。

Answer 1

在花了几个小时、博客和个人网络反馈后回答我自己的问题，以下是为什么我无法在浏览器中看到我的 gatsby v5 的问题

参考链接 -> https://valenciandigital.com/insights/why-containerize-your-gatsby-application（此链接帮助我解决所有问题）

在我的 Dockerfile 中，我在末尾添加了这一行（其余代码与问题中发布的相同）

CMD [ "npm", "run", "start" ]

在我的 docker-compose.yml 中，我更新如下（删除了作为问题一部分提供的所有代码）

frontend:
  build:
    context: ./frontend
    dockerfile: Dockerfile
  volumes:
    - ./frontend/src:/app/src
  ports:
    - 8000:8000

在我的

package.json

我通过代码更新了

"scripts": {
  "develop": "gatsby develop"
}

到；

"scripts": {
  "develop": "gatsby develop -H 0.0.0.0 -p 8000"
}

PN：您还可以在 env 文件中定义端口和主机，并在构建时动态使用它，我确实喜欢

 "scripts": {
  "develop": "gatsby develop -H ${GATSBY_HORT} -p ${GATSBY_PORT}"
}

我还在https://github.com/akshayshrivastav866/news-aggregator/上提供了所有可行的代码，以便如果需要，可以将其作为参考。