您如何編寫用於 NodeJS 和 AWS CodeBuild 的 buildspec.yml？

Question

我有一個服務於 Angular 前端的 NodeJS 應用程序，該應用程序是使用 AWS Elastic Beanstalk 部署的。 如果我直接將 a.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: 

Answer 1

這是因為我沒有將部署步驟指向 CodeBuild 步驟的工件。 您將在 CodePipeline 中看到這一點。 如果您不告訴 AWS 您的工件包的名稱是什么，它就不知道要部署什么。 您在 CodeBuild 配置中設置 CodeBuild 工件/輸出的名稱。

Answer 2

確保您的 CodeBuild 工件 output 與您的部署工件輸入匹配

以下是使用控制台設想所需更改的一些分步圖像：

1-3。 要編輯您的 CodeBuild 工件 output，請按照以下步驟操作：

4. 這是重要的部分，將這個 Output 工件命名為您選擇的某個名稱

5. 編輯您的部署操作

6. 另一個重要部分，將您的輸入工件命名為與步驟 4 中相同的名稱

7. 確保在兩個階段都單擊“完成”，然后單擊“保存”

謝謝@Jake Chambers，在我花了大約 6 小時試圖找到解決這個問題的方法后，你的回答挽救了我的一天。 我發布這個答案只是因為你的答案有點難以理解而且我幾乎放棄試圖弄清楚你的意思......

Answer 3

dist文件夾永遠不會成為 CodeBuild 創建的工件，因為您是從文件系統的根目錄而不是源目錄的根目錄引用它的位置。 請按如下方式更新 buildspec 'artifacts' 部分：

artifacts:
  files:
    - index.js
    - dist/**/*
    - request-map.js
    - credentials.json
    - node_modules/**/*

Answer 4

您的 .gitignore 文件是否包含“dist”文件夾？ 如果是這樣，請嘗試從您的 .gitignore 文件中排除它，然后重試。