CI / CD yn Github Aksjes foar in Flask + Angular projekt

CI / CD yn Github Aksjes foar in Flask + Angular projekt
Yn dit artikel sil ik myn ûnderfining diele by it ynstellen fan CI / CD mei Plesk-kontrôlepaniel en Github Actions. Hjoed sille wy leare hoe't jo in ienfâldich projekt kinne ynsette mei de ienfâldige namme "Helloworld". It is skreaun yn it Python-ramt Flask, mei arbeiders yn Selderij en in frontend yn Angular 8.

Keppelings nei repositories: efterkant, frontend.

Yn it earste diel fan it artikel sille wy sjen nei ús projekt en syn dielen. Yn 'e twadde sille wy útfine hoe't jo Plesk konfigurearje en de nedige útwreidingen en komponinten ynstallearje (DB, RabbitMQ, Redis, Docker, ensfh.).

Yn it tredde diel sille wy úteinlik útfine hoe't jo in pipeline kinne ynstelle foar it ynsetten fan ús projekt nei in server yn in dev- en prod-omjouwing. En dan sille wy de side op 'e server starte.

En ja, ik fergeat mysels foar te stellen. Myn namme is Oleg Borzov, ik bin in folsleine-stack-ûntwikkelder yn it CRM-team foar hypoteekbehearders by Domklik.

Project Oersjoch

Litte wy earst nei twa projektrepositories sjen - efterkant en foarkant - en gean troch de koade.

Backend diel: Flask + Seldery

Foar de efterkant naam ik in kombinaasje dy't frij populêr is ûnder Python-ûntwikkelders: it Flask-ramt (foar de API) en Seldery (foar de taakwachtrige). SQLAchemy wurdt brûkt as ORM. Alembic wurdt brûkt foar migraasjes. Foar JSON-validaasje yn handgrepen - Marshmallow.

В repositories Der is in Readme.md triem mei in detaillearre beskriuwing fan de struktuer en ynstruksjes foar it starten fan it projekt.

Web Part API frij simpel, bestiet út 6 handgrepen:

  • /ping - om de beskikberens te kontrolearjen;
  • hânfetten foar registraasje, autorisaasje, deautorisaasje en it krijen fan in autorisearre brûker;
  • in handgreep foar it ferstjoeren fan in e-post dy't de taak yn 'e Selery-wachtrige set.

Selderij diel It is noch ienfâldiger, der is mar ien probleem send_mail_task.

Yn map /konf der binne twa submappen:

  • docker mei twa Dockerfiles (base.dockerfile te bouwen fan in basis byld dat komselden feroaret en Dockerfile foar haadgearkomsten);
  • .env_files - mei bestannen mei omjouwingsfariabelen foar ferskate omjouwings.

D'r binne fjouwer docker-compose-bestannen yn 'e projektroot:

  • docker-compose.local.db.yml it opheljen fan in lokale databank foar ûntwikkeling;
  • docker-compose.local.workers.yml foar pleatslike ferheging fan in arbeider, databank, Redis en RabbitMQ;
  • docker-compose.test.yml foar it útfieren fan tests by ynset;
  • docker-compose.yml foar ynset.

En de lêste map fan belang foar ús is .ci-cd. It befettet shell-skripts foar ynset:

  • deploy.sh - it starten fan migraasje en ynset. Lansearre op 'e tsjinner nei it bouwen en útfieren fan testen yn Github Actions;
  • rollback.sh - konteners weromdraaie nei de foarige ferzje fan 'e gearkomste;
  • curl_tg.sh - ferstjoeren fan ynsetnotifikaasjes nei Telegram.

Frontend yn Angular

Repository mei foarkant folle ienfâldiger as Bekov's. De foarkant bestiet út trije siden:

  • Thússide mei in formulier foar it ferstjoeren fan e-post en in ôfmelde knop.
  • Oanmelde side.
  • Registraasje side.

De haadside sjocht der asketysk út:

CI / CD yn Github Aksjes foar in Flask + Angular projekt
D'r binne twa bestannen yn 'e root Dockerfile и docker-compose.yml, lykas de bekende map .ci-cd mei in wat lytser oantal skripts as yn 'e efterste repository (skripts foar it útfieren fan tests binne fuorthelle).

It begjinnen fan in projekt yn Plesk

Litte wy begjinne mei it ynstellen fan Plesk en it meitsjen fan in abonnemint foar ús side.

Ynstallaasje fan tafoegings

