CI/CD in Github Actions vir 'n Flask+Angular-projek

CI/CD in Github Actions vir 'n Flask+Angular-projek
In hierdie artikel sal ek my ervaring deel van die opstel van CI/CD met behulp van die Plesk Control Panel en Github Actions. Vandag sal ons leer hoe om 'n eenvoudige projek met die ongekompliseerde naam "Helloworld" te ontplooi. Dit is geskryf in die Flask Python-raamwerk, met Seldery-werkers en 'n Angular 8-frontend.

Skakels na bewaarplekke: agterkant, voorkant.

In die eerste deel van die artikel gaan ons na ons projek en sy dele kyk. In die tweede sal ons uitvind hoe om Plesk op te stel en die nodige uitbreidings en komponente te installeer (DB, RabbitMQ, Redis, Docker, ens.).

In die derde deel sal ons uiteindelik uitvind hoe om 'n pyplyn op te stel vir die implementering van ons projek na 'n bediener in 'n dev and prod omgewing. En dan sal ons die webwerf op die bediener begin.

En ja, ek het vergeet om myself voor te stel. My naam is Oleg Borzov, ek is 'n volstapel-ontwikkelaar in die CRM-span vir verbandbestuurders by Domclick.

Projek Oorsig

Kom ons kyk eers na twee projekbewaarplekke - agterkant en voorkant - en gaan oor die kode.

Agterkant: Fles + Seldery

Vir die agterste deel het ek 'n klomp geneem wat baie gewild is onder Python-ontwikkelaars: die Flask-raamwerk (vir die API) en Seldery (vir die taakry). SQLAchemy word as ORM gebruik. Alembic word vir migrasies gebruik. Vir JSON-bekragtiging in handvatsels - Marshmallow.

В bewaarplekke daar is 'n Readme.md-lêer met 'n gedetailleerde beskrywing van die struktuur en instruksies om die projek uit te voer.

Webdeel API redelik ongekompliseerd, bestaan ​​uit 6 penne:

  • /ping - om beskikbaarheid na te gaan;
  • hanteer vir registrasie, magtiging, ontmagtiging en die verkryging van 'n gemagtigde gebruiker;
  • 'n e-poshandvatsel wat 'n taak in die Seldery-ry plaas.

Seldery deel selfs makliker, daar is net een probleem send_mail_task.

In vouer /konf daar is twee subgidse:

  • docker met twee Dockerfiles (base.dockerfile om 'n selde veranderende basisbeeld te bou en Dockerfile vir hoofvergaderings);
  • .env_files - met lêers met omgewingsveranderlikes vir verskillende omgewings.

Daar is vier docker-compose-lêers aan die wortel van die projek:

  • docker-compose.local.db.yml om 'n plaaslike databasis vir ontwikkeling in te samel;
  • docker-compose.local.workers.yml vir plaaslike verhoging van die werker, databasis, Redis en RabbitMQ;
  • docker-compose.test.yml om toetse tydens ontplooiing uit te voer;
  • docker-compose.yml vir ontplooiing.

En die laaste gids waarin ons belangstel - .ci-cd. Dit bevat dopskrifte vir ontplooiing:

  • deploy.sh — bekendstelling van migrasie en ontplooiing. Loop op die bediener na die bou en uitvoer van toetse in Github Actions;
  • rollback.sh - terugrol van houers na die vorige weergawe van die samestelling;
  • curl_tg.sh - die stuur van ontplooiingskennisgewings na Telegram.

Voorkant op Angular

Bewaarplek met voorkant baie eenvoudiger as Beck s'n. Die voorkant bestaan ​​uit drie bladsye:

  • Hoofblad met 'n vorm vir die stuur van e-pos en 'n uitgangknoppie.
  • Aanteken bladsy.
  • Registrasie bladsy.

Die hoofblad lyk asketies:

CI/CD in Github Actions vir 'n Flask+Angular-projek
Daar is twee lêers by die wortel Dockerfile и docker-compose.yml, sowel as die bekende vouer .ci-cd met effens minder skrifte as in die agterste bewaarplek (verwyder skrifte vir die uitvoer van toetse).

Begin 'n projek in Plesk

Kom ons begin deur Plesk op te stel en 'n intekening vir ons webwerf te skep.

Installeer uitbreidings

In Plesk het ons vier uitbreidings nodig:

  • Docker om die status van houers in die Plesk-administrasiepaneel te bestuur en visueel te vertoon;
  • Git om die ontplooiingstap op die bediener op te stel;
  • Let's Encrypt om gratis TLS-sertifikate te genereer (en outomaties te hernu);
  • Firewall om filtering van inkomende verkeer op te stel.

U kan dit installeer deur die Plesk-administrasiepaneel in die Uitbreidings-afdeling:

CI/CD in Github Actions vir 'n Flask+Angular-projek
Ons sal nie gedetailleerde instellings vir uitbreidings oorweeg nie, die verstekinstellings sal vir ons demo-doeleindes geld.

Skep 'n intekening en webwerf

Vervolgens moet ons 'n intekening vir ons helloworld.ru-webwerf skep en die dev.helloworld.ru-subdomein daar byvoeg.

  1. Skep 'n intekening vir die helloworld.ru-domein en spesifiseer die aanmeldwagwoord vir die stelselgebruiker:

    CI/CD in Github Actions vir 'n Flask+Angular-projek
    Merk die blokkie onderaan die bladsy Beveilig die domein met Let's Encryptas ons HTTPS vir die webwerf wil opstel:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  2. Skep dan in hierdie intekening 'n subdomein dev.helloworld.ru (waarvoor u ook 'n gratis TLS-sertifikaat kan uitreik):

    CI/CD in Github Actions vir 'n Flask+Angular-projek

Installeer bedienerkomponente

Ons het 'n bediener met OS Debian Stretch 9.12 en geïnstalleerde beheerpaneel Plesk Obsidian 18.0.27.

Ons moet installeer en konfigureer vir ons projek:

  • PostgreSQL (in ons geval sal daar een bediener wees met twee databasisse vir dev- en prod-omgewings).
  • RabbitMQ (dieselfde, dieselfde geval met verskillende vhosts vir omgewings).
  • Twee Redis-gevalle (vir dev- en prod-omgewings).
  • Docker Registry (vir plaaslike berging van geboude Docker-beelde).
  • UI vir Docker-register.

PostgreSQL

Plesk kom reeds met PostgreSQL DBMS, maar nie die nuutste weergawe nie (ten tyde van die skryf van Plesk Obsidian ondersteun Postgres-weergawes 8.4–10.8). Ons wil die nuutste weergawe vir ons toepassing hê (12.3 ten tyde van hierdie skrywe), so ons sal dit handmatig installeer.

Daar is baie gedetailleerde instruksies vir die installering van Postgres op Debian op die net (Byvoorbeeld), so ek sal hulle nie in detail beskryf nie, ek sal net die opdragte gee:

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

Aangesien PostgreSQL taamlik middelmatige verstekinstellings het, is dit nodig om die konfigurasie reg te stel. Dit sal ons help sakrekenaar: jy moet die parameters van jou bediener inry en die instellings in die lêer vervang /etc/postgresql/12/main/postgresql.confaan diegene wat aangebied word. Daar moet hier kennis geneem word dat sulke sakrekenaars nie 'n towerkoeël is nie, en die basis moet meer presies ingestel word, gebaseer op jou hardeware, toepassing en navraagkompleksiteit. Maar dit is genoeg om te begin.

Benewens die instellings wat deur die sakrekenaar voorgestel word, verander ons ook in postgresql.confdie verstekpoort 5432 na 'n ander (in ons voorbeeld - 53983).

Nadat u die konfigurasielêer verander het, herbegin postgresql-bediener met die opdrag:

service postgresql restart

Ons het PostgreSQL geïnstalleer en gekonfigureer. Kom ons skep nou 'n databasis, gebruikers vir dev en prod omgewings, en gee gebruikers regte om die databasis te bestuur:

$ 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

Konyn MQ

Kom ons gaan voort met die installering van RabbitMQ, 'n boodskapmakelaar vir Seldery. Om dit op Debian te installeer is redelik eenvoudig:

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

Na die installasie moet ons skep vhosts, gebruikers en verleen die nodige regte:

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

Kom ons installeer en konfigureer nou die laaste komponent vir ons toepassing - Redis. Dit sal gebruik word as 'n backend vir die stoor van die resultate van Seldery-take.

Ons sal twee Docker-houers met Redis oprig vir ontwikkelings- en prod-omgewings deur die uitbreiding te gebruik Docker vir Plesk.

  1. Ons gaan na Plesk, gaan na die Uitbreidings-afdeling, soek die Docker-uitbreiding en installeer dit (ons benodig 'n gratis weergawe):

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  2. Gaan na die geïnstalleerde uitbreiding, vind die prent deur die soektog redis bitnami en installeer die nuutste weergawe:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  3. Ons gaan na die afgelaaide houer en pas die konfigurasie aan: spesifiseer die poort, die maksimum toegekende RAM-grootte, die wagwoord in die omgewingsveranderlikes, en monteer die volume:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  4. Ons voer stappe 2-3 uit vir die produkhouer, in die instellings verander ons slegs die parameters: poort, wagwoord, RAM-grootte en pad na die volume-lêergids op die bediener:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

Docker-register

Benewens basiese dienste, sal dit lekker wees om u eie Docker-beeldbewaarplek op die bediener te plaas. Gelukkig is bedienerspasie nou redelik goedkoop (beslis goedkoper as 'n DockerHub-intekening), en die proses om 'n privaat bewaarplek op te stel is baie eenvoudig.

Ons wil hê:

Om dit te doen:

  1. Kom ons skep twee subdomeine in Plesk in ons intekening: docker.helloworld.ru en docker-ui.helloworld.ru, en stel Kom ons Enkripteer-sertifikate vir hulle op.
  2. Voeg die lêer by die docker.helloworld.ru-subdomeinlêergids docker-compose.yml met inhoud soos hierdie:
    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. Onder SSH sal ons die .htpasswd-lêer vir Basiese magtiging in die Docker-bewaarplek genereer:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Versamel en lig houers:
    docker-compose up -d
  5. En ons moet Nginx na ons houers herlei. Dit kan deur Plesk gedoen word.

Die volgende stappe moet gedoen word vir die docker.helloworld.ru en docker-ui.helloworld.ru subdomeine:

In artikel Dev Gereedskap ons webwerf gaan na Docker Proxy Reëls:

CI/CD in Github Actions vir 'n Flask+Angular-projek
En voeg 'n reël by inkomende verkeer by volmag by ons houer:

CI/CD in Github Actions vir 'n Flask+Angular-projek

  1. Ons kyk of ons vanaf die plaaslike masjien by ons houer kan aanmeld:
    $ 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. Kom ons kyk ook na die werking van die docker-ui.helloworld.ru subdomein:

    CI/CD in Github Actions vir 'n Flask+Angular-projek
    Wanneer jy op Blaai deur bewaarplekke klik, sal die blaaier 'n magtigingsvenster vertoon waar jy die gebruikersnaam en wagwoord vir die bewaarplek sal moet invoer. Daarna sal ons oorgeplaas word na 'n bladsy met 'n lys van bewaarplekke (vir nou sal dit vir jou leeg wees):

    CI/CD in Github Actions vir 'n Flask+Angular-projek

Maak poorte oop in Plesk Firewall

Nadat ons die komponente geïnstalleer en gekonfigureer het, moet ons poorte oopmaak sodat die komponente toeganklik is vanaf Docker-houers en die eksterne netwerk.

Kom ons kyk hoe om dit te doen met die Firewall-uitbreiding vir Plesk wat ons vroeër geïnstalleer het.

  1. Gaan na Gereedskap en instellings > Instellings > Firewall:
    CI/CD in Github Actions vir 'n Flask+Angular-projek
  2. Gaan na Verander Plesk Firewall-reëls > Voeg pasgemaakte reël by en maak die volgende TCP-poorte oop vir die Docker-subnet (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  3. Ons sal ook 'n reël byvoeg wat PostgreSQL-poorte en RabbitMQ-bestuurspanele na die buitewêreld sal oopmaak:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  4. Pas die reëls toe deur die Pas veranderinge toe-knoppie:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

Stel CI/CD op in Github Actions

Kom ons kom by die interessantste deel – die opstel van 'n deurlopende integrasiepyplyn en die lewering van ons projek aan die bediener.

Hierdie pyplyn sal uit twee dele bestaan:

  • bou van 'n beeld en hardloop toetse (vir die agterkant) - aan die Github-kant;
  • loop van migrasies (vir die agterkant) en ontplooi houers - op die bediener.

Ontplooi na Plesk

Kom ons behandel eers die tweede punt (want die eerste een hang daarvan af).

Ons sal die ontplooiingsproses opstel deur die Git-uitbreiding vir Plesk te gebruik.

Oorweeg 'n voorbeeld met 'n Prod-omgewing vir 'n Backend-bewaarplek.

  1. Ons gaan na die intekening van ons Helloworld-webwerf en gaan na die Git-onderafdeling:

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  2. Voeg 'n skakel na ons Github-bewaarplek in die "Remote Git-bewaarplek"-veld in en verander die verstekmap httpdocs na 'n ander (bv. /httpdocs/hw_back):

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  3. Kopieer die SSH publieke sleutel van die vorige stap en en bygevoeg dit in Github-instellings.
  4. Klik OK op die skerm in stap 2, waarna ons na die bewaarplekbladsy in Plesk herlei sal word. Nou moet ons die bewaarplek opstel om opgedateer te word op commits na die meestertak. Om dit te doen, gaan na Bewaarinstellings en stoor die waarde Webhook URL (ons sal dit later nodig hê wanneer ons Github Actions opstel):

    CI/CD in Github Actions vir 'n Flask+Angular-projek

  5. In die Aksies-veld op die skerm van die vorige paragraaf, voer die skrif in om die ontplooiing te begin:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    waar:

    {REPOSITORY_ABSOLUTE_PATH} - pad na die prod-lêergids van die backend-bewaarplek op die bediener;
    {ENV} - omgewing (dev / prod), in ons geval prod;
    {DOCKER_REGISTRY_HOST} - die gasheer van ons docker-bewaarplek
    {TG_BOT_TOKEN} - Telegram bot-token;
    {TG_CHAT_ID} - ID van die klets/kanaal vir die stuur van kennisgewings.

    Skrip voorbeeld:

    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. Voeg 'n gebruiker van ons intekening by die Docker-groep (sodat hulle houers kan bestuur):
    sudo usermod -aG docker helloworld_admin

Die dev-omgewing vir die backend-bewaarplek en die frontend is op dieselfde manier opgestel.

Ontplooiingspyplyn in Github Actions

Kom ons gaan voort met die opstel van die eerste deel van ons CI/CD-pyplyn in Github Actions.

Backend

Die pyplyn word beskryf in deploy.yml lêer.

Maar voordat ons dit ontleed, kom ons vul die geheime veranderlikes in wat ons in Github benodig. Om dit te doen, gaan na Instellings -> Geheime:

  • DOCKER_REGISTRY - die gasheer van ons Docker-bewaarplek (docker.helloworld.ru);
  • DOCKER_LOGIN - meld aan by die Docker-bewaarplek;
  • DOCKER_PASSWORD - wagwoord daarvoor;
  • DEPLOY_HOST - gasheer waar die Plesk-administrasiepaneel beskikbaar is (byvoorbeeld: helloworld.com: 8443 of 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - 'n teken vir ontplooiing na die prod-bewaarplek op die bediener (ons het dit gekry in Ontplooiing in Plesk bl. 4);
  • DEPLOY_BACK_DEV_TOKEN - teken vir ontplooiing na die dev-bewaarplek op die bediener.

Die ontplooiingsproses is eenvoudig en bestaan ​​uit drie hoofstappe:

  • die bou en publiseer van die beeld in ons bewaarplek;
  • uitvoer van toetse in 'n houer gebaseer op 'n varsgeboude beeld;
  • ontplooiing na die verlangde omgewing, afhangende van die tak (dev/meester).

Voorkant

Die deploy.yml-lêer vir die voorste bewaarplek bietjie anders as Beck s'n. Dit ontbreek 'n stap met lopende toetse en verander die name van tekens vir ontplooiing. Geheime vir die voorste bewaarplek, terloops, moet apart ingevul word.

Webwerf opstelling

Proxy verkeer deur Nginx

Wel, ons het aan die einde gekom. Dit bly net om die proxying van inkomende en uitgaande verkeer na ons houer deur Nginx op te stel. Ons het hierdie proses reeds in stap 5 van die Docker Registry-opstelling behandel. Dieselfde moet herhaal word vir die agterste en voorste dele in dev en prod omgewings.

Ek sal skermkiekies van die instellings verskaf.

Backend

CI/CD in Github Actions vir 'n Flask+Angular-projek

Voorkant

CI/CD in Github Actions vir 'n Flask+Angular-projek
Belangrike verduideliking. Alle URL'e sal gevolmagtig word na die voorkanthouer, behalwe dié wat begin met /api/ - hulle sal na die agterste houer gebring word (dus in die agterste houer moet alle hanteerders begin met /api/).

Resultate van

Nou behoort ons webwerf beskikbaar te wees by helloworld.ru en dev.helloworld.ru (onderskeidelik prod- en dev-omgewings).

In totaal het ons geleer hoe om 'n eenvoudige toepassing in Flask en Angular voor te berei en 'n pyplyn in Github Actions op te stel om dit uit te rol na 'n bediener met Plesk.

Ek sal die skakels na die bewaarplekke dupliseer met die kode: agterkant, voorkant.

Bron: will.com

Voeg 'n opmerking