CI/CD u Github radnjama za Flask+Angular projekt

CI/CD u Github radnjama za Flask+Angular projekt
U ovom ću članku podijeliti svoje iskustvo postavljanja CI/CD-a pomoću Plesk Control Panela i Github Actions. Danas ćemo naučiti kako implementirati jednostavan projekt s nekompliciranim imenom "Helloworld". Napisan je u okviru Flask Python, s Celery radnicima i Angular 8 sučeljem.

Linkovi na repozitorije: pozadina, sučelje.

U prvom dijelu članka osvrnut ćemo se na naš projekt i njegove dijelove. U drugom ćemo smisliti kako postaviti Plesk i instalirati potrebna proširenja i komponente (DB, RabbitMQ, Redis, Docker itd.).

U trećem ćemo dijelu konačno otkriti kako postaviti cjevovod za implementaciju našeg projekta na poslužitelj u dev i prod okruženju. Zatim ćemo pokrenuti stranicu na poslužitelju.

I da, zaboravio sam se predstaviti. Moje ime je Oleg Borzov, fullstack sam programer u CRM timu za upravitelje hipotekarnih kredita u Domclicku.

Pregled projekta

Prvo, pogledajmo dva repozitorija projekta - pozadinsko i prednje - i prođimo preko koda.

Pozadina: Flask+Celery

Za stražnji dio uzeo sam hrpu koja je prilično popularna među Python programerima: okvir Flask (za API) i Celery (za red čekanja). SQLAchemy se koristi kao ORM. Alembic se koristi za migracije. Za JSON provjeru valjanosti u ručkama - Marshmallow.

В spremišta postoji datoteka Readme.md s detaljnim opisom strukture i uputama za pokretanje projekta.

API web-dijela prilično jednostavan, sastoji se od 6 olovaka:

  • /ping - provjeriti dostupnost;
  • ručke za registraciju, autorizaciju, deautorizaciju i dobivanje ovlaštenog korisnika;
  • rukovatelj e-poštom koji stavlja zadatak u red čekanja Celeryja.

Dio celera još lakše, postoji samo jedan problem send_mail_task.

U mapi /konf postoje dvije podmape:

  • docker s dvije Docker datoteke (base.dockerfile izgraditi rijetko promjenjivu osnovnu sliku i Dockerfile za glavne sklopove);
  • .env_files - s datotekama s varijablama okruženja za različita okruženja.

Postoje četiri docker-compose datoteke u korijenu projekta:

  • docker-compose.local.db.yml podići lokalnu bazu podataka za razvoj;
  • docker-compose.local.workers.yml za lokalno podizanje radnika, baza podataka, Redis i RabbitMQ;
  • docker-compose.test.yml za pokretanje testova tijekom implementacije;
  • docker-compose.yml za raspoređivanje.

I zadnja mapa koja nas zanima - .ci-cd. Sadrži skripte ljuske za implementaciju:

  • deploy.sh — pokretanje migracije i implementacije. Pokreće se na poslužitelju nakon izgradnje i pokretanja testova u Github Actions;
  • rollback.sh - vraćanje spremnika na prethodnu verziju sklopa;
  • curl_tg.sh - slanje obavijesti o implementaciji Telegramu.

Frontend na Angularu

Spremište s pročeljem mnogo jednostavniji od Beckovog. Prednjica se sastoji od tri stranice:

  • Glavna stranica s formom za slanje e-pošte i gumbom za izlaz.
  • Stranica za prijavu.
  • Stranica za registraciju.

Glavna stranica izgleda asketski:

CI/CD u Github radnjama za Flask+Angular projekt
Postoje dvije datoteke u korijenu Dockerfile и docker-compose.yml, kao i poznata mapa .ci-cd s nešto manje skripti nego u stražnjem repozitoriju (uklonjene skripte za pokretanje testova).

Pokretanje projekta u Plesku

Počnimo s postavljanjem Pleska i kreiranjem pretplate za našu stranicu.

Instaliranje proširenja

U Plesku su nam potrebna četiri proširenja:

  • Docker za upravljanje i vizualni prikaz statusa spremnika u Plesk administratorskoj ploči;
  • Git za konfiguriranje koraka postavljanja na poslužitelju;
  • Let's Encrypt za generiranje (i automatsko obnavljanje) besplatnih TLS certifikata;
  • Firewall za konfiguriranje filtriranja dolaznog prometa.

