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

> [email protected] 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/[email protected] postinstall /codebuild/output/src809368536/src/node_modules/@angular/cli
> node ./bin/postinstall/script.js

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/webpack-dev-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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

> [email protected] 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: 

Solution

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.

Comments

[Jake Chambers]

This doesnt work either, I think the directory isnt being created to begin with because if I add, "test.js" to artifacts that gets copied over fine.

[shariqmaws]

please install tree and do a "tree ." as last command to inspect directory and confirm if dist dir is there

[shariqmaws]

apt-get install tree

[Jake Chambers]

I've noticed regardless of what I put under artifacts, all of my project files are still built and deployed into the app directory. It seems that this artifacts notation is not working correctly