Gatsby 本地构建与 AWS Amplify 构建不同？

Question

I have a Gatsby site that is working perfectly fine when I build and serve on localhost, but when I push the code and check my AWS Amplify website (that is tracking the github repo), it's behaving very differently. For example, on my local production build, all the links are working properly and view page source shows HTML.

However, on my Amplify link, only some of the link paths are working, and view page source is not showing any HTML for any of the pages. I assume there must be some kind of difference between the way it's being built on my local machine and on Amplify, but I'm not sure exactly where the exact problem is lying.

In theory, since they're both production builds and not development, they should be behaving the same way?

Answer 1

I assume there must be some kind of difference between the way it's being built on my local machine and on Amplify, but I'm not sure exactly where the exact problem is lying.

I also think so. These kinds of issues (different behavior between environments) are usually related to Node versions. hence the installed dependencies version differs between environments.

In your case, check the current local version by running node -v and set the version to AWS Amplify (it uses nvm underlying).

You can follow one of the multiples approaches suggested in: How to change Node Version in Provision Step in Amplify Console

frontend:
  phases:
    preBuild:
      commands:
        - nvm install 10

Change 10 for your local version.

Answer 2

Gatsby is a static site generator if you are adding new pages separately as an html link, at the build time it will be removed. You need to add them under the pages folder as a react component itself and use Link from gatsby to navigate across the pages