CI/CD v akciách Github pre projekt Flask+Angular

CI/CD v akciách Github pre projekt Flask+Angular
V tomto článku sa podelím o svoje skúsenosti s nastavením CI/CD pomocou ovládacieho panela Plesk a akcií Github. Dnes sa naučíme, ako nasadiť jednoduchý projekt s nekomplikovaným názvom „Helloworld“. Je napísaný vo Flask Python frameworku s pracovníkmi Celery a frontendom Angular 8.

Odkazy na úložiská: backend, frontend.

V prvej časti článku sa pozrieme na náš projekt a jeho časti. V druhom prídeme na to, ako nastaviť Plesk a nainštalovať potrebné rozšírenia a komponenty (DB, RabbitMQ, Redis, Docker atď.).

V tretej časti konečne prídeme na to, ako nastaviť kanál na nasadenie nášho projektu na server v prostredí vývojárov a produktov. Potom spustíme stránku na serveri.

A áno, zabudol som sa predstaviť. Volám sa Oleg Borzov, som fullstack developer v tíme CRM pre hypotekárnych manažérov v spoločnosti Domclick.

Prehľad projektu

Najprv sa pozrime na dva projektové úložiská – backend a front – a prejdeme si kód.

Backend: Banka + zeler

Pre zadnú časť som si vzal partiu, ktorá je medzi vývojármi Pythonu celkom populárna: rámec Flask (pre API) a Celery (pre front úloh). SQLAchemy sa používa ako ORM. Alembic sa používa na migráciu. Na overenie JSON v popisovačoch - Marshmallow.

В úložiská existuje súbor Readme.md s podrobným popisom štruktúry a návodom na spustenie projektu.

API webovej časti celkom nekomplikované, pozostáva zo 6 pier:

  • /ping - skontrolovať dostupnosť;
  • spracováva registráciu, autorizáciu, deautorizáciu a získanie oprávneného užívateľa;
  • popisovač e-mailu, ktorý zaradí úlohu do frontu Celery.

Zeler časť ešte jednoduchšie, je tu len jeden problém send_mail_task.

V priečinku /conf sú tam dva podpriečinky:

  • docker s dvoma Dockerfile (base.dockerfile vytvoriť zriedkavo sa meniaci základný imidž a Dockerfile pre hlavné zostavy);
  • .env_files - so súbormi s premennými prostredia pre rôzne prostredia.

V koreňovom adresári projektu sú štyri súbory na vytvorenie docker-compose:

  • docker-compose.local.db.yml vytvoriť miestnu databázu pre rozvoj;
  • docker-compose.local.workers.yml pre lokálnu výchovu pracovníka, databázy, Redis a RabbitMQ;
  • docker-compose.test.yml spustiť testy počas nasadenia;
  • docker-compose.yml na nasadenie.

A posledný priečinok, ktorý nás zaujíma - .ci-cd. Obsahuje skripty shellu na nasadenie:

  • deploy.sh — spustenie migrácie a zavádzania. Beží na serveri po vytvorení a spustení testov v Github Actions;
  • rollback.sh - vrátenie kontajnerov na predchádzajúcu verziu zostavy;
  • curl_tg.sh - odosielanie upozornení na nasadenie do telegramu.

Frontend na Angular

Úložisko s prednou časťou oveľa jednoduchšie ako u Becka. Predná strana pozostáva z troch strán:

  • Hlavná stránka s formulárom na odoslanie emailu a tlačidlom odchodu.
  • Prihlasovacia stránka.
  • Registračná stránka.

Hlavná stránka vyzerá asketicky:

CI/CD v akciách Github pre projekt Flask+Angular
V koreňovom adresári sú dva súbory Dockerfile и docker-compose.yml, ako aj známy priečinok .ci-cd s o niečo menším počtom skriptov ako v zadnom úložisku (odstránené skripty pre spustenie testov).

Spustenie projektu v Plesku

Začnime nastavením Plesku a vytvorením predplatného pre našu stránku.

Inštalácia rozšírení

V Plesku potrebujeme štyri rozšírenia:

  • Docker spravovať a vizuálne zobrazovať stav kontajnerov v administračnom paneli Plesk;
  • Git nakonfigurovať krok nasadenia na serveri;
  • Let's Encrypt vytvárať (a automaticky obnovovať) bezplatné certifikáty TLS;
  • Firewall konfigurovať filtrovanie prichádzajúcej prevádzky.

Môžete si ich nainštalovať cez administračný panel Plesk v sekcii Rozšírenia:

