CI/CD në Veprimet Github për një projekt Flask+Angular

CI/CD në Veprimet Github për një projekt Flask+Angular
Në këtë artikull, unë do të ndaj përvojën time të konfigurimit të CI/CD duke përdorur Panelin e Kontrollit Plesk dhe Veprimet Github. Sot do të mësojmë se si të vendosim një projekt të thjeshtë me emrin e pakomplikuar "Helloworld". Është shkruar në kornizën e Flask Python, me punëtorët e Celery dhe një frontend Angular 8.

Lidhje me depot: backend, frontend.

Në pjesën e parë të artikullit, ne do të shohim projektin tonë dhe pjesët e tij. Në të dytën, ne do të kuptojmë se si të konfigurojmë Plesk dhe të instalojmë shtesat dhe komponentët e nevojshëm (DB, RabbitMQ, Redis, Docker, etj.).

Në pjesën e tretë, më në fund do të kuptojmë se si të konfigurojmë një tubacion për vendosjen e projektit tonë në një server në një mjedis dev dhe prod. Dhe pastaj ne do të hapim faqen në server.

Dhe po, harrova të prezantohem. Emri im është Oleg Borzov, unë jam një zhvillues i plotë në ekipin CRM për menaxherët e hipotekave në Domclick.

Pasqyrë e projektit

Së pari, le të shohim dy depo projektesh - prapavija dhe pjesa e përparme - dhe të kalojmë mbi kodin.

Backend: Flask+selino

Për pjesën e pasme, mora një grup që është mjaft i popullarizuar në mesin e zhvilluesve të Python: kornizën Flask (për API) dhe Celery (për radhën e detyrave). SQLAchemy përdoret si ORM. Alembic përdoret për migrime. Për vërtetimin JSON në doreza - Marshmallow.

В depove ekziston një skedar Readme.md me një përshkrim të detajuar të strukturës dhe udhëzime për ekzekutimin e projektit.

Ueb Part API mjaft i pakomplikuar, përbëhet nga 6 stilolapsa:

  • /ping - për të kontrolluar disponueshmërinë;
  • trajton regjistrimin, autorizimin, heqjen e autorizimit dhe marrjen e një përdoruesi të autorizuar;
  • një dorezë emaili që vendos një detyrë në radhën e Selinos.

Pjesa e selino edhe më lehtë, ka vetëm një problem send_mail_task.

Në dosje /konf ka dy nëndosje:

  • docker me dy skedarë Docker (base.dockerfile për të ndërtuar një imazh bazë që ndryshon rrallë dhe Dockerfile për asambletë kryesore);
  • .env_files - me skedarë me variabla mjedisi për mjedise të ndryshme.

Ekzistojnë katër skedarë me shkrim docker në rrënjë të projektit:

  • docker-compose.local.db.yml për të ngritur një bazë të dhënash lokale për zhvillim;
  • docker-compose.local.workers.yml për ngritjen lokale të punëtorit, bazën e të dhënave, Redis dhe RabbitMQ;
  • docker-compose.test.yml për të kryer teste gjatë vendosjes;
  • docker-compose.yml për vendosje.

Dhe dosja e fundit për të cilën ne jemi të interesuar - .ci-cd. Ai përmban skriptet e guaskës për vendosje:

  • deploy.sh — nisja e migrimit dhe vendosjes. Ekzekutohet në server pas ndërtimit dhe ekzekutimit të testeve në Github Actions;
  • rollback.sh - rikthimi i kontejnerëve në versionin e mëparshëm të montimit;
  • curl_tg.sh - dërgimi i njoftimeve të vendosjes në Telegram.

Frontend në Angular

Depo me ballë shumë më e thjeshtë se ajo e Beck. Pjesa e përparme përbëhet nga tre faqe:

  • Faqja kryesore me një formular për dërgimin e emailit dhe një buton daljeje.
  • Faqja e hyrjes.
  • Faqja e regjistrimit.

