Рубрики
Uncategorized

Построить и запустить угловое приложение в контейнере докера

Обложка изображения Алиса Ахтергоф на Unsplash В этом сообщении я хотел бы показать вам, как запустить Y … Теги с докером, начинающими, угловыми, дежопами.

Руки на доке (5 части серии)

Обложка изображения по Алиса Ахтергоф. на Бессмысленно

В этом сообщении я хотел бы показать вам, как запустить ваше угловое приложение в контейнере Docker, затем введем многоступенчатую сборку докера, которая сделает контейнер меньше и вашу работу более автоматизирован.

Без дальнейшего вступления, давайте грязным руками и поместите угловое приложение в контейнер докена. С целью этого поста в блоге я буду использовать свой старый проект — Aston-Villa-App . Это простая приборная панель с заходом из лиги одного из моих любимых футбольных клубов — Aston Villa.

Но если вы хотите использовать свой проект, вы можете пойти с ним, все шаги будут такими же, как для моего приложения.

ОК, чтобы получить мое приложение, вам нужно сначала клонировать его, поэтому откройте терминал и введите:

> git clone https://github.com/wkrzywiec/aston-villa-app.git

Теперь у вас есть в вашей локальной папке, а затем ввести его. Далее убедитесь, что вы установили Node.js и угловые CLI на местном ПК. Полная инструкция можно найти на Официальный угловой сайт Отказ

Теперь, если вы установили оба предварительных условия, вы можете компилировать угловое приложение. Поэтому откройте терминал в корневой папке приложения и типа:

> ng build --prod

Это приведет к созданию новой папки, называемой Dist/Aston-Villa-App в котором все скомпилированные файлы поставлены.

Затем создайте новый файл под названием Dockerfile Это будет расположено в корневой папке проекта. Это должно иметь эти следующие линии:

FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY /dist/aston-villa-app /usr/share/nginx/html

Этот простой DockerFile скажет Docker сделать три вещи:

  • сначала получить NGINX Docker Image из Docker Hub Тег с 1.17.1-Alpine. (Это как номер версии),

  • Затем скопируйте-вставьте конфигурацию Nginx по умолчанию,

  • И, наконец, скопируйте-вставьте скомпилированное приложение (мы сделали его на предыдущем шаге) к контейнеру.

Мой файл конфигурации NGINX по умолчанию выглядит следующим образом (он находится в том же каталоге, что и DockerFile):

events{}

http {

    include /etc/nginx/mime.types;

    server {

        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        location / {
                try_files $uri $uri/ /index.html;
        }
    }
}

Я не хочу проходить так много в деталях, что здесь значит каждая строка (если вы хотите, есть две очень хорошие ссылки с большим объяснением в конце этой статьи). В общем, здесь мы определяем сервер, на котором будет проведен приложение, его поведение порта и по умолчанию.

Наконец, вернитесь к терминалу и используйте эту команду:

> docker build -t av-app-image .

Если вы проверяете список локально доступных документов Docker, вы должны получить аналогичный выход:

> docker image ls

REPOSITORY    TAG            IMAGE ID      
av-app-image  latest         a160a7494a19      
nginx         1.17.1-alpine  ea1193fd3dde

Чтобы запустить изображение, которое вы только что создали, используйте следующую команду:

> docker run --name av-app-container -d -p 8080:80 av-app-image

С нем сначала вы даете имя контейнеру ( --name AV-App-Containter ), затем убедитесь, что он будет работать в фоновом режиме ( -D ), затем вы на карте контейнеров Ваш местный ( -P 8080: 80 ) И, наконец, вы выбираете изображение докера, чтобы быть то, что вы только что создали — AV-App-изображение Отказ

Чтобы проверить, работает ли новый контейнер в типе терминала:

> docker container ls

CONTAINER ID  IMAGE         STATUS         NAMES
2523d9f77cf6  av-app-image  Up 26 minutes  av-app-container

Или вы можете ввести веб-браузер и перейти на http://localhost: 8080/ Отказ

