Сборка и запуск Angular приложения в Docker контейнере

В этой статье мы рассмотрим как собирать и запускать Angular приложение в Docker контейнере. Для этого будем использовать файл Dockerfile, где будут содержаться все необходимые инструкции. Наше приложение будет билдится и хостить свой production-ready код, в контейнере с веб сервером NGINX.

Условимся что у нас уже существует некое приложение sample-app, поэтому шаг с созданием приложения опустим.

Создание Dockerfile и nginx.conf

Начинаем с того что создаем в корне нашего Angular приложения, файлы с именем Dockerfile и nginx.conf

В nginx.conf добавляем следующее:

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;         }     } }

Данный конфиг довольно стандартен, подробнее о нем можно почитать в соотвествующей документации.

Далее открываем наш Dockerfile и пишем в него следующее шаги:

FROM node:12.7-alpine as build — здесь мы говорим использовать образ с nodejs версии 12.7 и Alpine Linux в качестве ос, если версия ноды не важна можно просто вписать node:latest.

WORKDIR /usr/src/app — этой строчкой указываем рабочую папку нашему приложению.

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

RUN npm install — тут запускается npm и устанавливает пакеты из package.json

COPY . . — копирование всех остальных файлов с исходным кодом.

RUN npm run build — запуск билда нашего приложения

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

Теперь добавим вторую стадию в наш Dockerfile, в которой наш готовый продакшен билд приложения будет запускаться на NGINX на 80 порту. Для этого впишем следующие шаги:

FROM nginx:1.17.1-alpine — разворачиваем образ с NGINX’ом, тут так же можно просто написать nginx:latest если не важна версия.

COPY nginx.conf /etc/nginx/nginx.conf — копируем наш конфиг nginx’а.

COPY --from=build /usr/src/app/dist/sample-app /usr/share/nginx/html — тут копируем нашу прод сборку приложения и устанавливаем как содержимое NGINX сервера.

Конечный Dockerfile будет выглядить так:

#STAGE 1 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 FROM nginx:1.17.1-alpine COPY nginx.conf /etc/nginx/nginx.conf COPY --from=build /usr/src/app/dist/sample-app /usr/share/nginx/html

Так же не забываем добавить файл .dockerignore со следующим содержимым:

dist node_modules

Билд и запуск контейнера

Далее делаем билд контейнера командой:

docker build -t sample-app-image .

Проверяем командой docker image ls что образ нашего контейнера появился в списке доступных:

docker image ls REPOSITORY           TAG         IMAGE ID       CREATED             SIZE sample-app-image     latest      e243f3eebef3   About an hour ago   26MB

Запускаем команду:

docker run -d -p 8080:80 sample-app-image:latest

И проверяем запуск приложения по адресу http://localhost:8080/

Заключение

В данной статье коротко рассмотрели как собирать и запускать контейнер с Angular приложением. Полученный образ теперь можно отправлять в registry для развертывания в облаке.