Docker для фронтендера

Требования: Docker

Каждая
пятая

Эра
контейнеров

👨‍💻 О себе

1. 👨 Алексей Авдеев (https://github.com/avdeev)
2. 👔 Сеньор фронтенд, технический директор
3. 🏙️ Из Нижнего Новгорода, работаю в Москве
4. 🌐 Mish.Design
5. 👴 Программирую с 2002 года

Зачем?

Поднимаем бэкенд

😫 Без Docker

            $ brew update
            $ brew install mysql
            ...
            $ \curl -sSL https://get.rvm.io | bash
            ...
            $ rails s
        

👍 С Docker

            $ docker-compose up api
            ...
            Listening localhost:8080
        

👍 С Docker

Автоматизируй

Разрабатываем
в контейнере

Устойчивость ⚖

👍 С Docker

            $ docker rm --volumes api
        

            $ docker system prune --all
        

Контролируем эксплуатацию

😫 Без Docker

1. nvm use 14
2. npm clean-install
3. npm run build
4. Раздаём папку /dist веб-сервером

👍 С Docker

Упаковано в Docker 📦

KEEP CALM
IT WORKS
ON ALL MACHINES

Пишите код для продакшна

Build safer, share wider, run faster

Установка
Docker ⏬

♻ Установка Docker через Homebrew

            $ brew install --cask docker
        

Что входит в Docker Desktop

• Docker Engine
• Docker CLI client
• Docker Compose
• Docker Content Trust
• Kubernetes
• Credential Helper

Docker — это не только для
админов

Что-то для админов

• docker run
• docker build
• Dockerfile
• Image
• DockerHub

Docker как NPM,
но для Ops

Знакомые понятия

• docker run 🔀 npm start
• docker build 🔀 npm run build
• Dockerfile 🔀 package.json
• Image 🔀 Package
• DockerHub 🔀 NPM Registry

Знакомые понятия

• Проект начат как проприетарная разработка
• Используется для всего подряд
• Есть альтернативы, призванные заменить

Hello World (1)

            $ docker run ubuntu:20.04 /bin/echo 'Hello world'
             
            Hello world
        

Hello World (2)

            $ docker run hello-world
            
            Unable to find image 'hello-world:latest' locally
            latest: Pulling from library/hello-world
            ...
            Hello from Docker!
            This message shows that your installation appears...
            ...
        

Немного
рецептов

Запускаем Lighthouse

😫 Без Docker

            Установить Google Chrome for Desktop.
            Установить текущую LTS-версию Node.
            $ npm install -g lighthouse
            $ lighthouse http://frontendconf.ru
        

👍 С Docker

            $ docker run \
              --rm \
              --name lighthouse \
              -it \
              --volume ~:/home/chrome/reports \
              --cap-add=SYS_ADMIN \
              femtopixel/google-lighthouse https://vpene.ru/
        

Нагрузка

👍 С Docker

            $ docker service scale frontend=10
             
            frontend scaled to 10
        

Поиск
владельца

Dockerfile

            LABEL org.opencontainers.image.authors="[email protected]"
        

docker inspect

            $ docker inspect NAME|ID
        

            "Labels": {
              "maintainer": "[email protected]"
            }
        

Выбираем
технологию

Dockerfile (1)

            FROM    node:14-alpine as builder
            WORKDIR /app
            COPY    package*.json ./
            RUN     npm ci
            COPY    vue.config.js babel.config.js ./
            COPY    src src
            RUN     npm run build
        

Dockerfile (2)

            FROM   nginx:1.21-alpine
            COPY   nginx /etc/nginx/conf.d
            COPY   --from=builder /app/dist/ /usr/share/nginx/html/
            EXPOSE 5000
        

Запускаем контейнер

            docker build --tag my-app .
            docker run -p 5000:5000 --tag my-app
        

Dockerfile для Node.js

            FROM node:14-alpine
            WORKDIR /app
            COPY package*.json ./
            RUN npm ci
            COPY . .
            EXPOSE 5000
            CMD ["node", "server.js"]
        

Dockerfile для Python

            FROM python:3-alpine
            WORKDIR /usr/src/app
            COPY requirements.txt ./
            RUN pip install --no-cache-dir -r requirements.txt
            COPY . .
            EXPOSE 5000
            CMD ["python", "./your-daemon-or-script.py"]
        

Универсальная абстракция

Компонуемость

👍 С Docker (docker-compose.yml)

            services:
              api:
                build: ./api
              front:
                build: ./front
              reverse-proxy:
                image: caddy
                ports:
                  - 80:80
                volumes:
                  - ./Caddyfile:/etc/Caddyfile
        

Запускаем связку контейнеров

            $ docker-compose up
        

Демо

Виртуализируй

👏 Спасибо!

• 👨 Алексей Авдеев
• 🌐 https://github.com/avdeev
• 🌐 https://twitter.com/avdeev_alexey
• 🌐 Mish.Design