CI / CD an Github Aktiounen fir e Flask + Angular Projet

CI / CD an Github Aktiounen fir e Flask + Angular Projet
An dësem Artikel wäert ech meng Erfahrung deelen fir CI / CD opzestellen mat der Plesk Control Panel a Github Actions. Haut léiere mir wéi een einfache Projet mam onkomplizéierten Numm "Helloworld" ofsetzen. Et ass am Flask Python Kader geschriwwen, mat Sellerie Aarbechter an engem Angular 8 Frontend.

Links zu Repositories: backend, frontend.

Am éischten Deel vum Artikel wäerte mir eise Projet a seng Deeler kucken. An der zweeter wäerte mir erausfannen wéi Dir Plesk opstellt an déi néideg Extensiounen a Komponenten installéiere (DB, RabbitMQ, Redis, Docker, etc.).

Am drëtten Deel wäerte mir endlech erausfannen wéi een eng Pipeline opstellt fir eise Projet op e Server an engem Dev a Prod Ëmfeld z'installéieren. An da wäerte mir de Site um Server starten.

An jo, ech hu vergiess mech virzestellen. Mäin Numm ass Oleg Borzov, ech sinn e Fullstack Entwéckler am CRM Team fir Hypothéikmanager bei Domclick.

Projektübersicht

Als éischt kucke mer zwee Projetsrepositories - Backend a Front - a gitt iwwer de Code.

Backend: Flask + Sellerie

Fir den hënneschten Deel hunn ech e Rëtsch geholl deen zimmlech populär ënner Python Entwéckler ass: de Flask Kader (fir d'API) a Sellerie (fir d'Taskschlaang). SQLAchemy gëtt als ORM benotzt. Alembic gëtt fir Migratiounen benotzt. Fir JSON Validatioun an Handle - Marshmallow.

В Repositories et gëtt eng Readme.md Datei mat enger detailléierter Beschreiwung vun der Struktur an Instruktioune fir de Projet ze lafen.

Web Part API zimlech onkomplizéiert, besteet aus 6 Stëfter:

  • /ping - Disponibilitéit ze kontrolléieren;
  • handhabt fir d'Aschreiwung, d'Autorisatioun, d'Autorisatioun an d'Erhalen vun engem autoriséierte Benotzer;
  • en E-Mail-Griff deen eng Aufgab an der Sellerie-Schlaang setzt.

Sellerie Deel nach méi einfach, et gëtt nëmmen ee Problem send_mail_task.

Am Dossier /conf et ginn zwou Ënnermapper:

  • docker mat zwee Dockerfile (base.dockerfile engem selten änneren Basis Bild ze bauen an Dockerfile fir Haaptversammlungen);
  • .env_files - mat Dateie mat Ëmfeldvariablen fir verschidden Ëmfeld.

Et gi véier Docker-Compose Dateien an der Root vum Projet:

  • docker-compose.local.db.yml eng lokal Datebank fir Entwécklung z'erhiewen;
  • docker-compose.local.workers.yml fir lokal Erhéijung vun der Aarbechter, Datebank, Redis an RabbitMQ;
  • docker-compose.test.yml Tester während der Deployment auszeféieren;
  • docker-compose.yml fir Asaz.

An dee leschten Dossier mir interesséiert sinn - .ci-cd. Et enthält Shell Scripte fir Deployment:

  • deploy.sh - Start vun Migratioun an Détachement. Leeft op de Server nom Bauen a Lafen Tester an Github Actions;
  • rollback.sh - Réckroll vu Container op déi fréier Versioun vun der Assemblée;
  • curl_tg.sh - Deployment Notifikatiounen op Telegram schécken.

Frontend op Angular

Repository mat Front vill méi einfach wéi de Beck. D'Front besteet aus dräi Säiten:

  • Haaptsäit mat enger Form fir e schécken E-Mail an engem Austrëtt Knäppchen.
  • Login Säit.
  • Aschreiwung Säit.

D'Haaptsäit gesäit asketesch aus:

CI / CD an Github Aktiounen fir e Flask + Angular Projet
Et ginn zwou Dateien an der Root Dockerfile и docker-compose.yml, souwéi de vertrauten Dossier .ci-cd mat liicht manner Scripte wéi am Réck Repository (geläscht Scripte fir Tester ze lafen).

Start e Projet zu Plesk

Loosst eis ufänken mam Plesk opzestellen an en Abonnement fir eise Site ze kreéieren.

Installatioun vun Extensiounen

