CI/CD í Github Actions fyrir Flask+Angular verkefni

CI/CD í Github Actions fyrir Flask+Angular verkefni
Í þessari grein mun ég deila reynslu minni af því að setja upp CI/CD með Plesk Control Panel og Github Actions. Í dag munum við læra hvernig á að dreifa einföldu verkefni með hinu óbrotna nafni "Helloworld". Það er skrifað í Flask Python ramma, með Sellerí verkamönnum og Angular 8 framenda.

Tenglar á geymslur: bakenda, að framanverðu.

Í fyrri hluta greinarinnar munum við skoða verkefnið okkar og hluta þess. Í seinni munum við finna út hvernig á að setja upp Plesk og setja upp nauðsynlegar viðbætur og íhluti (DB, RabbitMQ, Redis, Docker, osfrv.).

Í þriðja hluta munum við loksins finna út hvernig á að setja upp leiðslu til að dreifa verkefninu okkar á netþjón í þróunar- og framleiðsluumhverfi. Og þá munum við ræsa síðuna á þjóninum.

Og já, ég gleymdi að kynna mig. Ég heiti Oleg Borzov, ég er fullstack verktaki í CRM teymi fyrir húsnæðislánastjóra hjá Domclick.

Verkefnisyfirlit

Fyrst skulum við skoða tvær verkefnageymslur - bakenda og framhlið - og fara yfir kóðann.

Bakendi: Flaska+sellerí

Fyrir aftan tók ég helling sem er nokkuð vinsæll meðal Python forritara: Flask ramma (fyrir API) og sellerí (fyrir verkefnaröðina). SQLAchemy er notað sem ORM. Alembic er notað við fólksflutninga. Fyrir JSON staðfestingu í handföngum - Marshmallow.

В geymslum það er Readme.md skrá með nákvæmri lýsingu á uppbyggingu og leiðbeiningum um framkvæmd verkefnisins.

Web Part API frekar einfalt, samanstendur af 6 pennum:

  • /ping - til að athuga framboð;
  • annast skráningu, heimild, afheimild og fá viðurkenndan notanda;
  • tölvupósthandfang sem setur verkefni í sellerí biðröðina.

Sellerí hluti jafnvel auðveldara, það er aðeins eitt vandamál send_mail_task.

Í möppu /conf það eru tvær undirmöppur:

  • docker með tveimur Dockerfiles (base.dockerfile að byggja upp sjaldan breytilega grunnmynd og Dockerfile fyrir aðalsamkomur);
  • .env_files - með skrám með umhverfisbreytum fyrir mismunandi umhverfi.

Það eru fjórar docker-compose skrár í rót verkefnisins:

  • docker-compose.local.db.yml að koma upp staðbundnum gagnagrunni til þróunar;
  • docker-compose.local.workers.yml fyrir staðbundna hækkun starfsmanns, gagnagrunn, Redis og RabbitMQ;
  • docker-compose.test.yml að keyra próf meðan á dreifingu stendur;
  • docker-compose.yml til dreifingar.

Og síðasta mappan sem við höfum áhuga á - .ci-geisladiskur. Það inniheldur skeljaforskriftir til dreifingar:

  • deploy.sh — hefja flutning og uppsetningu. Keyrir á þjóninum eftir að hafa smíðað og keyrt próf í Github Actions;
  • rollback.sh - afturköllun gáma í fyrri útgáfu samsetningar;
  • curl_tg.sh - senda dreifingartilkynningar til Telegram.

Frontend á Angular

Geymsla með framhlið miklu einfaldari en Beck. Framhliðin samanstendur af þremur síðum:

  • Aðalsíða með eyðublaði til að senda tölvupóst og hætta hnappi.
  • Innskráningarsíða.
  • Skráningarsíða.

Aðalsíðan lítur út fyrir að vera asetísk:

CI/CD í Github Actions fyrir Flask+Angular verkefni
Það eru tvær skrár í rótinni Dockerfile и docker-compose.yml, sem og kunnuglega möppuna .ci-cd með örlítið færri skriftum en í bakgeymslunni (fjarlægt skriftur til að keyra próf).

Að hefja verkefni í Plesk

Byrjum á því að setja upp Plesk og búa til áskrift fyrir síðuna okkar.

Að setja upp viðbætur

Í Plesk þurfum við fjórar viðbætur:

  • Docker til að stjórna og sýna stöðu gáma sjónrænt á Plesk stjórnborðinu;
  • Git til að stilla dreifingarskrefið á þjóninum;
  • Let's Encrypt að búa til (og endurnýja sjálfkrafa) ókeypis TLS vottorð;
  • Firewall til að stilla síun á komandi umferð.