CI/CD v akciách Github pre projekt Flask+Angular
Nebudeme brať do úvahy podrobné nastavenia pre rozšírenia, predvolené nastavenia budú stačiť pre naše demo účely.

Vytvorte si predplatné a stránku

Ďalej musíme vytvoriť predplatné našej webovej stránky helloworld.ru a pridať tam subdoménu dev.helloworld.ru.

  1. Vytvorte predplatné pre doménu helloworld.ru a zadajte prihlasovacie heslo pre používateľa systému:

    CI/CD v akciách Github pre projekt Flask+Angular
    Začiarknite políčko v spodnej časti stránky Zabezpečte doménu pomocou Let's Encryptak chceme pre web nastaviť HTTPS:

    CI/CD v akciách Github pre projekt Flask+Angular

  2. Ďalej v tomto predplatnom vytvorte subdoménu dev.helloworld.ru (pre ktorú môžete tiež vydať bezplatný certifikát TLS):

    CI/CD v akciách Github pre projekt Flask+Angular

Inštalácia komponentov servera

Máme server s OS Debian Stretch 9.12 a nainštalovaný ovládací panel Plesk Obsidián 18.0.27.

Pre náš projekt musíme nainštalovať a nakonfigurovať:

  • PostgreSQL (v našom prípade to bude jeden server s dvoma databázami pre dev a prod prostredia).
  • RabbitMQ (rovnaká, rovnaká inštancia s rôznymi vhostmi pre prostredia).
  • Dve inštancie Redis (pre vývojové a prod prostredia).
  • Register Docker (na lokálne ukladanie vytvorených obrazov Docker).
  • Používateľské rozhranie pre register Docker.

PostgreSQL

Plesk už prichádza s PostgreSQL DBMS, ale nie s najnovšou verziou (v čase písania Plesk Obsidian podporované Postgres verzie 8.4–10.8). Chceme najnovšiu verziu našej aplikácie (12.3 v čase písania tohto článku), preto ju nainštalujeme manuálne.

Existuje veľa podrobných pokynov na inštaláciu Postgres na Debian na sieti (príklad), takže ich nebudem podrobne popisovať, uvediem iba príkazy:

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

Vzhľadom na to, že PostgreSQL má skôr priemerné predvolené nastavenia, je potrebné opraviť konfiguráciu. Toto nám pomôže kalkulačka: musíte zadať parametre vášho servera a nahradiť nastavenia v súbore /etc/postgresql/12/main/postgresql.confk tým ponúkaným. Tu je potrebné poznamenať, že takéto kalkulačky nie sú zázračné a základ by mal byť vyladený presnejšie na základe vášho hardvéru, aplikácie a zložitosti dotazov. Ale na začiatok to stačí.

Okrem nastavení navrhnutých kalkulačkou meníme aj postgresql.confpredvolený port 5432 na iný (v našom príklade - 53983).

Po zmene konfiguračného súboru reštartujte postgresql-server príkazom:

service postgresql restart

PostgreSQL sme nainštalovali a nakonfigurovali. Teraz vytvorme databázu, používateľov pre vývojové a prod prostredia a dáme používateľom práva na správu databázy:

$ 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

RabbitMQ

Prejdime k inštalácii RabbitMQ, sprostredkovateľa správ pre Celery. Inštalácia na Debian je pomerne jednoduchá:

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

Po inštalácii musíme vytvoriť vhosts, používateľov a udeliť potrebné práva:

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

Teraz poďme nainštalovať a nakonfigurovať posledný komponent pre našu aplikáciu - Redis. Bude slúžiť ako backend na ukladanie výsledkov úloh Celery.

Pomocou rozšírenia vytvoríme dva kontajnery Docker s Redis pre vývojové a prod prostredia Docker pre Pleska.

  1. Prejdeme na Plesk, prejdeme do sekcie Rozšírenia, vyhľadáme rozšírenie Docker a nainštalujeme ho (potrebujeme bezplatnú verziu):

    CI/CD v akciách Github pre projekt Flask+Angular

  2. Prejdite na nainštalované rozšírenie a vyhľadajte obrázok pomocou vyhľadávania redis bitnami a nainštalujte najnovšiu verziu:

    CI/CD v akciách Github pre projekt Flask+Angular

  3. Ideme do stiahnutého kontajnera a upravíme konfiguráciu: špecifikujeme port, maximálnu pridelenú veľkosť RAM, heslo v premenných prostredia a pripojíme zväzok:

    CI/CD v akciách Github pre projekt Flask+Angular

  4. Kroky 2-3 vykonávame pre prod kontajner, v nastaveniach meníme iba parametre: port, heslo, veľkosť RAM a cestu k priečinku zväzku na serveri:

    CI/CD v akciách Github pre projekt Flask+Angular

