nodejs 用の Paketo ビルドパックを使用して、Angular 12 アプリケーションのコンテナー イメージを作成したいと考えています。Angular CLI を使用してアプリケーションを作成し、それをデプロイしたいと思うまでコーディングしました。
コンテナーを作成するには、paketo サンプル リポジトリの指示に従い、次のコマンドを実行しました。
pack build myui --buildpack gcr.io/paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development"
を実行する前に node_modules ディレクトリを削除すると、これは正常に機能しpack
ます。
今、私はイメージをローカルでテストしたいと思い、それを開始しようとしました
docker run --tty --publish 4200:4200 myui
正常に起動したようです:
✔ 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.
ここに問題があります:
➜ ~ 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
➜ ~
誰が何がうまくいかなかったのか知っていますか?
編集:現在、127.0.0.1:4200でリッスンしているが、トラフィックが通過するのをng serve
リッスンしている必要があると思います。0.0.0.0:4200
しかし、どこで構成を探すべきかわかりません。ビルドパックで?angular.cliで?何処か別の場所?
編集: 要求に従って、pack
コマンドの完全な出力:
➜ 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