react-scripts build 在本地工作，但在 CodeBuild 中失敗

Question

我正在使用 CodeBuild 將反應網站部署到 S3。 當我在本地運行npm run build時，它運行良好。 但是，當它點擊 CodeBuild 時，它會失敗並出現以下錯誤：

[Container] 2021/01/26 00:29:23 Running command npm run build

> gci-web-app@0.1.0 build /codebuild/output/src705738256/src
> react-scripts build

/codebuild/output/src705738256/src/node_modules/fs-extra/lib/mkdirs/make-dir.js:85
      } catch {
              ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/codebuild/output/src705738256/src/node_modules/fs-extra/lib/mkdirs/index.js:3:44)

我嘗試在 package 中安裝 fs-extra，但仍然遇到相同的錯誤。 真的讓我摸不着頭腦，因為這是一個開箱即用的 create-react-app 應用程序。 任何幫助將不勝感激！

如果需要，這就是我的 CodeBuild 的樣子：

         phases:
            pre_build:
              commands:
                - echo Installing source NPM dependencies...
                - npm install
            build:
              commands:
                - echo Build started on `date`
                - npm run build
            post_build:
              commands:
                # copy the contents of /build to S3
                - aws s3 cp --recursive --acl public-read ./build s3://${GciWebAppBucket}/ 
                # set the cache-control headers for service-worker.js to prevent
                # browser caching
                - >
                  aws s3 cp --acl public-read 
                  --cache-control="max-age=0, no-cache, no-store, must-revalidate" 
                  ./build/service-worker.js s3://${GciWebAppBucket}/
                # set the cache-control headers for index.html to prevent
                # browser caching
                - >
                  aws s3 cp --acl public-read 
                  --cache-control="max-age=0, no-cache, no-store, must-revalidate" 
                  ./build/index.html s3://${GciWebAppBucket}/
                # invalidate the CloudFront cache for index.html and service-worker.js
                # to force CloudFront to update its edge locations with the new versions
                - >
                  aws cloudfront create-invalidation --distribution-id ${Distribution} 
                  --paths /index.html /service-worker.js
          artifacts:
            files:
              - '**/*'
            base-directory: build

Answer 1

該問題是由於 docker 使用的 Nodejs 版本造成的。 將圖像更改為標准：5.0 並在安裝階段將運行時版本設置為 nodejs 14 完成了這項工作。 下面是完整的 CodeBuild cfn。

CodeBuild:
    Type: 'AWS::CodeBuild::Project'
    Properties:
      Name: !Sub ${AWS::StackName}-CodeBuild
      ServiceRole: !GetAtt CodeBuildRole.Arn
      Artifacts:
        # The downloaded source code for the build will come from CodePipeline
        Type: CODEPIPELINE
        Name: GCIWebApp
      Source: 
        Type: CODEPIPELINE
      Environment:
        # Linux container with node installed
        ComputeType: BUILD_GENERAL1_SMALL
        Type: LINUX_CONTAINER
        Image: "aws/codebuild/standard:5.0"
      Source:
        Type: CODEPIPELINE
        BuildSpec: !Sub |
          version: 0.2
          phases:
            install:
              runtime-versions:
                nodejs: 14
              commands:
                - npm i npm@latest -g
                - npm cache clean --force
                - rm -rf node_modules package-lock.json
                - npm install
            build:
              commands:
                - echo Build started on `date`
                - npm run build
            post_build:
              commands:
                # copy the contents of /build to S3
                - aws s3 cp --recursive --acl public-read ./build s3://${GciWebAppBucket}/ 
                # set the cache-control headers for service-worker.js to prevent
                # browser caching
                - >
                  aws s3 cp --acl public-read 
                  --cache-control="max-age=0, no-cache, no-store, must-revalidate" 
                  ./build/service-worker.js s3://${GciWebAppBucket}/
                # set the cache-control headers for index.html to prevent
                # browser caching
                - >
                  aws s3 cp --acl public-read 
                  --cache-control="max-age=0, no-cache, no-store, must-revalidate" 
                  ./build/index.html s3://${GciWebAppBucket}/
                # invalidate the CloudFront cache for index.html and service-worker.js
                # to force CloudFront to update its edge locations with the new versions
                - >
                  aws cloudfront create-invalidation --distribution-id ${Distribution} 
                  --paths /index.html /service-worker.js
          artifacts:
            files:
              - '**/*'
            base-directory: build