部署到 Heroku 时出现 Gatsby Contentful CMS 错误

Question

尝试将应用程序部署到 Heroku，但在客户端构建步骤中找不到 Contentful API 密钥。

变量位于“.env.production”和“.env.development”文件中。 在本地运行时，会读取生产和开发文件并找到变量。 虽然，在构建客户端时部署到 Heroku 时，我收到以下错误：

remote: error Problems with gatsby-source-contentful plugin options:
remote: spaceId: undefined - "spaceId" is required
remote: accessToken: undefined - "accessToken" is required
remote: host (default value): "cdn.contentful.com"
remote: environment (default value): "master"
remote: downloadLocal (default value): false
remote: localeFilter (default value): [Function]
remote: forceFullSync (default value): false
remote: pageLimit (default value): 100
remote: useNameForId (default value): true
remote:        not finished onPreBootstrap - 0.019s
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! gatsby-starter-default@0.1.0 build: `gatsby build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the gatsby-starter-default@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.J7KKr/_logs/2020-06-04T02_01_57_062Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! server@1.0.0 build: `cd client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the server@1.0.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.J7KKr/_logs/2020-06-04T02_01_57_090Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! server@1.0.0 heroku-postbuild: `npm run install-client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the server@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.J7KKr/_logs/2020-06-04T02_01_57_122Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.

没有找到spaceId和accessToken的错误只在部署时出现。

gatsby-config.js

let env = process.env.NODE_ENV || "development"

console.log(`using enviroment config: ${env}`)
require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
})

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: process.env.CONTENTFUL_SPACE_ID,
        accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
  ],
}

Answer 1

您的.env.* 可能没有检入 git（它们不应该检入。）如果是这样，您必须通过 heroku cli 或 heroku 仪表板分别在 Heroku 上设置环境变量。

heroku config:set CONTENTFUL_SPACE_ID=myspaceid

请参阅docs for more information。

Answer 2

根据这个GitHub thread（就像Gatsby 环境变量在某些平台上工作一样），您需要在所有.env 变量前加上GATSBY_ 前缀。所以，你的：

{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
  },
},

会变成：

{
  resolve: `gatsby-source-contentful`,
  options: {
    spaceId: process.env.GATSBY_CONTENTFUL_SPACE_ID,
    accessToken: process.env.GATSBY_CONTENTFUL_ACCESS_TOKEN,
  },
},

当然，您还需要更改 .env 文件中的名称。

另一个必需的东西是您已经拥有的.dotenv sn-p，因此只需在变量前加上GATSBY_，您就可以毫无问题地部署它。