Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
Ushbu maqolada men Plesk boshqaruv paneli va Github harakatlaridan foydalangan holda CI/CD-ni sozlash bo'yicha tajribam bilan o'rtoqlashaman. Bugun biz "Helloworld" nomli oddiy loyihani qanday joylashtirishni o'rganamiz. U Flask Python ramkasida, Selderey ishchilari va Angular 8 frontend bilan yozilgan.

Repozitariylarga havolalar: backend, foydalanuvchi interfeysi.

Maqolaning birinchi qismida biz loyihamiz va uning qismlarini ko'rib chiqamiz. Ikkinchisida biz Plesk-ni qanday sozlashni va kerakli kengaytmalar va komponentlarni (DB, RabbitMQ, Redis, Docker va boshqalar) o'rnatishni aniqlaymiz.

Uchinchi qismda biz nihoyat loyihamizni ishlab chiqaruvchi va ishlab chiqaruvchi muhitda serverga joylashtirish uchun quvur liniyasini qanday o'rnatishni aniqlaymiz. Va keyin biz saytni serverda ishga tushiramiz.

Ha, men o'zimni tanishtirishni unutibman. Mening ismim Oleg Borzov, men Domclickdagi ipoteka menejerlari uchun CRM jamoasida to'liq ishlab chiquvchiman.

Loyihaning umumiy ko'rinishi

Birinchidan, ikkita loyiha omborini ko'rib chiqaylik - backend va front - va kodni ko'rib chiqamiz.

Orqa tomon: Flask + Selderey

Orqa qism uchun men Python dasturchilari orasida juda mashhur bo'lgan to'plamni oldim: Flask ramkasi (API uchun) va Selderey (vazifa navbati uchun). SQLAchemy ORM sifatida ishlatiladi. Alembic migratsiya uchun ishlatiladi. Tutqichlarda JSON tekshiruvi uchun - Marshmallow.

В omborlar tuzilmaning batafsil tavsifi va loyihani ishga tushirish bo'yicha ko'rsatmalarga ega Readme.md fayli mavjud.

Veb-qism API juda oddiy, 6 ta qalamdan iborat:

  • /ping - mavjudligini tekshirish;
  • ro'yxatga olish, avtorizatsiya qilish, avtorizatsiyadan chiqarish va avtorizatsiya qilingan foydalanuvchini olish bilan shug'ullanadi;
  • Selderey navbatiga vazifa qo'yadigan elektron pochta dastasi.

Selderey qismi hatto osonroq, faqat bitta muammo bor send_mail_task.

Jildda /conf ikkita pastki papka mavjud:

  • docker ikkita Docker fayli bilan (base.dockerfile kamdan-kam o'zgaruvchan asosiy tasvirni qurish va Dockerfile asosiy yig'ilishlar uchun);
  • .env_files - turli muhitlar uchun muhit o'zgaruvchilari bo'lgan fayllar bilan.

Loyihaning ildizida to'rtta docker-compose fayli mavjud:

  • docker-compose.local.db.yml rivojlantirish uchun mahalliy ma'lumotlar bazasini yaratish;
  • docker-compose.local.workers.yml ishchi, ma'lumotlar bazasi, Redis va RabbitMQni mahalliy oshirish uchun;
  • docker-compose.test.yml joylashtirish paytida testlarni o'tkazish;
  • docker-compose.yml joylashtirish uchun.

Va bizni qiziqtirgan oxirgi papka - .ci-cd. U joylashtirish uchun qobiq skriptlarini o'z ichiga oladi:

  • deploy.sh — migratsiya va joylashtirishni ishga tushirish. Github Actions-da testlarni qurish va ishga tushirishdan keyin serverda ishlaydi;
  • rollback.sh - konteynerlarni yig'ishning oldingi versiyasiga qaytarish;
  • curl_tg.sh - Telegramga tarqatish xabarnomalarini yuborish.

