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

вчера в 13:48

В этой статье мы рассмотрим как собирать и запускать 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 для развертывания в облаке.