В этой статье мы рассмотрим как собирать и запускать 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 для развертывания в облаке.
V_lab
При таком подходе build-образ будет неоправданно раздут + он будет заново скачивать зависимости при изменении исходников. Я бы внес следующие рекомендации:
Сначала копировать в билд-образ файлы
package.json
,package-lock.json
, запускатьnpm
ci
, а затем уже все остальные исходники. В таком случае слой с зависимостями будет закеширован и не будет пересоздаваться при изменении каких-нибудь исходниковДобавить
node_modules
в.dockerignore
, чтобы они не копировались в билд образ с хоста