CI/CD Github Actions-en Flask+Angular proiektu baterako

CI/CD Github Actions-en Flask+Angular proiektu baterako
Artikulu honetan, Plesk Kontrol Panela eta Github Ekintzak erabiliz CI/CD konfiguratzeko nire esperientzia partekatuko dut. Gaur, "Helloworld" izen konplexua duen proiektu sinple bat nola zabaldu ikasiko dugu. Flask Python esparruan idatzita dago, Celery langileekin eta Angular 8 frontend batekin.

Biltegietarako estekak: backend, frontend.

Artikuluaren lehen zatian, gure proiektua eta bere atalak aztertuko ditugu. Bigarrenean, Plesk nola konfiguratu eta beharrezko luzapenak eta osagaiak (DB, RabbitMQ, Redis, Docker, etab.) instalatu ikusiko dugu.

Hirugarren zatian, azkenik, gure proiektua garatzaile eta produkzio ingurune batean zerbitzari batean hedatzeko kanalizazio bat nola konfiguratu ikusiko dugu. Eta gero gunea zerbitzarian abiaraziko dugu.

Eta bai, neure burua aurkeztea ahaztu zait. Nire izena Oleg Borzov da, Domclick-eko hipoteka-kudeatzaileentzako CRM taldeko fullstack garatzailea naiz.

Proiektuaren ikuspegi orokorra

Lehenik eta behin, ikus ditzagun bi proiektuen biltegiak - backend eta front - eta joan kodea.

Atzealdea: Flask+Apioa

Atzeko aldean, Python garatzaileen artean nahiko ezaguna den sorta bat hartu nuen: Flask frameworka (APIrako) eta Celery (zereginen ilarrako). SQLAchemy ORM gisa erabiltzen da. Alenbikoa migrazioetarako erabiltzen da. Heldulekuetan JSON baliozkotzeko - Marshmallow.

Π’ biltegiak Readme.md fitxategi bat dago egituraren deskribapen zehatza eta proiektua exekutatzeko argibideak dituena.

Web Part APIa nahiko konplexua, 6 boligrafoz osatuta dago:

  • /ping - erabilgarritasuna egiaztatzeko;
  • erregistratzeko, baimentzeko, desbaimentzeko eta baimendutako erabiltzailea lortzeko heldulekuak;
  • Apioaren ilaran zeregin bat jartzen duen posta elektronikoko heldulekua.

Apio zatia are errazago, arazo bakarra dago send_mail_task.

Karpetan /konf bi azpikarpeta daude:

  • docker bi Dockerfilerekin (base.dockerfile gutxitan aldatzen den oinarri-irudia eraikitzeko eta Dockerfile batzar nagusietarako);
  • .env_files - Ingurune desberdinetarako ingurune-aldagaiak dituzten fitxategiekin.

Docker-compose lau fitxategi daude proiektuaren erroan:

  • docker-compose.local.db.yml garapenerako tokiko datu-base bat sortzea;
  • docker-compose.local.workers.yml langilea, datu-basea, Redis eta RabbitMQ tokiko bilketarako;
  • docker-compose.test.yml hedapenean probak egiteko;
  • docker-compose.yml zabaltzeko.

Eta interesatzen zaigun azken karpeta - .ci-cd. Inplementatzeko shell script-ak ditu:

  • deploy.sh β€” Migrazioa eta hedapena abian jartzea. Github Actions-en probak eraiki eta exekutatu ondoren zerbitzarian exekutatzen da;
  • rollback.sh - edukiontziak muntaketaren aurreko bertsiora itzultzea;
  • curl_tg.sh - Telegram-era inplementazioaren jakinarazpenak bidaltzea.

Frontend Angular-en

Aurrealdearekin biltegia Beckena baino askoz sinpleagoa. Aurrealdea hiru orrialdez osatuta dago:

  • Orri nagusia mezu elektronikoa bidaltzeko formularioa eta irteteko botoia dituena.
  • Saioa hasteko orria.
  • Izena emateko orria.

Orrialde nagusiak aszetikoa dirudi:

CI/CD Github Actions-en Flask+Angular proiektu baterako
Erroan bi fitxategi daude Dockerfile ΠΈ docker-compose.yml, baita ezaguna den karpeta ere .ci-cd atzeko biltegian baino script apur bat gutxiagorekin (probak exekutatzeko script-ak kenduta).

Plesk-en proiektu bat hastea

Has gaitezen Plesk konfiguratzen eta gure gunerako harpidetza bat sortzen.

Luzapenak instalatzea

