使用 Paketo Buildpacks 容器化 Angular 应用程序：空回复

Question

我想使用 Nodejs 的 Paketo 构建包创建 Angular 12 应用程序的容器映像。我通过 Angular CLI 创建了该应用程序并对其进行了编码，直到现在我想要部署它。

\n

为了创建容器，我按照 paketo 示例存储库中的说明操作并运行以下命令：

\n

pack build myui --buildpack gcr.io/paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development"\n

\n

只要我在运行之前删除 node_modules 目录，这就可以正常工作pack。

\n

现在我想在本地测试图像并尝试启动它

\n

docker run --tty --publish 4200:4200 myui\n

\n

看来启动成功了：

\n

\xe2\x9c\x94 Browser application bundle generation complete.\n\nInitial Chunk Files | Names         |      Size\nmain.js             | main          |   6.14 MB\nvendor.js           | vendor        |   4.22 MB\nstyles.css          | styles        | 159.33 kB\npolyfills.js        | polyfills     | 128.67 kB\nruntime.js          | runtime       |   6.56 kB\n\n                    | Initial Total |  10.65 MB\n\nBuild at: 2021-08-13T10:06:14.282Z - Hash: 5351646d56eaa8873a38 - Time: 15305ms\n\n** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **\n\n\n\xe2\x9c\x94 Compiled successfully.\n\xe2\x9c\x94 Browser application bundle generation complete.\n\n5 unchanged chunks\n\nBuild at: 2021-08-13T10:06:15.412Z - Hash: 149b56c677aa74ba2361 - Time: 577ms\n\n\xe2\x9c\x94 Compiled successfully. \n

\n

现在问题来了：

\n

\xe2\x9e\x9c  ~ docker ps\nCONTAINER ID   IMAGE     COMMAND              CREATED          STATUS          PORTS                                       NAMES\n6a29ce4cdc86   myui      "/cnb/process/web"   11 minutes ago   Up 11 minutes   0.0.0.0:4200->4200/tcp, :::4200->4200/tcp   confident_grothendieck\n\xe2\x9e\x9c  ~ curl -vvv http://localhost:4200/\n*   Trying ::1...\n* TCP_NODELAY set\n* Connected to localhost (::1) port 4200 (#0)\n> GET / HTTP/1.1\n> Host: localhost:4200\n> User-Agent: curl/7.64.1\n> Accept: */*\n>\n* Empty reply from server\n* Connection #0 to host localhost left intact\ncurl: (52) Empty reply from server\n* Closing connection 0\n\xe2\x9e\x9c  ~\n

\n

有谁知道出了什么问题？

\n

编辑：我目前最好的猜测是ng serve监听 127.0.0.1:4200 但应该监听0.0.0.0:4200流量通过。但我不确定在哪里寻找配置。在构建包中？在 Angular.cli 中？别的地方？

\n

编辑：根据请求，pack命令的完整输出：

\n

