CI/CD v dejanjih Github za projekt Flask+Angular

CI/CD v dejanjih Github za projekt Flask+Angular
V tem članku bom delil svoje izkušnje z nastavitvijo CI/CD z uporabo nadzorne plošče Plesk in Github Actions. Danes se bomo naučili razmestiti preprost projekt z nezapletenim imenom "Helloworld". Napisan je v ogrodju Flask Python z delavci Celery in vmesnikom Angular 8.

Povezave do skladišč: backend, čelni del.

V prvem delu članka si bomo ogledali naš projekt in njegove dele. V drugem bomo ugotovili, kako nastaviti Plesk in namestiti potrebne razširitve in komponente (DB, RabbitMQ, Redis, Docker itd.).

V tretjem delu bomo končno ugotovili, kako nastaviti cevovod za uvajanje našega projekta na strežnik v okolju za razvijalce in proizvajalce. Nato bomo stran zagnali na strežniku.

In ja, pozabil sem se predstaviti. Moje ime je Oleg Borzov, sem fullstack razvijalec v skupini CRM za hipotekarne upravitelje pri Domclicku.

Pregled projekta

Najprej si oglejmo dve projektni repozitoriji – zaledno in sprednjo – in preglejmo kodo.

Ozadje: Flask+Celery

Za zadnji del sem vzel kup, ki je precej priljubljen med razvijalci Pythona: ogrodje Flask (za API) in Celery (za čakalno vrsto opravil). SQLAchemy se uporablja kot ORM. Alembic se uporablja za selitve. Za preverjanje JSON v ročajih - Marshmallow.

В repozitorije obstaja datoteka Readme.md s podrobnim opisom strukture in navodili za izvajanje projekta.

API spletnega gradnika precej preprosto, sestavljeno iz 6 peres:

  • /ping - preveriti razpoložljivost;
  • ročaji za registracijo, avtorizacijo, deavtorizacijo in pridobitev pooblaščenega uporabnika;
  • e-poštni ročaj, ki postavi opravilo v čakalno vrsto Celery.

Del zelene še lažje, samo en problem je send_mail_task.

V mapi /konf obstajata dve podmapi:

  • docker z dvema datotekama Docker (base.dockerfile zgraditi redko spreminjajočo se osnovno podobo in Dockerfile za glavne sklope);
  • .env_files - z datotekami s spremenljivkami okolja za različna okolja.

V korenu projekta so štiri datoteke docker-compose:

  • docker-compose.local.db.yml vzpostavitev lokalne baze podatkov za razvoj;
  • docker-compose.local.workers.yml za lokalno dvigovanje delavca, baze podatkov, Redis in RabbitMQ;
  • docker-compose.test.yml za izvajanje testov med uvajanjem;
  • docker-compose.yml za uvajanje.

In zadnja mapa, ki nas zanima - .ci-cd. Vsebuje lupinske skripte za uvajanje:

  • deploy.sh — začetek migracije in uvajanja. Zažene se na strežniku po gradnji in izvajanju testov v Github Actions;
  • rollback.sh - vrnitev vsebnikov na prejšnjo različico sklopa;
  • curl_tg.sh — pošiljanje obvestil o uvajanju v Telegram.

Frontend na Angular

Repozitorij s sprednjo stranjo veliko preprostejši od Beckovega. Prednja stran je sestavljena iz treh strani:

  • Glavna stran z obrazcem za pošiljanje elektronske pošte in gumbom za izhod.
  • prijavna stran.
  • Stran za registracijo.

Glavna stran izgleda asketsko:

CI/CD v dejanjih Github za projekt Flask+Angular
V korenu sta dve datoteki Dockerfile и docker-compose.yml, pa tudi znano mapo .ci-cd z nekoliko manj skripti kot v zadnjem repozitoriju (odstranjeni skripti za izvajanje testov).

Začetek projekta v Plesku

Začnimo z nastavitvijo Pleska in ustvarjanjem naročnine za naše spletno mesto.

Namestitev razširitev

V Plesku potrebujemo štiri razširitve:

  • Docker za upravljanje in vizualni prikaz stanja vsebnikov v skrbniški plošči Plesk;
  • Git za konfiguracijo koraka uvajanja na strežniku;
  • Let's Encrypt ustvariti (in samodejno obnoviti) brezplačna potrdila TLS;
  • Firewall za konfiguracijo filtriranja dohodnega prometa.

Namestite jih lahko prek skrbniške plošče Plesk v razdelku Razširitve:

CI/CD v dejanjih Github za projekt Flask+Angular
Ne bomo upoštevali podrobnih nastavitev za razširitve, privzete nastavitve bodo zadostovale za naše predstavitvene namene.

Ustvarite naročnino in spletno mesto

Nato moramo ustvariti naročnino za naše spletno mesto helloworld.ru in tam dodati poddomeno dev.helloworld.ru.

  1. Ustvarimo naročnino za domeno helloworld.ru in določimo geslo za prijavo za uporabnika sistema:

    CI/CD v dejanjih Github za projekt Flask+Angular
    Potrdite polje na dnu strani Zavarujte domeno z Let's Encryptče želimo za spletno mesto nastaviti HTTPS:

    CI/CD v dejanjih Github za projekt Flask+Angular

  2. Nato v tej naročnini ustvarite poddomeno dev.helloworld.ru (za katero lahko izdate tudi brezplačno potrdilo TLS):

    CI/CD v dejanjih Github za projekt Flask+Angular

Namestitev strežniških komponent

Imamo strežnik s OS Debian Stretch 9.12 in nameščeno nadzorno ploščo Plesk Obsidian 18.0.27.

Za naš projekt moramo namestiti in konfigurirati:

  • PostgreSQL (v našem primeru bo en strežnik z dvema bazama podatkov za dev in prod okolja).
  • RabbitMQ (ista stvar, en primerek z različnimi vgostitelji za okolja).
  • Dva primerka Redis (za razvojna in proizvodna okolja).
  • Register Docker (za lokalno shranjevanje zgrajenih slik Docker).
  • UI za register Docker.

PostgreSQL

Plesk je že opremljen s DBMS PostgreSQL, vendar ne najnovejšo različico (v času pisanja Plesk Obsidian podprt Postgres različice 8.4–10.8). Želimo najnovejšo različico za našo aplikacijo (12.3 v času tega pisanja), zato jo bomo namestili ročno.

Na netu je veliko podrobnih navodil za namestitev Postgresa na Debian (Primer), zato jih ne bom podrobno opisoval, dal bom le ukaze:

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

Glede na to, da ima PostgreSQL precej povprečne privzete nastavitve, je potrebno konfiguracijo popraviti. To nam bo pomagalo kalkulator: vnesti morate parametre svojega strežnika in zamenjati nastavitve v datoteki /etc/postgresql/12/main/postgresql.confna ponujene. Tukaj je treba opozoriti, da takšni kalkulatorji niso čarobna krogla in da je treba osnovo prilagoditi bolj natančno, glede na vašo strojno opremo, aplikacijo in zahtevnost poizvedbe. Toda to je dovolj za začetek.

Poleg nastavitev, ki jih predlaga kalkulator, spreminjamo tudi postgresql.confprivzeta vrata 5432 na druga (v našem primeru - 53983).

Po spremembi konfiguracijske datoteke znova zaženite postgresql-strežnik z ukazom:

service postgresql restart

Namestili in konfigurirali smo PostgreSQL. Zdaj pa ustvarimo zbirko podatkov, uporabnike za razvojna in proizvodna okolja ter uporabnikom podelimo pravice za upravljanje baze podatkov:

$ 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

Preidimo k namestitvi RabbitMQ, posrednika sporočil za Celery. Namestitev na Debian je precej preprosta:

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 namestitvi moramo ustvariti vhosts, uporabnike in dodelite potrebne pravice:

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

Zdaj pa namestimo in konfiguriramo zadnjo komponento za našo aplikacijo - Redis. Uporabljal se bo kot zaledje za shranjevanje rezultatov opravil Celery.

Pripravili bomo dva vsebnika Docker z Redisom za okolja razvijalcev in izdelkov z uporabo razširitve Docker za Plesk.

  1. Gremo v Plesk, gremo v razdelek Razširitve, poiščemo razširitev Docker in jo namestimo (potrebujemo brezplačno različico):

    CI/CD v dejanjih Github za projekt Flask+Angular

  2. Pojdite na nameščeno razširitev, poiščite sliko z iskanjem redis bitnami in namestite najnovejšo različico:

    CI/CD v dejanjih Github za projekt Flask+Angular

  3. Gremo v preneseni vsebnik in prilagodimo konfiguracijo: določimo vrata, največjo dodeljeno velikost RAM-a, geslo v spremenljivkah okolja in namestite glasnost:

    CI/CD v dejanjih Github za projekt Flask+Angular

  4. Izvedemo korake 2-3 za prod vsebnik, v nastavitvah spremenimo samo parametre: vrata, geslo, velikost RAM-a in pot do mape nosilca na strežniku:

    CI/CD v dejanjih Github za projekt Flask+Angular

