CI/CD programmā Github Actions projektā Flask+Angular

CI/CD programmā Github Actions projektā Flask+Angular
Šajā rakstā es dalīšos pieredzē par CI/CD iestatīšanu, izmantojot Plesk vadības paneli un Github darbības. Šodien mēs uzzināsim, kā izvietot vienkāršu projektu ar vienkāršu nosaukumu "Helloworld". Tas ir rakstīts Flask Python ietvarā ar Selery darbiniekiem un Angular 8 priekšgalu.

Saites uz krātuvēm: aizmugure, frontend.

Raksta pirmajā daļā mēs apskatīsim mūsu projektu un tā daļas. Otrajā mēs izdomāsim, kā iestatīt Plesk un instalēt nepieciešamos paplašinājumus un komponentus (DB, RabbitMQ, Redis, Docker utt.).

Trešajā daļā mēs beidzot izdomāsim, kā izveidot cauruļvadu mūsu projekta izvietošanai serverī izstrādes un ražošanas vidē. Un tad mēs palaižam vietni serverī.

Un jā, es aizmirsu sevi iepazīstināt. Mani sauc Oļegs Borzovs, es esmu pilna apjoma izstrādātājs Domklik hipotekārās kreditēšanas menedžeru CRM komandā.

Projekta pārskats

Vispirms apskatīsim divus projektu repozitorijus – backend un front – un pārskatīsim kodu.

Aizmugurējā daļa: Kolba + Selerijas

Aizmugurējai daļai es paņēmu ķekaru, kas ir diezgan populārs Python izstrādātāju vidū: Flask ietvaru (API) un Selery (uzdevumu rindai). SQLAchemy tiek izmantots kā ORM. Alembic izmanto migrācijām. JSON validācijai rokturos — Marshmallow.

В krātuves ir fails Readme.md ar detalizētu struktūras aprakstu un norādījumiem projekta izpildei.

Web daļas API diezgan vienkārša, sastāv no 6 pildspalvām:

  • /ping — pārbaudīt pieejamību;
  • apstrādā reģistrāciju, autorizāciju, deautorizāciju un autorizēta lietotāja iegūšanu;
  • rokturis e-pasta sūtīšanai, kas ievieto uzdevumu Selerijas rindā.

Selerijas daļa Tas ir vēl vienkāršāk, ir tikai viena problēma send_mail_task.

Mapē /konf ir divas apakšmapes:

  • docker ar diviem Docker failiem (base.dockerfile lai izveidotu bāzes attēlu, kas reti mainās un Dockerfile galvenajiem mezgliem);
  • .env_files - ar failiem ar vides mainīgajiem dažādām vidēm.

Projekta saknē ir četri docker-compose faili:

  • docker-compose.local.db.yml izveidot lokālu datubāzi attīstībai;
  • docker-compose.local.workers.yml lokālai strādnieka audzināšanai, datu bāzei, Redis un RabbitMQ;
  • docker-compose.test.yml testu veikšanai izvietošanas laikā;
  • docker-compose.yml izvietošanai.

Un pēdējā mūs interesējošā mape ir .ci-cd. Tas satur čaulas skriptus izvietošanai:

  • deploy.sh — migrācijas un izvietošanas uzsākšana. Darbojas serverī pēc Github Actions testu izveides un palaišanas;
  • rollback.sh - konteineru atgriešana uz iepriekšējo montāžas versiju;
  • curl_tg.sh - izvietošanas paziņojumu nosūtīšana uz Telegram.

Priekšpuse uz Angular

Repozitorijs ar priekšpusi daudz vienkāršāka nekā Beka. Priekšpuse sastāv no trim lapām:

  • Mājas lapa ar veidlapu e-pasta nosūtīšanai un atteikšanās pogu.
  • Pieteikšanās lapa.
  • Reģistrācijas lapa.

Galvenā lapa izskatās askētiski:

