Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
Bu yazıda Plesk İdarəetmə Paneli və Github Fəaliyyətlərindən istifadə edərək CI/CD qurmaq təcrübəmi paylaşacağam. Bu gün biz "Helloworld" adı ilə sadə bir layihəni necə yerləşdirməyi öyrənəcəyik. Kərəviz işçiləri və Angular 8 cəbhəsi ilə Flask Python çərçivəsində yazılmışdır.

Repozitoriyalara keçidlər: arxa uç, frontend.

Məqalənin birinci hissəsində layihəmizə və onun hissələrinə baxacağıq. İkincidə, Plesk-i necə quracağımızı və lazımi genişləndirmələri və komponentləri (DB, RabbitMQ, Redis, Docker və s.) quraşdırmağı anlayacağıq.

Üçüncü hissədə, nəhayət, layihəmizi inkişaf və məhsul mühitində bir serverə yerləşdirmək üçün boru kəmərini necə quracağımızı anlayacağıq. Və sonra saytı serverdə işə salacağıq.

Bəli, özümü təqdim etməyi unutdum. Mənim adım Oleq Borzov, mən Domclick-də ipoteka menecerləri üçün CRM komandasında tam inkişaf etdiriciyəm.

Layihə Baxışları

Əvvəlcə iki layihə deposuna baxaq - arxa və ön - və kodu nəzərdən keçirək.

Arxa tərəf: Flask+Kərəviz

Arxa hissə üçün Python tərtibatçıları arasında olduqca populyar olan bir dəstə götürdüm: Flask çərçivəsi (API üçün) və Kərəviz (tapşırıq növbəsi üçün). SQLAchemy ORM kimi istifadə olunur. Alembic miqrasiya üçün istifadə olunur. Tutacaqlarda JSON doğrulaması üçün - Marshmallow.

В depolar strukturun ətraflı təsviri və layihənin icrası üçün təlimatlar olan Readme.md faylı var.

Web Part API olduqca sadə, 6 qələmdən ibarətdir:

  • /ping - mövcudluğu yoxlamaq;
  • qeydiyyat, avtorizasiya, avtorizasiyanın ləğvi və səlahiyyətli istifadəçinin əldə edilməsi ilə məşğul olur;
  • Kərəviz növbəsinə tapşırıq qoyan e-poçt dəstəyi.

Kərəviz hissəsi daha asan, yalnız bir problem var send_mail_task.

Qovluqda /conf iki alt qovluq var:

  • docker iki Docker faylı ilə (base.dockerfile nadir hallarda dəyişən əsas imic yaratmaq və Dockerfile əsas məclislər üçün);
  • .env_files - müxtəlif mühitlər üçün mühit dəyişənləri olan fayllarla.

Layihənin kökündə dörd docker-compose faylı var:

  • docker-compose.local.db.yml inkişaf üçün yerli məlumat bazası yaratmaq;
  • docker-compose.local.workers.yml işçinin yerli artırılması, verilənlər bazası, Redis və RabbitMQ üçün;
  • docker-compose.test.yml yerləşdirmə zamanı testlər aparmaq;
  • docker-compose.yml yerləşdirilməsi üçün.

Və bizi maraqlandıran son qovluq - .ci-cd. O, yerləşdirmə üçün qabıq skriptlərini ehtiva edir:

  • deploy.sh — miqrasiya və yerləşdirmənin başlanması. Github Actions-da testlər qurduqdan və işə saldıqdan sonra serverdə işləyir;
  • rollback.sh - konteynerlərin montajın əvvəlki versiyasına geri qaytarılması;
  • curl_tg.sh - Telegram-a yerləşdirmə bildirişlərinin göndərilməsi.

Angular üzərində cəbhə

Ön tərəfi olan anbar Beck-dən daha sadədir. Ön tərəf üç səhifədən ibarətdir:

  • E-poçt göndərmə forması və çıxış düyməsi olan əsas səhifə.
  • Giriş səhifəsi.
  • Qeydiyyat səhifəsi.

Əsas səhifə ascetic görünür:

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
Kökdə iki fayl var Dockerfile и docker-compose.yml, eləcə də tanış qovluq .ci-cd arxa repozitoriyada olduğundan bir qədər az skriptlə (testlər üçün silinmiş skriptlər).

Plesk-də layihəyə başlamaq

Plesk qurmaq və saytımıza abunə yaratmaqla başlayaq.

Uzatmaların quraşdırılması

Plesk-də bizə dörd uzantı lazımdır:

  • Docker Plesk admin panelində konteynerlərin vəziyyətini idarə etmək və vizual olaraq göstərmək;
  • Git serverdə yerləşdirmə addımını konfiqurasiya etmək;
  • Let's Encrypt pulsuz TLS sertifikatlarını yaratmaq (və avtomatik yeniləmək);
  • Firewall daxil olan trafikin süzülməsini konfiqurasiya etmək.

