时间戳

首页 > 解决方案 > 您如何编写用于 NodeJS 和 AWS CodeBuild 的 buildspec.yml？

angular - 您如何编写用于 NodeJS 和 AWS CodeBuild 的 buildspec.yml？

问题描述

我有一个服务于 Angular 前端的 NodeJS 应用程序，该应用程序是使用 AWS Elastic Beanstalk 部署的。如果我要直接将 .zip 文件上传到 Elastic Beanstalk，它将包含：

\dist
request-map.js
credentials.json
server.js

这是经过测试的，效果很好。但现在我想要一个 CD 管道

当您构建 Angular 应用程序 ( ng build) 时，它会将所有工件编译到\dist项目根目录下的文件夹中。我已经成功创建了一个持续交付管道，但是为了让它工作，我必须将该\dist文件夹提交到我的代码存储库。这显然不理想。

为了改进我的架构，我知道我必须创建一个构建阶段。我已经成功添加了构建阶段，它在我的buildspec.yml文件中运行良好，但是当我导航到我的域时，我得到了错误：

Error: ENOENT: no such file or directory, stat '/var/app/current/dist/my-angular-app/index.html'

这是我的 buildspec.yml 文件

# Do not change version. This is the version of aws buildspec, not the version of your buldspec file.
version: 0.2
phases:
  pre_build:
    commands:
      - echo Installing source NPM dependencies...
      - npm install
  build:
    commands:
      - echo Build started on `date`
      - echo Compiling the dist folder
      - npm run-script build
  post_build:
    commands:
      - echo Build completed on `date`
# Include only the files required for your application to run.
artifacts:
  files:
    - index.js
    - dist/**/*
    - request-map.js
    - credentials.json
    - node_modules/**/*

关于 AWS 的所有其他配置项都是默认的。

我在我的 EC2 实例上检查了/var/app/current（工件被写入的位置），除了 dist 文件夹之外的所有内容似乎都被复制了？？？我的设置有什么问题？

以下是来自 AWS CodeBuild 的日志

[Container] 2020/03/27 00:49:50 Waiting for agent ping
[Container] 2020/03/27 00:49:52 Waiting for DOWNLOAD_SOURCE
[Container] 2020/03/27 00:49:52 Phase is DOWNLOAD_SOURCE
[Container] 2020/03/27 00:49:52 CODEBUILD_SRC_DIR=/codebuild/output/src809368536/src
[Container] 2020/03/27 00:49:52 YAML location is /codebuild/output/src809368536/src/buildspec.yml
[Container] 2020/03/27 00:49:52 Processing environment variables
[Container] 2020/03/27 00:49:52 No runtime version selected in buildspec.
[Container] 2020/03/27 00:49:52 Moving to directory /codebuild/output/src809368536/src
[Container] 2020/03/27 00:49:52 Registering with agent
[Container] 2020/03/27 00:49:52 Phases found in YAML: 3
[Container] 2020/03/27 00:49:52  PRE_BUILD: 2 commands
[Container] 2020/03/27 00:49:52  BUILD: 3 commands
[Container] 2020/03/27 00:49:52  POST_BUILD: 1 commands
[Container] 2020/03/27 00:49:52 Phase complete: DOWNLOAD_SOURCE State: SUCCEEDED
[Container] 2020/03/27 00:49:52 Phase context status code:  Message: 
[Container] 2020/03/27 00:49:52 Entering phase INSTALL
[Container] 2020/03/27 00:49:52 Phase complete: INSTALL State: SUCCEEDED
[Container] 2020/03/27 00:49:52 Phase context status code:  Message: 
[Container] 2020/03/27 00:49:52 Entering phase PRE_BUILD
[Container] 2020/03/27 00:49:52 Running command echo Installing source NPM dependencies...
Installing source NPM dependencies...

[Container] 2020/03/27 00:49:52 Running command npm install

> core-js@3.6.0 postinstall /codebuild/output/src809368536/src/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