CI/CD programmā Github Actions projektā Flask+Angular
Saknē ir divi faili Dockerfile и docker-compose.yml, kā arī pazīstamā mape .ci-cd ar nedaudz mazāku skriptu skaitu nekā aizmugurējā repozitorijā (noņemti skripti testu veikšanai).

Projekta uzsākšana Pleskā

Sāksim, iestatot Plesk un izveidojot mūsu vietnes abonementu.

Paplašinājumu instalēšana

Pleskā mums ir nepieciešami četri paplašinājumi:

  • Docker pārvaldīt un vizuāli parādīt konteineru statusu Plesk admin panelī;
  • Git lai konfigurētu izvietošanas soli serverī;
  • Let's Encrypt bezmaksas TLS sertifikātu ģenerēšanai (un automātiskai atjaunošanai);
  • Firewall lai konfigurētu ienākošās trafika filtrēšanu.

Varat tos instalēt, izmantojot Plesk administratora paneli sadaļā Paplašinājumi:

CI/CD programmā Github Actions projektā Flask+Angular
Mēs neapsvērsim detalizētu paplašinājumu konfigurāciju; mūsu demonstrācijas nolūkiem būs piemēroti noklusējuma iestatījumi.

Abonementa un vietnes izveide

Tālāk mums ir jāizveido mūsu vietnes helloworld.ru abonements un jāpievieno tur apakšdomēns dev.helloworld.ru.

  1. Mēs izveidojam domēna helloworld.ru abonementu un norādām sistēmas lietotāja pieteikšanās paroli:

    CI/CD programmā Github Actions projektā Flask+Angular
    Atzīmējiet izvēles rūtiņu lapas apakšā Nodrošiniet domēnu, izmantojot funkciju Let's Encryptja vēlamies vietnei iestatīt HTTPS:

    CI/CD programmā Github Actions projektā Flask+Angular

  2. Pēc tam šajā abonementā izveidojiet apakšdomēnu dev.helloworld.ru (kuram varat arī izsniegt bezmaksas TLS sertifikātu):

    CI/CD programmā Github Actions projektā Flask+Angular

Servera komponentu instalēšana

Mums ir serveris ar OS Debian Stiepšanās 9.12 un uzstādīts vadības panelis Pleskas obsidiāns 18.0.27.

Mums ir jāinstalē un jākonfigurē mūsu projektam:

  • PostgreSQL (mūsu gadījumā būs viens serveris ar divām datu bāzēm dev un prod vidēm).
  • RabbitMQ (tas pats, tas pats gadījums ar dažādiem vhosts vidēm).
  • Divi Redis gadījumi (izstrādātāju un produkciju vidēm).
  • Docker reģistrs (apkopoto Docker attēlu lokālai glabāšanai).
  • Docker reģistra lietotāja saskarne.

PostgreSQL

Plesk jau ir aprīkots ar PostgreSQL DBVS, bet ne jaunāko versiju (rakstīšanas laikā Plesk Obsidian atbalstīts Postgres versijas 8.4–10.8). Mēs vēlamies mūsu lietojumprogrammai jaunāko versiju (12.3 šī rakstīšanas laikā), tāpēc mēs to instalēsim manuāli.

Detalizētas instrukcijas par Postgres instalēšanu Debian internetā to ir daudz (piemērs), tāpēc es tos sīkāk neaprakstīšu, es tikai došu komandas:

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

Ņemot vērā, ka PostgreSQL ir diezgan viduvēji noklusējuma iestatījumi, ir nepieciešams pielāgot konfigurāciju. Tas mums palīdzēs kalkulators: jāievada sava servera parametri un jāaizstāj faila iestatījumi /etc/postgresql/12/main/postgresql.confpiedāvātajiem. Šeit jāatzīmē, ka šādi kalkulatori nav burvju lode, un bāze ir jānoregulē precīzāk, pamatojoties uz jūsu aparatūru, lietojumprogrammu un vaicājumu sarežģītību. Bet ar to pietiek, lai sāktu.

