我的 GatsbyJS（和 NextJS）Docker 设置

更新：Alpine 做了一些影响本文的更改，下方评论或许能解答由此引起的问题。谢谢 Jonathan！示例代码也已修复。

更新 #2：看来 Windows 上的热模块重新加载功能目前无法正常工作。如果问题修复，我会发布更新！

更新 #3：如果您仍然遇到问题，下面的另一条评论可能会让您回到正轨：这里

Docker 太棒了

我可能有点晚了，但我最近开始使用Docker作为我开发工作流程的一部分。我非常喜欢它，我觉得所有开发人员都应该至少学习一下 Docker 的基本教程。相信我，这是一个值得探索的宝藏！

但是……有一个小问题

本周，当我对最近的一些 Gatsby 和 NextJS 项目进行“Docker 化”时，我注意到似乎没有太多可用的信息来实现这一点。

Gatsby 确实在他们的仓库中提供了Docker 设置（基于 alpine:edge），但坦白说：它看起来过于复杂和模糊，根本没必要，而且我没法让它满足我的需求。（我觉得它只是用来服务于网站构建后的功能。）

因此，我决定研究如何从官方 node:alpine（最新）镜像创建一个自定义镜像……无论我使用哪台计算机，都可以用来快速设置开发环境。（如果我想部署到 Netlify 以外的其他地方，我可以快速添加一个 Nginx 镜像/服务和一个超级基本的配置文件。）

问题解决了！

经过数小时的学习、研究和实验（可能还有些挫折），我终于向大家呈现了我自己的 Dockerfile 版本！它将创建一个功能齐全的 Docker 镜像，并在 Apline Linux（最新版）中安装构建 Gatsby（和 NextJS）网站和应用所需的所有软件包。

（注意：对于 NextJS 网站，我只需将最终的 CMD 和端口更改为我用于网站/应用程序的任何内容……通常为 8080。）

Dockerfile.dev

FROM node:alpine

# Also exposing VSCode debug ports
EXPOSE 8000 9929 9230

RUN \
  apk add --no-cache python make g++ && \
  apk add vips-dev fftw-dev --update-cache \
  --repository http://dl-3.alpinelinux.org/alpine/edge/community \
  --repository http://dl-3.alpinelinux.org/alpine/edge/main \
  && rm -fR /var/cache/apk/*

RUN npm install -g gatsby-cli

WORKDIR /app
COPY ./package.json .
RUN yarn install && yarn cache clean
COPY . .
CMD ["yarn", "develop", "-H", "0.0.0.0" ]

docker-compose.yml

（请注意设置GATSBY_WEBPACK_PUBLICPATH- 这似乎解决了我在编辑代码时遇到的任何 HMR 问题。）

version: '3'
services:
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "8000:8000"
      - "9929:9929"
      - "9230:9230"
    volumes:
      - /app/node_modules
      - .:/app
    environment:
      - NODE_ENV=development
      - GATSBY_WEBPACK_PUBLICPATH=/

您可能还想将.dockerignore文件放入项目目录中，以忽略诸如 ./node_modules、./cache、./public、任何 .DS_Store 文件等。（很像.gitignore文件。）

要运行它，请从项目的根目录运行：

$ docker-compose up --build

运行完之后，我就可以开始工作了……无论我用的是 Macbook Pro 还是 Windows 桌面。希望这对你也有帮助！