Yn Plesk hawwe wy fjouwer útwreidingen nedich:

  • Docker foar it behearen en visueel werjaan fan de steat fan konteners yn it Plesk adminpaniel;
  • Git om de ynsetstap op 'e tsjinner te konfigurearjen;
  • Let's Encrypt foar it generearjen (en auto-fernijing) fergese TLS-sertifikaten;
  • Firewall om it filterjen fan ynkommende ferkear yn te stellen.

Jo kinne se ynstallearje fia it Plesk adminpaniel yn 'e seksje Extensions:

CI / CD yn Github Aksjes foar in Flask + Angular projekt
Wy sille gjin detaillearre konfiguraasje fan tafoegings beskôgje; foar ús demo-doelen sille de standertynstellingen geskikt wêze.

It meitsjen fan in abonnemint en webside

Dêrnei moatte wy in abonnemint meitsje foar ús webside helloworld.ru en dêr it subdomein dev.helloworld.ru taheakje.

  1. Wy meitsje in abonnemint foar it domein helloworld.ru en spesifisearje it oanmeldwachtwurd foar de systeembrûker:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt
    Kontrolearje it fakje ûnderoan de side Befeiligje it domein mei Let's Encrypt, as wy HTTPS foar de side ynstelle wolle:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  2. Dêrnei meitsje wy yn dit abonnemint in subdomein dev.helloworld.ru (wêrfoar jo ek in fergese TLS-sertifikaat kinne útjaan):

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

Ynstallaasje fan tsjinner komponinten

Wy hawwe in tsjinner mei OS Debian Stretch 9.12 en ynstallearre kontrôle paniel Plesk Obsidian 18.0.27.