Register Docker

Okrem základných služieb by bolo pekné umiestniť na server svoje vlastné úložisko obrázkov Docker. Našťastie je teraz priestor na serveri pomerne lacný (určite lacnejšie ako predplatné DockerHub) a proces nastavenia súkromného úložiska je veľmi jednoduchý.

Chceme mať:

Za týmto účelom:

  1. Vytvorme dve subdomény v Plesku v našom predplatnom: docker.helloworld.ru a docker-ui.helloworld.ru a nakonfigurujeme pre ne certifikáty Let's Encrypt.
  2. Pridajte súbor do priečinka subdomény docker.helloworld.ru docker-compose.yml s obsahom ako je tento:
    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. V rámci SSH vygenerujeme súbor .htpasswd pre základnú autorizáciu v úložisku Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Zbierajte a zdvíhajte kontajnery:
    docker-compose up -d
  5. A musíme presmerovať Nginx do našich kontajnerov. Dá sa to urobiť cez Plesk.

Pre subdomény docker.helloworld.ru a docker-ui.helloworld.ru je potrebné vykonať nasledujúce kroky:

V sekcii Dev Tools prejdite na našu stránku Pravidlá Docker Proxy:

CI/CD v akciách Github pre projekt Flask+Angular
A pridajte pravidlo pre proxy prichádzajúcu návštevnosť do nášho kontajnera:

CI/CD v akciách Github pre projekt Flask+Angular

  1. Skontrolujeme, či sa môžeme prihlásiť do nášho kontajnera z lokálneho počítača:
    $ 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. Pozrime sa tiež na fungovanie subdomény docker-ui.helloworld.ru:

    CI/CD v akciách Github pre projekt Flask+Angular
    Keď kliknete na Prehľadávať repozitáre, prehliadač zobrazí autorizačné okno, kde budete musieť zadať užívateľské meno a heslo pre repozitár. Potom sa presunieme na stránku so zoznamom úložísk (zatiaľ bude pre vás prázdna):

    CI/CD v akciách Github pre projekt Flask+Angular

Otváranie portov v bráne Plesk Firewall

Po inštalácii a konfigurácii komponentov musíme otvoriť porty, aby boli komponenty prístupné z kontajnerov Docker a externej siete.

Pozrime sa, ako to urobiť pomocou rozšírenia Firewall pre Plesk, ktoré sme nainštalovali skôr.

  1. Ísť do Nástroje a nastavenia > Nastavenia > Firewall:
    CI/CD v akciách Github pre projekt Flask+Angular
  2. Ísť do Upraviť pravidlá brány Plesk Firewall > Pridať vlastné pravidlo a otvorte nasledujúce porty TCP pre podsieť Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD v akciách Github pre projekt Flask+Angular

  3. Pridáme tiež pravidlo, ktoré otvorí porty PostgreSQL a panely správy RabbitMQ do vonkajšieho sveta:

    CI/CD v akciách Github pre projekt Flask+Angular

  4. Použite pravidlá pomocou tlačidla Použiť zmeny:

    CI/CD v akciách Github pre projekt Flask+Angular

Nastavenie CI/CD v akciách Github

Poďme k najzaujímavejšej časti – k nastaveniu kontinuálneho integračného potrubia a doručovaniu nášho projektu na server.

Toto potrubie bude pozostávať z dvoch častí:

  • vytvorenie obrazu a spustenie testov (pre backend) - na strane Github;
  • spustenie migrácií (pre backend) a nasadenie kontajnerov - na serveri.

Nasadenie do Plesku

Poďme sa najskôr zaoberať druhým bodom (pretože prvý závisí od toho).

Proces nasadenia nakonfigurujeme pomocou rozšírenia Git pre Plesk.

