让我们使用Gatsby创建一个网站，并学习如何使用nginx在Docker容器中为其服务。

首先，让我们初始化一个新的Gatsby应用程序。

npm init gatsby

请随意接受默认设置，除了我们将应用程序命名为gatsby-nginx-docker 。

一旦应用程序被设置好，导航到新的应用程序目录。

cd gatsby-nginx-docker

为了使用Docker，我们需要几个文件：一个是Dockerfile ，用来列出组装镜像的说明；一个是.dockerignore ，用来在Docker构建过程中忽略文件。现在让我们来制作这些文件。

touch Dockerfile

对于我们的.dockerignore 文件，让我们确保在node_modules 中忽略我们的依赖文件，就像我们用git一样。

echo "node_modules" > .dockerignore

构建Docker文件

是时候建立Docker文件了！我们可以用很多方法来建立Docker文件。我们有很多方法可以做到这一点，但今天我们将使用一个多阶段的过程。

阶段1：用于构建前端资产的Node镜像
阶段2：nginx阶段，为前端资产提供服务

第一阶段：构建前端资产

我们的第一个阶段将

使用一个节点镜像
将我们所有的Gatsby文件复制到一个工作目录中
用yarn安装项目的依赖性
用yarn构建应用程序

这就是在Docker中的样子!

# Name the node stage "builder"
FROM node:14 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

接下来，我们实际上是在为我们刚刚建立的内容提供服务!

第二阶段：我们的nginx服务器

我们的第二个阶段将。

使用一个nginx镜像
从nginx镜像中删除任何默认的静态资产
从我们在第一阶段创建的builder 镜像中复制我们的静态资产
为我们的容器指定运行nginx的入口。

下面是这个阶段在Docker文件中的样子。

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/public .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

重要的是，Gatsby默认将静态资产构建到public ，所以我们从那里复制我们的文件。如果你的应用程序由于某种原因将文件建在另一个文件夹中，请做相应调整。

把它放在一起

好了！让我们把这一切放在一起。让我们把这一切放在一起并运行我们的应用程序。

我们的多阶段Docker文件现在应该是这样的。

# Multi-stage
# 1) Node image for building frontend assets
# 2) nginx stage to serve frontend assets

# Name the node stage "builder"
FROM node:14 AS builder
# Set working directory
WORKDIR /app
# Copy all files from current directory to working dir in image
COPY . .
# install node modules and build assets
RUN yarn install && yarn build

# nginx state for serving content
FROM nginx:alpine
# Set working directory to nginx asset directory
WORKDIR /usr/share/nginx/html
# Remove default nginx static assets
RUN rm -rf ./*
# Copy static assets from builder stage
COPY --from=builder /app/public .
# Containers run nginx with global directives and daemon off
ENTRYPOINT ["nginx", "-g", "daemon off;"]

现在我们已经组装好了我们的Docker文件，让我们建立一个名为gatsby-nginx 的镜像。

docker build -t gatsby-nginx .

现在我们的镜像已经建成，我们可以用下面的命令启动一个容器，它将在8080端口为我们的应用程序提供服务。

docker run --rm -it -p 8080:80 gatsby-nginx

导航到http://localhost:8080，你现在应该看到我们默认的Gatsby应用程序了

如何在Docker中用Nginx为Gatsby应用提供服务

构建Docker文件

第一阶段：构建前端资产

第二阶段：我们的nginx服务器

把它放在一起