Angular ustidagi frontend

Old bilan ombor Beknikiga qaraganda ancha sodda. Old qismi uchta sahifadan iborat:

  • Elektron pochta jo'natish shakli va chiqish tugmasi bo'lgan asosiy sahifa.
  • Kirish sahifasi.
  • Ro'yxatdan o'tish sahifasi.

Asosiy sahifa astsetik ko'rinadi:

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
Ildizda ikkita fayl mavjud Dockerfile и docker-compose.yml, shuningdek, tanish papka .ci-cd orqa omborga qaraganda bir oz kamroq skriptlar bilan (sinovlarni bajarish uchun o'chirilgan skriptlar).

Pleskda loyihani boshlash

Keling, Plesk-ni sozlash va saytimizga obuna yaratishdan boshlaylik.

Kengaytmalarni o'rnatish

Plesk-da bizga to'rtta kengaytma kerak:

  • Docker Plesk boshqaruv panelida konteynerlarning holatini boshqarish va vizual tarzda ko'rsatish;
  • Git serverda joylashtirish bosqichini sozlash;
  • Let's Encrypt bepul TLS sertifikatlarini yaratish (va avtomatik yangilash);
  • Firewall kiruvchi trafikni filtrlashni sozlash.

Siz ularni kengaytmalar bo'limidagi Plesk boshqaruv paneli orqali o'rnatishingiz mumkin:

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
Biz kengaytmalar uchun batafsil sozlamalarni ko'rib chiqmaymiz, standart sozlamalar bizning demo maqsadlarimiz uchun ishlaydi.

Obuna va sayt yarating

Keyinchalik, helloworld.ru veb-saytimizga obuna yaratishimiz va u erga dev.helloworld.ru subdomenini qo'shishimiz kerak.

  1. helloworld.ru domeniga obuna yarating va tizim foydalanuvchisi uchun login-parolni belgilang:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
    Sahifaning pastki qismidagi katakchani belgilang Let's Encrypt bilan domenni himoyalangagar biz sayt uchun HTTPS ni o'rnatmoqchi bo'lsak:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  2. Keyinchalik, ushbu obunada dev.helloworld.ru subdomenini yarating (buning uchun siz bepul TLS sertifikatini ham berishingiz mumkin):

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

Server komponentlarini o'rnatish

Bizda server mavjud Debian Stretch OS 9.12 va o'rnatilgan boshqaruv paneli Plesk Obsidian 18.0.27.

Loyihamiz uchun biz o'rnatishimiz va sozlashimiz kerak:

  • PostgreSQL (bizning holatda, ishlab va ishlab chiqarish muhitlari uchun ikkita ma'lumotlar bazasiga ega bitta server bo'ladi).
  • RabbitMQ (bir xil, muhitlar uchun turli xil vhostlar bilan bir xil misol).
  • Ikki Redis misoli (dev va ishlab chiqarish muhitlari uchun).
  • Docker Registry (qurilgan Docker tasvirlarini mahalliy saqlash uchun).
  • Docker registrlari uchun UI.

PostgreSQL

Plesk allaqachon PostgreSQL DBMS bilan birga keladi, lekin eng so'nggi versiyasi emas (Plesk Obsidian yozish paytida) qo'llab-quvvatlanadi Postgres versiyalari 8.4–10.8). Biz ilovamizning eng so'nggi versiyasini (12.3 yozish vaqtida) istaymiz, shuning uchun uni qo'lda o'rnatamiz.

Tarmoqda Postgres-ni Debian-ga o'rnatish bo'yicha ko'plab batafsil ko'rsatmalar mavjud (misol), shuning uchun men ularni batafsil tasvirlamayman, faqat buyruqlarni beraman:

wget -q https://www.postgresql.org/media/keys/ACCC4CF8.asc -O - | sudo apt-key add -
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt/ stretch-pgdg main" >> /etc/apt/sources.list.d/pgdg.list'

