I want to create a container image of my Angular 12 application with the Paketo buildpack for nodejs. I created the application via Angular CLI and coded it away until now I want to deploy it.
To create the container, I followed the instructions in the paketo samples repository and ran this command:
pack build myui --buildpack gcr.io/paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development"
This works fine as along as I delete the node_modules directory before running pack.
Now I wanted to test the image locally and tried to start it with
docker run --tty --publish 4200:4200 myui
It seems to start successfully:
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Size
main.js | main | 6.14 MB
vendor.js | vendor | 4.22 MB
styles.css | styles | 159.33 kB
polyfills.js | polyfills | 128.67 kB
runtime.js | runtime | 6.56 kB
| Initial Total | 10.65 MB
Build at: 2021-08-13T10:06:14.282Z - Hash: 5351646d56eaa8873a38 - Time: 15305ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully.
✔ Browser application bundle generation complete.
5 unchanged chunks
Build at: 2021-08-13T10:06:15.412Z - Hash: 149b56c677aa74ba2361 - Time: 577ms
✔ Compiled successfully.
Now here is the problem:
➜ ~ docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
6a29ce4cdc86 myui "/cnb/process/web" 11 minutes ago Up 11 minutes 0.0.0.0:4200->4200/tcp, :::4200->4200/tcp confident_grothendieck
➜ ~ curl -vvv http://localhost:4200/
* Trying ::1...
* TCP_NODELAY set
* Connected to localhost (::1) port 4200 (#0)
> GET / HTTP/1.1
> Host: localhost:4200
> User-Agent: curl/7.64.1
> Accept: */*
>
* Empty reply from server
* Connection #0 to host localhost left intact
curl: (52) Empty reply from server
* Closing connection 0
➜ ~
Does anyone know what went wrong?
EDIT: My best guess currently is that ng serve listens on 127.0.0.1:4200 but should be listening on 0.0.0.0:4200 for traffic to go through. But I am not sure where to look for a configuration. In the buildpack? In angular.cli? Somewhere else?
EDIT: As per request, the full output of the pack command:
➜ ui2 git:(master) pack build myui --buildpack gcr.io/paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development"
full: Pulling from paketobuildpacks/builder
Digest: sha256:b34eb3b43d6bf20623ad92523e9e1a055289e74a2fa661adee5d1d90e25afd48
Status: Image is up to date for paketobuildpacks/builder:full
full-cnb: Pulling from paketobuildpacks/run
Digest: sha256:691eb052281456ab5b5a62d1a0e5a67bf7246783565bbecd239c5c9cf1bf51ec
Status: Image is up to date for paketobuildpacks/run:full-cnb
latest: Pulling from paketo-buildpacks/nodejs
Digest: sha256:9887bb6b7d0c410ccdf6fa940658dddecfce5ded1ac5696ced608c78649594b3
Status: Image is up to date for gcr.io/paketo-buildpacks/nodejs:latest
===> DETECTING
5 of 8 buildpacks participating
paketo-buildpacks/ca-certificates 2.3.2
paketo-buildpacks/node-engine 0.6.2
paketo-buildpacks/npm-install 0.4.0
paketo-buildpacks/node-run-script 0.1.0
paketo-buildpacks/npm-start 0.3.0
===> ANALYZING
Previous image with name "myui" not found
===> RESTORING
===> BUILDING
Paketo CA Certificates Buildpack 2.3.2
https://github.com/paketo-buildpacks/ca-certificates
Launch Helper: Contributing to layer
Creating /layers/paketo-buildpacks_ca-certificates/helper/exec.d/ca-certificates-helper
Paketo Node Engine Buildpack 0.6.2
Resolving Node Engine version
Candidate version sources (in priority order):
-> ""
<unknown> -> ""
Selected Node Engine version (using ): 14.17.5
Executing build process
Installing Node Engine 14.17.5
Completed in 7.96s
Configuring build environment
NODE_ENV -> "development"
NODE_HOME -> "/layers/paketo-buildpacks_node-engine/node"
NODE_VERBOSE -> "false"
Configuring launch environment
NODE_ENV -> "production"
NODE_HOME -> "/layers/paketo-buildpacks_node-engine/node"
NODE_VERBOSE -> "false"
Writing profile.d/0_memory_available.sh
Calculates available memory based on container limits at launch time.
Made available in the MEMORY_AVAILABLE environment variable.
Paketo NPM Install Buildpack 0.4.0
Resolving installation process
Process inputs:
node_modules -> "Not found"
npm-cache -> "Not found"
package-lock.json -> "Found"
Selected NPM build process: 'npm ci'
Executing build process
Running 'npm ci --unsafe-perm --cache /layers/paketo-buildpacks_npm-install/npm-cache'
Completed in 23.58s
Configuring launch environment
NPM_CONFIG_LOGLEVEL -> "error"
Configuring environment shared by build and launch
PATH -> "$PATH:/layers/paketo-buildpacks_npm-install/modules/node_modules/.bin"
Paketo Node Run Script Buildpack 0.1.0
Executing build process
Executing scripts
Running 'npm run-script build'
> edit@0.0.0 build /workspace
> ng build
- Generating browser application bundles (phase: setup)...
Compiling @angular/core : es2015 as esm2015
Compiling @angular/cdk/keycodes : es2015 as esm2015
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/cdk/observers : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/cdk/collections : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/cdk/platform : es2015 as esm2015
Compiling @angular/cdk/bidi : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/cdk/a11y : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/flex-layout/core : es2015 as esm2015
Compiling @angular/cdk/scrolling : es2015 as esm2015
Compiling @angular/cdk/portal : es2015 as esm2015
Compiling @angular/cdk/layout : es2015 as esm2015
Compiling @angular/material/core : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/cdk/overlay : es2015 as esm2015
Compiling @angular/flex-layout/extended : es2015 as esm2015
Compiling @angular/material/button : es2015 as esm2015
Compiling @angular/flex-layout/flex : es2015 as esm2015
Compiling @angular/flex-layout/grid : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/material/sidenav : es2015 as esm2015
Compiling @angular/material/snack-bar : es2015 as esm2015
Compiling @angular/material/toolbar : es2015 as esm2015
Compiling @angular/material/icon : es2015 as esm2015
Compiling @angular/flex-layout : es2015 as esm2015
Compiling @angular/material/tabs : es2015 as esm2015
✔ Browser application bundle generation complete.
✔ Browser application bundle generation complete.
- Copying assets...
✔ Copying assets complete.
- Generating index html...
✔ Index html generation complete.
Initial Chunk Files | Names | Size
main.a6760a1641b4d1eaecd4.js | main | 4.50 MB
styles.8a29e51b15a5b6e5b823.css | styles | 90.06 kB
polyfills.a6c44b054b34d2bec03f.js | polyfills | 35.96 kB
runtime.543bd02f52b0afc6ba6a.js | runtime | 1015 bytes
| Initial Total | 4.63 MB
Build at: 2021-08-16T15:19:15.350Z - Hash: 0958e10b7d5232954d2e - Time: 46738ms
./src/app/footer/footer.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):
Warning
(7:3) postcss-preset-env: start value has mixed support, consider using flex-start instead
./src/app/home/home.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):
Warning
(84:3) postcss-preset-env: start value has mixed support, consider using flex-start instead
./src/app/home/home.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):
Warning
(85:3) postcss-preset-env: start value has mixed support, consider using flex-start instead
Warning: /workspace/src/app/resize.service.ts depends on 'element-resize-detector'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: initial exceeded maximum budget. Budget 500.00 kB was not met by 4.14 MB with a total of 4.63 MB.
Completed in 51.831s
Paketo NPM Start Buildpack 0.3.0
Assigning launch processes
web: ng serve
===> EXPORTING
Adding layer 'paketo-buildpacks/ca-certificates:helper'
Adding layer 'paketo-buildpacks/node-engine:node'
Adding layer 'paketo-buildpacks/npm-install:modules'
Adding layer 'paketo-buildpacks/npm-install:npm-cache'
Adding 1/1 app layer(s)
Adding layer 'launcher'
Adding layer 'config'
Adding layer 'process-types'
Adding label 'io.buildpacks.lifecycle.metadata'
Adding label 'io.buildpacks.build.metadata'
Adding label 'io.buildpacks.project.metadata'
Setting default process type 'web'
Saving myui...
*** Images (b9cd591df4be):
myui
Adding cache layer 'paketo-buildpacks/node-engine:node'
Adding cache layer 'paketo-buildpacks/npm-install:modules'
Adding cache layer 'paketo-buildpacks/npm-install:npm-cache'
Successfully built image myui
Paketo now has a Web Servers buildpack designed for use-cases just like this. See the Paketo documentation for steps to containerize Angular, React, Vue.js, or other front end framework applications with the buildpack.
The pack build command you'll probably want is:
pack build myui -b paketo-buildpacks/web-servers \
--env "BP_WEB_SERVER=nginx" \
--env "BP_WEB_SERVER_ROOT=dist" \
--env "BP_WEB_SERVER_ENABLE_PUSH_STATE=true" \
--env "NODE_ENV=development"
This will:
dist directory during buildnode_modules