Papildus kalkulatora ieteiktajiem iestatījumiem mēs arī mainām postgresql.confnoklusējuma ports 5432 ir piešķirts citam (mūsu piemērā - 53983).

Pēc konfigurācijas faila maiņas restartējiet postgresql-server ar komandu:

service postgresql restart

Mēs instalējām un konfigurējām PostgreSQL. Tagad izveidosim datu bāzi, lietotājus izstrādātāju un produkciju vidēm un piešķirsim lietotājiem tiesības pārvaldīt datu bāzi:

$ 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

RabbitMQ

Pāriesim pie RabbitMQ, Celery ziņojumu brokera, instalēšanas. Tas ir instalēts vietnē Debian Tas ir pavisam vienkārši:

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

Pēc instalēšanas mums ir jāizveido vhosts, lietotājiem un piešķirt nepieciešamās tiesības:

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

Tagad instalēsim un konfigurēsim mūsu lietojumprogrammas pēdējo komponentu - Redis. Tas tiks izmantots kā aizmugursistēma Selery uzdevumu rezultātu glabāšanai.

Izmantojot paplašinājumu, mēs izveidosim divus Docker konteinerus ar Redis dev un prod vidēm Docker par Plesku.

  1. Dodieties uz Plesk, dodieties uz sadaļu Paplašinājumi, meklējiet Docker paplašinājumu un instalējiet to (mums ir nepieciešama bezmaksas versija):

    CI/CD programmā Github Actions projektā Flask+Angular

  2. Dodieties uz instalēto paplašinājumu, atrodiet attēlu, izmantojot meklēšanu redis bitnami un instalējiet jaunāko versiju:

    CI/CD programmā Github Actions projektā Flask+Angular

  3. Mēs ieejam lejupielādētajā konteinerā un pielāgojam konfigurāciju: norādiet portu, maksimālo piešķirto RAM lielumu, paroli vides mainīgajos un uzstādiet skaļumu:

    CI/CD programmā Github Actions projektā Flask+Angular

  4. Mēs veicam 2.-3. darbību prod konteineram, iestatījumos mainām tikai parametrus: ports, parole, RAM lielums un ceļš uz servera skaļuma mapi:

    CI/CD programmā Github Actions projektā Flask+Angular

Docker reģistrs

Papildus pamata pakalpojumiem būtu jauki serverī instalēt savu Docker attēlu krātuvi. Par laimi, vieta serveros tagad ir diezgan lēta (noteikti lētāk nekā DockerHub abonements), un privātās krātuves instalēšanas process ir ļoti vienkāršs.

Mēs vēlamies, lai mums būtu:

Lai to izdarītu:

  1. Izveidosim divus apakšdomēnus Plesk savā abonementā: docker.helloworld.ru un docker-ui.helloworld.ru un konfigurēsim tiem Let's Encrypt sertifikātus.
  2. Pievienojiet failu docker.helloworld.ru apakšdomēna mapei docker-compose.yml ar šādu saturu:
    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. Zem SSH mēs ģenerēsim .htpasswd failu pamata autorizācijai Docker repozitorijā:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Savācam un pacelsim konteinerus:
    docker-compose up -d
  5. Un mums ir jānovirza Nginx uz mūsu konteineriem. To var izdarīt caur Plesk.

Apakšdomēniem docker.helloworld.ru un docker-ui.helloworld.ru ir jāveic šādas darbības:

Iedaļā Izstrādes rīki dodieties uz mūsu vietni Docker starpniekservera noteikumi:

CI/CD programmā Github Actions projektā Flask+Angular
Un pievienojiet kārtulu mūsu konteinera ienākošās trafika starpniekserveram:

CI/CD programmā Github Actions projektā Flask+Angular

  1. Mēs pārbaudām, vai varam pieteikties savā konteinerā no vietējās mašīnas:
    $ 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. Pārbaudīsim arī apakšdomēna docker-ui.helloworld.ru darbību:

    CI/CD programmā Github Actions projektā Flask+Angular
    Noklikšķinot uz Pārlūkot repozitorijus, pārlūkprogramma parādīs autorizācijas logu, kurā jums būs jāievada repozitorija lietotājvārds un parole. Pēc tam mēs tiksim pārsūtīti uz lapu ar repozitoriju sarakstu (pagaidām tas jums būs tukšs):

    CI/CD programmā Github Actions projektā Flask+Angular

Portu atvēršana Plesk ugunsmūrī

Pēc komponentu instalēšanas un konfigurēšanas mums ir jāatver porti, lai komponenti būtu pieejami no Docker konteineriem un ārējā tīkla.

Apskatīsim, kā to izdarīt, izmantojot iepriekš instalētā Plesk ugunsmūra paplašinājuma piemēru.

  1. Iet uz Rīki un iestatījumi > Iestatījumi > Ugunsmūris:
    CI/CD programmā Github Actions projektā Flask+Angular
  2. Iet uz Modificēt Plesk ugunsmūra noteikumus > Pievienot pielāgotu kārtulu un atveriet tālāk norādītos TCP portus Docker apakštīklam (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD programmā Github Actions projektā Flask+Angular

  3. Mēs arī pievienosim noteikumu, kas ārpasaulei atvērs PostgreSQL portus un RabbitMQ pārvaldības paneli:

    CI/CD programmā Github Actions projektā Flask+Angular

  4. Lietojiet noteikumus, izmantojot pogu Lietot izmaiņas:

    CI/CD programmā Github Actions projektā Flask+Angular

CI/CD iestatīšana programmā Github Actions

Sāksim pie visinteresantākās daļas - nepārtrauktas integrācijas konveijera izveides un mūsu projekta piegādes serverī.

Šis cauruļvads sastāvēs no divām daļām:

  • attēla veidošana un testu palaišana (aizmugursistēmai) - Github pusē;
  • migrācijas palaišana (aizmugursistēmai) un konteineru izvietošana serverī.

Izvietot uz Plesku

Vispirms tiksim galā ar otro punktu (jo pirmais ir atkarīgs no tā).

Mēs konfigurēsim izvietošanas procesu, izmantojot Git paplašinājumu Plesk.

Apsveriet piemēru ar Prod vidi aizmugursistēmas repozitorijai.

  1. Mēs pārejam uz mūsu Helloworld vietnes abonementu un dodamies uz Git apakšsadaļu:

    CI/CD programmā Github Actions projektā Flask+Angular

  2. Laukā "Remote Git repozitorijs" ievietojiet saiti uz mūsu Github repozitoriju un mainiet noklusējuma mapi httpdocs citam (piem. /httpdocs/hw_back):

    CI/CD programmā Github Actions projektā Flask+Angular

  3. Kopējiet SSH publisko atslēgu no iepriekšējās darbības un pievienot to Github iestatījumos.
  4. Noklikšķiniet uz Labi ekrānā 2. darbībā, pēc kura mēs tiksim novirzīti uz repozitorija lapu Plesk. Tagad mums ir jākonfigurē repozitorijs, lai tas tiktu atjaunināts, veicot saistības galvenajā filiālē. Lai to izdarītu, dodieties uz Krātuves iestatījumi un saglabājiet vērtību Webhook URL (tas būs vajadzīgs vēlāk, iestatot Github Actions):

    CI/CD programmā Github Actions projektā Flask+Angular

  5. Ekrāna laukā Darbības no iepriekšējās rindkopas ievadiet skriptu, lai sāktu izvietošanu:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    ja:

    {REPOSITORY_ABSOLUTE_PATH} — ceļš uz prod backend repozitorija mapi serverī;
    {ENV} - vide (dev/prod), mūsu gadījumā prod;
    {DOCKER_REGISTRY_HOST} — mūsu dokera repozitorija saimnieks
    {TG_BOT_TOKEN} — Telegram bota marķieris;
    {TG_CHAT_ID} — tērzēšanas/kanāla ID paziņojumu sūtīšanai.

    Skripta piemērs:

    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. Mēs pievienojam lietotāju no mūsu abonementa grupai Docker (lai viņš varētu pārvaldīt konteinerus):
    sudo usermod -aG docker helloworld_admin

Aizmugursistēmas repozitorija un priekšgala izstrādātāju vide ir iestatīta vienādi.

Izvietošanas cauruļvads uz Github darbībām

Pāriesim pie mūsu CI/CD konveijera pirmās daļas iestatīšanas pakalpojumā Github Actions.

aizmugure

Cauruļvads ir aprakstīts deploy.yml failu.

Bet pirms tā parsēšanas aizpildīsim slepenos mainīgos, kas mums nepieciešami Github. Lai to izdarītu, dodieties uz Iestatījumi -> Noslēpumi:

  • DOCKER_REGISTRY — mūsu Docker repozitorija resursdators (docker.helloworld.ru);
  • DOCKER_LOGIN — pieteikšanās Docker repozitorijā;
  • DOCKER_PASSWORD - parole tai;
  • DEPLOY_HOST — resursdators, kurā ir pieejams Plesk administratora panelis (piemērs: helloworld.ru: 8443 vai 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN — marķieris izvietošanai prod repozitorijā serverī (mēs to saņēmām sadaļā Deployment in Plesk, 4. darbība);
  • DEPLOY_BACK_DEV_TOKEN — marķieris izvietošanai servera izstrādātāja repozitorijā.

Izvietošanas process ir vienkāršs un sastāv no trim galvenajiem posmiem:

  • attēla izveidošana un publicēšana mūsu repozitorijā;
  • testu veikšana konteinerā, pamatojoties uz tikko apkopotu attēlu;
  • izvietošana vēlamajā vidē atkarībā no filiāles (izstrādātājs/masters).

frontend

Deploy.yml fails priekšējai repozitorijai nedaudz atšķiras no Beka. Tam trūkst soļa ar testu izpildi un tiek mainīti izvietošanai paredzēto marķieru nosaukumi. Starp citu, priekšējās krātuves noslēpumi ir jāaizpilda atsevišķi.

Vietnes iestatīšana

Trafika starpniekserveris, izmantojot Nginx

Nu mēs esam nonākuši pie beigām. Atliek tikai konfigurēt ienākošās un izejošās trafika starpniekserveri uz mūsu konteineru, izmantojot Nginx. Mēs jau esam aptvēruši šo procesu Docker reģistra iestatīšanas 5. darbībā. Tas pats ir jāatkārto ar aizmugurējo un priekšējo daļu izstrādes un ražošanas vidēs.

Es sniegšu iestatījumu ekrānuzņēmumus.

aizmugure

CI/CD programmā Github Actions projektā Flask+Angular

frontend

CI/CD programmā Github Actions projektā Flask+Angular
Svarīgs precizējums. Visi vietrāži URL tiks pievienoti priekšgalda konteineram, izņemot tos, kas sākas ar /api/ - tie tiks pievienoti aizmugurējam konteineram (tā aizmugurējā konteinerā visiem apstrādātājiem jāsāk ar /api/).

Rezultāti

Tagad mūsu vietnei vajadzētu būt pieejamai vietnēs helloworld.ru un dev.helloworld.ru (attiecīgi prod un dev vide).

Kopumā mēs uzzinājām, kā sagatavot vienkāršu lietojumprogrammu programmās Flask un Angular un izveidot konveijeru programmā Github Actions, lai to izplatītu serverī, kurā darbojas Plesk.

Es dublēšu saites uz krātuvēm ar kodu: aizmugure, frontend.

Avots: www.habr.com

Iegādājieties uzticamu mitināšanu vietnēm ar DDoS aizsardzību, VPS VDS serveriem 🔥 Iegādājieties uzticamu tīmekļa vietņu mitināšanu ar DDoS aizsardzību, VPS VDS serveriem | ProHoster