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