Þú getur sett þau upp í gegnum Plesk stjórnborðið í Viðbótarhlutanum:

CI/CD í Github Actions fyrir Flask+Angular verkefni
Við munum ekki íhuga nákvæmar stillingar fyrir viðbætur, sjálfgefnar stillingar munu gera það fyrir kynningu okkar.

Búðu til áskrift og síðu

Næst þurfum við að búa til áskrift fyrir helloworld.ru vefsíðuna okkar og bæta dev.helloworld.ru undirléninu við þar.

  1. Búðu til áskrift fyrir helloworld.ru lénið og tilgreindu innskráningarlykilorð fyrir kerfisnotandann:

    CI/CD í Github Actions fyrir Flask+Angular verkefni
    Hakaðu í reitinn neðst á síðunni Tryggðu lénið með Let's Encryptef við viljum setja upp HTTPS fyrir síðuna:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  2. Næst, í þessari áskrift, búðu til undirlén dev.helloworld.ru (sem þú getur líka gefið út ókeypis TLS vottorð fyrir):

    CI/CD í Github Actions fyrir Flask+Angular verkefni

Uppsetning miðlarahluta

Við erum með netþjón með OS Debian Stretch 9.12 og uppsett stjórnborð Plesk Obsidian 18.0.27.

Við þurfum að setja upp og stilla fyrir verkefnið okkar:

  • PostgreSQL (í okkar tilfelli verður einn þjónn með tveimur gagnagrunnum fyrir dev og prod umhverfi).
  • RabbitMQ (sama, sama tilvik með mismunandi vhosts fyrir umhverfi).
  • Tvö Redis tilvik (fyrir dev og prod umhverfi).
  • Docker Registry (fyrir staðbundna geymslu á innbyggðum Docker myndum).
  • UI fyrir Docker registry.

PostgreSQL

Plesk kemur nú þegar með PostgreSQL DBMS, en ekki nýjustu útgáfuna (þegar þetta er skrifað Plesk Obsidian stutt Postgres útgáfur 8.4–10.8). Við viljum nýjustu útgáfuna fyrir forritið okkar (12.3 þegar þetta er skrifað), svo við munum setja það upp handvirkt.

Það eru margar nákvæmar leiðbeiningar um uppsetningu Postgres á Debian á netinu (Dæmi), svo ég mun ekki lýsa þeim í smáatriðum, ég mun bara gefa skipanirnar:

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

Miðað við að PostgreSQL hefur frekar miðlungs sjálfgefna stillingar, þá er nauðsynlegt að leiðrétta stillingarnar. Þetta mun hjálpa okkur reiknivél: þú þarft að keyra inn breytur þjónsins þíns og skipta um stillingar í skránni /etc/postgresql/12/main/postgresql.confþeim sem boðið er upp á. Það skal tekið fram hér að slíkar reiknivélar eru ekki töfralausn og grunnurinn ætti að vera stilltur nákvæmari, byggt á vélbúnaði þínum, forriti og flóknum fyrirspurnum. En þetta er nóg til að byrja.

Til viðbótar við stillingarnar sem reiknivélin leggur til breytum við einnig inn postgresql.confsjálfgefna tengi 5432 í annað (í dæminu okkar - 53983).

Eftir að hafa breytt stillingarskránni skaltu endurræsa postgresql-server með skipuninni:

service postgresql restart

Við höfum sett upp og stillt PostgreSQL. Nú skulum við búa til gagnagrunn, notendur fyrir dev og prod umhverfi, og gefa notendum réttindi til að stjórna gagnagrunninum:

$ 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ína MQ

Við skulum halda áfram að setja upp RabbitMQ, skilaboðamiðlara fyrir sellerí. Það er frekar einfalt að setja það upp á Debian:

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

Eftir uppsetningu þurfum við að búa til vhosts, notendur og veita nauðsynleg réttindi:

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

Nú skulum við setja upp og stilla síðasta íhlutinn fyrir forritið okkar - Redis. Það verður notað sem bakendi til að geyma niðurstöður selleríverkefna.

Við munum hækka tvo Docker gáma með Redis fyrir þróunar- og framleiðsluumhverfi með því að nota viðbótina Docker fyrir Plesk.

  1. Við förum til Plesk, förum í Extensions hlutann, leitum að Docker viðbótinni og setjum hana upp (við þurfum ókeypis útgáfu):

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  2. Farðu í uppsettu viðbótina, finndu myndina í gegnum leitina redis bitnami og settu upp nýjustu útgáfuna:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  3. Við förum inn í hlaðið ílát og stillum uppsetninguna: tilgreindu gáttina, hámarks úthlutað vinnsluminni, lykilorðið í umhverfisbreytunum og settu hljóðstyrkinn upp:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  4. Við framkvæmum skref 2-3 fyrir prod gáminn, í stillingunum breytum við aðeins breytunum: port, lykilorð, stærð vinnsluminni og slóð að hljóðstyrksmöppunni á þjóninum:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

Docker Registry

Til viðbótar við grunnþjónustu væri gaman að setja þína eigin Docker myndgeymslu á netþjóninn. Sem betur fer er netþjónapláss nú frekar ódýrt (örugglega ódýrara en DockerHub áskrift) og ferlið við að setja upp einkageymsla er mjög einfalt.

Við viljum hafa:

Til að gera þetta:

  1. Búum til tvö undirlén í Plesk í áskriftinni okkar: docker.helloworld.ru og docker-ui.helloworld.ru, og stillum Let's Encrypt vottorð fyrir þau.
  2. Bættu skránni við docker.helloworld.ru undirlénsmöppuna docker-compose.yml með efni eins og þessu:
    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. Undir SSH munum við búa til .htpasswd skrána fyrir grunnheimild í Docker geymslunni:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Safna og lyfta gámum:
    docker-compose up -d
  5. Og við þurfum að beina Nginx í gámana okkar. Þetta er hægt að gera í gegnum Plesk.

Eftirfarandi skref þarf að gera fyrir docker.helloworld.ru og docker-ui.helloworld.ru undirlénin:

Í kafla Dev Verkfæri síðuna okkar fara á Docker umboðsreglur:

CI/CD í Github Actions fyrir Flask+Angular verkefni
Og bættu reglu við umboð fyrir komandi umferð í gáminn okkar:

CI/CD í Github Actions fyrir Flask+Angular verkefni

  1. Við athugum hvort við getum skráð okkur inn í gáminn okkar frá staðbundinni vél:
    $ 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. Við skulum líka athuga virkni docker-ui.helloworld.ru undirlénsins:

    CI/CD í Github Actions fyrir Flask+Angular verkefni
    Þegar þú smellir á Skoða geymslur mun vafrinn birta heimildarglugga þar sem þú þarft að slá inn notandanafn og lykilorð fyrir geymsluna. Eftir það verður okkur vísað á síðu með lista yfir geymslur (í augnablikinu verður það tómt fyrir þig):

    CI/CD í Github Actions fyrir Flask+Angular verkefni

Opnar gáttir í Plesk Firewall

Eftir að hafa sett upp og stillt íhlutina þurfum við að opna gáttir þannig að íhlutirnir séu aðgengilegir frá Docker gámum og ytra neti.