Am Plesk brauche mir véier Extensiounen:

  • Docker de Status vun de Container am Plesk Admin Panel ze verwalten an visuell ze weisen;
  • Git fir den Détachement Schrëtt um Server ze konfiguréieren;
  • Let's Encrypt gratis TLS Certificaten ze generéieren (an automatesch erneieren);
  • Firewall fir d'Filterung vum erakommen Traffic ze konfiguréieren.

Dir kënnt se iwwer de Plesk Admin Panel an der Extensions Sektioun installéieren:

CI / CD an Github Aktiounen fir e Flask + Angular Projet
Mir wäerten déi detailléiert Astellunge fir Extensiounen net berücksichtegen, d'Standardastellunge wäerte fir eis Demo Zwecker maachen.

Schafen en Abonnement a Site

Als nächst musse mir en Abonnement fir eis helloworld.ru Websäit erstellen an den dev.helloworld.ru Subdomain do addéieren.

  1. Erstellt en Abonnement fir den Helloworld.ru Domain a spezifizéiert de Login-Passwuert fir de System Benotzer:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet
    Kuckt d'Këscht um Enn vun der Säit Séchert d'Domain mat Let's Encryptwa mir HTTPS fir de Site wëllen opsetzen:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  2. Als nächst, an dësem Abonnement, erstellt e Subdomain dev.helloworld.ru (fir deen Dir och e gratis TLS Zertifika kënnt ausginn):

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

Installatioun vun Server Komponenten

Mir hunn e Server mat OS Debian Stretch 9.12 an installéiert Kontroll Rot Plesk Obsidian 18.0.27.

Mir mussen installéieren a konfiguréieren fir eise Projet:

  • PostgreSQL (an eisem Fall gëtt et ee Server mat zwou Datenbanken fir Dev a Prod Ëmfeld).
  • RabbitMQ (selwecht, selwecht Instanz mat verschiddene vhosts fir Ëmfeld).
  • Zwee Redis Instanzen (fir Dev a Prod Ëmfeld).
  • Docker Registry (fir lokal Späichere vu gebaute Docker Biller).
  • UI fir Docker Registry.

PostgreSQL

Plesk kënnt scho mat PostgreSQL DBMS, awer net déi lescht Versioun (zu der Zäit vum Schreiwen Plesk Obsidian ënnerstëtzt Postgres Versiounen 8.4–10.8). Mir wëllen déi lescht Versioun fir eis Applikatioun (12.3 zum Zäitpunkt vun dësem Schreiwen), also wäerte mir se manuell installéieren.

Et gi vill detailléiert Instruktioune fir Postgres op Debian um Netz z'installéieren (Beispill), also wäert ech se net am Detail beschreiwen, ech ginn just d'Befehle:

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

Bedenkt datt PostgreSQL zimlech mëttelméisseg Standardastellungen huet, ass et néideg d'Konfiguratioun ze korrigéieren. Dëst wäert eis hëllefen Rechner: Dir musst an de Parameteren vun Ärem Server fueren an d'Astellungen an der Datei ersetzen /etc/postgresql/12/main/postgresql.confzu deenen ugebueden. Et soll hei bemierkt ginn datt esou Rechner keng Zauberkugel sinn, an d'Basis soll méi präzis ofgestëmmt ginn, baséiert op Är Hardware, Uwendung an Ufro Komplexitéit. Awer dëst ass genuch fir unzefänken.

Zousätzlech zu den Astellungen, déi vum Rechner proposéiert ginn, änneren mir och postgresql.confde Standardport 5432 op en aneren (an eisem Beispill - 53983).

Nodeems Dir d'Konfiguratiounsdatei geännert hutt, restart postgresql-Server mam Kommando:

service postgresql restart

Mir hunn PostgreSQL installéiert a konfiguréiert. Loosst eis elo eng Datebank erstellen, Benotzer fir Dev a Prod Ëmfeld, a ginn de Benotzer Rechter fir d'Datebank ze managen:

$ 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

Kanéngchen MQ

Loosst eis weidergoen fir RabbitMQ z'installéieren, e Message Broker fir Sellerie. Installéieren et op Debian ass ganz einfach:

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

No der Installatioun musse mir erstellen vhosts, Benotzer a ginn déi néideg Rechter:

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

Loosst eis de leschte Komponent fir eis Applikatioun installéieren an konfiguréieren - Redis. Et gëtt als Backend benotzt fir d'Resultater vun Sellerie Aufgaben ze späicheren.