Plesk-en, lau luzapen behar ditugu:

  • Docker edukiontzien egoera kudeatzeko eta bisualki bistaratzeko Plesk-en administrazio-panelean;
  • Git zerbitzarian hedapen urratsa konfiguratzeko;
  • Let's Encrypt doako TLS ziurtagiriak sortzeko (eta automatikoki berritzeko);
  • Firewall sarrerako trafikoaren iragazketa konfiguratzeko.

Plesk-en administrazio panelaren bidez instala ditzakezu Luzapenak atalean:

CI/CD Github Actions-en Flask+Angular proiektu baterako
Ez ditugu luzapenen ezarpen zehatzak kontuan hartuko, ezarpen lehenetsiek gure demorako balioko dute.

Sortu harpidetza eta gune bat

Ondoren, gure helloworld.ru webgunerako harpidetza bat sortu eta dev.helloworld.ru azpidomeinua gehitu behar dugu bertan.

  1. Sortu helloworld.ru domeinurako harpidetza eta zehaztu sistema-erabiltzaileentzako saio-hasierako pasahitza:

    CI/CD Github Actions-en Flask+Angular proiektu baterako
    Markatu orriaren beheko laukia Babestu domeinua Let's Encrypt-ekingunerako HTTPS konfiguratu nahi badugu:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  2. Ondoren, harpidetza honetan, sortu azpidomeinu bat dev.helloworld.ru (horretarako doako TLS ziurtagiria ere eman dezakezu):

    CI/CD Github Actions-en Flask+Angular proiektu baterako

Zerbitzariaren osagaiak instalatzea

Zerbitzari bat dugu OS Debian Stretch 9.12 eta kontrol panela instalatu Plesk Obsidian 18.0.27.

Gure proiekturako instalatu eta konfiguratu behar dugu:

  • PostgreSQL (gure kasuan, dev eta prod inguruneetarako bi datu-base dituen zerbitzari bat egongo da).
  • RabbitMQ (instantzia bera, inguruneetarako vhost ezberdinekin).
  • Bi Redis instantzia (dev eta prod inguruneetarako).
  • Docker Erregistroa (eraikitako Docker irudien tokiko biltegiratzeko).
  • Docker erregistrorako UI.

PostgreSQL

Plesk PostgreSQL DBMS-rekin dator dagoeneko, baina ez azken bertsioa (Plesk Obsidian idazteko unean). onartzen Postgres bertsioak 8.4-10.8). Gure aplikaziorako azken bertsioa nahi dugu (12.3 hau idazteko unean), beraz, eskuz instalatuko dugu.

Sarean Postgres Debian-en instalatzeko argibide zehatz asko daude (Adibidez), beraz, ez ditut zehatz-mehatz deskribatuko, aginduak emango ditut:

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-k ezarpen lehenetsi samarrak dituela kontuan hartuta, beharrezkoa da konfigurazioa zuzendu. Horrek lagunduko digu kalkulagailu: zure zerbitzariaren parametroak gidatu eta fitxategiko ezarpenak ordeztu behar dituzu /etc/postgresql/12/main/postgresql.confeskainitakoei. Kontuan izan behar da hemen horrelako kalkulagailuak ez direla bala magiko bat, eta oinarria zehatzago sintonizatu beharko litzateke, zure hardware, aplikazio eta kontsultaren konplexutasunaren arabera. Baina hau nahikoa da hasteko.

Kalkulagailuak proposatzen dituen ezarpenez gain, ere aldatzen dugu postgresql.conf5432 ataka lehenetsia beste batera (gure adibidean - 53983).

Konfigurazio fitxategia aldatu ondoren, berrabiarazi postgresql-server komandoarekin:

service postgresql restart

PostgreSQL instalatu eta konfiguratu dugu. Orain sor ditzagun datu-base bat, garapen- eta produkzio-inguruneetarako erabiltzaileak, eta eman diezaiogun erabiltzaileei datu-basea kudeatzeko eskubideak:

$ 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

Goazen RabbitMQ instalatzera, Apioaren mezu-artekaria. Debian instalatzea nahiko erraza da:

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

Instalatu ondoren, sortu behar dugu vhosts, erabiltzaileak eta beharrezko eskubideak eman:

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 ".*" ".*" ".*"

Birbanaketa

Orain instalatu eta konfigura dezagun gure aplikaziorako azken osagaia - Redis. Apioaren zereginen emaitzak gordetzeko backend gisa erabiliko da.

