Fly.io部署Next.js前端失败：环境变量未定义致预渲染错误

问题根源 #

你的报错核心是Docker构建阶段的环境变量没有传递到Next.js的yarn build步骤中：

• Docker的每个RUN指令都是独立的shell进程，你之前单独用RUN设置BLOG_URL和CONTENT_API_KEY的操作，只在当前RUN的shell中有效，后续执行yarn build时根本拿不到这些变量。
• 你的页面用了getStaticProps做静态预渲染，这个步骤是在构建阶段执行的，所以必须在构建时注入环境变量，运行时密钥（flyctl secrets set）对这个阶段无效。

解决方案 #

方案1：在执行yarn build的同一个RUN中注入构建密钥 #

修改Dockerfile里的构建步骤，把两个构建密钥直接传递给yarn build命令：

# 替换原来的单独设置变量和build的步骤，改成：
RUN yarn install --frozen-lockfile

RUN --mount=type=secret,id=BLOG_URL \
    --mount=type=secret,id=CONTENT_API_KEY \
    BLOG_URL=$(cat /run/secrets/BLOG_URL) CONTENT_API_KEY=$(cat /run/secrets/CONTENT_API_KEY) yarn build

这样在执行yarn build的进程中，直接就能拿到两个环境变量，getStaticProps在预渲染时就能正常读取。

方案2：构建时生成.env.production文件 #

Next.js默认会加载.env.production文件里的环境变量，你可以在构建阶段把密钥写入这个文件：

RUN yarn install --frozen-lockfile

# 在build前生成.env.production
RUN --mount=type=secret,id=BLOG_URL \
    --mount=type=secret,id=CONTENT_API_KEY \
    echo "BLOG_URL=$(cat /run/secrets/BLOG_URL)" > .env.production && \
    echo "CONTENT_API_KEY=$(cat /run/secrets/CONTENT_API_KEY)" >> .env.production

RUN yarn build

这种方式更符合Next.js的环境变量加载逻辑，后续维护也更清晰。

部署验证 #

部署时必须用构建密钥传递变量：

flyctl deploy --build-secret BLOG_URL=你的Ghost博客地址 --build-secret CONTENT_API_KEY=你的Ghost内容API密钥

如果想调试变量是否正确注入，可以在yarn build前加一个RUN指令打印变量：

RUN --mount=type=secret,id=BLOG_URL \
    --mount=type=secret,id=CONTENT_API_KEY \
    echo "BLOG_URL: $(cat /run/secrets/BLOG_URL)" && echo "CONTENT_API_KEY: $(cat /run/secrets/CONTENT_API_KEY)"

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