Onları Genişləndirmələr bölməsində Plesk admin paneli vasitəsilə quraşdıra bilərsiniz:

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
Biz genişləndirmələr üçün ətraflı parametrləri nəzərdən keçirməyəcəyik, standart parametrlər demo məqsədlərimiz üçün edəcək.

Abunə və sayt yaradın

Sonra, helloworld.ru veb saytımıza abunə yaratmalı və ora dev.helloworld.ru subdomenini əlavə etməliyik.

  1. helloworld.ru domeni üçün abunə yaradın və sistem istifadəçisi üçün giriş-parol göstərin:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
    Səhifənin altındakı qutuyu yoxlayın Let's Encrypt ilə domeni qoruyunsayt üçün HTTPS qurmaq istəyiriksə:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  2. Sonra, bu abunəlikdə dev.helloworld.ru alt domenini yaradın (bunun üçün pulsuz TLS sertifikatı da verə bilərsiniz):

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Server komponentlərinin quraşdırılması

Bizim serverimiz var OS Debian Stretch 9.12 və quraşdırılmış idarəetmə paneli Plesk Obsidian 18.0.27.

Layihəmiz üçün quraşdırmalı və konfiqurasiya etməliyik:

  • PostgreSQL (bizim halda, inkişaf və məhsul mühitləri üçün iki verilənlər bazası olan bir server olacaq).
  • RabbitMQ (mühitlər üçün fərqli vhostlarla eyni, eyni nümunə).
  • İki Redis nümunəsi (developer və məhsul mühitləri üçün).
  • Docker Registry (quraşdırılmış Docker şəkillərinin yerli saxlanması üçün).
  • Docker reyestri üçün UI.

PostgreSQL

Plesk artıq PostgreSQL DBMS ilə gəlir, lakin ən son versiya deyil (Plesk Obsidian yazarkən dəstəklənir Postgres versiyaları 8.4–10.8). Biz proqramımızın ən son versiyasını istəyirik (bu yazı zamanı 12.3), ona görə də onu əl ilə quraşdıracağıq.

Şəbəkədə Debian-da Postgres quraşdırmaq üçün çoxlu ətraflı təlimatlar var (misal), buna görə də onları ətraflı təsvir etməyəcəyəm, sadəcə əmrləri verəcəyəm:

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

PostgreSQL-in kifayət qədər orta standart parametrlərə malik olduğunu nəzərə alsaq, konfiqurasiyanı düzəltmək lazımdır. Bu bizə kömək edəcək kalkulyator: serverinizin parametrlərində idarə etməli və fayldakı parametrləri dəyişdirməlisiniz /etc/postgresql/12/main/postgresql.conftəklif olunanlara. Burada qeyd etmək lazımdır ki, bu cür kalkulyatorlar sehrli bir güllə deyil və baza sizin aparatınıza, tətbiqinizə və sorğuların mürəkkəbliyinə əsasən daha dəqiq şəkildə tənzimlənməlidir. Ancaq bu işə başlamaq üçün kifayətdir.

Kalkulyatorun təklif etdiyi parametrlərə əlavə olaraq biz də dəyişirik postgresql.confstandart port 5432 digərinə (bizim nümunəmizdə - 53983).

Konfiqurasiya faylını dəyişdirdikdən sonra postgresql-server-i əmrlə yenidən başladın:

service postgresql restart

PostgreSQL-i quraşdırdıq və konfiqurasiya etdik. İndi verilənlər bazası, inkişaf və məhsul mühitləri üçün istifadəçilər yaradaq və istifadəçilərə verilənlər bazasını idarə etmək hüququ verək:

$ 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

Gəlin Kərəviz üçün mesaj brokeri olan RabbitMQ-nun quraşdırılmasına davam edək. Onu Debian-da quraşdırmaq olduqca sadədir:

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

Quraşdırıldıqdan sonra biz yaratmalıyıq vhosts, istifadəçilər və lazımi hüquqlar verin:

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

İndi tətbiqimiz üçün sonuncu komponenti - Redis-i quraşdıraq və konfiqurasiya edək. Kərəviz tapşırıqlarının nəticələrini saxlamaq üçün arxa plan kimi istifadə olunacaq.

Genişlənmədən istifadə edərək inkişaf və məhsul mühitləri üçün Redis ilə iki Docker konteynerini qaldıracağıq Docker Plesk üçün.

  1. Plesk-ə gedirik, Genişlənmələr bölməsinə keçin, Docker genişləndirilməsini axtarın və quraşdırın (pulsuz versiyaya ehtiyacımız var):

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  2. Quraşdırılmış uzantıya gedin, axtarış vasitəsilə şəkli tapın redis bitnami və ən son versiyanı quraşdırın:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  3. Yüklənmiş konteynerə daxil oluruq və konfiqurasiyanı tənzimləyirik: portu, ayrılmış maksimum RAM ölçüsünü, ətraf mühit dəyişənlərində parolu təyin edin və həcmi quraşdırın:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  4. Məhsul konteyneri üçün 2-3 addımları yerinə yetiririk, parametrlərdə yalnız parametrləri dəyişdiririk: port, parol, RAM ölçüsü və serverdəki həcm qovluğuna gedən yol:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Docker Registry