Við skulum sjá hvernig á að gera þetta með því að nota Firewall viðbótina fyrir Plesk sem við settum upp áðan.

  1. Fara til Verkfæri og stillingar > Stillingar > Eldveggur:
    CI/CD í Github Actions fyrir Flask+Angular verkefni
  2. Fara til Breyta Plesk eldveggsreglum > Bæta við sérsniðinni reglu og opnaðu eftirfarandi TCP tengi fyrir Docker undirnetið (172.0.0.0/8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  3. Við munum einnig bæta við reglu sem mun opna PostgreSQL tengi og RabbitMQ stjórnborð fyrir umheiminn:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  4. Notaðu reglurnar með því að nota hnappinn Nota breytingar:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

Setja upp CI/CD í Github Actions

Snúum okkur að áhugaverðasta hlutanum - að setja upp samfellda samþættingarleiðslu og skila verkefninu okkar á netþjóninn.

Þessi leiðsla mun samanstanda af tveimur hlutum:

  • byggja upp mynd og keyra próf (fyrir bakendann) - á Github hliðinni;
  • keyra flutninga (fyrir bakendann) og dreifa gámum - á þjóninum.

Senda til Plesk

Tökum fyrst á seinni liðinn (vegna þess að sá fyrsti fer eftir því).

Við munum stilla dreifingarferlið með því að nota Git viðbótina fyrir Plesk.

Lítum á dæmi með Prod umhverfi fyrir Backend geymslu.

  1. Við förum í áskrift að Helloworld vefsíðu okkar og förum í Git undirkafla:

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  2. Settu hlekk á Github geymsluna okkar í reitinn „Remote Git repository“ og breyttu sjálfgefna möppunni httpdocs til annars (td. /httpdocs/hw_back):

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  3. Afritaðu SSH Public lykilinn frá fyrra skrefi og bæta við það er í Github stillingum.
  4. Smelltu á OK á skjánum í skrefi 2, eftir það verður okkur vísað á geymslusíðuna í Plesk. Nú þurfum við að stilla geymsluna til að vera uppfærð á skuldbindingum til aðalútibúsins. Til að gera þetta, farðu til Geymslustillingar og vista gildið Webhook URL (við munum þurfa það síðar þegar þú setur upp Github Actions):

    CI/CD í Github Actions fyrir Flask+Angular verkefni

  5. Í reitnum Aðgerðir á skjánum frá fyrri málsgrein, sláðu inn forskriftina til að ræsa dreifinguna:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    þar sem:

    {REPOSITORY_ABSOLUTE_PATH} - slóð að prod möppu bakenda geymslunnar á þjóninum;
    {ENV} - umhverfi (dev / prod), í okkar tilviki prod;
    {DOCKER_REGISTRY_HOST} - gestgjafi docker geymslunnar okkar
    {TG_BOT_TOKEN} — Telegram bot-tákn;
    {TG_CHAT_ID} — Auðkenni spjallsins/rásarinnar til að senda tilkynningar.

    Dæmi um handrit:

    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. Bættu notanda úr áskrift okkar við Docker hópinn (svo þeir geti stjórnað gámum):
    sudo usermod -aG docker helloworld_admin

Dev umhverfið fyrir bakenda geymsluna og framendann er sett upp á sama hátt.

Dreifingarleiðsla í Github Actions

Við skulum halda áfram að setja upp fyrsta hluta CI/CD leiðslunnar okkar í Github Actions.

Bakendi

Lýsingunni er lýst í deploy.yml skrá.

En áður en við greinum það, skulum við fylla út Secret breyturnar sem við þurfum í Github. Til að gera þetta, farðu til Stillingar -> Leyndarmál:

  • DOCKER_REGISTRY - gestgjafi Docker geymslunnar okkar (docker.helloworld.ru);
  • DOCKER_LOGIN - skráðu þig inn á Docker geymsluna;
  • DOCKER_PASSWORD - lykilorð að því;
  • DEPLOY_HOST - gestgjafi þar sem Plesk stjórnborðið er tiltækt (dæmi: helloworld.com: 8443 eða 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - tákn fyrir dreifingu á prod-geymsluna á þjóninum (við fengum það í Deployment in Plesk bls. 4);
  • DEPLOY_BACK_DEV_TOKEN - tákn fyrir dreifingu á dev geymsluna á þjóninum.

Dreifingarferlið er einfalt og samanstendur af þremur meginskrefum:

  • byggja og birta myndina í geymslunni okkar;
  • keyra prófanir í gámi byggt á nýbyggðri mynd;
  • dreifing í viðkomandi umhverfi eftir útibúi (dev/master).

Viðmót

Deploy.yml skráin fyrir forgeymsluna lítið öðruvísi en Beck. Það skortir skref með keyrsluprófum og breytir nöfnum tákna fyrir uppsetningu. Leyndarmál fyrir forgeymsluna þarf að fylla út sérstaklega.

Uppsetning vefsvæðis

Umboð umferð í gegnum Nginx

Jæja, þá erum við komin að endalokunum. Það er aðeins eftir að stilla umboð komandi og útleiðandi umferðar í gáminn okkar í gegnum Nginx. Við höfum þegar fjallað um þetta ferli í skrefi 5 í uppsetningu Docker Registry. Sama ætti að endurtaka fyrir aftan og framhlutann í þróunar- og framleiðsluumhverfi.

Ég mun gefa skjáskot af stillingunum.

Bakendi

CI/CD í Github Actions fyrir Flask+Angular verkefni

Viðmót

CI/CD í Github Actions fyrir Flask+Angular verkefni
Mikilvæg skýring. Allar vefslóðir verða settar á framendaílátið, nema þær sem byrja á /api/ - þeim verður vísað í bakílátið (svo í bakgámum verða allir stjórnendur að byrja með /api/).

Niðurstöður

Nú ætti síðan okkar að vera fáanleg á helloworld.ru og dev.helloworld.ru (prod- og dev-environments, í sömu röð).

Alls lærðum við hvernig á að útbúa einfalt forrit í Flask og Angular og setja upp leiðslu í Github Actions til að rúlla því út á netþjón sem keyrir Plesk.

Ég mun afrita tenglana á geymslurnar með kóðanum: bakenda, að framanverðu.

Heimild: www.habr.com

Bæta við athugasemd