Dockerjev register

Poleg osnovnih storitev bi bilo lepo na strežnik namestiti lastno skladišče slik Docker. Na srečo je prostor na strežnikih zdaj precej poceni (zagotovo cenejši od naročnine na DockerHub), postopek namestitve zasebnega repozitorija pa je zelo preprost.

Želimo imeti:

V ta namen:

  1. V naši naročnini ustvarimo dve poddomeni v Plesku: docker.helloworld.ru in docker-ui.helloworld.ru ter zanju konfiguriramo potrdila Let's Encrypt.
  2. Dodajte datoteko v mapo poddomene docker.helloworld.ru docker-compose.yml s takšno vsebino:
    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. Pod SSH bomo ustvarili datoteko .htpasswd za osnovno avtorizacijo v repozitoriju Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Zberite in dvignite posode:
    docker-compose up -d
  5. In Nginx moramo preusmeriti v naše vsebnike. To je mogoče storiti prek Pleska.

Za poddomeni docker.helloworld.ru in docker-ui.helloworld.ru je treba izvesti naslednje korake:

V oddelku Orodja za razvijalce pojdite na naše spletno mesto Pravila proxyja Docker:

CI/CD v dejanjih Github za projekt Flask+Angular
In dodajte pravilo za proxy dohodni promet v naš vsebnik:

CI/CD v dejanjih Github za projekt Flask+Angular

  1. Preverimo, ali se lahko prijavimo v naš vsebnik z lokalnega računalnika:
    $ 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. Preverimo še delovanje poddomene docker-ui.helloworld.ru:

    CI/CD v dejanjih Github za projekt Flask+Angular
    Ko kliknete Prebrskaj repozitorije, bo brskalnik prikazal avtorizacijsko okno, kjer boste morali vnesti uporabniško ime in geslo za repozitorij. Po tem bomo preusmerjeni na stran s seznamom repozitorijev (zaenkrat bo za vas prazen):

    CI/CD v dejanjih Github za projekt Flask+Angular

Odpiranje vrat v požarnem zidu Plesk

Po namestitvi in ​​konfiguraciji komponent moramo odpreti vrata, tako da so komponente dostopne iz vsebnikov Docker in zunanjega omrežja.

Poglejmo, kako to storiti z razširitvijo požarnega zidu za Plesk, ki smo jo namestili prej.

  1. Pojdi do Orodja in nastavitve > Nastavitve > Požarni zid:
    CI/CD v dejanjih Github za projekt Flask+Angular
  2. Pojdi do Spremeni pravila požarnega zidu Plesk > Dodaj pravilo po meri in odprite naslednja vrata TCP za podomrežje Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD v dejanjih Github za projekt Flask+Angular

  3. Dodali bomo tudi pravilo, ki bo zunanjemu svetu odprlo vrata PostgreSQL in upravljalne plošče RabbitMQ:

    CI/CD v dejanjih Github za projekt Flask+Angular

  4. Uporabite pravila z gumbom Uporabi spremembe:

    CI/CD v dejanjih Github za projekt Flask+Angular

Nastavitev CI/CD v Github Actions

Pojdimo k najzanimivejšemu delu – vzpostavitvi neprekinjenega integracijskega cevovoda in dostavi našega projekta na strežnik.

Ta plinovod bo sestavljen iz dveh delov:

  • izdelava slike in izvajanje testov (za zaledje) – na strani Github;
  • izvajanje migracij (za zaledje) in uvajanje vsebnikov – na strežniku.

Namestite v Plesk

Najprej se posvetimo drugi točki (ker je prva odvisna od nje).

Postopek uvajanja bomo konfigurirali z uporabo razširitve Git za Plesk.