Wy moatte ynstallearje en konfigurearje foar ús projekt:

  • PostgreSQL (yn ús gefal sil d'r ien server wêze mei twa databases foar de dev- en prod-omjouwings).
  • RabbitMQ (itselde ding, ien eksimplaar mei ferskate vhosts foar omjouwings).
  • Twa Redis-eksimplaren (foar dev- en prod-omjouwings).
  • Docker Registry (foar lokale opslach fan kompilearre Docker-ôfbyldings).
  • UI-ynterface foar Docker-register.

PostgreSQL

Plesk komt al mei in PostgreSQL DBMS, mar net de lêste ferzje (op it momint fan skriuwen Plesk Obsidian stipe Postgres ferzjes 8.4-10.8). Wy wolle de lêste ferzje foar ús applikaasje (12.3 op it stuit fan skriuwen), dus wy sille it manuell ynstallearje.

D'r binne genôch detaillearre ynstruksjes foar it ynstallearjen fan Postgres op Debian online (foarbyld), dus ik sil se net yn detail beskriuwe, ik sil gewoan de kommando's jaan:

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

Yn betinken nommen dat PostgreSQL nochal matige standertynstellingen hat, is it nedich om de konfiguraasje oan te passen. Dit sil ús helpe rekkenmasine: jo moatte jo serverparameters ynfiere en de ynstellings yn it bestân ferfange /etc/postgresql/12/main/postgresql.confoan dyjingen foarsteld. Hjir moat opmurken wurde dat sokke rekkenmasines gjin magyske kûgel binne, en de basis moat krekter wurde ôfstimd, basearre op jo hardware, applikaasje en kompleksiteit fan fragen. Mar dit is genôch om te begjinnen.

Neist de ynstellings foarsteld troch de rekkenmasine, feroarje wy ek postgresql.confde standertpoarte 5432 wurdt tawiisd oan in oare (yn ús foarbyld - 53983).

Nei it feroarjen fan it konfiguraasjetriem, reboot postgresql-tsjinner mei it kommando:

service postgresql restart

Wy ynstalleare en konfigureare PostgreSQL. Litte wy no in database meitsje, brûkers foar dev- en prod-omjouwings, en brûkers rjochten jaan om de database te behearjen:

$ 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

Litte wy trochgean mei it ynstallearjen fan RabbitMQ, in berjochtmakelaar foar Selery. It ynstallearjen op Debian is frij ienfâldich:

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

Nei ynstallaasje moatte wy meitsje vhosts, brûkers en jouwe de nedige rjochten:

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

Litte wy no de lêste komponint foar ús applikaasje ynstallearje en konfigurearje - Redis. It sil brûkt wurde as backend om de resultaten fan Selery-taken op te slaan.

Wy sille twa Docker-konteners ophelje mei Redis foar dev- en prod-omjouwings mei de útwreiding Docker foar Plesk.

  1. Gean nei Plesk, gean nei de seksje Extensions, sykje nei de Docker-útwreiding en ynstallearje it (wy hawwe de fergese ferzje nedich):

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  2. Gean nei de ynstalleare tafoeging, fyn de ôfbylding troch te sykjen redis bitnami en ynstallearje de lêste ferzje:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  3. Wy geane yn 'e ynladen kontener en oanpasse de konfiguraasje: spesifisearje de poarte, de maksimale tawiisde RAM-grutte, it wachtwurd yn' e omjouwingsfariabelen, en montearje it folume:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  4. Wy fiere stappen 2-3 út foar de prod-kontainer, yn 'e ynstellings feroarje wy allinich de parameters: poarte, wachtwurd, RAM-grutte en paad nei de folumemap op' e tsjinner:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

Docker Registry

Neist basistsjinsten soe it moai wêze om jo eigen Docker-ôfbyldingsrepository op 'e server te ynstallearjen. Gelokkich is romte op servers no frij goedkeap (wis goedkeaper dan in abonnemint op DockerHub), en it proses fan it ynstallearjen fan in privee repository is heul ienfâldich.

Wy wolle hawwe:

Om dit te dwaan:

  1. Litte wy twa subdomeinen oanmeitsje yn ús abonnemint yn Plesk: docker.helloworld.ru en docker-ui.helloworld.ru, en konfigurearje Let's Encrypt-sertifikaten foar har.
  2. Foegje de triem ta oan de docker.helloworld.ru subdomain map docker-compose.yml mei ynhâld lykas dizze:
    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. Under SSH sille wy in .htpasswd-bestân generearje foar Basic autorisaasje yn it Docker-repository:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Litte wy de konteners sammelje en opheffe:
    docker-compose up -d
  5. En wy moatte Nginx omliede nei ús konteners. Dat kin fia Plesk.

De folgjende stappen moatte dien wurde foar de subdomeinen docker.helloworld.ru en docker-ui.helloworld.ru:

section Dev Tools ús webside gean nei Docker Proxy Rules:

CI / CD yn Github Aksjes foar in Flask + Angular projekt
En foegje in regel ta foar it proxyjen fan ynkommende ferkear nei ús kontener:

CI / CD yn Github Aksjes foar in Flask + Angular projekt

  1. Wy kontrolearje dat wy kinne oanmelde by ús kontener fan 'e lokale masine:
    $ 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. Litte wy ek de wurking fan it subdomain docker-ui.helloworld.ru kontrolearje:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt
    As jo ​​klikke op Blêdzje repositories, sil de browser in autorisaasjefinster werjaan wêr't jo de oanmelding en wachtwurd foar it repository moatte ynfiere. Hjirnei wurde wy trochstjoerd nei in side mei in list mei repositories (foar no sil it leech wêze):

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

Iepenje havens yn Plesk Firewall

Nei it ynstallearjen en konfigurearjen fan de komponinten moatte wy de havens iepenje sadat de komponinten tagonklik binne fan Docker-konteners en it eksterne netwurk.

Litte wy sjen hoe't jo dit dwaan kinne mei it foarbyld fan 'e Firewall-útwreiding foar Plesk dy't wy earder ynstalleare.

  1. Gean nei Ark & Ynstellings> Ynstellings> Firewall:
    CI / CD yn Github Aksjes foar in Flask + Angular projekt
  2. Gean nei Plesk Firewall Regels oanpasse > Oanpaste regel tafoegje en iepenje de folgjende TCP-poarten foar it Docker-subnet (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  3. Wy sille ek in regel tafoegje dy't de PostgreSQL-poarten en it RabbitMQ-behearpaniel sil iepenje nei de bûtenwrâld:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  4. Tapasse de regels mei de knop Feroarings tapasse:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

CI / CD ynstelle yn Github Actions

Litte wy nei it meast ynteressante diel komme - it opsetten fan in trochgeande yntegraasjepipeline en it leverjen fan ús projekt oan 'e server.

Dizze pipeline sil bestean út twa dielen:

  • it bouwen fan de ôfbylding en it útfieren fan testen (foar de efterkant) - oan 'e Github-kant;
  • it starten fan migraasjes (foar de efterkant) en it ynsetten fan konteners op 'e tsjinner.

Ynsette nei Plesk

Litte wy earst mei it twadde punt omgean (om't it earste derfan hinget).

Wy sille it ynsetproses konfigurearje mei de Git-útwreiding foar Plesk.

Litte wy nei in foarbyld sjen mei in Prod-omjouwing foar in Backend-repository.

  1. Wy geane nei it abonnemint fan ús Helloworld-webside en gean nei de Git-subseksje:

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  2. Plak de keppeling nei ús Github repository yn it fjild "Remote Git repository" en feroarje de standert map httpdocs nei in oar (bygelyks, /httpdocs/hw_back):

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  3. Kopiearje de SSH Iepenbiere kaai fan 'e foarige stap en tafoegje it yn Github ynstellings.
  4. Klikje OK op it skerm yn stap 2, wêrnei't wy wurde omlaat nei de repository side yn Plesk. No moatte wy it repository konfigurearje om te aktualisearjen as jo ynsette foar de mastertûke. Om dit te dwaan, gean nei Repository ynstellings en bewarje de wearde Webhook URL (wy sille dit letter nedich hawwe by it ynstellen fan Github Actions):

    CI / CD yn Github Aksjes foar in Flask + Angular projekt

  5. Fier yn it fjild Aksjes op it skerm fan 'e foarige paragraaf it skript yn om de ynset te begjinnen:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    wêr:

    {REPOSITORY_ABSOLUTE_PATH} - paad nei de prod backend repository map op 'e tsjinner;
    {ENV} - omjouwing (dev / prod), yn ús gefal prod;
    {DOCKER_REGISTRY_HOST} - host fan ús docker repository
    {TG_BOT_TOKEN} - Telegram bot token;
    {TG_CHAT_ID} - Chat / kanaal ID foar it ferstjoeren fan notifikaasjes.

    Skript foarbyld:

    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. Wy foegje in brûker fan ús abonnemint ta oan de Docker-groep (sadat hy konteners kin beheare):
    sudo usermod -aG docker helloworld_admin

De Dev-omjouwing foar it backend-repository en frontend binne op deselde manier konfigureare.

Ynset Pipeline nei Github Actions

Litte wy trochgean mei it ynstellen fan it earste diel fan ús CI / CD-pipeline yn Github Actions.

backend

De pipeline wurdt beskreaun yn deploy.yml triem.

Mar foardat jo it analysearje, litte wy de Geheime fariabelen ynfolje dy't wy nedich binne yn Github. Om dit te dwaan, gean nei Ynstellings -> Geheimen:

  • DOCKER_REGISTRY - host fan ús Docker repository (docker.helloworld.ru);
  • DOCKER_LOGIN - oanmelde by it Docker-repository;
  • DOCKER_PASSWORD - wachtwurd foar it;
  • DEPLOY_HOST - in host wêrop it Plesk adminpaniel beskikber is (bygelyks: helloworld.ru:8443 of 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - in token foar ynset nei it prod repository op 'e tsjinner (wy krigen it yn Ynset yn Plesk, stap 4);
  • DEPLOY_BACK_DEV_TOKEN - token foar ynset nei it dev repository op 'e tsjinner.

It ynsetproses is ienfâldich en bestiet út trije haadstappen:

  • it bouwen en publisearjen fan it byld yn ús repository;
  • tests útfiere yn in kontener basearre op in nij kompilearre ôfbylding;
  • ynset nei de winske omjouwing ôfhinklik fan de branch (dev / master).

Foarste ein

Deploy.yml triem foar front repository net folle oars as dat fan Bekov. It mist de stap fan it útfieren fan testen en feroaret de nammen fan 'e tokens foar ynset. Geheimen foar de foarside repository moatte trouwens apart ynfolle wurde.

Site opset

Proxyferkear fia Nginx

No, wy binne oan it ein kommen. Alles wat oerbliuwt is om proxying te konfigurearjen fan ynkommende en útgeande ferkear nei ús kontener fia Nginx. Wy hawwe dit proses al behannele yn stap 5 fan it ynstellen fan it Docker Registry. Itselde moat wurde werhelle foar de efter- en foarste dielen yn 'e dev- en prod-omjouwings.

Ik sil skermôfbyldings fan 'e ynstellings leverje.

backend

CI / CD yn Github Aksjes foar in Flask + Angular projekt

Foarste ein

CI / CD yn Github Aksjes foar in Flask + Angular projekt
Wichtige opheldering. Alle URL's wurde proksearre nei de frontend-container, útsein dyjingen dy't begjinne mei /api/ - se wurde proxied nei de efterste kontener (dus yn de efterkant container moatte alle handlers begjinne mei /api/).

Resultaten

No moat ús side tagonklik wêze op helloworld.ru en dev.helloworld.ru (prod- en dev-omjouwings, respektivelik).

Yn totaal hawwe wy leard hoe't jo in ienfâldige applikaasje tariede yn Flask en Angular en in pipeline ynstelle yn Github Actions om it út te rollen nei in server mei Plesk.

Ik sil de keppelings nei de repositories duplisearje mei de koade: efterkant, frontend.

Boarne: www.habr.com

Add a comment