Netlify部署Gatsby / Wordpress网站失败

Question

我正在一个使用Gatsby / React构建的网站上，该网站在构建时将API调用发送到WordPress服务器，以便检索博客文章列表。尽管“ gatsby-build”和“ gatsby development”命令在本地均可正常运行，但当我去在Netlify上部署站点时，部署总是失败，并出现以下错误：

error "gatsby-source-wordpress" threw an error while running the sourceNodes lifecycle:
Cannot convert undefined or null to object 

显然，每次都无法从WordPress检索API数据。我在Netlify中使用环境变量，并且三重检查了它们的准确性；我的WordPress网站也已部署在digitalOcean上，我的网站应该ping通该Droplet的IPv4地址。我尝试将restApiRoutePrefix设置设置为true / false / empty-string，每次都失败。该协议设置为HTTPS。

gatsby.config.js

  path: `.env`,
})



module.exports = {
  siteMetadata: {
    title: `Alex Dollard`,
    description: `This is Alex fucking around. Hello!`,
    author: `@acdollard`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-netlify`,
    {
      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.
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
        {
      resolve: "gatsby-source-wordpress",
      options: {
        /*
         * The base URL of the WordPress site without the trailingslash and the protocol. This is required.
         * Example : 'demo.wp-api.org' or 'www.example-site.com'
         */
        minimizeDeprecationNotice: true,
        baseUrl: process.env.API_URL,
        // The protocol. This can be http or https.
        protocol: process.env.API_PROTOCOL,

        restApiRoutePrefix: "wp-json",

        hostingWPCOM: false,

        useACF: true,

        acfOptionPageIds: [],
        auth: {
          // If auth.user and auth.pass are filled, then the source plugin will be allowed
          // to access endpoints that are protected with .htaccess.
          htaccess_user: "your-htaccess-username",
          htaccess_pass: "your-htaccess-password",
          htaccess_sendImmediately: false,

          // see https://en.support.wordpress.com/security/two-step-authentication/#application-specific-passwords
          wpcom_app_clientSecret: process.env.WORDPRESS_CLIENT_SECRET,
          wpcom_app_clientId: "54793",
          wpcom_user: "alexdollard141@gmail.com",
          wpcom_pass: process.env.WORDPRESS_PASSWORD,

          jwt_user: process.env.JWT_USER,
          jwt_pass: process.env.JWT_PASSWORD,
          jwt_base_path: "/jwt-auth/v1/token", // Default - can skip if you are using https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/
        },
        // Set cookies that should be send with requests to WordPress as key value pairs
        cookies: {},
        // Set verboseOutput to true to display a verbose output on `npm run develop` or `npm run build`
        // It can help you debug specific API Endpoints problems.
        verboseOutput: false,
        // Set how many pages are retrieved per API request.
        perPage: 100,
        // Search and Replace Urls across WordPress content.
        searchAndReplaceContentUrls: {
          sourceUrl: "https://source-url.com",
          replacementUrl: "https://replacement-url.com",
        },
        // Set how many simultaneous requests are sent at once.
        concurrentRequests: 10,

        includedRoutes: [
          "**/categories",
          "**/posts",
          "**/pages",
          "**/media",
          "**/tags",
          "**/taxonomies",
          "**/users",
        ],
        // Blacklisted routes using glob patterns
        excludedRoutes: ["**/posts/1456"],
        // Set this to keep media sizes.
        // This option is particularly useful in case you need access to
        // URLs for thumbnails, or any other media detail.
        // Defaults to false
        keepMediaSizes: false,
        // use a custom normalizer which is applied after the built-in ones.
        normalizer: function ({ entities }) {
          return entities
        },
   
        normalizers: normalizers => [
          ...normalizers,
          {
            name: "nameOfTheFunction",
            normalizer: function ({ entities }) {
              // manipulate entities here
              return entities
            },
          },
        ],
      },
    },
  ],
}

package.json

  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "Alex Dollard <alexdollard141@gmail.com>",
  "dependencies": {
    "gatsby": "^2.24.91",
    "gatsby-cli": "^2.12.117",
    "gatsby-core-utils": "^1.3.24",
    "gatsby-image": "^2.4.19",
    "gatsby-plugin-manifest": "^2.4.30",
    "gatsby-plugin-netlify": "^2.4.0",
    "gatsby-plugin-offline": "^3.2.28",
    "gatsby-plugin-react-helmet": "^3.3.14",
    "gatsby-plugin-sass": "^2.3.16",
    "gatsby-plugin-sharp": "^2.6.36",
    "gatsby-source-filesystem": "^2.4.0",
    "gatsby-source-wordpress": "^3.3.36",
    "gatsby-source-wordpress-experimental": "^1.7.9",
    "gatsby-transformer-sharp": "^2.5.15",
    "live-server": "^1.2.1",
    "node-sass": "^4.14.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "sass": "^1.27.0",
    "styled-components": "^5.2.1"
  },
  "devDependencies": {
    "prettier": "2.1.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "0BSD",
  "scripts": {
    "scss": "node-sass --watch src/sass -o src/css",
    "devserver": "live-server --port=8000 --open=public --entry-file=index.html",
    "compile:sass": "node-sass src/sass/main.scss src/css/main.css",
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/acdollard/first_gatsby_site"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

这听起来像是netlify问题，gatsby问题还是wordpress问题？我是否需要包括任何其他代码/文件片段以帮助澄清问题？任何帮助都非常感谢。

Answer 1

您的问题取决于您的environment variables。在Netlify中处理它们时，必须为它们加上前缀GATSBY_，以使它们可用于Netlify。将它们分别更改为：

baseUrl: process.env.GATSBY_API_URL,
protocol: process.env.GATSBY_API_PROTOCOL,
wpcom_app_clientSecret: process.env.GATSBY_WORDPRESS_CLIENT_SECRET,
wpcom_pass: process.env.GATSBY_WORDPRESS_PASSWORD,
jwt_user: process.env.GATSBY_JWT_USER,
jwt_pass: process.env.GATSBY_JWT_PASSWORD,

也更改您的本地环境文件，并将它们添加到Netlify仪表板中https://app.netlify.com/sites/YOUR_SITE/settings/deploys#environment下：

其余的等等...

发生的事情是Netlify无法读取您的环境变量，因此无法获取您的数据（成为null或undefined）并抛出异常，因为它无法保留构建过程。

参考：

• https://community.netlify.com/t/how-to-access-environment-variables/1240
• https://www.gatsbyjs.com/docs/environment-variables/