Faqja kryesore duket asketike:

CI/CD në Veprimet Github për një projekt Flask+Angular
Ka dy skedarë në rrënjë Dockerfile и docker-compose.yml, si dhe dosjen e njohur .ci-cd me pak më pak skripta sesa në depon e pasme (skriptet e hequra për ekzekutimin e testeve).

Fillimi i një projekti në Plesk

Le të fillojmë duke vendosur Plesk dhe duke krijuar një abonim për faqen tonë.

Instalimi i shtesave

Në Plesk, na duhen katër shtesa:

  • Docker për të menaxhuar dhe shfaqur vizualisht statusin e kontejnerëve në panelin e administratorit Plesk;
  • Git për të konfiguruar hapin e vendosjes në server;
  • Let's Encrypt për të gjeneruar (dhe rinovuar automatikisht) certifikata TLS falas;
  • Firewall për të konfiguruar filtrimin e trafikut në hyrje.

Ju mund t'i instaloni ato përmes panelit të administratorit Plesk në seksionin Zgjerime:

CI/CD në Veprimet Github për një projekt Flask+Angular
Ne nuk do të marrim në konsideratë cilësimet e detajuara për shtesat, cilësimet e paracaktuara do të bëjnë për qëllimet tona demonstruese.

Krijo një abonim dhe faqe

Më pas, ne duhet të krijojmë një abonim për faqen tonë të internetit helloworld.ru dhe të shtojmë nëndomainin dev.helloworld.ru atje.

  1. Krijoni një abonim për domenin helloworld.ru dhe specifikoni fjalëkalimin e hyrjes për përdoruesin e sistemit:

    CI/CD në Veprimet Github për një projekt Flask+Angular
    Kontrolloni kutinë në fund të faqes Siguroni domenin me Let's Encryptnëse duam të konfigurojmë HTTPS për sitin:

    CI/CD në Veprimet Github për një projekt Flask+Angular

  2. Tjetra, në këtë abonim, krijoni një nëndomain dev.helloworld.ru (për të cilin mund të lëshoni gjithashtu një certifikatë TLS falas):

    CI/CD në Veprimet Github për një projekt Flask+Angular

Instalimi i komponentëve të serverit

Ne kemi një server me OS Debian Stretch 9.12 dhe paneli i kontrollit të instaluar Plesk Obsidian 18.0.27.

Ne duhet të instalojmë dhe konfigurojmë për projektin tonë:

  • PostgreSQL (në rastin tonë, do të ketë një server me dy baza të të dhënave për mjediset dev dhe prod).
  • RabbitMQ (i njëjti, i njëjti shembull me vhost të ndryshëm për mjedise).
  • Dy raste Redis (për mjediset dev dhe prod).
  • Regjistri Docker (për ruajtjen lokale të imazheve të ndërtuara të Docker).
  • UI për regjistrin Docker.

PostgreSQL

Plesk tashmë vjen me PostgreSQL DBMS, por jo versionin e fundit (në kohën e shkrimit të Plesk Obsidian mbështetur Versionet e Postgres 8.4–10.8). Ne duam versionin më të fundit për aplikacionin tonë (12.3 në kohën e këtij shkrimi), kështu që do ta instalojmë manualisht.

Ka shumë udhëzime të hollësishme për instalimin e Postgres në Debian në rrjet (shembull), kështu që nuk do t'i përshkruaj ato në detaje, do të jap vetëm komandat:

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

Duke marrë parasysh që PostgreSQL ka cilësime të paracaktuara mjaft mediokër, është e nevojshme të korrigjoni konfigurimin. Kjo do të na ndihmojë kalkulatriçe: duhet të futni parametrat e serverit tuaj dhe të zëvendësoni cilësimet në skedar /etc/postgresql/12/main/postgresql.confatyre që ofrohen. Duhet të theksohet këtu se kalkulatorë të tillë nuk janë një plumb magjik dhe baza duhet të akordohet më saktë, bazuar në kompleksitetin e harduerit, aplikacionit dhe pyetjes suaj. Por kjo është e mjaftueshme për të filluar.

Përveç cilësimeve të propozuara nga kalkulatori, ne gjithashtu ndryshojmë postgresql.confporta e paracaktuar 5432 në një tjetër (në shembullin tonë - 53983).

Pas ndryshimit të skedarit të konfigurimit, rinisni postgresql-server me komandën:

service postgresql restart

Ne kemi instaluar dhe konfiguruar PostgreSQL. Tani le të krijojmë një bazë të dhënash, përdorues për mjediset e dev dhe prod, dhe t'u japim përdoruesve të drejta për të menaxhuar bazën e të dhënave:

$ 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

LepuriMQ

Le të kalojmë në instalimin e RabbitMQ, një ndërmjetës mesazhesh për Selino. Instalimi i tij në Debian është mjaft i thjeshtë:

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

Pas instalimit, ne duhet të krijojmë vhosts, përdoruesit dhe jepni të drejtat e nevojshme:

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

Tani le të instalojmë dhe konfigurojmë komponentin e fundit për aplikacionin tonë - Redis. Do të përdoret si një backend për ruajtjen e rezultateve të detyrave të Selinos.

Ne do të ngremë dy kontejnerë Docker me Redis për mjediset e dev dhe prod duke përdorur shtesën Docker për Plesk.

  1. Shkojmë në Plesk, shkojmë në seksionin Extensions, kërkojmë shtesën Docker dhe instalojmë atë (ne kemi nevojë për një version falas):

    CI/CD në Veprimet Github për një projekt Flask+Angular

  2. Shkoni te shtesa e instaluar, gjeni imazhin përmes kërkimit redis bitnami dhe instaloni versionin më të fundit:

    CI/CD në Veprimet Github për një projekt Flask+Angular

  3. Ne hyjmë në kontejnerin e shkarkuar dhe rregullojmë konfigurimin: specifikoni portin, madhësinë maksimale të RAM-it të caktuar, fjalëkalimin në variablat e mjedisit dhe montoni volumin:

    CI/CD në Veprimet Github për një projekt Flask+Angular

  4. Ne kryejmë hapat 2-3 për kontejnerin prod, në cilësimet ne ndryshojmë vetëm parametrat: portin, fjalëkalimin, madhësinë e RAM-it dhe rrugën drejt dosjes së vëllimit në server:

    CI/CD në Veprimet Github për një projekt Flask+Angular

Regjistri Docker

Përveç shërbimeve bazë, do të ishte mirë të vendosni në server depon tuaj të imazhit Docker. Për fat të mirë, hapësira e serverit tani është mjaft e lirë (sigurisht më e lirë se një abonim DockerHub), dhe procesi i vendosjes së një depoje private është shumë i thjeshtë.

Ne duam të kemi:

Për ta bërë këtë:

  1. Le të krijojmë dy nënfusha në Plesk në pajtimin tonë: docker.helloworld.ru dhe docker-ui.helloworld.ru dhe të konfigurojmë certifikatat Let's Encrypt për to.
  2. Shtoni skedarin në dosjen e nëndomainit docker.helloworld.ru docker-compose.yml me përmbajtje si kjo:
    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. Nën SSH, ne do të gjenerojmë skedarin .htpasswd për autorizimin bazë në depon e Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Mblidhni dhe ngrini kontejnerët:
    docker-compose up -d
  5. Dhe ne duhet të ridrejtojmë Nginx në kontejnerët tanë. Kjo mund të bëhet përmes Plesk.

Hapat e mëposhtëm duhet të kryhen për nëndimenet docker.helloworld.ru dhe docker-ui.helloworld.ru:

Në seksionin Vegla Dev faqja jonë shkoni në Rregullat e Proxy Docker:

CI/CD në Veprimet Github për një projekt Flask+Angular
Dhe shtoni një rregull në trafikun hyrës të përfaqësuesit në kontejnerin tonë:

CI/CD në Veprimet Github për një projekt Flask+Angular

  1. Ne kontrollojmë që mund të hyjmë në kontejnerin tonë nga makina lokale:
    $ 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. Le të kontrollojmë gjithashtu funksionimin e nëndomainit docker-ui.helloworld.ru:

    CI/CD në Veprimet Github për një projekt Flask+Angular
    Kur klikoni në Shfleto depot, shfletuesi do të shfaqë një dritare autorizimi ku do t'ju duhet të vendosni emrin e përdoruesit dhe fjalëkalimin për depo. Pas kësaj, ne do të transferohemi në një faqe me një listë të depove (për momentin, ajo do të jetë bosh për ju):

    CI/CD në Veprimet Github për një projekt Flask+Angular

Hapja e porteve në Plesk Firewall

Pas instalimit dhe konfigurimit të komponentëve, ne duhet të hapim portet në mënyrë që komponentët të jenë të aksesueshëm nga kontejnerët Docker dhe rrjeti i jashtëm.

Le të shohim se si ta bëjmë këtë duke përdorur shtesën Firewall për Plesk që kemi instaluar më parë.

  1. Shkoni në Mjetet dhe cilësimet > Cilësimet > Firewall:
    CI/CD në Veprimet Github për një projekt Flask+Angular
  2. Shkoni në Modifikoni rregullat e murit të zjarrit Plesk > Shto rregull të personalizuar dhe hapni portat e mëposhtme TCP për nënrrjetin Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD në Veprimet Github për një projekt Flask+Angular

  3. Ne gjithashtu do të shtojmë një rregull që do të hapë portat PostgreSQL dhe panelet e menaxhimit të RabbitMQ në botën e jashtme:

    CI/CD në Veprimet Github për një projekt Flask+Angular

  4. Zbatoni rregullat duke përdorur butonin Aplikoni Ndryshimet:

    CI/CD në Veprimet Github për një projekt Flask+Angular

Konfigurimi i CI/CD në Github Actions

Le të zbresim në pjesën më interesante - vendosjen e një tubacioni të vazhdueshëm integrimi dhe dërgimin e projektit tonë në server.

Ky tubacion do të përbëhet nga dy pjesë:

  • ndërtimi i një imazhi dhe ekzekutimi i testeve (për backend) - në anën Github;
  • ekzekutimi i migrimeve (për backend) dhe vendosja e kontejnerëve - në server.

Vendoseni në Plesk

Le të merremi së pari me pikën e dytë (sepse e para varet prej saj).

Ne do të konfigurojmë procesin e vendosjes duke përdorur shtesën Git për Plesk.

Konsideroni një shembull me një mjedis Prod për një depo Backend.

  1. Shkojmë te abonimi i faqes sonë të internetit Helloworld dhe shkojmë në nënseksionin Git:

    CI/CD në Veprimet Github për një projekt Flask+Angular

  2. Futni një lidhje me depon tonë të Github në fushën "Remote Git" dhe ndryshoni dosjen e paracaktuar httpdocs tek tjetri (p.sh. /httpdocs/hw_back):

    CI/CD në Veprimet Github për një projekt Flask+Angular

  3. Kopjoni çelësin publik SSH nga hapi i mëparshëm dhe shtoni është në cilësimet e Github.
  4. Klikoni OK në ekran në hapin 2, pas së cilës do të ridrejtohemi në faqen e depove në Plesk. Tani na duhet të konfigurojmë depon që të përditësohet për kryerjen e degës kryesore. Për ta bërë këtë, shkoni te Cilësimet e depove dhe ruani vlerën Webhook URL (do të na duhet më vonë kur të konfigurojmë Veprimet e Github):

    CI/CD në Veprimet Github për një projekt Flask+Angular

  5. Në fushën Veprimet në ekran nga paragrafi i mëparshëm, futni skriptin për të nisur vendosjen:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    ku:

    {REPOSITORY_ABSOLUTE_PATH} - shtegu për në dosjen prod të depove të pasme në server;
    {ENV} - mjedisi (dev / prod), në rastin tonë prod;
    {DOCKER_REGISTRY_HOST} - hosti i depove tona docker
    {TG_BOT_TOKEN} — Shenja e botit të telegramit;
    {TG_CHAT_ID} — ID e bisedës/kanalit për dërgimin e njoftimeve.

    Shembull i skenarit:

    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. Shtoni një përdorues nga abonimi ynë në grupin Docker (që të mund të menaxhojnë kontejnerët):
    sudo usermod -aG docker helloworld_admin

Mjedisi i devijuesit për depon e prapambetjes dhe frontend janë vendosur në të njëjtën mënyrë.

Tubacioni i vendosjes në Veprimet e Github

Le të kalojmë në konfigurimin e pjesës së parë të tubacionit tonë CI/CD në Veprimet e Github.

backend

Tubacioni përshkruhet në skedar deploy.yml.

Por përpara se ta analizojmë, le të plotësojmë variablat Sekrete që na duhen në Github. Për ta bërë këtë, shkoni te Cilësimet -> Sekretet:

  • DOCKER_REGISTRY - hosti i depove tona Docker (docker.helloworld.ru);
  • DOCKER_LOGIN - hyni në depon e Docker;
  • DOCKER_PASSWORD - fjalëkalimi për të;
  • DEPLOY_HOST — hosti ku paneli i administratorit Plesk është i disponueshëm (shembull: helloworld.com: 8443 ose 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - një shenjë për vendosjen në depo prod në server (e kemi marrë në Deployment në Plesk f. 4);
  • DEPLOY_BACK_DEV_TOKEN - token për vendosje në depon e dev në server.

Procesi i vendosjes është i thjeshtë dhe përbëhet nga tre hapa kryesorë:

  • ndërtimi dhe publikimi i imazhit në depon tonë;
  • ekzekutimi i testeve në një enë bazuar në një imazh të sapo ndërtuar;
  • vendosja në mjedisin e dëshiruar në varësi të degës (dev/master).

frontend

Skedari deploy.yml për depon e përparme pak ndryshe nga ajo e Beck-ut. I mungon një hap me testet e ekzekutimit dhe ndryshon emrat e argumenteve për vendosje. Sekretet për depon e përparme, nga rruga, duhet të plotësohen veçmas.

Konfigurimi i faqes

Përfaqësimi i trafikut përmes Nginx

Epo, kemi ardhur në fund. Mbetet vetëm për të konfiguruar proksimin e trafikut hyrës dhe dalës në kontejnerin tonë përmes Nginx. Ne e kemi mbuluar tashmë këtë proces në hapin 5 të konfigurimit të Regjistrit Docker. E njëjta gjë duhet të përsëritet për pjesët e pasme dhe të përparme në mjediset e dev dhe prod.

Unë do të jap pamjet e ekranit të cilësimeve.

backend

CI/CD në Veprimet Github për një projekt Flask+Angular

frontend

CI/CD në Veprimet Github për një projekt Flask+Angular
Vërtetë utochnение. Të gjitha URL-të do të përcillen në kontejnerin e frontendit, përveç atyre që fillojnë me /api/ - ato do të afrohen në kontejnerin e pasmë (pra në enën e pasme, të gjithë mbajtësit duhet të fillojnë me /api/).

Rezultatet e

Tani faqja jonë duhet të jetë e disponueshme në helloworld.ru dhe dev.helloworld.ru (përkatësisht prod- dhe dev-environments).

Në total, mësuam se si të përgatisim një aplikacion të thjeshtë në Flask dhe Angular dhe të vendosim një tubacion në Github Actions për ta shpërndarë atë në një server që funksionon Plesk.

Unë do të kopjoj lidhjet në depo me kodin: backend, frontend.

Burimi: www.habr.com

Shto një koment