·[96mThank you for using core-js (·[94m https://github.com/zloirock/core-js ·[96m) for polyfilling JavaScript standard library!·[0m

·[96mThe project needs your help! Please consider supporting of core-js on Open Collective or Patreon: ·[0m
·[96m>·[94m https://opencollective.com/core-js ·[0m
·[96m>·[94m https://www.patreon.com/zloirock ·[0m

·[96mAlso, the author of core-js (·[94m https://github.com/zloirock ·[96m) is looking for a good job -)·[0m


> @angular/cli@9.0.2 postinstall /codebuild/output/src809368536/src/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 1357 packages from 1158 contributors and audited 15459 packages in 26.496s

31 packages are looking for funding
  run `npm fund` for details

found 72 low severity vulnerabilities
  run `npm audit fix` to fix them, or `npm audit` for details

[Container] 2020/03/27 00:50:27 Phase complete: PRE_BUILD State: SUCCEEDED
[Container] 2020/03/27 00:50:27 Phase context status code:  Message: 
[Container] 2020/03/27 00:50:27 Entering phase BUILD
[Container] 2020/03/27 00:50:27 Running command echo Build started on `date`
Build started on Fri Mar 27 00:50:27 UTC 2020

[Container] 2020/03/27 00:50:27 Running command echo Compiling the dist folder
Compiling the dist folder

[Container] 2020/03/27 00:50:27 Running command npm run-script build

> my-angular-app@0.0.0 build /codebuild/output/src809368536/src
> ng build


Compiling @angular/core : es2015 as esm2015

Compiling @angular/common : es2015 as esm2015

Compiling @angular/platform-browser : es2015 as esm2015

Compiling @angular/platform-browser-dynamic : es2015 as esm2015

Compiling @angular/forms : es2015 as esm2015

Compiling @angular/common/http : es2015 as esm2015

Compiling @fortawesome/angular-fontawesome : es2015 as esm2015

Compiling @angular/animations : es2015 as esm2015

Compiling ngx-spinner : es2015 as esm2015

Compiling @angular/flex-layout/core : es2015 as esm2015

Compiling @angular/flex-layout/extended : es2015 as esm2015

Compiling @angular/cdk/bidi : es2015 as esm2015

Compiling @angular/flex-layout/flex : es2015 as esm2015

Compiling @angular/flex-layout/grid : es2015 as esm2015

Compiling @angular/flex-layout : es2015 as esm2015

Compiling @angular/animations/browser : es2015 as esm2015

Compiling @angular/platform-browser/animations : es2015 as esm2015

Compiling @angular/cdk/keycodes : es2015 as esm2015

Compiling @angular/cdk/platform : es2015 as esm2015

Compiling @angular/cdk/observers : es2015 as esm2015

Compiling @angular/cdk/a11y : es2015 as esm2015

Compiling @angular/material/core : es2015 as esm2015

Compiling @angular/cdk/collections : es2015 as esm2015

Compiling @angular/cdk/scrolling : es2015 as esm2015

Compiling @angular/cdk/portal : es2015 as esm2015

Compiling @angular/cdk/overlay : es2015 as esm2015

Compiling @angular/material/form-field : es2015 as esm2015

Compiling @angular/material/autocomplete : es2015 as esm2015

Compiling @angular/cdk/text-field : es2015 as esm2015

Compiling @angular/material/input : es2015 as esm2015

Compiling @angular/material/button : es2015 as esm2015

Compiling @angular/material/dialog : es2015 as esm2015

Compiling @angular/material/datepicker : es2015 as esm2015

Compiling @angular/material/select : es2015 as esm2015

Compiling @angular/cdk/layout : es2015 as esm2015

Compiling @angular/material/tooltip : es2015 as esm2015

Compiling @angular/router : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {main} main-es2015.js, main-es2015.js.map (main) 273 kB [initial] [rendered]
chunk {main} main-es5.js, main-es5.js.map (main) 281 kB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 140 kB [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 647 kB [initial] [rendered]
chunk {styles} styles-es2015.js, styles-es2015.js.map (styles) 597 kB [initial] [rendered]
chunk {styles} styles-es5.js, styles-es5.js.map (styles) 599 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 6.16 MB [initial] [rendered]
chunk {vendor} vendor-es5.js, vendor-es5.js.map (vendor) 7.12 MB [initial] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 86.1 kB [entry] [rendered]
Date: 2020-03-27T00:52:04.592Z - Hash: d106b8555054b96992cc - Time: 94882ms

[Container] 2020/03/27 00:52:04 Phase complete: BUILD State: SUCCEEDED
[Container] 2020/03/27 00:52:04 Phase context status code:  Message: 
[Container] 2020/03/27 00:52:04 Entering phase POST_BUILD
[Container] 2020/03/27 00:52:04 Running command echo Build completed on `date`
Build completed on Fri Mar 27 00:52:04 UTC 2020

[Container] 2020/03/27 00:52:04 Phase complete: POST_BUILD State: SUCCEEDED
[Container] 2020/03/27 00:52:04 Phase context status code:  Message: 
[Container] 2020/03/27 00:52:04 Phase complete: UPLOAD_ARTIFACTS State: SUCCEEDED
[Container] 2020/03/27 00:52:04 Phase context status code:  Message:

标签： angularamazon-ec2amazon-elastic-beanstalkaws-codepipelineaws-codebuild

解决方案

这是因为我没有将部署步骤指向 CodeBuild 步骤的工件。您将在 CodePipeline 中看到这一点。如果您不告诉 AWS 您的工件包的名称是什么，它就不知道要部署什么。您在 CodeBuild 配置中设置 CodeBuild 工件/输出的名称。

推荐阅读