Розгортання Docker-образу Nuxt3 в AWS Elastic Beanstalk

На відміну від розгортання SPA в AWS S3 і CloudFront, при розгортанні SSR фреймворку потрібно враховувати багато факторів. У результаті було запропоновано безліч методів розгортання, і в цій статті коротко демонструється, як розгорнути docker-образ Nuxt3 додатку в AWS Elastic Beanstalk.

Чому AWS EB (Elastic Beanstalk)?

EB — це зручний сервіс для тих, хто не знайомий з інфраструктурою бекенду або просто не хоче налаштовувати інстанси. Цей зручний сервіс автоматично налаштовує балансування навантаження, різні EC2 інстанси та авто-масштабування.

Чому Docker?

Є багато платформ, серед яких можна вибирати при створенні EC2 інстанса, таких як docker, nodejs, corretto (java) і так далі. Ви можете розгорнути додаток на платформі nodejs, але версія node LTS змінюється швидко. Щоб оновити версію node, потрібно створити новий EC2 інстанс з новою версією node платформи. На жаль, ви не можете просто змінити платформу на вже існуючих інстансах. Отже, перевстановлення майже неминуче.

Саме тут і приходить на допомогу docker. Я вважаю, що платформа docker має більше переваг, ніж недоліків. Ось деякі з переваг:

• Ви можете просто оновити версію node, змінивши Dockerfile.
• Оскільки docker — це контейнерна служба, ви можете запускати інші або ті ж самі контейнери в одному інстансі. Це відомо як багатоконтейнерне середовище.
• Ви можете використовувати docker-compose для управління багатьма контейнерами або замінити його на k8s, коли ваш сервіс стане дуже великим.
• Більше ресурсів, таких як CPU, пам’ять. Це, однак, можна вирішити, оновивши типи EC2 інстансів.

Скрипти 📄

Коли ви зрозумієте цю архітектуру, написання скриптів не буде важким. Усі скрипти нижче доступні в моєму репозиторії.

Розглянемо спочатку Dockerfile для Nuxt3 додатку.

FROM node:16-alpine  

# Деякі пакети вимагають встановлення python3  
RUN apk add --update --no-cache python3 build-base gcc && ln -sf /usr/bin/python3 /usr/bin/python  

RUN mkdir -p /usr/src/nuxt3  
WORKDIR /usr/src/nuxt3  

COPY . .  

RUN yarn install  
RUN yarn build  

ENV NUXT_HOST=0.0.0.0  
ENV NUXT_PORT=3000  

EXPOSE 3000  

ENTRYPOINT ["node", ".output/server/index.mjs"]

Це не виглядає дуже складно. Тепер я створю контейнер NGINX як проксі-сервер. Чому? Тому що цей NGINX буде виступати як балансувальник навантаження, оскільки я буду запускати кілька контейнерів nuxt3. Ось Dockerfile для NGINX.

FROM nginx:1.23.2-alpine  

RUN rm /etc/nginx/conf.d/default.conf  

COPY nginx.conf /etc/nginx/conf.d

Як ви помітили, я заміняю конфігураційний файл NGINX. Файл nginx.conf виглядає ось так.

upstream nuxt-app {  
 server nuxt:3000;  
}  

server {  
 listen 80;  
 listen [::]:80;  

 access_log /var/log/nginx/access.log;  
 error_log /var/log/nginx/error.log;  

 location / {  
 proxy_pass http://nuxt-app/;  
 }  
}

Щоб запускати та управляти кількома контейнерами, вам також потрібен docker-compose. Ось файл docker-compose.yml.

version: "3"  
services:  
 nginx:  
 build: ./nginx  
 ports:  
 - "80:80"  
 restart: always  
 depends_on:  
 - nuxt  
 nuxt:  
 build: .  
 restart: always  
 deploy:  
 replicas: 4

Це, власне, все. У файлі docker-compose.yml контейнер з іменем “nuxt” буде горизонтально масштабований до 4 контейнерів. Ви можете налаштувати кількість контейнерів відповідно до характеристик ваших інстансів.

Розгортаємо 🚀

Цілком очевидно, що для того, щоб розгорнути додаток, потрібно заархівувати ваші файли проекту 😅

zip -r nuxt3-docker-1.zip . -x .git .git* node_modules* .nuxt*

Давайте виконаємо вищезазначену команду в кореневій директорії вашого проекту.

Готово. Тепер усе готово.
Розгортаємо.

Виберіть платформу як Docker

Завантажте ZIP файл вашого проекту

Оскільки я буду використовувати балансувальник навантаження (Load Balancer) та авто-масштабування (Auto Scaling), вибираю “Custom configuration”.

Якщо ви використовуєте EB, кожен інстанс за замовчуванням має NGINX як проксі-сервер. Однак я вирішив керувати своїм NGINX як контейнером, тому вимикаю стандартний проксі-сервер.

Далі виберіть тип EC2 інстансів і розгорніть!

Я використовую t3.medium для цієї демонстрації. (Будь ласка, не використовуйте інстанси серії t у вашому продакшн-середовищі. Я вважаю, що ця серія підходить лише для розробницького середовища.)

Ось кінцевий результат вашого додатку 😎

Резюме

Вітаю! Ви досягли кінця цієї демонстрації. Завершимо цю довгу подорож. Всі вищезазначені кроки можна узагальнити в такій схемі.

Щасливого кодування 👾

Перекладено з: Deploying Dockerized Nuxt3 in AWS Elastic Beanstalk