Zvážte príklad s prostredím Prod pre úložisko Backend.

  1. Prejdeme na predplatné našej webovej stránky Helloworld a prejdeme do podsekcie Git:

    CI/CD v akciách Github pre projekt Flask+Angular

  2. Vložte odkaz na naše úložisko Github do poľa „Remote Git repository“ a zmeňte predvolený priečinok httpdocs inému (napr. /httpdocs/hw_back):

    CI/CD v akciách Github pre projekt Flask+Angular

  3. Skopírujte verejný kľúč SSH z predchádzajúceho kroku a pridanie je to v nastaveniach Github.
  4. Kliknite na tlačidlo OK na obrazovke v kroku 2, po ktorom budeme presmerovaní na stránku úložiska v Plesku. Teraz musíme nakonfigurovať úložisko tak, aby sa aktualizovalo pri odovzdaní do hlavnej vetvy. Ak to chcete urobiť, prejdite na stránku Nastavenia úložiska a uložte hodnotu Webhook URL (budeme to potrebovať neskôr pri nastavovaní akcií Github):

    CI/CD v akciách Github pre projekt Flask+Angular

  5. Do poľa Akcie na obrazovke z predchádzajúceho odseku zadajte skript na spustenie nasadenia:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    kde:

    {REPOSITORY_ABSOLUTE_PATH} - cesta k priečinku prod backendového úložiska na serveri;
    {ENV} - prostredie (dev / prod), v našom prípade prod;
    {DOCKER_REGISTRY_HOST} - hostiteľ nášho úložiska dockerov
    {TG_BOT_TOKEN} — token telegramového bota;
    {TG_CHAT_ID} — ID chatu/kanála na odosielanie upozornení.

    Príklad skriptu:

    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. Pridajte používateľa z nášho predplatného do skupiny Docker (aby mohol spravovať kontajnery):
    sudo usermod -aG docker helloworld_admin

Vývojárske prostredie pre backendové úložisko a frontend sú nastavené rovnakým spôsobom.

Priebeh nasadenia v akciách Github

Prejdime k nastaveniu prvej časti nášho CI/CD potrubia v Github Actions.

backend

Potrubie je popísané v súbor deploy.yml.

Pred analýzou však vyplňte tajné premenné, ktoré potrebujeme v Github. Ak to chcete urobiť, prejdite na stránku Nastavenia -> Tajomstvá:

  • DOCKER_REGISTRY - hostiteľ nášho úložiska Docker (docker.helloworld.ru);
  • DOCKER_LOGIN - prihláste sa do úložiska Docker;
  • DOCKER_PASSWORD - heslo k nemu;
  • DEPLOY_HOST — hostiteľ, kde je dostupný panel správcu Plesk (príklad: helloworld.ru: 8443 resp 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - token pre nasadenie do prod-repository na serveri (získali sme ho v Deployment v Plesku str. 4);
  • DEPLOY_BACK_DEV_TOKEN - token pre nasadenie do dev úložiska na serveri.

Proces nasadenia je jednoduchý a pozostáva z troch hlavných krokov:

  • vytvorenie a zverejnenie obrázka v našom úložisku;
  • spustenie testov v kontajneri na základe čerstvo vytvoreného obrazu;
  • nasadenie do požadovaného prostredia v závislosti od pobočky (dev/master).

Frontend

Súbor deploy.yml pre predné úložisko trochu odlišný od Beckovho. Chýba mu krok so spustením testov a zmeny názvov tokenov pre nasadenie. Mimochodom, tajomstvá pre predné úložisko je potrebné vyplniť samostatne.

Nastavenie lokality

Sprostredkovanie prevádzky cez Nginx

No a prišli sme na koniec. Zostáva iba nakonfigurovať proxy prichádzajúcu a odchádzajúcu prevádzku do nášho kontajnera prostredníctvom Nginx. Tento proces sme už popísali v kroku 5 nastavenia databázy Docker Registry. To isté by sa malo zopakovať pre zadnú a prednú časť v prostredí vývojárov a produktov.

Poskytnem screenshoty nastavení.

backend

CI/CD v akciách Github pre projekt Flask+Angular

Frontend

CI/CD v akciách Github pre projekt Flask+Angular
Dôležité objasnenie. Všetky adresy URL budú prepojené s kontajnerom frontendu okrem tých, ktoré začínajú /api/ - budú pripojení k zadnému kontajneru (tzv v zadnom kontajneri musia všetci manipulanti začať s /api/).

Výsledky

Teraz by mala byť naša stránka dostupná na helloworld.ru a dev.helloworld.ru (prod- a dev-environments, v tomto poradí).

Celkovo sme sa naučili, ako pripraviť jednoduchú aplikáciu v programoch Flask a Angular a nastaviť kanál v Github Actions, aby sme ju mohli spustiť na serveri, na ktorom beží Plesk.

Duplikujem odkazy na úložiská s kódom: backend, frontend.

Zdroj: hab.com

Pridať komentár