CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
Selles artiklis jagan oma kogemusi CI/CD seadistamisel, kasutades Pleski juhtpaneeli ja Github Actions'i. Täna õpime, kuidas käivitada lihtsat projekti nimega "Helloworld", mis on kirjutatud Python'i raamistikus Flask, Celery töötajatega ja Angular 8 frontendiga.

Repo ühendused: tagumine osa, esimene osa.

Artikli esimeses osas vaatame meie projekti ja selle komponente. Teises osas selgitame, kuidas seadistada Pleskit ja installida vajalikud laiendused ja komponendid (andmebaas, RabbitMQ, Redis, Docker jne).

Kolmandas osas käsitleme lõpuks, kuidas seadistada pipelines, et käivitada meie projekt serveris dev- ja prod-keskkonnas. Seejärel käivitame saidi serveris.

Ja jah, unustasin end tutvustada. Minu nimi on Oleg Borzov, olen täisvirna arendaja CRM meeskonnas, mis tegeleb kodulaenude halduritega Domklik'is.

Projekt vaade

Alustuseks vaatame kahte projekti hoidlat — tagumist osa ja esimest osa — ning näeme koodi üle.

Tagumine osa: Flask + Celery

Tagaküljeks valisin Python-arendajate seas üsna populaarse kombinatsiooni: Flask (API jaoks) ja Celery (ülesannete järjekorra jaoks). ORM-ina kasutatakse SQLAlchemy't. Migratsioonide jaoks on kasutusel Alembic. JSONi valideerimiseks käepidemetes – Marshmallow.

V repositoriis on olemas fail Readme.md, kus on selle struktuuri ja projekti käivitamiseks vajalikud juhised.

Veebi API on piisavalt lihtne, koosneb 6 käepidemest:

  • /ping — töökindluse kontrollimiseks;
  • käepidemed registreerimiseks, autentimiseks, deautentimiseks ja autentitud kasutaja saamiseks;
  • käepide e-kirjade saatmiseks, mis paneb ülesande Celery järjekorda.

Celery osa on veelgi lihtsam, seal on vaid üks ülesanne send_mail_task.

Kaustas /conf on kaks alamkausta:

  • docker kahe Docker-failiga (base.dockerfile harva muutuva põhikujundi jaoks ja Dockerfile peamiseks kogumis);
  • .env_files — keskkonnamuutujatefailidega erinevatele keskkondadele.

Projekti juures on neli docker-compose faili:

  • docker-compose.local.db.yml kohaliku arenduse andmebaasi käivitamiseks;
  • docker-compose.local.workers.yml kohalike töötajate, andmebaasi, Redis'i ja RabbitMQ käivitamiseks;
  • docker-compose.test.yml testide läbiviimiseks juurutuse käigus;
  • docker-compose.yml deploomiseks.

Ja viimane huvitav kaust, millel on tähtsust — .ci-cd. Siin on shell-scriptid juurutamiseks:

  • deploy.sh — migratsiooni ja juurutamise käivitamine. Käivitatakse serveris pärast koostamist ja testide läbiviimist Github Actions'is;
  • rollback.sh — konteinerite tagasiviimine eelnenud versiooni.
  • curl_tg.sh — teavituste saatmine juurutamisest Telegramisse.

Frontend Angularil

Repo front-end'iga on palju lihtsam kui back-end. Front koosneb kolmest lehelt:

  • Pealeht koos e-posti saatmise vormi ja väljuminenuhiga.
  • Sisselogimise leht.
  • Registreerimise leht.

Pealeht näeb minimaalne välja:

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
Juurtas on kaks faili Dockerfile ja docker-compose.yml, samuti tuttav meile kaust .ci-cd veidi vähemate skriptidega kui back-end'i repos (testide käivitamise skriptid on eemaldatud).

Loome projekti Pleskis

Alustame Pleski seadistamise ja tellimuse loomisega meie saidile.

Laienduste installimine

Pleskis vajame nelja laiendust:

  • Docker konteinerite haldamiseks ja nende oleku visuaalseks kuvamiseks Pleski halduses;
  • Git pakkumise seadistamiseks serveris;
  • Let's Encrypt tasuta TLS-sertifikaatide genereerimiseks (ja automaatseks uuendamiseks);
  • Firewall sissetuleva liikluse filtreerimise seadistamiseks.

Need saab installida Pleski halduses jaotises Extensions:

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
Ainult põhiseaded sobivad meie demonstratsioonide jaoks, detailset seadistust me ei aruta.

Tellimuse ja veebisaidi loomine

Edasi peame looma tellimuse meie veebisaidile helloworld.ru ja lisama alamdomeeni dev.helloworld.ru.

  1. Loome tellimuse domeenile helloworld.ru ja määrame süsteemikasutaja kasutajanime ja parooli:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
    Allpool lehte paneme linnukese Kinnita domeeni Let’s Encryptiga, kui soovime seadistada HTTPS-i veebisaidile:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  2. Edasi selles tellimuses loome alamdomeeni dev.helloworld.ru (mille jaoks saab samuti tasuta TLS-sertifikaadi välja anda):

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

Serverikomponentide installimine

Meil on server, millel on OS Debian Stretch 9.12 ja paigaldatud halduspaneel Plesk Obsidian 18.0.27.

Peame installima ja seadistama meie projekti jaoks:

  • PostgreSQL (meie juhul on üks server kahe andmebaasiga dev- ja prod-keskkonna jaoks).
  • RabbitMQ (sama, üks instants erinevate vhosts vahel keskkondade jaoks).
  • Kaks Redis’i instantsi (dev- ja prod-keskkonna jaoks).
  • Docker Registry (kogutud Docker-piltide kohalikuks salvestamiseks).
  • Docker registry jaoks UI-liides.

PostgreSQL

Pleskiga tuleb juba kaasa PostgreSQL andmebaas, kuid mitte kõige uuema versiooniga (artikli kirjutamise ajal toetas Plesk Obsidian siiski versiooni Postgres versioonid 8.4–10.8). Meie soovime oma rakendusele kõige uuemat versiooni (12.3 kirjutamise ajal), seega paigaldame selle käsitsi.

Internetis on palju üksikasjalikke juhiseid Postgresi paigaldamiseks Debianile (an example), seega ei hakka ma neid üksikasjalikult kirjeldama, lihtsalt toome välja käsud:

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

Arvestades, et PostgreSQL-i vaikeseaded on üsna keskpärased, on vajalik kindlasti konfiguratsiooni kohandamine. Meid aitab selle juures kalkulaator: tuleb sisestada oma serveri parameetrid ja asendada seaded failis /etc/postgresql/12/main/postgresql.confsoovitustega. Siinkohal tuleks märkida, et sellised kalkulaatorid ei ole imerohtu ning andmebaasi tuleks täpsemalt häälestada, lähtudes teie riistvarast, rakendusest ja päringute keerukusest. Kuid alustamiseks on see piisav.

Lisaks kalkulaatori soovitatud seadetele muudame ka postgresql.confvaikimisi määratud sadama 5432 teiseks (meie näites — 53983).

Pärast konfiguratsioonifaili muutmist taaskäivitame postgresql-serveri käsuga:

service postgresql restart

Me oleme installinud ja seadistanud PostgreSQL. Nüüd loome andmebaasi, arenduse ja tootmise keskkonna kasutajad ning anname neile õigused andmebaasi haldamiseks:

$ 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

Liigume edasi RabbitMQ installimise juurde — sõnumite vahendaja Celery jaoks. Debianis on selle paigaldamine üsna lihtne:

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

Pärast installimist peame looma vhosts, kasutajad ja andma vajalikud õigused:

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

Seame nüüd paika ja seadistame meie rakenduse viimase komponendi — Redis. Seda kasutatakse Celery ülesannete tulemuste salvestamise tagaplaanina.

Loome kaks Docker-konteinerit Redis' jaoks dev- ja prod-keskkondade jaoks kasutades laiendust Docker Pleskile.

  1. Logime Pleski sisse, lähme laienduste sektsiooni, otsime Docker laiendust ja installime selle (me vajame tasuta versiooni):

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  2. Jõuame installitud laiendusse, otsime piltide seast redis bitnami ja paigaldame viimase versiooni:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  3. Siseneme allalaaditud konteinerisse ja kohandame seadistust: määrame porti, maksimaalse eraldatud RAM-i suuruse, parooli keskkonnamuutujates ning monteerime mahu:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  4. Korrame samme 2-3 prod-konteineri jaoks, muudame seadistustes ainult parameetreid: port, parool, RAM-i suurus ja kausta rada serveris:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