Redis-ekin bi Docker edukiontzi igoko ditugu garatzaile eta produkzio inguruneetarako luzapena erabiliz Docker Plesk-entzat.

  1. Plesk-era joan, Extensions atalera joan, Docker luzapena bilatu eta instalatu (doako bertsioa behar dugu):

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  2. Joan instalatutako luzapenera, bilatu irudia bilaketaren bidez redis bitnami eta instalatu azken bertsioa:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  3. Deskargatutako edukiontzian sartu eta konfigurazioa doitzen dugu: zehaztu ataka, gehienez esleitutako RAM tamaina, pasahitza ingurune-aldagaietan eta bolumena muntatu:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  4. Prod edukiontzirako 2-3 urratsak egiten ditugu, ezarpenetan parametroak bakarrik aldatzen ditugu: ataka, pasahitza, RAM tamaina eta zerbitzariko bolumen karpetarako bidea:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

Docker Erregistroa

Oinarrizko zerbitzuez gain, ondo legoke zure Docker irudi-biltegia zerbitzarian jartzea. Zorionez, zerbitzariaren espazioa nahiko merkea da orain (dockerHub harpidetza baino merkeagoa, zalantzarik gabe), eta biltegi pribatu bat konfiguratzeko prozesua oso erraza da.

Izan nahi dugu:

Hori egiteko:

  1. Sor ditzagun bi azpidomeinu Plesk-en gure harpidetzan: docker.helloworld.ru eta docker-ui.helloworld.ru, eta konfigura ditzagun Let's Encrypt ziurtagiriak haientzat.
  2. Gehitu fitxategia docker.helloworld.ru azpidomeinu karpetara docker-compose.yml honelako edukiarekin:
    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-n, .htpasswd fitxategia sortuko dugu Oinarrizko baimenerako Docker biltegian:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Ontziak jaso eta jaso:
    docker-compose up -d
  5. Eta Nginx gure edukiontzietara birbideratu behar dugu. Hau Plesk-en bidez egin daiteke.

Docker.helloworld.ru eta docker-ui.helloworld.ru azpidomeinuetarako urrats hauek egin behar dira:

Atalean Dev tresnak gure webgunera joan Docker Proxy-arauak:

CI/CD Github Actions-en Flask+Angular proiektu baterako
Eta gehitu arau bat gure edukiontzira sarrerako trafikoa proxy egiteko:

CI/CD Github Actions-en Flask+Angular proiektu baterako

  1. Tokiko makinatik gure edukiontzian saioa hasi dezakegula egiaztatzen dugu:
    $ 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. Ikus dezagun docker-ui.helloworld.ru azpidomeinuaren funtzionamendua ere:

    CI/CD Github Actions-en Flask+Angular proiektu baterako
    Arakatu biltegiak sakatzen duzunean, arakatzaileak baimen-leiho bat bistaratuko du non biltegiaren erabiltzaile-izena eta pasahitza sartu beharko dituzun. Horren ostean, biltegien zerrenda duen orri batera eramango gaituzte (oraingoz hutsik egongo da zuretzat):

    CI/CD Github Actions-en Flask+Angular proiektu baterako

Portuak irekitzea Plesk Firewall-en

Osagaiak instalatu eta konfiguratu ondoren, portuak ireki behar ditugu, osagaiak Docker edukiontzietatik eta kanpoko saretik eskuragarri egon daitezen.

