react-scripts 构建在本地工作但在 CodeBuild 中失败

如何解决react-scripts 构建在本地工作但在 CodeBuild 中失败

我正在使用 CodeBuild 将 React 网站部署到 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)

我尝试在软件包中安装 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,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

解决方法

问题是由于 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,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