sudo apt-get update
sudo apt-get install postgresql postgresql-contrib

PostgreSQL juda o'rtacha standart sozlamalarga ega ekanligini hisobga olsak, konfiguratsiyani tuzatish kerak. Bu bizga yordam beradi kalkulyator: siz serveringiz parametrlarida haydashingiz va fayldagi sozlamalarni almashtirishingiz kerak /etc/postgresql/12/main/postgresql.conftaklif qilinganlarga. Bu erda shuni ta'kidlash kerakki, bunday kalkulyatorlar sehrli o'q emas va tayanch sizning apparat, dastur va so'rovlar murakkabligidan kelib chiqib, aniqroq sozlanishi kerak. Ammo bu boshlash uchun etarli.

Kalkulyator tomonidan taklif qilingan sozlamalarga qo'shimcha ravishda biz ham o'zgartiramiz postgresql.confstandart port 5432 boshqasiga (bizning misolimizda - 53983).

Konfiguratsiya faylini o'zgartirgandan so'ng, postgresql-serverni quyidagi buyruq bilan qayta ishga tushiring:

service postgresql restart

Biz PostgreSQL-ni o'rnatdik va sozladik. Keling, ma'lumotlar bazasini, ishlab chiquvchi va ishlab chiqarish muhitlari uchun foydalanuvchilarni yaratamiz va foydalanuvchilarga ma'lumotlar bazasini boshqarish huquqini beramiz:

$ su - postgres
postgres:~$ create database hw_dev_db_name;
CREATE DATABASE
postgres:~$ create user hw_dev_db_user with password 'hw_dev_db_password';
CREATE ROLE
postgres:~$ grant ALL privileges ON database hw_dev_db_name to hw_dev_db_user;
GRANT
postgres:~$ create database hw_prod_db_name;
CREATE DATABASE
postgres:~$ create user hw_prod_db_user with password 'hw_prod_db_password';
CREATE ROLE
postgres:~$ grant ALL privileges ON database hw_prod_db_name to hw_prod_db_user;
GRANT

Quyon MQ

Keling, RabbitMQ ni o'rnatishga o'tamiz, Selderiya uchun xabarlar brokeri. Uni Debian-ga o'rnatish juda oddiy:

wget https://packages.erlang-solutions.com/erlang-solutions_1.0_all.deb
sudo dpkg -i erlang-solutions_1.0_all.deb

sudo apt-get update
sudo apt-get install erlang erlang-nox

sudo add-apt-repository 'deb http://www.rabbitmq.com/debian/ testing main'
wget -O- https://www.rabbitmq.com/rabbitmq-release-signing-key.asc | sudo apt-key add -

sudo apt-get update
sudo apt-get install rabbitmq-server

O'rnatishdan so'ng biz yaratishimiz kerak vhosts, foydalanuvchilar va kerakli huquqlarni bering:

sudo rabbitmqctl add_user hw_dev_amqp_user hw_dev_amqp_password 
sudo rabbitmqctl set_user_tags hw_dev_amqp_user administrator
sudo rabbitmqctl add_vhost hw_dev_vhost
sudo rabbitmqctl set_permissions -p hw_dev_vhost hw_dev_amqp_user ".*" ".*" ".*"

sudo rabbitmqctl add_user hw_prod_amqp_user hw_prod_amqp_password 
sudo rabbitmqctl set_user_tags hw_prod_amqp_user administrator
sudo rabbitmqctl add_vhost hw_prod_vhost
sudo rabbitmqctl set_permissions -p hw_prod_vhost hw_prod_amqp_user ".*" ".*" ".*"

Redis

Endi ilovamiz uchun oxirgi komponent - Redisni o'rnatamiz va sozlaymiz. U Selderey vazifalari natijalarini saqlash uchun backend sifatida ishlatiladi.

