Контейнеризация Углового Приложения С Пакетами Пакетов: Пустой Ответ

ProgramBox

Контейнеризация Углового Приложения С Пакетами Пакетов: Пустой Ответ

Post author:admin
Запись опубликована:13 января, 2022
Post category:Вопросы по программированию

#node.js #angular #buildpack #paketo

Вопрос:

Я хочу создать образ контейнера моего приложения Angular 12 с помощью пакета Paketo buildpack для nodejs. Я создал приложение с помощью 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
➜  ~

Кто-нибудь знает, что пошло не так?

РЕДАКТИРОВАТЬ: В настоящее время я лучше всего предполагаю, что ng serve прослушивает 127.0.0.1:4200, но должен прослушивать 0.0.0.0:4200 трафик для прохождения. Но я не уверен, где искать конфигурацию. В строительном пакете? В угловом.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

Ответ №1:

Я предварю свой ответ, сказав, что есть несколько способов сделать это. Вот два способа, которые я бы предложил:

Локальная Сборка

Создавайте локально, например, запускайте npm build на своей машине.
Добавьте buildpack.yml файл с этим:
```
 staticfile:
  nginx:
    pushstate: true
 
```
Это даст команду сборному пакету staticfile создать конфигурацию Nginx с поддержкой pushstate, которая обычно требуется для одностраничных приложений Javascript.
Выполнить pack build myui -b paketo-buildpacks/nginx -b paketo-community/staticfile -p dist/. Где dist/ находится путь к выходу вашего процесса сборки с шага № 1 (т. Е. Где находится ваш статический HTML/CSS/Javascript).
Убедитесь, что в вашем dist/ пути указан buildpack.yml файл, созданный на предыдущем шаге. это необходимо для того, чтобы пакет сборки staticfile прошел проверку. Если вы видите No buildpack groups passed detection , когда пытаетесь строить, то, скорее всего, именно поэтому.
Затем вы можете выполнить docker run -d -e PORT=8080 -p 8080:8080 myui , и он запустит ваше изображение. Сгенерированный файл nginx.conf должен PORT быть настроен на какой-либо порт, на котором вы хотите, чтобы он прослушивался. Просто убедитесь , что выбранный вами порт соответствует аргументу -p , поэтому docker предоставляет тот же порт.

Преимущество локальной сборки заключается в том, что она проста и просто работает с большинством приложений, потому что выходные данные сборки-это просто статические HTML/CSS/JS и другие файлы ресурсов. Пакет сборки просто добавляет Nginx, и вы отправляетесь на гонки.

Сборка пакетов Сборки

Добавьте buildpack.yml файл с этим:
```
 staticfile:
  nginx:
    pushstate: true
 
```
Это даст команду сборному пакету staticfile создать конфигурацию Nginx с поддержкой pushstate, которая обычно требуется для одностраничных приложений Javascript.

Убедитесь buildpack.yml , что созданный вами файл находится в корневом каталоге вашего проекта, в каталоге, из которого вы запускаете pack build следующий шаг. это необходимо для того, чтобы пакет сборки staticfile прошел проверку. Если вы видите No buildpack groups passed detection , когда пытаетесь строить, то, скорее всего, именно поэтому.
Бежать pack build myui -b paketo-buildpacks/nodejs --env "BP_NODE_RUN_SCRIPTS=build" --env "NODE_ENV=development" --buildpack paketo-buildpacks/nginx --buildpack paketo-community/staticfile

Это гарантирует, что узел и NPM будут установлены, а затем он будет запущен npm build . Это приведет к созданию статических файловых ресурсов из вашего приложения. Затем будет запущен пакет сборки Nginx и staticfile для установки и настройки Nginx для размещения статических файлов для вашего приложения.

Это похоже на локальное построение, но не требует локальной установки узла или NPM. Пакеты для сборки установят их и соберут внутри контейнера.

Причина, по которой я предлагаю один из этих двух процессов сборки, заключается в том, что любой из них приведет к созданию небольшого контейнера запуска, содержащего только ваши статические файлы и Nginx. Это будет меньше, эффективнее и более готово к производству, чем наличие Node.js устанавливается с помощью сервера разработчиков ваших инструментов сборки.

1. Я просто попробовал местную сборку, так как она казалась простой. Я все ERROR: No buildpack groups passed detection. же начинаю понимать. Полная производительность при pastebin.com/S5NMExmL Путь dist/edit содержит index.html, файлы js и т. Д., Как вы предложили.

2. Хорошо, вы вставили файл buildpack.yml dist/edit ? это необходимо для прохождения обнаружения. Я должен был упомянуть об этом в своих инструкциях, извините. Я просто обновил их, чтобы указать на это.

3. О, это сделало свое дело! Однако я все еще получаю 404 от nginx. Я заглянул в контейнер с помощью docker exec и обнаружил, что nginx настроен для обслуживания /workspace/public, но все файлы расположены рядом с nginx.conf в /workspace.

4. Вероятно, вам следует поместить все ваши файлы в папку, так что, возможно, вы хотите запустить pack build -p dist/ вместо этого? Затем вы можете настроить root: edit , и он будет обслуживать все, что есть в edit/ каталоге. github.com/paketo-community/…

5. С -p dist/ я снова получаю ту же ошибку: No buildpack groups passed detection — как вы описали ранее. Есть ли какой-либо источник, который действительно описывает параметры? Ссылка, которую вы разместили, приятно видеть, что там есть, но на самом деле не помогает, когда вы еще не знаете, что это такое. Я прочитал root public , что по умолчанию установлено значение, и, поскольку nginx.conf устанавливается /workspace/public в корень html, я решил, что public это public из yml. Мне кажется, что это игнорируется.

Метки: Контейнеризация Углового Приложения С Пакетами Пакетов: Пустой Ответ