Выступая на различных мероприятиях меня часто спрашивают, преподаю ли я где то курсы? Ответ пока нет, но у меня есть готовый курс который я бесплатно выложу сюда в виде 3-х статей.
Итак поехали, это урок №1, прошу дочитать до конца, там также будет ссылка на архив.
Прежде чем начинать создавать проект необходимо продумать его структуру. Это в целом с Nuxt очень просто, так как роутинг на файлах.
Общий каркас проекта который я использую такой:
- nginx - контейнер для проксирования + балансировка нагрузки
- frontend - сам nuxt со всем содержимым frontenda
- backend - тут может быть все что угодно
Nginx - конфигурация достаточно простая, так как все его сложности лежат на отдельном сервере, рассмотрим его в конце курса. Наш dockerfile.conf сейчас выглядит вот так:
server {
listen 80;
# Указываем куда у нас смотрит консоль управления сайтом к примеру.
location /management-console/ {
proxy_pass http://backend:8000/management-console/;
}
# Рекомендую всегда статику держать в отдельных локациях
location /media/ {
alias /app/media/;
}
location /static/ {
alias /app/static/;
}
# Ну вот и сам Nuxt, порты могут быть разными для обучения Default
location / {
proxy_pass http://frontend:3000/;
}
}
Frontend - папочка содержащая Nuxt 3 и весть контент. Это для меня всегда отдельный контейнер. Это удобно, быстро. Пример dockerfile.conf будет таким:
# Версия Node контейнера. Я привык брать Stable, мне так комфортно
FROM node:lts as builder
# Последнее время все хотят интеграции, поэтому пишу переменные
# Битрикс24 сразу теперь по умолчанию почти во всех проектах.
ARG BITRIX_HOOK_ROOT
ENV BITRIX_HOOK_ROOT=$BITRIX_HOOK_ROOT
# Показываем frontend где живет наш backend
WORKDIR /app
ENV APIURL="http://backend:8000"
COPY package* /app/
RUN npm install
COPY package* /app/
# Подготовим окружение
COPY . /app
RUN npm run build
# Эти параметры прописаны в package.json
# IP адрес куда заводим контейнер
ENV HOST=0.0.0.0
# Указываем порт для контейнера
EXPOSE 3000
CMD ["npm", "run", "start"]
Как видите ничего замысловатого нет. Все достаточно просто, чтоб проекту было комфортно работать в своем окружении.
Backend - развернем Django, если есть желание рассмотреть что то иное, пишите в комментариях сделаем обзор. DockerFile.conf для нас сейчас будет таким:
FROM python:3.10
# Рабочая директория приложение
WORKDIR /app/
# Установка самых важных компонентов
RUN pip3 install pipenv
RUN pip3 install gunicorn
COPY Pipfile /app/
RUN pipenv install --skip-lock --system
COPY Pipfile /app/
EXPOSE 8000
# Перенос конфигурации Django
COPY entrypoint.sh /app/
COPY manage.py /app/
COPY backend /app/backend/
Вот и наступил момент нашего урока. Мы должны собрать все Docker контейнеры в единый проект.
Давайте напишем наш docker-compose.yml
version: '3.9'
services:
backend:
build:
context: backend
container_name: SITE_BACKEND
volumes:
- ./backend/db.sqlite3:/app/db.sqlite3:rw
- ./backend/media/:/app/media/:rw
- backend_static:/app/static/:rw
command: /app/entrypoint.sh
environment:
MEDIA_URL: $MEDIA_URL
STATIC_URL: $STATIC_URL
frontend:
build:
args:
BITRIX_HOOK_ROOT: $BITRIX_HOOK_ROOT
context: frontend
container_name: SITE_VMCOM_FRONTEND
environment:
BITRIX_HOOK_ROOT: $BITRIX_HOOK_ROOT
nginx:
image: nginx
container_name: SITE_NGINX
ports:
- "127.0.0.1:8025:80"
volumes:
- ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
- ./backend/media/:/app/media/:ro
- backend_static:/app/static/:ro
depends_on:
- backend
- frontend
volumes:
backend_static:
driver: local
Не стал перегружать комментариями конфигурацию. Небольшие пояснения только к тому что - это полноценная конфигурация. Локально она отработает и соберет все необходимое.
Важно во время работы на проекте не путать пути. Если что то меняется нужно отслеживать изменение плюс не забывать, что все время придется делать build контейнеров.
Как и обещал, вот ссылка на архив проекта: https://gitlab.com/vmkau/ci-cd-leson.git - конечно это GIT. Иногда обновляю конфигурацию, пользуйтесь.
Буду рад если подпишитесь на меня, ну и жду комментарии.