Kengaytma yordamida ishlab va ishlab chiqarish muhitlari uchun Redis bilan ikkita Docker konteynerini ko'taramiz Docker Plesk uchun.

  1. Biz Plesk-ga o'tamiz, "Kengaytmalar" bo'limiga o'tamiz, Docker kengaytmasini qidiramiz va uni o'rnatamiz (bizga bepul versiya kerak):

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  2. O'rnatilgan kengaytmaga o'ting, qidiruv orqali tasvirni toping redis bitnami va oxirgi versiyani o'rnating:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  3. Biz yuklab olingan konteynerga o'tamiz va konfiguratsiyani sozlaymiz: portni, ajratilgan maksimal operativ xotira hajmini, atrof-muhit o'zgaruvchilaridagi parolni belgilang va ovoz balandligini o'rnating:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  4. Biz mahsulot konteyneri uchun 2-3-bosqichlarni bajaramiz, sozlamalarda biz faqat parametrlarni o'zgartiramiz: port, parol, RAM hajmi va serverdagi ovoz balandligi papkasiga yo'l:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

Docker registri

Asosiy xizmatlarga qo'shimcha ravishda, serverga o'zingizning Docker tasvirlar omborini qo'ysangiz yaxshi bo'lardi. Yaxshiyamki, server maydoni hozir ancha arzon (albatta DockerHub obunasidan arzonroq) va shaxsiy omborni o'rnatish jarayoni juda oddiy.

Bizga ega bo'lishni xohlaymiz:

Buning uchun:

  1. Obunamizda Pleskda ikkita subdomen yarataylik: docker.helloworld.ru va docker-ui.helloworld.ru va ular uchun Let's Encrypt sertifikatlarini sozlaymiz.
  2. Faylni docker.helloworld.ru subdomen papkasiga qo'shing docker-compose.yml shunga o'xshash tarkib bilan:
    version: "3"
    
    services:
      docker-registry:
        image: "registry:2"
        restart: always
        ports:
          - "53985:5000"
        environment:
          REGISTRY_AUTH: htpasswd
          REGISTRY_AUTH_HTPASSWD_REALM: basic-realm
          REGISTRY_AUTH_HTPASSWD_PATH: /auth/.htpasswd
          REGISTRY_STORAGE_FILESYSTEM_ROOTDIRECTORY: /data
        volumes:
          - ./.docker-registry.htpasswd:/auth/.htpasswd
          - ./data:/data
    
      docker-registry-ui:
        image: konradkleine/docker-registry-frontend:v2
        restart: always
        ports:
          - "53986:80"
        environment:
          VIRTUAL_HOST: '*, https://*'
          ENV_DOCKER_REGISTRY_HOST: 'docker-registry'
          ENV_DOCKER_REGISTRY_PORT: 5000
        links:
          - 'docker-registry'
    

  3. SSH ostida biz Docker omborida Asosiy avtorizatsiya uchun .htpasswd faylini yaratamiz:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Konteynerlarni yig'ish va ko'tarish:
    docker-compose up -d
  5. Va biz Nginx-ni konteynerlarimizga yo'naltirishimiz kerak. Buni Plesk orqali amalga oshirish mumkin.

Docker.helloworld.ru va docker-ui.helloworld.ru subdomenlari uchun quyidagi amallarni bajarish kerak:

bo'lim Dastur asboblari saytimizga kiring Docker proksi qoidalari:

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
Va bizning konteynerimizga kiruvchi trafikni proksi-server qilish uchun qoida qo'shing:

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  1. Biz mahalliy mashinadan konteynerimizga kirishimiz mumkinligini tekshiramiz:
    $ docker login docker.helloworld.ru -u hw_docker_admin -p hw_docker_password
    WARNING! Using --password via the CLI is insecure. Use --password-stdin.
    Login Succeeded
  2. Keling, docker-ui.helloworld.ru subdomenining ishlashini ham tekshirib ko'ramiz:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
    "Amborlarni ko'rib chiqish" tugmasini bosganingizda, brauzer avtorizatsiya oynasini ko'rsatadi, unda siz ombor uchun foydalanuvchi nomi va parolni kiritishingiz kerak bo'ladi. Shundan so'ng, biz omborlar ro'yxati bilan sahifaga o'tamiz (hozircha u siz uchun bo'sh qoladi):

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