Əsas xidmətlərə əlavə olaraq, serverə öz Docker təsvir anbarınızı yerləşdirmək yaxşı olardı. Xoşbəxtlikdən, server sahəsi indi olduqca ucuzdur (əlbəttə ki, DockerHub abunəliyindən daha ucuzdur) və şəxsi deponun qurulması prosesi çox sadədir.

Bizə sahib olmaq istəyirik:

Bunu etmək üçün:

  1. Abunəliyimizdə Plesk-də iki subdomen yaradaq: docker.helloworld.ru və docker-ui.helloworld.ru və onlar üçün Let's Encrypt sertifikatlarını konfiqurasiya edək.
  2. Faylı docker.helloworld.ru alt domen qovluğuna əlavə edin docker-compose.yml bu kimi məzmunla:
    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. SSH altında biz Docker repozitoriyasında Əsas avtorizasiya üçün .htpasswd faylını yaradacağıq:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Konteynerləri toplayın və qaldırın:
    docker-compose up -d
  5. Və biz Nginx-i konteynerlərimizə yönləndirməliyik. Bu, Plesk vasitəsilə edilə bilər.

docker.helloworld.ru və docker-ui.helloworld.ru alt domenləri üçün aşağıdakı addımlar yerinə yetirilməlidir:

Bölmədə Dev alətləri saytımıza keçin Docker Proxy Qaydaları:

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
Konteynerimizə gələn trafiki proxy etmək üçün bir qayda əlavə edin:

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  1. Yerli maşından konteynerimizə daxil ola biləcəyimizi yoxlayırıq:
    $ 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. Həmçinin docker-ui.helloworld.ru subdomeninin işini yoxlayaq:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
    Repozitoriyaları nəzərdən keçirin üzərinə kliklədiyiniz zaman brauzer avtorizasiya pəncərəsini göstərəcək və orada repozitoriya üçün istifadəçi adı və şifrəni daxil etməli olacaqsınız. Bundan sonra, biz depoların siyahısı olan bir səhifəyə köçürüləcəyik (hələlik sizin üçün boş olacaq):

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Plesk Firewall-da portların açılması

Komponentləri quraşdırdıqdan və konfiqurasiya etdikdən sonra, komponentlərə Docker konteynerlərindən və xarici şəbəkədən daxil olmaq üçün portları açmalıyıq.

