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

Question

我正在使用CodeBuild在S3上部署一个react网站。当我在本地运行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, 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