Хорошо! Это было легко! Разве это не было? Я надеюсь, что это было для вас, но вы могли видеть, что это многоэтапный процесс, и, как таковые, рядом с тем, как потребляется много времени, также подвержен ошибкам.

Так как это можно сделать лучше? Может быть, это может быть лучше, когда мы включаем фазу компиляции ( NG Build - Prod ) в сборку Docker? Это звучит многообещающим, давайте сделаем это!

Чтобы добиться этого, я хотел бы представить что-то, что называется Multi-Stopent Docker Build Отказ

Он был введен в Docker 17.05, и это главная цель состояла в том, чтобы создать меньшие контейнеры, не теряя читаемость докерафила. С таким подходом мы можем разделить здание докера изображения на более мелкие фазы (этапы), где в другой можно использовать результат предыдущего (или его части).

Чтобы положить его в наш контекст, мы разделим наш Docker Build на два этапа:

  • Составление исходного кода на производство готовый вывод,

  • Запуск компиляционного приложения в документе Docker.

Только скомпилированные выходные данные с первого этапа будут перемещены ко второму, поэтому небольшой размер контейнера будет сохранен.

До этого момента мы сделали второй шаг, так что давайте сосредоточимся на первом.

Для составления исходного кода мы пойдем с разным изображением докера в качестве основы, что это содержит Node.js Отказ Часть DockerFile, которая охватывает этап строительства:

FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

В этом случае есть больше линий, которые несут ответственность за:

  • ( от ) Получение Узел Docker Image из реестра и название этапа компиляции в виде сборки (так что мы сможем обратиться к нему на другой этапе),

  • ( Workdir ) Настройка каталога по умолчанию,

  • ( Копировать ) Копирование package.json и Package-lock.json Файлы из локального корневого каталога — этот файл содержит все зависимости, которые требуют нашего приложения,

  • ( Run ) Установка необходимых библиотек (на основе файла скопирована на предыдущем шаге),

  • ( Копировать ) Копирование всех оставшихся файлов с исходным кодом,

  • ( запустить ) и, наконец, составление нашего приложения.

Чтобы создать создание нашего образа Docker еще более эффективным, мы можем добавить в корневой файл проекта, который называется файл .Dockerignore Отказ Это работает похоже на .gitignore И в этом мы можем определить, какие файлы и папки мы хотим, чтобы игнорировать. В нашем случае мы не хотим копировать какие-либо файлы из Node_Modules и Dist папки, потому что они не нужны в компиляции.

Поэтому этот файл должен выглядеть следующим образом:

dist
node_modules

Хорошо, так что давайте объединим оба этапа докеров в один и в результате мы получим:

### STAGE 1: Build ###
FROM node:12.7-alpine AS build
WORKDIR /usr/src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

### STAGE 2: Run ###
FROM nginx:1.17.1-alpine
COPY nginx.conf /etc/nginx/nginx.conf
COPY --from=build /usr/src/app/dist/aston-villa-app /usr/share/nginx/html

Единственная регулировка, которую я сделал здесь, заключается в том, что я добавил комментарии перед каждым этапом, а также я добавил - от = построить Флаг, чтобы сказать Docker, что ему нужно скопировать скомпилированные файлы из построить Этап (также исходный путь изменился, потому что файлы находятся в другой папке).

Возвращаясь к терминалу, сначала вам нужно создать образечку докера:

> docker build -t av-app-multistage-image .

А затем запустить приложение (на другом порту):

> docker run --name av-app-multistage-container -d -p 8888:80 av-app-multistage-image

И если вы сейчас входите http://localhost:8888/ Вы увидите, что он работает!

Если вы хотите проверить этот проект, перейдите на его репозиторий на GitHub:

wkrzywiec/Aston-Villa-App

Приборная панель Aston Villa из угловых 7

использованная литература

Руки на доке (5 части серии)

Оригинал: «https://dev.to/wkrzywiec/build-and-run-angular-application-in-a-docker-container-19pm»

Читайте ещё по теме: