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

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

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

Создание Dockerfile

Для начала нам необходимо создать в корне нашего Angular приложения, файл с именем Dockerfile.

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

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

WORKDIR /usr/local/app - этой строчкой указываем путь рабочей папки нашего приложения.

COPY ./ /usr/local/app/ - копируем файлы нашего приложения в рабочую папку>

RUN npm install и RUN npm run build - тут запускается npm и устанавливает пакеты из package.json и запускается билд приложения.

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

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

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

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

EXPOSE 80 - открываем доступ к приложению на 80 порту.

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

# Stage 1
FROM node:12.7-alpine as build
WORKDIR /usr/local/app
COPY ./ /usr/local/app/
RUN npm install
RUN npm run build

# Stage 2
FROM nginx:1.17.1-alpine
COPY --from=build /usr/local/sample-app/dist/app /usr/share/nginx/html
EXPOSE 80

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

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

docker build -t sample-app-image .

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

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

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

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

Заключение

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