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（不应签入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，因此只需在变量上加上GATSBY_，就可以毫无问题地部署它。

部署到Heroku时的Gatsby Contentful CMS错误

2 个答案: