reactjs - 在 Nextjs 应用程序中使用 Cloud Run 环境变量

Question

我最近构建了一个 Nextjs 应用程序，我将其托管在 Google Cloud Run 上。

我的应用通过 getStaticProps() 方法向外部 API 发出一些请求。

我希望能够使用为每个环境设置不同的环境变量，根据环境(例如生产环境或开发环境)指向不同的 API 主机。

我知道我可以将这些变量存储在特定于环境的文件中，例如 .env.development 和 .env.production 但是我希望能够存储这些环境变量在云运行服务的 Google Cloud 控制台的环境变量字段中，并完全跳过将它们存储在文件中。

我尝试将变量添加到 Cloud Run，但它不起作用。我也尝试过在变量前加上 NEXT_PUBLIC_... 没有运气。

有没有人对如何完成此操作有任何提示？

Answer 1

好吧……我想我现在明白了。我正在使用 Cloud Builds 构建我的容器，容器在运行 npm run start 之前运行 npm run build。

我假设我的 Cloud Run 变量在 Cloud Build 构建项目时不可用。

因此，我认为我的解决方案可能是尝试在构建时使用替换变量注入(inject)变量。

编辑:确认。如果我以开发模式启动 Nextjs，以便为每个请求在服务器上呈现页面，然后使用 Cloud Run 环境变量。为了构建用于生产的 Nextjs 应用程序，我将环境变量包含在由 Cloud Build 构建的 Dockerfile 中

编辑:根据要求，dockerfile 设置环境变量的示例:

FROM node:16.13-alpine
RUN mkdir -p /usr/src
WORKDIR /usr/src
COPY . /usr/src

ENV NEXT_PUBLIC_MY_API_HOST='https://some.host.com'

RUN npm install -only=production
RUN npm run build
EXPOSE 3000
CMD npm run start

然后您可以使用 process.env.NEXT_PUBLIC_MY_API_HOST 从您的代码中引用环境变量