Plesk xavfsizlik devorida portlarni ochish

Komponentlarni o'rnatish va sozlashdan so'ng, komponentlarga Docker konteynerlari va tashqi tarmoqdan kirish mumkin bo'lishi uchun portlarni ochishimiz kerak.

Keling, buni biz ilgari o'rnatgan Plesk uchun xavfsizlik devori kengaytmasi yordamida qanday qilishni ko'rib chiqaylik.

  1. ga boring Asboblar va sozlamalar > Sozlamalar > Xavfsizlik devori:
    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
  2. ga boring Plesk xavfsizlik devori qoidalarini o'zgartiring > Maxsus qoida qo'shing va Docker quyi tarmog'i uchun quyidagi TCP portlarini oching (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  3. Shuningdek, PostgreSQL portlari va RabbitMQ boshqaruv panellarini tashqi dunyoga ochadigan qoidani qo'shamiz:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  4. O'zgarishlarni qo'llash tugmasi yordamida qoidalarni qo'llang:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

Github Actions-da CI/CD-ni sozlash

Keling, eng qiziqarli qismga tushamiz - uzluksiz integratsiya quvurini o'rnatish va loyihamizni serverga etkazish.

Ushbu quvur liniyasi ikki qismdan iborat bo'ladi:

  • tasvirni yaratish va ishlaydigan testlar (backend uchun) - Github tomonida;
  • migratsiyalarni amalga oshirish (backend uchun) va konteynerlarni joylashtirish - serverda.

Plesk-ga joylashtiring

Keling, birinchi navbatda ikkinchi nuqta bilan shug'ullanamiz (chunki birinchisi unga bog'liq).

Biz Plesk uchun Git kengaytmasi yordamida joylashtirish jarayonini sozlaymiz.

Backend ombori uchun Prod muhiti misolini ko'rib chiqing.

  1. Biz Hellouorld veb-saytimizga obuna bo'lamiz va Git bo'limiga o'tamiz:

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  2. Bizning Github omborimizga havolani "Remote Git repository" maydoniga joylashtiring va standart jildni o'zgartiring httpdocs boshqasiga (masalan. /httpdocs/hw_back):

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  3. Oldingi bosqichdan SSH Ochiq kalitini nusxalash va qo'shish u Github sozlamalarida.
  4. 2-bosqichda ekranda OK tugmasini bosing, shundan so'ng biz Plesk-dagi ombor sahifasiga yo'naltirilamiz. Endi biz omborni asosiy filialga topshirilganda yangilanishi uchun sozlashimiz kerak. Buning uchun quyidagi manzilga o'ting Repozitoriy sozlamalari va qiymatni saqlang Webhook URL (bu bizga keyinroq Github Actions-ni o'rnatishda kerak bo'ladi):

    Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

  5. Oldingi paragrafdagi ekrandagi Harakatlar maydoniga joylashtirishni boshlash uchun skriptni kiriting:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    qaerda:

    {REPOSITORY_ABSOLUTE_PATH} - serverdagi backend repository prod papkasiga yo'l;
    {ENV} - muhit (dev / prod), bizning holatlarimizda prod;
    {DOCKER_REGISTRY_HOST} - bizning docker omborimiz xosti
    {TG_BOT_TOKEN} — Telegram bot tokeni;
    {TG_CHAT_ID} — bildirishnomalarni yuborish uchun chat/kanal identifikatori.

    Skript misoli:

    cd /var/www/vhosts/helloworld.ru/httpdocs/hw_back/
    .ci-cd/deploy.sh dev docker.helloworld.ru docker_user docker_password 12345678:AAbcdEfghCH1vGbCasdfSAs0K5PALDsaw -1001234567890
  6. Docker guruhiga obunamizdan foydalanuvchi qo‘shing (ular konteynerlarni boshqarishi uchun):
    sudo usermod -aG docker helloworld_admin