Docker Registry

Lisaks põhiteenustele oleks hea paigaldada serverisse ka oma Docker-piltide hoidla. Hea küll, et serverite ruum on praegu piisavalt odav (kindlasti odavam kui DockerHub'i tellimus), ja privaatse hoidla seadistamine on väga lihtne.

Soovime, et meil oleksid paigaldatud:

Selleks:

  1. Loome Pleskis meie tellimuses kaks alamdomeeni: docker.helloworld.ru ja docker-ui.helloworld.ru, ning seadistame neile Let’s Encrypt sertifikaadid.
  2. Alandomeeni docker.helloworld.ru kausta lisame faili docker-compose.yml sellise sisuga:
    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 kaudu genereerime faili .htpasswd Basic-autoriseerimise jaoks Docker-hoidlas:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Kogume ja käivitame konteinerid:
    docker-compose up -d
  5. Ja tuleb suunata Nginx meie konteineritele. Seda saab teha Pleskis.

Järgmised toimingud tuleb teha alamdomeenide docker.helloworld.ru ja docker-ui.helloworld.ru jaoks:

Jaotises Dev Tools mine meie veebisaidile Docker Proxy Rules:

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
Ja lisame reegli sissetuleva liikluse suunamiseks meie konteinerisse:

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  1. Kontrollime, kas saame meie konteinerisse siseneda kohalikult masinalt:
    $ docker login docker.helloworld.ru -u hw_docker_admin -p hw_docker_password
    HOIATUS! --password CLI kaudu kasutamine on ebaturvaline. Kasutage --password-stdin.
    Logimine õnnestus
  2. Kontrollime ka subdomeeni docker-ui.helloworld.ru tööd:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
    Klõpsates nuppu Browse repositories, kuvab brauser autoriseerimise akna, kuhu tuleb sisestada repo kasutajanimi ja parool. Pärast seda suunatakse meid reposiitide nimekirja lehele (see on teil veel tühi):

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

Avame sadamad Plesk Firewallis

Pärast komponentide installimist ja seadistamist tuleb avada sadamad, et komponendid oleksid Docker-konteineritest ja välisest võrgust ligipääsetavad.

Vaadake, kuidas seda teha, Pleskile varem installitud Firewalli laienduse näitel.

  1. Liigume Tools & Settings > Settings > Firewall:
    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
  2. Liigume Muuda Plesk Firewalli reegleid > Lisa kohandatud reegel ja avame järgmised TCP-sadamad Docker alvõrgu jaoks (172.0.0.0/8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  3. Lisame ka reegli, mis avab välismaailmale PostgreSQL ja RabbitMQ halduspaneeli sadamat:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  4. Kohaldame reegleid nuppu Apply Changes abil:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

CI/CD seadistamine Github Actionsis

Asume kõige huvitavama osa juurde — meie projekti pideva integreerimise ja kohaletoimetamise töövoo seadistamine serverisse.

See toru koosneb kahest osast:

  • pildi koostamine ja testide läbiviimine (tagaplaanil) — Githubi poolel;
  • migreerimise käivitamine (tagaplaanil) ja konteinerite juurutamine — serveris.

Juurutamine Pleskis

Alustame kõigepealt teise punktiga (kuna see sõltub esimesest).

Juurutamisprotsessi seadistame Pleski jaoks Git laienduse abil.

Vaatame näidet Prod keskkonnast Backend hoidla jaoks.

  1. Siseneme meie saidi Helloworld tellimusse ja liigume Git alammenüüsse:

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  2. Kopeerime «Remote Git repository» väljale meie Githubi hoidla lingi ja muudame vaikimisi kausta httpdocs teisel (näiteks, /httpdocs/hw_back):

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  3. Kopeerime SSH avaliku võtme eelmiselt etapilt ja lisame selle Githubi seadetes.
  4. Klõpsame ekraanil punkti 2 juures OK, pärast mida suunatakse meid Pleski hoidla lehele. Nüüd peame seadistama hoidla värskendamise, kui tehakse komiteed master harusse. Selleks liigume Repository Settings ja salvestame väärtuse Webhook URL (see läheb meil hiljem vaja Github Actions seadistamisel):

    CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

  5. Eelmise punkti ekraanil väljal Actions sisestame juurutamise skripti:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    kus:

    {REPOSITORY_ABSOLUTE_PATH} — tee prod backend-repositooriumi kaustale serveris;
    {ENV} — keskkond (dev/prod), meie puhul prod;
    {DOCKER_REGISTRY_HOST} — meie docker-repositooriumi host
    {TG_BOT_TOKEN} — Telegrami boti token;
    {TG_CHAT_ID} — chati/kanaali ID teavituste saatmiseks.

    Skripti näide:

    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. Lisame meie tellimuse kasutaja Docker gruppi (et ta saaks konteineritega töötada):
    sudo usermod -aG docker helloworld_admin

Dev-keskkond backend-repositooriumi ja frontend'i jaoks seadistatakse sarnaselt.

Github Actioni deploy pipeline

Liigume edasi meie CI/CD-pipelai esimese osa seadistamise juurde Github Actionsis.

Backend

Pipeline on kirjas failis deploy.yml.

Kuid enne selle analüüsimist täidame Githubis vajalikud Secret-muutujad. Selleks liigume Seaded -> Saladused:

  • DOCKER_REGISTRY — meie Docker-repositooriumi host (docker.helloworld.ru);
  • DOCKER_LOGIN — sisse logimine Docker-repositooriumisse;
  • DOCKER_PASSWORD — parool sellele;
  • DEPLOY_HOST — host, kus on Pleski adminpaneel (näide: helloworld.ru:8443 või 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN — token prod-repositooriumisse serveris deployimiseks (oleme selle saanud Pleski seadistamisest p. 4);
  • DEPLOY_BACK_DEV_TOKEN — token dev-repositooriumisse serveris deployimiseks.

Deployimise protsess on lihtne ja koosneb kolmest peamisest sammust:

  • pildi kokkupanemisest ja avaldamisest meie registris;
  • testide käivitamisest konteineris värskelt kokkupandud pildiga;
  • töökeskkonda juurutamisest sõltuvalt harust (dev/master).

Frontend

Fail deploy.yml front-end registrile ei erine palju tagumistest. Selles puudub testide käivitamise etapp ning muutuvad deploy tokenite nimed. Front-end registri saladused tuleb muide eraldi täita.

Selle seadistamine

Liikluse suunamine Nginx'i kaudu

Noh, oleme jõudnud lõpuni. Jäänud on vaid seadistada siseneva ja väljuva liikluse suunamine meie konteinerisse Nginx'i kaudu. Seda protsessi oleme juba käsitlenud punktis 5, kus seadistasime Docker Registry. Sama tuleb teha tagumise ja front-end osa jaoks dev- ja prod-keskkondades.

Toon välja seadetest ekraanipildid.

Backend

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit

Frontend

CI/CD GitHub Actions projekti jaoks, mis kasutab Flaski ja Angularit
Oluline täpsustus. Front-end konteinerisse suunatakse kõik URL-id, välja arvatud need, mis algavad /api/ — need suunatakse tagumise konteineri poole (seetõttu peavad tagumise konteineri kõik töötlejate nimed algama /api/).

Kokkuvõte

Nüüd peaks meie sait olema ligipääsetav aadressidel helloworld.ru ja dev.helloworld.ru (vastavalt prod- ja dev-keskkond).

Nii, me õppisime, kuidas valmistada ette lihtsat rakendust Flaskis ja Angularis ning seadistada GitHub Actions'is torustik selle serverisse välja toimetamiseks Pleski all.

Kordan lingid koodirepositooriumidele: tagumine osa, esimene osa.

Allikas: habr.com

Osta usaldusväärne veebihosting DDoS kaitsega, VPS VDS serverid 🔥 Osta usaldusväärne veebihosting DDoS kaitsega, VPS VDS serverid | ProHoster