How do you write buildspec.yml for use with NodeJS and AWS CodeBuild?

Question

I have a NodeJS app that serves an Angular frontend, this app is deployed using AWS Elastic Beanstalk. If I were to directly upload a.zip file to Elastic Beanstalk, it would contain:

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

This is tested and worked great. But now I want a CD pipeline

When you build the Angular app ( ng build ), it compiles all the artifacts into a \dist folder at the root of your project. I have successfully created a continuous delivery pipeline, but to get it to work I had to commit the \dist folder to my code repository. This is obviously not ideal.

To improve my architecture, I knew I had to create a build stage. I've successfully added the build stage, and it runs fine with my buildspec.yml file, but when I navigate to my domain I get the error:

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

Here is my buildspec.yml file

# 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/**/*

Every other config item with respect to AWS is default.

I checked /var/app/current (where the artifacts get written) on my EC2 instance, and everything seemed to have copied over except the dist folder??? What is wrong with my setup?

Here are the logs from 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

It was because I was not pointing the deploy step to the artifacts of the CodeBuild step. You will see this in CodePipeline. If you don't tell AWS what the name of your artifacts package is, it doesn't know what to deploy. You set the name of your CodeBuild artifacts/output in the CodeBuild configuration.

Answer 2

Make sure that your CodeBuild artifact output match your deploy artifact input

here are some step by step images to envision the required changes using the console:

1-3. To edit your CodeBuild artifact output follow these steps:

4. Here is the important part, name this Output artifact to some name of your choice

5. Edit your deploy action

6. Another important part, name your Input artifact to the same name from step 4

7. Make sure to click 'Done' for both stages and then click 'Save'

Thank you @Jake Chambers your answer saved my day after trying to find a solution to this problem for about 6h. I posted this answer just because your answer is a bit hard to understand and I almost gave up trying to figure out what you meant to say...

Answer 3

The dist folder never makes into the artifact that CodeBuild creates because you are referring to its location from root of filesystem instead of root of source directory. Please update the buildspec 'artifacts' section as follows:

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

Answer 4

Is your .gitignore file includes "dist" folder? If so, please try exclude this from your .gitignore file and try again.