Backend repository va frontend uchun ishlab chiqaruvchi muhit xuddi shu tarzda o'rnatiladi.

Github Actions-da joylashtirish quvur liniyasi

Keling, Github Actions-da CI/CD quvur liniyasining birinchi qismini o'rnatishga o'taylik.

Orqa tomon

Quvur liniyasida tasvirlangan deploy.yml fayli.

Ammo uni tahlil qilishdan oldin, keling, Github-da bizga kerak bo'lgan maxfiy o'zgaruvchilarni to'ldiramiz. Buni amalga oshirish uchun quyidagi manzilga o'ting Sozlamalar -> Sirlar:

  • DOCKER_REGISTRY - bizning Docker omborimiz xosti (docker.helloworld.ru);
  • DOCKER_LOGIN - Docker omboriga kirish;
  • DOCKER_PASSWORD - unga parol;
  • DEPLOY_HOST — Plesk boshqaruv paneli mavjud bo'lgan xost (misol: helloworld.com: 8443 yoki 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - serverdagi prod-repozitoriyga joylashtirish uchun token (biz uni Plesk-da joylashtirishda 4-betda oldik);
  • DEPLOY_BACK_DEV_TOKEN - serverdagi dev omboriga joylashtirish uchun token.

Joylashtirish jarayoni oddiy va uchta asosiy bosqichdan iborat:

  • bizning omborimizda tasvirni yaratish va nashr etish;
  • yangi qurilgan tasvirga asoslangan konteynerda sinovlarni o'tkazish;
  • filialga qarab kerakli muhitga joylashtirish (dev/master).

frontend

Old ombor uchun deploy.yml fayli Beknikidan biroz farq qiladi. Unda sinovlarni o'tkazish bosqichi yo'q va joylashtirish uchun tokenlar nomlarini o'zgartiradi. Aytgancha, oldingi ombor uchun sirlarni alohida to'ldirish kerak.

Saytni sozlash

Nginx orqali trafikni proksilash

Xo'sh, biz oxiriga keldik. Nginx orqali konteynerimizga kiruvchi va chiquvchi trafikning proksi-serverini sozlashgina qoladi. Biz bu jarayonni Docker Registry o'rnatishning 5-bosqichida allaqachon ko'rib chiqdik. Xuddi shu narsa ishlab chiqaruvchi va ishlab chiqaruvchi muhitda orqa va old qismlar uchun takrorlanishi kerak.

Men sozlamalarning skrinshotlarini taqdim etaman.

Orqa tomon

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD

frontend

Flask+Angular loyihasi uchun Github harakatlaridagi CI/CD
Vajnoe utochnenie. Barcha URL manzillar frontend konteyneriga proksi-server orqali yuboriladi, bilan boshlanadiganlardan tashqari /api/ - ular orqa konteynerga proksilangan bo'ladi (shunday qilib orqa idishda, barcha ishlov beruvchilar bilan boshlash kerak /api/).

natijalar

Endi bizning saytimiz helloworld.ru va dev.helloworld.ru saytlarida mavjud bo'lishi kerak (mos ravishda prod- va dev-environments).

Umuman olganda, biz Flask va Angular-da oddiy dasturni qanday tayyorlashni o'rgandik va uni Plesk bilan ishlaydigan serverga tarqatish uchun Github Actions-da quvur liniyasini o'rnatdik.

Kod bilan omborlarga havolalarni takrorlayman: backend, foydalanuvchi interfeysi.

Manba: www.habr.com

a Izoh qo'shish