Možete ih instalirati putem administratorske ploče Plesk u odjeljku Proširenja:

CI/CD u Github radnjama za Flask+Angular projekt
Nećemo razmatrati detaljne postavke za proširenja, zadane postavke poslužit će za naše demo svrhe.

Stvorite pretplatu i stranicu

Zatim moramo kreirati pretplatu za našu web stranicu helloworld.ru i tamo dodati poddomenu dev.helloworld.ru.

  1. Stvorite pretplatu za domenu helloworld.ru i navedite lozinku za prijavu za korisnika sustava:

    CI/CD u Github radnjama za Flask+Angular projekt
    Označite okvir na dnu stranice Osigurajte domenu uz Let's Encryptako želimo postaviti HTTPS za stranicu:

    CI/CD u Github radnjama za Flask+Angular projekt

  2. Zatim u ovoj pretplati kreirajte poddomenu dev.helloworld.ru (za koju također možete izdati besplatni TLS certifikat):

    CI/CD u Github radnjama za Flask+Angular projekt

Instaliranje komponenti poslužitelja

Imamo server sa OS Debian Stretch 9.12 i instalirana upravljačka ploča Plesk Obsidian 18.0.27.

Moramo instalirati i konfigurirati za naš projekt:

  • PostgreSQL (u našem slučaju, bit će jedan poslužitelj s dvije baze podataka za dev i prod okruženja).
  • RabbitMQ (isto, ista instanca s različitim vhostovima za okruženja).
  • Dvije instance Redisa (za dev i prod okruženja).
  • Docker registar (za lokalnu pohranu izgrađenih Docker slika).
  • UI za Docker registar.

PostgreSQL

Plesk već dolazi s PostgreSQL DBMS-om, ali ne i najnovijom verzijom (u trenutku pisanja Plesk Obsidian podržan Postgres verzije 8.4–10.8). Želimo najnoviju verziju za našu aplikaciju (12.3 u vrijeme pisanja ovog teksta), pa ćemo je instalirati ručno.

Na netu ima dosta detaljnih uputa za instalaciju Postgresa na Debian (primjer), pa ih neću detaljno opisivati, samo ću dati naredbe:

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

S obzirom da PostgreSQL ima prilično osrednje zadane postavke, potrebno je ispraviti konfiguraciju. Ovo će nam pomoći kalkulator: trebate unijeti parametre vašeg poslužitelja i zamijeniti postavke u datoteci /etc/postgresql/12/main/postgresql.confna ponuđene. Ovdje treba napomenuti da takvi kalkulatori nisu čarobni metak, a bazu treba preciznije podesiti, na temelju vašeg hardvera, aplikacije i složenosti upita. Ali ovo je dovoljno za početak.

Osim postavki koje predlaže kalkulator, mi također mijenjamo postgresql.confzadani port 5432 na drugi (u našem primjeru - 53983).

Nakon promjene konfiguracijske datoteke ponovno pokrenite postgresql-poslužitelj naredbom:

service postgresql restart

Instalirali smo i konfigurirali PostgreSQL. Kreirajmo sada bazu podataka, korisnike za razvojna i proizvodna okruženja i dajmo korisnicima prava za upravljanje bazom podataka:

$ 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

Zec MQ

Prijeđimo na instaliranje RabbitMQ, brokera poruka za Celery. Instalacija na Debian je vrlo jednostavna:

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

Nakon instalacije, moramo stvoriti vhosts, korisnicima i dodijeliti potrebna prava:

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

Sada idemo instalirati i konfigurirati posljednju komponentu za našu aplikaciju - Redis. Koristit će se kao pozadina za pohranjivanje rezultata Celery zadataka.

Podići ćemo dva Docker spremnika s Redisom za dev i prod okruženja koristeći proširenje Docker za Plesk.

  1. Idemo na Plesk, idemo na odjeljak Extensions, tražimo proširenje Docker i instaliramo ga (trebamo besplatnu verziju):

    CI/CD u Github radnjama za Flask+Angular projekt

  2. Idite na instalirano proširenje, pronađite sliku kroz pretraživanje redis bitnami i instalirajte najnoviju verziju:

    CI/CD u Github radnjama za Flask+Angular projekt

  3. Idemo u preuzeti spremnik i prilagođavamo konfiguraciju: navedite port, maksimalnu dodijeljenu veličinu RAM-a, lozinku u varijablama okruženja i montirajte volumen:

    CI/CD u Github radnjama za Flask+Angular projekt

  4. Izvodimo korake 2-3 za proizvodni spremnik, u postavkama mijenjamo samo parametre: port, lozinku, veličinu RAM-a i put do mape volumena na poslužitelju:

    CI/CD u Github radnjama za Flask+Angular projekt

Docker registar

Osim osnovnih servisa, bilo bi lijepo na server postaviti vlastito spremište Docker slika. Srećom, prostor na poslužitelju sada je prilično jeftin (sigurno jeftiniji od pretplate na DockerHub), a postupak postavljanja privatnog repozitorija vrlo je jednostavan.

Želimo imati:

Da biste to učinili:

  1. Kreirajmo dvije poddomene u Plesku u našoj pretplati: docker.helloworld.ru i docker-ui.helloworld.ru, i konfigurirajmo Let's Encrypt certifikate za njih.
  2. Dodajte datoteku u mapu poddomene docker.helloworld.ru docker-compose.yml sa ovakvim sadržajem:
    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. Pod SSH-om ćemo generirati .htpasswd datoteku za osnovnu autorizaciju u Docker repozitoriju:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Prikupiti i podići spremnike:
    docker-compose up -d
  5. I moramo preusmjeriti Nginx na naše spremnike. To se može učiniti putem Pleska.

Za poddomene docker.helloworld.ru i docker-ui.helloworld.ru potrebno je napraviti sljedeće korake:

U odjeljku Dev Alati idite na našu stranicu Docker proxy pravila:

CI/CD u Github radnjama za Flask+Angular projekt
I dodajte pravilo za proxy dolazni promet u naš spremnik:

CI/CD u Github radnjama za Flask+Angular projekt

  1. Provjeravamo možemo li se prijaviti u naš spremnik s lokalnog stroja:
    $ 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. Provjerimo i rad poddomene docker-ui.helloworld.ru:

    CI/CD u Github radnjama za Flask+Angular projekt
    Kada kliknete na Pregledaj repozitorije, preglednik će prikazati prozor za autorizaciju u koji ćete morati unijeti korisničko ime i lozinku za repozitorij. Nakon toga bit ćemo preusmjereni na stranicu s popisom repozitorija (za sada će vam biti prazan):

    CI/CD u Github radnjama za Flask+Angular projekt

Otvaranje portova u Plesk Firewallu

Nakon instaliranja i konfiguriranja komponenti, moramo otvoriti portove kako bi komponente bile dostupne iz Docker spremnika i vanjske mreže.