Ikus dezagun nola egin lehenago instalatu dugun Plesk-erako Firewall luzapena erabiliz.

  1. Joan Tresnak eta ezarpenak > Ezarpenak > Suebakia:
    CI/CD Github Actions-en Flask+Angular proiektu baterako
  2. Joan Aldatu Plesk Firewall arauak > Gehitu arau pertsonalizatua eta ireki TCP ataka hauek Docker azpisarerako (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Erredakzioa: 32785, 32786

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  3. PostgreSQL atakak eta RabbitMQ kudeaketa panelak kanpoko mundura irekiko dituen arau bat ere gehituko dugu:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  4. Aplikatu arauak Aplikatu aldaketak botoia erabiliz:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

CI/CD konfiguratzea Github Actions-en

Goazen parterik interesgarrienera: etengabeko integrazio kanal bat konfiguratzea eta gure proiektua zerbitzariari entregatzea.

Hodi honek bi zati izango ditu:

  • irudi bat eraikitzea eta probak egitea (backenderako) - Github aldean;
  • migrazioak exekutatzen (backend-erako) eta edukiontziak zabaltzen - zerbitzarian.

Inplementatu Plesk-en

Jar dezagun lehenik bigarren puntua (lehenengoa horren araberakoa baita).

Inplementazio-prozesua Plesk-erako Git luzapena erabiliz konfiguratuko dugu.

Demagun adibide bat Backend biltegi baterako Prod ingurune batekin.

  1. Gure Helloworld webgunearen harpidetzara joaten gara eta Git azpiatalera joango gara:

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  2. Sartu gure Github biltegirako esteka "Urruneko Git biltegira" eremuan eta aldatu karpeta lehenetsia httpdocs beste bati (adib. /httpdocs/hw_back):

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  3. Kopiatu SSH gako publikoa aurreko urratseko eta gehituz Github ezarpenetan dago.
  4. Egin klik Ados pantailan 2. urratsean, eta ondoren Plesk-eko biltegiaren orrira birbideratuko gaituzte. Orain biltegia konfiguratu behar dugu adar nagusirako konpromezuetan eguneratzeko. Horretarako, joan hona Biltegiaren ezarpenak eta gorde balioa Webhook URL (gero beharko dugu Github Actions konfiguratzerakoan):

    CI/CD Github Actions-en Flask+Angular proiektu baterako

  5. Aurreko paragrafoko pantailako Ekintzak eremuan, sartu inplementazioa abiarazteko scripta:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    non:

    {REPOSITORY_ABSOLUTE_PATH} - zerbitzariko backend biltegiko prod karpetarako bidea;
    {ENV} - ingurunea (dev / prod), gure kasuan prod;
    {DOCKER_REGISTRY_HOST} - gure docker biltegiaren ostalaria
    {TG_BOT_TOKEN} - Telegram bot tokena;
    {TG_CHAT_ID} β€” Jakinarazpenak bidaltzeko txat/kanalaren IDa.

    Gidoiaren adibidea:

    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. Gehitu gure harpidetzatik erabiltzaile bat Docker taldean (edukiontziak kudea ditzaten):
    sudo usermod -aG docker helloworld_admin

Backend biltegirako garapen ingurunea eta frontend-a modu berean konfiguratuta daude.

Inplementazio kanalizazioa Github Actions-en

Goazen gure CI/CD kanalizazioaren lehen zatia Github Actions-en konfiguratzera.

backend

Hodibidea atalean deskribatzen da deploy.yml fitxategia.

Baina analizatu aurretik, bete ditzagun Github-en behar ditugun aldagai sekretuak. Horretarako, joan hona Ezarpenak -> Sekretuak:

  • DOCKER_REGISTRY - gure Docker biltegiaren ostalaria (docker.helloworld.ru);
  • DOCKER_LOGIN - Hasi saioa Docker biltegian;
  • DOCKER_PASSWORD - pasahitza;
  • DEPLOY_HOST β€” Plesk administrazio panela erabilgarri dagoen ostalaria (adibidez: kaixoworld.ru: 8443 edo 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - zerbitzariko prod-biltegian zabaltzeko token bat (Plesk-en Deployment-en lortu dugu 4. or.);
  • DEPLOY_BACK_DEV_TOKEN - zerbitzariko garatzaileen biltegian hedatzeko tokena.

Inplementazio-prozesua erraza da eta hiru urrats nagusi ditu:

  • irudia gure biltegian eraiki eta argitaratzea;
  • Egin berri den irudi batean oinarritutako edukiontzi batean probak egitea;
  • inplementazioa nahi den ingurunera adarraren arabera (dev/master).

Frontendaren

Aurrealdeko biltegirako deploy.yml fitxategia Beck-en apur bat desberdina. Probak exekutatzeko urrats bat falta zaio eta hedapenerako token izenak aldatzen ditu. Aurrerako biltegirako sekretuak, bide batez, bereizita bete behar dira.

Gunearen konfigurazioa

Proxy trafikoa Nginx bidez

Beno, amaierara iritsi gara. Nginx bidez gure edukiontzira sarrerako eta irteerako trafikoaren proxy-a konfiguratzea besterik ez dago. Dagoeneko prozesu hau landu dugu Docker Erregistroaren konfigurazioaren 5. urratsean. Gauza bera errepikatu behar da atzeko eta aurrealdeko atalekin garapen eta produkzio inguruneetan.

Ezarpenen pantaila-argazkiak emango ditut.

backend

CI/CD Github Actions-en Flask+Angular proiektu baterako

Frontendaren

CI/CD Github Actions-en Flask+Angular proiektu baterako
Argibide garrantzitsua. URL guztiak frontend edukiontzira bidaliko dira, hasierakoak izan ezik /api/ - atzeko edukiontzira proxy egongo dira (beraz atzeko edukiontzian, kudeatzaile guztiek hasi behar dute /api/).

Emaitzak

Orain gure webguneak helloworld.ru eta dev.helloworld.ru webguneetan egon beharko luke eskuragarri (prod- eta dev-environments, hurrenez hurren).

Guztira, Flask eta Angular-en aplikazio sinple bat prestatzen eta Github Actions-en kanalizazio bat konfiguratzen ikasi genuen Plesk exekutatzen duen zerbitzari batera zabaltzeko.

Biltegietarako estekak bikoiztuko ditut kodearekin: backend, frontend.

Iturria: www.habr.com

Gehitu iruzkin berria