\xe2\x9e\x9c  ui2 git:(master) pack build myui --buildpack gcr.io/paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development"\nfull: Pulling from paketobuildpacks/builder\nDigest: sha256:b34eb3b43d6bf20623ad92523e9e1a055289e74a2fa661adee5d1d90e25afd48\nStatus: Image is up to date for paketobuildpacks/builder:full\nfull-cnb: Pulling from paketobuildpacks/run\nDigest: sha256:691eb052281456ab5b5a62d1a0e5a67bf7246783565bbecd239c5c9cf1bf51ec\nStatus: Image is up to date for paketobuildpacks/run:full-cnb\nlatest: Pulling from paketo-buildpacks/nodejs\nDigest: sha256:9887bb6b7d0c410ccdf6fa940658dddecfce5ded1ac5696ced608c78649594b3\nStatus: Image is up to date for gcr.io/paketo-buildpacks/nodejs:latest\n===> DETECTING\n5 of 8 buildpacks participating\npaketo-buildpacks/ca-certificates 2.3.2\npaketo-buildpacks/node-engine     0.6.2\npaketo-buildpacks/npm-install     0.4.0\npaketo-buildpacks/node-run-script 0.1.0\npaketo-buildpacks/npm-start       0.3.0\n===> ANALYZING\nPrevious image with name "myui" not found\n===> RESTORING\n===> BUILDING\n\nPaketo CA Certificates Buildpack 2.3.2\n  https://github.com/paketo-buildpacks/ca-certificates\n  Launch Helper: Contributing to layer\n    Creating /layers/paketo-buildpacks_ca-certificates/helper/exec.d/ca-certificates-helper\nPaketo Node Engine Buildpack 0.6.2\n  Resolving Node Engine version\n    Candidate version sources (in priority order):\n                -> ""\n      <unknown> -> ""\n\n    Selected Node Engine version (using ): 14.17.5\n\n  Executing build process\n    Installing Node Engine 14.17.5\n      Completed in 7.96s\n\n  Configuring build environment\n    NODE_ENV     -> "development"\n    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"\n    NODE_VERBOSE -> "false"\n\n  Configuring launch environment\n    NODE_ENV     -> "production"\n    NODE_HOME    -> "/layers/paketo-buildpacks_node-engine/node"\n    NODE_VERBOSE -> "false"\n\n    Writing profile.d/0_memory_available.sh\n      Calculates available memory based on container limits at launch time.\n      Made available in the MEMORY_AVAILABLE environment variable.\n\nPaketo NPM Install Buildpack 0.4.0\n  Resolving installation process\n    Process inputs:\n      node_modules      -> "Not found"\n      npm-cache         -> "Not found"\n      package-lock.json -> "Found"\n\n    Selected NPM build process: 'npm ci'\n\n  Executing build process\n    Running 'npm ci --unsafe-perm --cache /layers/paketo-buildpacks_npm-install/npm-cache'\n      Completed in 23.58s\n\n  Configuring launch environment\n    NPM_CONFIG_LOGLEVEL -> "error"\n\n  Configuring environment shared by build and launch\n    PATH -> "$PATH:/layers/paketo-buildpacks_npm-install/modules/node_modules/.bin"\n\n\nPaketo Node Run Script Buildpack 0.1.0\n  Executing build process\n    Executing scripts\n      Running 'npm run-script build'\n\n        > edit@0.0.0 build /workspace\n        > ng build\n\n        - Generating browser application bundles (phase: setup)...\n        Compiling @angular/core : es2015 as esm2015\n        Compiling @angular/cdk/keycodes : es2015 as esm2015\n        Compiling @angular/animations : es2015 as esm2015\n        Compiling @angular/animations/browser : es2015 as esm2015\n        Compiling @angular/cdk/observers : es2015 as esm2015\n        Compiling @angular/common : es2015 as esm2015\n        Compiling @angular/cdk/collections : es2015 as esm2015\n        Compiling @angular/platform-browser : es2015 as esm2015\n        Compiling @angular/cdk/platform : es2015 as esm2015\n        Compiling @angular/cdk/bidi : es2015 as esm2015\n        Compiling @angular/platform-browser/animations : es2015 as esm2015\n        Compiling @angular/cdk/a11y : es2015 as esm2015\n        Compiling @angular/forms : es2015 as esm2015\n        Compiling @angular/flex-layout/core : es2015 as esm2015\n        Compiling @angular/cdk/scrolling : es2015 as esm2015\n        Compiling @angular/cdk/portal : es2015 as esm2015\n        Compiling @angular/cdk/layout : es2015 as esm2015\n        Compiling @angular/material/core : es2015 as esm2015\n        Compiling @angular/common/http : es2015 as esm2015\n        Compiling @angular/cdk/overlay : es2015 as esm2015\n        Compiling @angular/flex-layout/extended : es2015 as esm2015\n        Compiling @angular/material/button : es2015 as esm2015\n        Compiling @angular/flex-layout/flex : es2015 as esm2015\n        Compiling @angular/flex-layout/grid : es2015 as esm2015\n        Compiling @angular/platform-browser-dynamic : es2015 as esm2015\n        Compiling @angular/router : es2015 as esm2015\n        Compiling @angular/material/sidenav : es2015 as esm2015\n        Compiling @angular/material/snack-bar : es2015 as esm2015\n        Compiling @angular/material/toolbar : es2015 as esm2015\n        Compiling @angular/material/icon : es2015 as esm2015\n        Compiling @angular/flex-layout : es2015 as esm2015\n        Compiling @angular/material/tabs : es2015 as esm2015\n        \xe2\x9c\x94 Browser application bundle generation complete.\n        \xe2\x9c\x94 Browser application bundle generation complete.\n        - Copying assets...\n        \xe2\x9c\x94 Copying assets complete.\n        - Generating index html...\n        \xe2\x9c\x94 Index html generation complete.\n\n        Initial Chunk Files               | Names         |       Size\n        main.a6760a1641b4d1eaecd4.js      | main          |    4.50 MB\n        styles.8a29e51b15a5b6e5b823.css   | styles        |   90.06 kB\n        polyfills.a6c44b054b34d2bec03f.js | polyfills     |   35.96 kB\n        runtime.543bd02f52b0afc6ba6a.js   | runtime       | 1015 bytes\n\n        | Initial Total |    4.63 MB\n\n        Build at: 2021-08-16T15:19:15.350Z - Hash: 0958e10b7d5232954d2e - Time: 46738ms\n\n        ./src/app/footer/footer.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):\n        Warning\n\n        (7:3) postcss-preset-env: start value has mixed support, consider using flex-start instead\n\n        ./src/app/home/home.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):\n        Warning\n\n        (84:3) postcss-preset-env: start value has mixed support, consider using flex-start instead\n\n        ./src/app/home/home.component.scss - Warning: Module Warning (from ../layers/paketo-buildpacks_npm-install/modules/node_modules/postcss-loader/dist/cjs.js):\n        Warning\n\n        (85:3) postcss-preset-env: start value has mixed support, consider using flex-start instead\n\n        Warning: /workspace/src/app/resize.service.ts depends on 'element-resize-detector'. CommonJS or AMD dependencies can cause optimization bailouts.\n        For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies\n\n        Warning: initial exceeded maximum budget. Budget 500.00 kB was not met by 4.14 MB with a total of 4.63 MB.\n\n\n\n      Completed in 51.831s\n\nPaketo NPM Start Buildpack 0.3.0\n  Assigning launch processes\n    web: ng serve\n\n===> EXPORTING\nAdding layer 'paketo-buildpacks/ca-certificates:helper'\nAdding layer 'paketo-buildpacks/node-engine:node'\nAdding layer 'paketo-buildpacks/npm-install:modules'\nAdding layer 'paketo-buildpacks/npm-install:npm-cache'\nAdding 1/1 app layer(s)\nAdding layer 'launcher'\nAdding layer 'config'\nAdding layer 'process-types'\nAdding label 'io.buildpacks.lifecycle.metadata'\nAdding label 'io.buildpacks.build.metadata'\nAdding label 'io.buildpacks.project.metadata'\nSetting default process type 'web'\nSaving myui...\n*** Images (b9cd591df4be):\n      myui\nAdding cache layer 'paketo-buildpacks/node-engine:node'\nAdding cache layer 'paketo-buildpacks/npm-install:modules'\nAdding cache layer 'paketo-buildpacks/npm-install:npm-cache'\nSuccessfully built image myui\n

\n

Answer 1

Paketo 现在拥有一个专为此类用例设计的 Web 服务器构建包。请参阅 Paketo文档，了解使用 buildpack 容器化 Angular、React、Vue.js 或其他前端框架应用程序的步骤。

pack build您可能需要的命令是：

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"

这会：

• 设置构建包以提供dist在构建期间编译到目录中的静态资源
• 自动生成启用推送状态路由的 nginx.conf，您可能需要单页应用程序使用该路由
• 自动生成一个精简的 Docker 镜像，不包含您庞大的内容node_modules