Mir erhéijen zwee Docker Container mat Redis fir Dev a Prod Ëmfeld mat der Extensioun Docker fir Plesk.

  1. Mir ginn op Plesk, gitt op d'Extensions Sektioun, kuckt no der Docker Extensioun an installéiere se (mir brauchen eng gratis Versioun):

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  2. Gitt op déi installéiert Extensioun, fannt d'Bild duerch d'Sich redis bitnami an installéiert déi lescht Versioun:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  3. Mir ginn an den erofgeluede Container a passen d'Konfiguratioun un: spezifizéiert den Hafen, déi maximal zougewisen RAM Gréisst, d'Passwuert an den Ëmfeldvariablen, a montéiert de Volume:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  4. Mir maachen Schrëtt 2-3 fir de Prod Container, an den Astellungen änneren mir nëmmen d'Parameteren: Port, Passwuert, RAM Gréisst a Wee an de Volume Dossier um Server:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

Docker Registry

Zousätzlech zu Basisdéngschter wier et flott Ären eegene Docker Image Repository op de Server ze setzen. Glécklecherweis ass de Serverraum elo zimlech bëlleg (sëcher méi bëlleg wéi en DockerHub Abonnement), an de Prozess fir e private Repository opzestellen ass ganz einfach.

Mir wëllen hunn:

Fir dëst ze maachen:

  1. Loosst eis zwee Subdomains am Plesk an eisem Abonnement erstellen: docker.helloworld.ru an docker-ui.helloworld.ru, a konfiguréieren Let's Encrypt Certificates fir si.
  2. Füügt d'Datei an den docker.helloworld.ru Subdomain Dossier docker-compose.yml mat Inhalt wéi dësen:
    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. Ënner SSH generéiere mir d'.htpasswd Datei fir Basis Autorisatioun am Docker Repository:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Behälter sammelen an ophiewen:
    docker-compose up -d
  5. A mir mussen Nginx op eis Container viruleeden. Dëst kann duerch Plesk gemaach ginn.

Déi folgend Schrëtt musse gemaach ginn fir den docker.helloworld.ru an docker-ui.helloworld.ru Ënnerdomainen:

Sektioun Dev Tools eise Site goen Docker Proxy Regelen:

CI / CD an Github Aktiounen fir e Flask + Angular Projet
A füügt eng Regel un de Proxy erakommende Traffic an eise Container:

CI / CD an Github Aktiounen fir e Flask + Angular Projet

  1. Mir kontrolléieren ob mir an eise Container vun der lokaler Maschinn aloggen kënnen:
    $ 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. Loosst eis och d'Operatioun vum Docker-ui.helloworld.ru Ënnerdomain kucken:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet
    Wann Dir op Browse Repositories klickt, weist de Browser eng Autorisatiounsfenster wou Dir de Benotzernumm a Passwuert fir de Repository aginn musst. Duerno gi mir op eng Säit mat enger Lëscht vu Repositories transferéiert (fir de Moment ass et eidel fir Iech):

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

Ouverture Häfen an Plesk Firewall

No der Installatioun an der Konfiguratioun vun de Komponenten, musse mir Ports opmaachen, sou datt d'Komponente vun Docker Container an dem externen Netzwierk zougänglech sinn.

