Докеризация angular-приложений

Средние размеры приложений в виде docker-образа, которые мне приходилось собирать, составляли менее 30 мб. Речь идёт о приложениях небольшого и среднего размера. Конечно же, итоговый размер образа зависит от используемых статических файлов и библиотек. Если Ваш образ сильно превышает этот размер (занимает 200-300 мб), то возможно вы делаете что-то не так и размер можно будет уменьшить.

Главная причина большого размера образов, это папка node_modules, которая, как правило, не должна быть включена в финальный образ с собранным приложением, так как именно она занимает его львиную часть. Благодаря процессу сборки и минификаций кода, приложение вместе со всеми необходимыми зависимостями, будут доступны в отдельной папке dist в виде нескольких JS файлов и статического контента (assets).

Теперь осталось выбрать веб-сервер для хостинга внутри docker контейнера. Для этого отлично подойдёт nginx с образом alpine из-за его минимального размера. Для nginx нужно подготовить отдельный файл (nginx.conf) с конфигурацией.

В конфигурационном файле мы укажем порт, путь к index.html нашего приложению, а так же активируем сжатие gzip.

nginx.conf:

worker_processes  1;
 
events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        server_name  localhost;
    
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;
    
        gzip on;
        gzip_min_length 1000;
        gzip_proxied expired no-cache no-store private auth;
        gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
    
        location / {
        try_files $uri $uri/ /index.html;
        }
    }
}

Добавим файл .dockerignore включающий в себя те папки и файлы которые нам не понадобятся для сборки (для копирования в наш образ).

.git
.gitignore
.github
.vscode
.editorconfig
.dockerignore
Dockerfile
package-lock.json
README.md
dist
e2e
node_modules

И сам Dockerfile с описанием сборки:

# Step 1: Build angular application
FROM node:12-alpine AS base

# switch to new workdir
WORKDIR /app

# set unsafe permissions
RUN npm config set unsafe-perm true

# copy all files
COPY . .

# install dependencies 
RUN npm install

# build application
RUN npm run build

# Step 2: Copy built artifact and serve app with nginx
FROM nginx:stable-alpine
LABEL version="1.0"

# copy nginx config file
COPY nginx.conf /etc/nginx/nginx.conf

# Copy build version of the application to nginx folder
WORKDIR /usr/share/nginx/html

# replace path for your application
COPY --from=base /app/dist/artslabDemo/ .

# expose port 80 and run nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Для сборки мы используем два разных базовых имиджа - node и nginx. В рамках первого, мы скопируем наш проект в контейнер, устанавим все зависимости и затем собирем наше Angular-приложение. Во втором шаге мы извлечем необходимые нам “артефакты” из первого контейнера во второй. Таким образом мы получим максимально “чистый” контейнер, включающий nginx и наше приложение.

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

$ docker build -t my-angular-app .

Дождемся завершения и запустим новый контейнер на основе нашего имиджа:

$ docker run --name=artslab-demo -d -p 80:80 my-angular-app

С помощью команды docker ps проверим статус контейнера.

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

Репозиторий с примером