Razmislite o primeru z okoljem Prod za backend repozitorij.

  1. Gremo na naročnino našega spletnega mesta Helloworld in gremo v podrazdelek Git:

    CI/CD v dejanjih Github za projekt Flask+Angular

  2. V polje »Remote Git repository« vstavite povezavo do našega repozitorija Github in spremenite privzeto mapo httpdocs drugemu (npr. /httpdocs/hw_back):

    CI/CD v dejanjih Github za projekt Flask+Angular

  3. Kopirajte javni ključ SSH iz prejšnjega koraka in dodati je v nastavitvah Githuba.
  4. Kliknite V redu na zaslonu v 2. koraku, po katerem bomo preusmerjeni na stran repozitorija v Plesku. Zdaj moramo konfigurirati repozitorij, da se posodablja ob predajah v glavno vejo. Če želite to narediti, pojdite na Nastavitve skladišča in shranite vrednost Webhook URL (potrebovali ga bomo pozneje, ko bomo nastavljali Github Actions):

    CI/CD v dejanjih Github za projekt Flask+Angular

  5. V polje Dejanja na zaslonu iz prejšnjega odstavka vnesite skript za zagon uvajanja:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    kjer je:

    {REPOSITORY_ABSOLUTE_PATH} - pot do mape prod zalednega repozitorija na strežniku;
    {ENV} - okolje (dev / prod), v našem primeru prod;
    {DOCKER_REGISTRY_HOST} - gostitelj našega repozitorija dockerjev
    {TG_BOT_TOKEN} — Telegram bot žeton;
    {TG_CHAT_ID} — ID klepeta/kanala za pošiljanje obvestil.

    Primer skripta:

    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. Dodajte uporabnika iz naše naročnine v skupino Docker (da bo lahko upravljal vsebnike):
    sudo usermod -aG docker helloworld_admin

Razvijalsko okolje za backend repozitorij in frontend sta nastavljena na enak način.

Cevovod za uvajanje v Github Actions

Preidimo na nastavitev prvega dela našega cevovoda CI/CD v Github Actions.

Backend

Cevovod je opisan v datoteko deploy.yml.

Toda preden ga razčlenimo, izpolnimo Secret spremenljivke, ki jih potrebujemo v Githubu. Če želite to narediti, pojdite na Nastavitve -> Skrivnosti:

  • DOCKER_REGISTRY - gostitelj našega repozitorija Docker (docker.helloworld.ru);
  • DOCKER_LOGIN - prijava v repozitorij Docker;
  • DOCKER_PASSWORD - geslo do njega;
  • DEPLOY_HOST — gostitelj, kjer je na voljo skrbniška plošča Plesk (primer: helloworld.ru:8443 oz 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - žeton za postavitev v prod-repozitorij na strežniku (dobili smo ga v Postavitev v Plesku str. 4);
  • DEPLOY_BACK_DEV_TOKEN - žeton za namestitev v repozitorij razvijalcev na strežniku.

Postopek uvajanja je preprost in je sestavljen iz treh glavnih korakov:

  • izdelava in objava slike v našem skladišču;
  • izvajanje testov v vsebniku na podlagi sveže zgrajene slike;
  • uvedba v želeno okolje glede na vejo (dev/master).

začelje

Datoteka deploy.yml za sprednji repozitorij malo drugačna od Beckove. Manjka korak z izvajanjem testov in spreminjanjem imen žetonov za uvajanje. Mimogrede, skrivnosti za sprednji repozitorij je treba izpolniti posebej.

Nastavitev spletnega mesta

Proxy promet prek Nginx

Pa smo prišli do konca. Ostaja samo konfiguracija proxyja dohodnega in odhodnega prometa v naš vsebnik prek Nginx. Ta postopek smo že opisali v 5. koraku nastavitve registra Docker. Enako je treba ponoviti za zadnji in sprednji del v okoljih dev in prod.

Posredoval bom posnetke zaslona nastavitev.

Backend

CI/CD v dejanjih Github za projekt Flask+Angular

začelje

CI/CD v dejanjih Github za projekt Flask+Angular
Pomembno pojasnilo. Vsi URL-ji bodo posredovani v vsebnik sprednjega dela, razen tistih, ki se začnejo z /api/ — poslani bodo v zadnji vsebnik (torej v zadnji posodi morajo vsi vodniki začeti z /api/).

Rezultati

Zdaj bi moralo biti naše spletno mesto na voljo na helloworld.ru in dev.helloworld.ru (proizvodno in razvojno okolje).

Naučili smo se, kako pripraviti preprosto aplikacijo v Flasku in Angularju ter nastaviti cevovod v Github Actions, da jo uvedemo na strežnik, ki izvaja Plesk.

Podvojil bom povezave do skladišč s kodo: backend, čelni del.

Vir: www.habr.com

Dodaj komentar