Loosst eis kucken wéi Dir dëst maacht mat der Firewall Extensioun fir Plesk déi mir virdru installéiert hunn.

  1. Géi op Tools & Astellungen> Astellungen> Firewall:
    CI / CD an Github Aktiounen fir e Flask + Angular Projet
  2. Géi op Änneren Plesk Firewall Regelen> Füügt Benotzerdefinéiert Regel an öffnen déi folgend TCP Ports fir den Docker Subnet (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  3. Mir addéieren och eng Regel déi PostgreSQL Ports a RabbitMQ Management Panelen op d'Äussewelt opmaacht:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  4. Fëllt d'Regelen un andeems Dir de Knäppchen Ännerunge bewerben benotzt:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

CI/CD opsetzen an Github Actions

Loosst eis op den interessantsten Deel erofgoen - eng kontinuéierlech Integratiounspipeline opzestellen an eise Projet op de Server liwweren.

Dës Pipeline besteet aus zwee Deeler:

  • e Bild bauen an Tester lafen (fir de Backend) - op der Github Säit;
  • Lafen Migratiounen (fir de Backend) an deployéieren Container - um Server.

Deploy op Plesk

Loosst d'éischt mat den zweete Punkt beschäftegen (well deen éischten hänkt dovun of).

Mir konfiguréieren den Deploymentprozess mat der Git Extensioun fir Plesk.

Betruecht e Beispill mat engem Prod Ëmfeld fir e Backend Repository.

  1. Mir ginn op d'Abonnement vun eiser Helloworld Websäit a gitt op d'Git Ënnersektioun:

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  2. Füügt e Link op eise Github Repository an de Feld "Remote Git Repository" an ännert den Default Dossier httpdocs zu engem aneren (z.B. /httpdocs/hw_back):

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  3. Kopéiert den SSH Public Schlëssel vum virege Schrëtt an dobäizemaachen et ass an Github Astellungen.
  4. Klickt OK um Bildschierm am Schrëtt 2, duerno gi mir op d'Repository Säit an Plesk ëmgeleet. Elo musse mir de Repository konfiguréieren fir op Verpflichtungen an d'Master Branche aktualiséiert ze ginn. Fir dëst ze maachen, gitt op Repository Astellungen a späichert de Wäert Webhook URL (mir brauchen et méi spéit wann Dir Github Actions opstellt):

    CI / CD an Github Aktiounen fir e Flask + Angular Projet

  5. Am Aktiounsfeld um Écran aus dem viregte Paragraf, gitt de Skript fir d'Deployment ze starten:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    wou:

    {REPOSITORY_ABSOLUTE_PATH} - Wee zum Prod-Ordner vum Backend-Repository um Server;
    {ENV} - Ëmfeld (dev / prod), an eisem Fall prod;
    {DOCKER_REGISTRY_HOST} - den Host vun eisem Docker Repository
    {TG_BOT_TOKEN} - Telegram Bot Token;
    {TG_CHAT_ID} - ID vum Chat / Kanal fir Notifikatiounen ze schécken.

    Skript Beispill:

    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. Füügt e Benotzer vun eisem Abonnement an den Docker-Grupp (sou datt se Container kënne verwalten):
    sudo usermod -aG docker helloworld_admin

D'Dev Ëmfeld fir de Backend Repository an de Frontend sinn op déiselwecht Manéier ageriicht.

Deployment Pipeline an Github Actions

Loosst eis weidergoen fir den éischten Deel vun eiser CI / CD Pipeline an Github Actions opzestellen.

Backend

D'Pipeline gëtt an deploy.yml Datei.

Awer ier Dir et parséiert, loosst eis d'Geheimvariablen ausfëllen déi mir am Github brauchen. Fir dëst ze maachen, gitt op Astellungen -> Geheimnisser:

  • DOCKER_REGISTRY - den Host vun eisem Docker Repository (docker.helloworld.ru);
  • DOCKER_LOGIN - Login op den Docker Repository;
  • DOCKER_PASSWORD - Passwuert fir et;
  • DEPLOY_HOST - Host wou de Plesk Admin Panel verfügbar ass (Beispill: helloworld.com: 8443 oder 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - en Token fir d'Deployment op de Prod-Repository um Server (mir kruten et an Deployment am Plesk p. 4);
  • DEPLOY_BACK_DEV_TOKEN - Token fir Deployment an den Dev Repository um Server.

Den Ofbauprozess ass einfach a besteet aus dräi Haaptschrëtt:

  • d'Bild an eisem Repository ze bauen an ze publizéieren;
  • Lafen Tester an engem Container baséiert op engem frësch gebaut Bild;
  • Ofbau op dat gewënscht Ëmfeld ofhängeg vun der Branche (Dev / Master).

frontend

D'deploy.yml Datei fir de Front Repository e bëssen anescht wéi dem Beck. Et feelt e Schrëtt mat Lafen Tester an ännert d'Nimm vun Tokens fir d'Deployment. Geheimnisser fir de Front Repository, iwwregens, musse separat ausgefëllt ginn.

Site Ariichten

Proxying Traffic duerch Nginx

Gutt, mir sinn um Enn komm. Et bleift nëmmen fir d'Proxying vum erakommen an ausgoende Verkéier op eise Container duerch Nginx ze konfiguréieren. Mir hunn dëse Prozess schonn am Schrëtt 5 vum Docker Registry Setup ofgedeckt. Datselwecht soll fir de Réck a virun Deeler an Dev a Prod Ëmfeld widderholl ginn.

Ech wäert Screenshots vun den Astellungen ubidden.

Backend

CI / CD an Github Aktiounen fir e Flask + Angular Projet

frontend

CI / CD an Github Aktiounen fir e Flask + Angular Projet
Wichteg Erklärung. All URLe ginn op de Frontend Container geproxéiert, ausser déi mat /api/ - si ginn an de Réckbehälter proxéiert (also am Réck Container muss all Handler ufänken mat /api/).

Resultater

Elo soll eise Site op helloworld.ru an dev.helloworld.ru verfügbar sinn (prod an Dev Ëmfeld, respektiv).

Am Ganzen hu mir geléiert wéi een eng einfach Applikatioun a Flask a Angular virbereet an eng Pipeline an Github Actions opstellt fir et op e Server auszerollen deen Plesk leeft.

Ech duplizéieren d'Links op d'Repositories mam Code: backend, frontend.

Source: will.com

Setzt e Commentaire