Daha əvvəl quraşdırdığımız Plesk üçün Firewall uzantısından istifadə edərək bunu necə edəcəyimizi görək.

  1. Biz keçərik Alətlər və Parametrlər > Parametrlər > Firewall:
    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
  2. Biz keçərik Plesk Firewall Qaydalarını dəyişdirin > Xüsusi Qayda əlavə edin və Docker alt şəbəkəsi üçün aşağıdakı TCP portlarını açın (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  3. PostgreSQL portlarını və RabbitMQ idarəetmə panellərini xarici dünyaya açacaq bir qayda da əlavə edəcəyik:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  4. Dəyişiklikləri Tətbiq et düyməsini istifadə edərək qaydaları tətbiq edin:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Github Actions-da CI/CD-nin qurulması

Gəlin ən maraqlı hissəyə - davamlı inteqrasiya boru kəmərinin qurulmasına və layihəmizi serverə çatdırmağa keçək.

Bu boru kəməri iki hissədən ibarət olacaq:

  • təsvirin qurulması və sınaqların aparılması (backend üçün) - Github tərəfində;
  • miqrasiyaların icrası (backend üçün) və konteynerlərin yerləşdirilməsi - serverdə.

Plesk-ə yerləşdirin

Əvvəlcə ikinci məqamla məşğul olaq (çünki birincisi ondan asılıdır).

Plesk üçün Git uzantısından istifadə edərək yerləşdirmə prosesini konfiqurasiya edəcəyik.

Backend repozitoriyası üçün Prod mühiti ilə bir nümunə nəzərdən keçirin.

  1. Helloworld veb saytımızın abunəliyinə gedirik və Git alt bölməsinə gedirik:

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  2. "Remote Git repository" sahəsinə Github repozitorumuza keçid daxil edin və standart qovluğu dəyişdirin httpdocs başqasına (məs. /httpdocs/hw_back):

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  3. SSH İctimai açarını əvvəlki addımdan kopyalayın və əlavə edin Github parametrlərindədir.
  4. 2-ci addımda ekranda OK düyməsini klikləyin, bundan sonra biz Plesk-də depo səhifəsinə yönləndiriləcəyik. İndi biz repozitoriyanı master filialına verilən tapşırıqlarda yenilənəcək şəkildə konfiqurasiya etməliyik. Bunu etmək üçün gedin Repozitor Parametrləri və dəyəri qeyd edin Webhook URL (Github Fəaliyyətlərini qurarkən daha sonra ehtiyacımız olacaq):

    Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

  5. Əvvəlki paraqrafdakı ekrandakı Fəaliyyətlər sahəsinə yerləşdirməni başlamaq üçün skripti daxil edin:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    Ü:

    {REPOSITORY_ABSOLUTE_PATH} - serverdəki backend repozitoriyasının prod qovluğuna gedən yol;
    {ENV} - mühit (dev / prod), bizim vəziyyətimizdə prod;
    {DOCKER_REGISTRY_HOST} - docker repozitorumuzun sahibi
    {TG_BOT_TOKEN} — Telegram bot nişanı;
    {TG_CHAT_ID} — Bildirişlərin göndərilməsi üçün söhbətin/kanalın ID-si.

    Skript nümunəsi:

    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. Docker qrupuna abunəliyimizdən istifadəçi əlavə edin (onlar konteynerləri idarə edə bilsinlər):
    sudo usermod -aG docker helloworld_admin

Backend repository və frontend üçün inkişaf mühiti eyni şəkildə qurulur.

Github Actions-da yerləşdirmə boru kəməri

Gəlin Github Actions-da CI/CD boru kəmərimizin ilk hissəsini qurmağa davam edək.

Arxa

Boru kəmərinin təsviri deploy.yml faylı.

Ancaq onu təhlil etməzdən əvvəl Github-da bizə lazım olan Gizli dəyişənləri dolduraq. Bunu etmək üçün gedin Parametrlər -> Sirlər:

  • DOCKER_REGISTRY - Docker repozitorumuzun sahibi (docker.helloworld.ru);
  • DOCKER_LOGIN - Docker repozitoriyasına daxil olun;
  • DOCKER_PASSWORD - ona parol;
  • DEPLOY_HOST — Plesk admin panelinin mövcud olduğu host (məsələn: helloworld.com: 8443 və ya 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - serverdə prod-repozitoriyaya yerləşdirmə üçün işarə (biz onu Plesk-də yerləşdirmə səh. 4-də əldə etdik);
  • DEPLOY_BACK_DEV_TOKEN - serverdəki dev repozitoriyaya yerləşdirmək üçün işarə.

Yerləşdirmə prosesi sadədir və üç əsas addımdan ibarətdir:

  • təsvirin depomuzda qurulması və dərc edilməsi;
  • təzə qurulmuş təsvirə əsaslanan konteynerdə testlərin aparılması;
  • filialdan asılı olaraq istədiyiniz mühitə yerləşdirmə (dev/master).

Ön

Ön repozitoriya üçün deploy.yml faylı Bekdən bir az fərqlənir. Testləri yerinə yetirmək üçün bir addım yoxdur və yerləşdirmə üçün nişanların adlarını dəyişir. Ön anbar üçün sirlər, yeri gəlmişkən, ayrıca doldurulmalıdır.

Saytın qurulması

Nginx vasitəsilə trafikin proksiləşdirilməsi

Yaxşı, sona gəldik. Yalnız Nginx vasitəsilə konteynerimizə gələn və gedən trafikin proksisini konfiqurasiya etmək qalır. Biz artıq Docker Registry quraşdırmasının 5-ci addımında bu prosesi əhatə etmişik. Eyni şey inkişaf və istehsal mühitlərində arxa və ön hissələr üçün təkrarlanmalıdır.

Parametrlərin ekran görüntülərini təqdim edəcəm.

Arxa

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD

Ön

Flask+Angular layihəsi üçün Github Fəaliyyətlərində CI/CD
Ətraflı məlumat əldə edin. ilə başlayanlar istisna olmaqla, bütün URL-lər frontend konteynerinə proksilənəcək /api/ - onlar arxa konteynerə proksilənəcəklər (beləliklə arxa konteynerdə, bütün işləyicilər ilə başlamalıdır /api/).

Nəticələri

İndi saytımız helloworld.ru və dev.helloworld.ru ünvanlarında (müvafiq olaraq prod- və dev-environments) mövcud olmalıdır.

Ümumilikdə biz Flask və Angular-da sadə bir proqram hazırlamağı və onu Plesk ilə işləyən serverə yaymaq üçün Github Actions-da boru xətti qurmağı öyrəndik.

Mən kodla depolara keçidləri təkrarlayacağam: arxa uç, frontend.

Mənbə: www.habr.com

Добавить комментарий