Pogledajmo kako to učiniti pomoću proširenja Firewall za Plesk koje smo ranije instalirali.

  1. Ići Alati i postavke > Postavke > Vatrozid:
    CI/CD u Github radnjama za Flask+Angular projekt
  2. Ići Izmjena pravila Plesk vatrozida > Dodaj prilagođeno pravilo i otvorite sljedeće TCP portove za Docker podmrežu (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD u Github radnjama za Flask+Angular projekt

  3. Također ćemo dodati pravilo koje će otvoriti PostgreSQL portove i RabbitMQ upravljačke panele vanjskom svijetu:

    CI/CD u Github radnjama za Flask+Angular projekt

  4. Primijenite pravila pomoću gumba Primijeni promjene:

    CI/CD u Github radnjama za Flask+Angular projekt

Postavljanje CI/CD-a u Github radnjama

Prijeđimo na najzanimljiviji dio - postavljanje kontinuiranog integracijskog cjevovoda i isporuku našeg projekta na poslužitelj.

Ovaj cjevovod će se sastojati od dva dijela:

  • izrada slike i pokretanje testova (za backend) - na Github strani;
  • pokretanje migracija (za backend) i postavljanje spremnika - na poslužitelju.

Implementiraj u Plesk

Pozabavimo se prvo drugom točkom (jer prva ovisi o njoj).

Konfigurirat ćemo proces postavljanja pomoću Git proširenja za Plesk.

Razmotrite primjer s Prod okruženjem za Backend repozitorij.

  1. Idemo na pretplatu naše web stranice Helloworld i idemo na pododjeljak Git:

    CI/CD u Github radnjama za Flask+Angular projekt

  2. Umetnite vezu na naše Github spremište u polje "Udaljeno Git spremište" i promijenite zadanu mapu httpdocs drugom (npr. /httpdocs/hw_back):

    CI/CD u Github radnjama za Flask+Angular projekt

  3. Kopirajte SSH javni ključ iz prethodnog koraka i dodajući nalazi se u Github postavkama.
  4. Pritisnemo OK na ekranu u koraku 2, nakon čega smo prebačeni na stranicu repozitorija u Plesku. Sada moramo konfigurirati repozitorij da se ažurira pri predaji na glavnu granu. Da biste to učinili, idite na Postavke spremišta i spremite vrijednost Webhook URL (trebat će nam kasnije prilikom postavljanja Github akcija):

    CI/CD u Github radnjama za Flask+Angular projekt

  5. U polje Radnje na ekranu iz prethodnog odlomka unesite skriptu za pokretanje implementacije:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    gdje je:

    {REPOSITORY_ABSOLUTE_PATH} - put do mape prod pozadinskog repozitorija na poslužitelju;
    {ENV} - okruženje (dev / prod), u našem slučaju prod;
    {DOCKER_REGISTRY_HOST} - domaćin našeg docker repozitorija
    {TG_BOT_TOKEN} — Telegram bot token;
    {TG_CHAT_ID} — ID chata/kanala za slanje obavijesti.

    Primjer skripte:

    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. Dodajte korisnika iz naše pretplate u Docker grupu (tako da mogu upravljati spremnicima):
    sudo usermod -aG docker helloworld_admin

Dev okruženje za backend repozitorij i frontend postavljeni su na isti način.

Cjevovod implementacije u Github radnjama

Prijeđimo na postavljanje prvog dijela našeg CI/CD cjevovoda u Github Actions.

Backend

Cjevovod je opisan u deploy.yml datoteku.

Ali prije nego ga analiziramo, ispunimo Secret varijable koje su nam potrebne u Githubu. Da biste to učinili, idite na Postavke -> Tajne:

  • DOCKER_REGISTRY - host našeg Docker repozitorija (docker.helloworld.ru);
  • DOCKER_LOGIN - prijava na Docker repozitorij;
  • DOCKER_PASSWORD - lozinka za njega;
  • DEPLOY_HOST — host na kojem je dostupna administratorska ploča Plesk (primjer: helloworld.com: 8443 ili 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - token za implementaciju u prod-repozitorij na poslužitelju (dobili smo ga u implementaciji u Plesku str. 4);
  • DEPLOY_BACK_DEV_TOKEN - token za implementaciju u dev repozitorij na poslužitelju.

Proces postavljanja je jednostavan i sastoji se od tri glavna koraka:

  • izrada i objavljivanje slike u našem repozitoriju;
  • izvođenje testova u spremniku na temelju svježe izgrađene slike;
  • implementacija u željeno okruženje ovisno o grani (dev/master).

Sučelje

Datoteka deploy.yml za prednje spremište malo drugačiji od Beckovog. Nedostaje mu korak s pokretanjem testova i mijenja nazive tokena za implementaciju. Tajne za prednje spremište, usput, potrebno je ispuniti zasebno.

Postavljanje web stranice

Proxy promet putem Nginxa

Eto, došli smo do kraja. Ostaje samo konfigurirati proxy dolaznog i odlaznog prometa u naš spremnik kroz Nginx. Već smo pokrili ovaj proces u 5. koraku postavljanja Docker registra. Isto treba ponoviti za stražnji i prednji dio u dev i prod okruženjima.

Dat ću snimke zaslona postavki.

Backend

CI/CD u Github radnjama za Flask+Angular projekt

Sučelje

CI/CD u Github radnjama za Flask+Angular projekt
Važnoe utočnenie. Svi URL-ovi bit će proslijeđeni u spremnik sučelja, osim onih koji počinju s /api/ - bit će proslijeđeni u stražnji spremnik (dakle u stražnjem spremniku, svi rukovatelji moraju započeti s /api/).

Rezultati

Sada bi naša stranica trebala biti dostupna na helloworld.ru i dev.helloworld.ru (prod i dev okruženja).

Sve u svemu, naučili smo kako pripremiti jednostavnu aplikaciju u Flasku i Angularu i postaviti cjevovod u Github Actions kako bismo je postavili na poslužitelj koji pokreće Plesk.

Duplicirat ću poveznice na repozitorije s kodom: pozadina, sučelje.

Izvor: www.habr.com

Dodajte komentar