CI/CD sa Github Actions para sa Flask+Angular nga proyekto

CI/CD sa Github Actions para sa Flask+Angular nga proyekto
Niini nga artikulo, akong ipaambit ang akong kasinatian sa pag-set up sa CI/CD gamit ang Plesk Control Panel ug Github Actions. Karon mahibal-an naton kung giunsa ang pag-deploy sa usa ka yano nga proyekto nga adunay dili komplikado nga ngalan nga "Helloworld". Gisulat kini sa Flask Python framework, nga adunay mga trabahante sa Celery ug usa ka Angular 8 frontend.

Mga link sa mga repository: backend, atubangan.

Sa unang bahin sa artikulo, atong tan-awon ang atong proyekto ug ang mga bahin niini. Sa ikaduha, mahibal-an namon kung giunsa ang pag-set up sa Plesk ug pag-install sa kinahanglan nga mga extension ug mga sangkap (DB, RabbitMQ, Redis, Docker, ug uban pa).

Sa ikatulo nga bahin, sa katapusan mahibal-an namon kung giunsa ang pag-set up sa usa ka pipeline alang sa pag-deploy sa among proyekto sa usa ka server sa usa ka dev ug prod environment. Ug unya atong ilunsad ang site sa server.

And yes, nakalimutan ko nga magpakilala. Ang akong ngalan mao si Oleg Borzov, ako usa ka fullstack developer sa CRM team alang sa mortgage managers sa Domclick.

Overview sa proyekto

Una, atong tan-awon ang duha ka mga repositoryo sa proyekto - backend ug atubangan - ug adto sa code.

Backend: Flask+Celery

Sa likod nga bahin, nagkuha ko og usa ka hugpong nga popular kaayo sa mga developer sa Python: ang Flask framework (alang sa API) ug Celery (alang sa task queue). Ang SQLAchemy gigamit isip ORM. Ang Alembic gigamit alang sa mga paglalin. Alang sa pag-validate sa JSON sa mga gunitanan - Marshmallow.

Π’ mga tipiganan adunay usa ka Readme.md file nga adunay usa ka detalyado nga paghulagway sa istruktura ug mga panudlo alang sa pagpadagan sa proyekto.

Web Part API medyo yano, naglangkob sa 6 pen:

  • /ping - aron masusi ang pagkaanaa;
  • nagdumala alang sa pagparehistro, pagtugot, pagtangtang sa pagtugot ug pagkuha usa ka awtorisado nga tiggamit;
  • usa ka email handle nga nagbutang sa usa ka buluhaton sa Celery queue.

Bahin sa celery mas sayon, adunay usa lamang ka problema send_mail_task.

Sa folder /conf Adunay duha ka subfolder:

  • docker nga adunay duha ka Dockerfiles (base.dockerfile sa pagtukod sa usa ka panagsa ra mausab base nga larawan ug Dockerfile para sa pangunang mga asembliya);
  • .env_files - nga adunay mga file nga adunay mga variable sa palibot alang sa lainlaing mga palibot.

Adunay upat ka docker-compose nga mga file sa gamut sa proyekto:

  • docker-compose.local.db.yml sa pagpataas sa usa ka lokal nga database alang sa kalamboan;
  • docker-compose.local.workers.yml alang sa lokal nga pagpadako sa trabahante, database, Redis ug RabbitMQ;
  • docker-compose.test.yml sa pagpadagan sa mga pagsulay sa panahon sa deployment;
  • docker-compose.yml alang sa deployment.

Ug ang katapusan nga folder nga interesado kami - .ci-cd. Naglangkob kini og mga script sa shell alang sa pag-deploy:

  • deploy.sh - paglunsad sa paglalin ug pagdeploy. Nagdagan sa server pagkahuman sa pagtukod ug pagpadagan sa mga pagsulay sa Github Actions;
  • rollback.sh - rollback sa mga sudlanan ngadto sa miaging bersyon sa asembliya;
  • curl_tg.sh - pagpadala mga pahibalo sa pagpadala sa Telegram.

Frontend sa Angular

Repository nga adunay atubangan mas simple kaysa kang Beck. Ang atubangan naglangkob sa tulo ka panid:

  • Panguna nga panid nga adunay porma para sa pagpadala sa email ug usa ka exit button.
  • Login nga panid.
  • Panid sa pagparehistro.

Ang panguna nga panid morag asetiko:

CI/CD sa Github Actions para sa Flask+Angular nga proyekto
Adunay duha ka mga file sa gamut Dockerfile ΠΈ docker-compose.yml, ingon man ang pamilyar nga folder .ci-cd nga adunay gamay nga mga script kaysa sa likod nga repository (gitangtang ang mga script alang sa pagpadagan sa mga pagsulay).

Pagsugod sa usa ka proyekto sa Plesk

Magsugod ta pinaagi sa pag-set up sa Plesk ug paghimo og suskrisyon para sa among site.

Pag-instalar sa mga extension

Sa Plesk, kinahanglan namon ang upat nga mga extension:

  • Docker sa pagdumala ug biswal nga pagpakita sa kahimtang sa mga sudlanan sa Plesk admin panel;
  • Git aron ma-configure ang lakang sa pag-deploy sa server;
  • Let's Encrypt aron makamugna (ug auto-renew) libre nga TLS certificates;
  • Firewall aron ma-configure ang pagsala sa umaabot nga trapiko.

Mahimo nimo kining i-install pinaagi sa Plesk admin panel sa Extension section:

CI/CD sa Github Actions para sa Flask+Angular nga proyekto
Dili namo tagdon ang mga detalyadong setting para sa mga extension, ang default settings maoy buhaton para sa among demo purposes.

Paghimo usa ka suskrisyon ug site

Sunod, kinahanglan namon nga maghimo usa ka suskrisyon alang sa among website sa helloworld.ru ug idugang ang subdomain sa dev.helloworld.ru didto.

  1. Paghimo og usa ka suskrisyon alang sa helloworld.ru nga domain ug ipiho ang login-password alang sa tiggamit sa sistema:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto
    Susiha ang kahon sa ubos sa panid I-secure ang domain gamit ang Let's Encryptkung gusto namong i-set up ang HTTPS para sa site:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  2. Sunod, sa kini nga suskrisyon, paghimo usa ka subdomain dev.helloworld.ru (diin mahimo ka usab mag-isyu ug libre nga sertipiko sa TLS):

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

Pag-instalar sa mga sangkap sa Server

Naa mi server nga naay OS Debian Stretch 9.12 ug gi-install nga control panel Plesk Obsidian 18.0.27.

Kinahanglan namon nga i-install ug i-configure ang among proyekto:

  • PostgreSQL (sa among kaso, adunay usa ka server nga adunay duha ka mga database alang sa dev ug prod environment).
  • RabbitMQ (parehas, parehas nga pananglitan sa lainlaing mga vhost alang sa mga palibot).
  • Duha ka mga higayon sa Redis (alang sa dev ug prod environment).
  • Docker Registry (alang sa lokal nga pagtipig sa gitukod nga mga imahe sa Docker).
  • UI alang sa rehistro sa Docker.

PostgreSQL

Ang Plesk nag-uban na sa PostgreSQL DBMS, apan dili ang pinakabag-o nga bersyon (sa panahon sa pagsulat sa Plesk Obsidian gisuportahan Postgres nga mga bersyon 8.4–10.8). Gusto namon ang pinakabag-o nga bersyon para sa among aplikasyon (12.3 sa panahon sa pagsulat niini), busa among i-install kini nga mano-mano.

Adunay daghang detalyado nga mga panudlo alang sa pag-install sa Postgres sa Debian sa net (usa ka panig-ingnan), mao nga dili nako ihulagway kini sa detalye, ihatag ko lang ang mga sugo:

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

Gihatag nga ang PostgreSQL adunay medyo kasagaran nga default nga mga setting, kinahanglan nga i-adjust ang configuration. Makatabang kini kanato calculator: kinahanglan nimo nga magmaneho sa mga parameter sa imong server ug ilisan ang mga setting sa file /etc/postgresql/12/main/postgresql.confsa mga gitanyag. Angay nga matikdan dinhi nga ang maong mga calculators dili usa ka magic bullet, ug ang base kinahanglan nga mas tukma nga ipahiangay, base sa imong hardware, aplikasyon, ug pagkakomplikado sa pangutana. Apan kini igo na aron makasugod.

Dugang sa mga setting nga gisugyot sa calculator, usbon usab namo postgresql.confang default port 5432 sa lain (sa among pananglitan - 53983).

Human mausab ang configuration file, i-restart ang postgresql-server gamit ang command:

service postgresql restart

Gi-install ug gi-configure namon ang PostgreSQL. Karon maghimo kita og database, mga tiggamit alang sa dev ug prod environment, ug hatagan ang mga tiggamit og katungod sa pagdumala sa database:

$ 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

Mopadayon kita sa pag-install sa RabbitMQ, usa ka tigpamaligya sa mensahe alang sa Celery. Ang pag-install niini sa Debian yano ra:

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

Pagkahuman sa pag-instalar, kinahanglan namon nga maghimo vhosts, tiggamit ug paghatag sa gikinahanglang katungod:

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

Karon atong i-install ug i-configure ang kataposang bahin para sa atong aplikasyon - Redis. Kini gamiton isip backend sa pagtipig sa mga resulta sa mga buluhaton sa Celery.

Magpataas kami og duha ka mga sudlanan sa Docker nga adunay Redis alang sa dev ug prod environment gamit ang extension Docker para sa Plesk.

  1. Moadto kami sa Plesk, adto sa seksyon sa Extension, pangitaa ang extension sa Docker ug i-install kini (kinahanglan namon ang usa ka libre nga bersyon):

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  2. Lakaw ngadto sa gi-install nga extension, pangitaa ang imahe pinaagi sa pagpangita redis bitnami ug i-install ang pinakabag-o nga bersyon:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  3. Moadto kami sa na-download nga sudlanan ug i-adjust ang configuration: ipiho ang port, ang maximum nga gigahin nga gidak-on sa RAM, ang password sa mga variable sa palibot, ug i-mount ang volume:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  4. Gihimo namo ang mga lakang 2-3 alang sa prod container, sa mga setting giusab lang namo ang mga parameter: port, password, RAM size ug path sa volume folder sa server:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

Docker Registry

Dugang pa sa mga batakang serbisyo, maayo nga ibutang ang imong kaugalingon nga Docker image repository sa server. Maayo na lang, ang wanang sa server karon medyo barato (sigurado nga mas barato kaysa usa ka suskrisyon sa DockerHub), ug ang proseso sa pag-set up sa usa ka pribado nga repositoryo yano ra.

Gusto namon nga adunay:

Tungod niini:

  1. Maghimo kita og duha ka subdomain sa Plesk sa atong suskrisyon: docker.helloworld.ru ug docker-ui.helloworld.ru, ug i-configure ang Let's Encrypt nga mga sertipiko para kanila.
  2. Idugang ang file sa docker.helloworld.ru subdomain folder docker-compose.yml nga adunay sulod nga sama niini:
    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. Ubos sa SSH, makamugna kami sa .htpasswd file alang sa Basic authorization sa Docker repository:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Pagkolekta ug pag-alsa sa mga sudlanan:
    docker-compose up -d
  5. Ug kinahanglan namon nga i-redirect ang Nginx sa among mga sudlanan. Mahimo kini pinaagi sa Plesk.

Ang mosunod nga mga lakang kinahanglang buhaton para sa docker.helloworld.ru ug docker-ui.helloworld.ru nga mga subdomain:

seksyon Mga himan nga Dev adto sa among site Mga Lagda sa Docker Proxy:

CI/CD sa Github Actions para sa Flask+Angular nga proyekto
Ug pagdugang usa ka lagda sa proxy nga umaabot nga trapiko sa among sudlanan:

CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  1. Among susihon nga maka-log in sa among sudlanan gikan sa lokal nga makina:
    $ 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. Atong susihon usab ang operasyon sa docker-ui.helloworld.ru subdomain:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto
    Kung nag-klik ka sa Pag-browse sa mga repository, ang browser magpakita sa usa ka window sa pagtugot diin kinahanglan nimo nga mosulod sa username ug password alang sa repository. Pagkahuman niana, ibalhin kami sa usa ka panid nga adunay lista sa mga repositoryo (sa pagkakaron, wala’y sulod alang kanimo):

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

Pag-abli sa mga pantalan sa Plesk Firewall

Pagkahuman sa pag-install ug pag-configure sa mga sangkap, kinahanglan namon nga ablihan ang mga pantalan aron ang mga sangkap ma-access gikan sa mga sudlanan sa Docker ug sa gawas nga network.

Atong tan-awon kung giunsa kini buhaton gamit ang extension sa Firewall para sa Plesk nga among gi-install kaniadto.

  1. Adto sa Tools & Settings > Settings > Firewall:
    CI/CD sa Github Actions para sa Flask+Angular nga proyekto
  2. Adto sa Usba ang Plesk Firewall Rules > Add Custom Rule ug ablihi ang mosunod nga TCP ports para sa Docker subnet (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  3. Magdugang usab kami usa ka lagda nga magbukas sa mga pantalan sa PostgreSQL ug mga panel sa pagdumala sa RabbitMQ sa gawas nga kalibutan:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  4. Ibutang ang mga lagda gamit ang Apply Changes button:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

Pag-set up sa CI/CD sa Github Actions

Moadto kita sa labing makaiikag nga bahin - ang paghimo sa usa ka padayon nga integrasyon nga pipeline ug paghatud sa among proyekto sa server.

Kini nga pipeline naglangkob sa duha ka bahin:

  • pagtukod og usa ka hulagway ug pagpadagan sa mga pagsulay (alang sa backend) - sa kilid sa Github;
  • pagpadagan sa mga paglalin (alang sa backend) ug pag-deploy sa mga sudlanan - sa server.

I-deploy sa Plesk

Atong atubangon ang ikaduha nga punto una (kay ang una nagdepende niini).

Atong i-configure ang proseso sa pag-deploy gamit ang Git extension para sa Plesk.

Hunahunaa ang usa ka pananglitan sa usa ka Prod nga palibot alang sa usa ka Backend repository.

  1. Moadto kami sa suskrisyon sa among website sa Helloworld ug moadto sa subseksyon sa Git:

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  2. Pagsulod og link sa among Github repository ngadto sa "Remote Git repository" field ug usba ang default folder httpdocs sa lain (eg. /httpdocs/hw_back):

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  3. Kopyaha ang SSH Public key gikan sa miaging lakang ug pagdugang kini sa mga setting sa Github.
  4. I-klik ang OK sa screen sa lakang 2, pagkahuman i-redirect kami sa panid sa repository sa Plesk. Karon kinahanglan namong i-configure ang repository aron ma-update sa mga commit sa master branch. Aron mahimo kini, adto sa Mga Setting sa Pagtipig ug tipigi ang bili Webhook URL (kinahanglan namon kini sa ulahi kung mag-set up sa Github Actions):

    CI/CD sa Github Actions para sa Flask+Angular nga proyekto

  5. Sa natad sa Mga Aksyon sa screen gikan sa miaging parapo, isulod ang script aron ilunsad ang pag-deploy:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    diin:

    {REPOSITORY_ABSOLUTE_PATH} - dalan sa prod folder sa backend repository sa server;
    {ENV} - palibot (dev / prod), sa among kaso prod;
    {DOCKER_REGISTRY_HOST} - ang host sa among docker repository
    {TG_BOT_TOKEN} - Telegram bot token;
    {TG_CHAT_ID} - ID sa chat / channel alang sa pagpadala mga pahibalo.

    Pananglitan sa script:

    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. Pagdugang usa ka tiggamit gikan sa among suskrisyon sa grupo sa Docker (aron sila makadumala sa mga sulud):
    sudo usermod -aG docker helloworld_admin

Ang dev environment alang sa backend repository ug ang frontend gipahimutang sa samang paagi.

Pag-deploy sa pipeline sa Github Actions

Mopadayon kita sa pag-set up sa unang bahin sa atong CI/CD pipeline sa Github Actions.

Backend

Ang pipeline gihulagway sa deploy.yml nga file.

Apan sa dili pa kini i-parse, atong pun-on ang Secret variables nga atong gikinahanglan sa Github. Aron mahimo kini, adto sa Mga Setting -> Mga Sekreto:

  • DOCKER_REGISTRY - ang host sa among Docker repository (docker.helloworld.ru);
  • DOCKER_LOGIN - pag-login sa Docker repository;
  • DOCKER_PASSWORD - password niini;
  • DEPLOY_HOST β€” host diin ang Plesk admin panel anaa (pananglitan: helloworld.com:8443 o 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - usa ka timaan alang sa pag-deploy sa prod-repository sa server (nakuha namon kini sa Deployment sa Plesk p. 4);
  • DEPLOY_BACK_DEV_TOKEN - token alang sa pag-deploy sa dev repository sa server.

Ang proseso sa pag-deploy yano ug naglangkob sa tulo ka nag-unang mga lakang:

  • pagtukod ug pagmantala sa hulagway sa among tipiganan;
  • nagdagan nga mga pagsulay sa usa ka sudlanan nga gibase sa usa ka bag-ong natukod nga imahe;
  • deployment sa gusto nga palibot depende sa branch (dev/master).

frontend

Ang deploy.yml file para sa atubangan nga repository gamay nga lahi sa Beck's. Wala kini usa ka lakang sa pagpadagan sa mga pagsulay ug giusab ang mga ngalan sa mga token alang sa pag-deploy. Ang mga sekreto alang sa front repository, sa laing bahin, kinahanglan nga pun-on nga gilain.

Pag-setup sa site

Pag-proxy sa trapiko pinaagi sa Nginx

Aw, niabot na ta sa kataposan. Nagpabilin lamang kini aron ma-configure ang proxying sa umaabot ug paggawas nga trapiko sa among sudlanan pinaagi sa Nginx. Gitabonan na namo kini nga proseso sa lakang 5 sa Docker Registry setup. Ang sama nga kinahanglan nga gisubli alang sa likod ug atubangan nga mga bahin sa dev ug prod palibot.

Maghatag ko og mga screenshot sa mga setting.

Backend

CI/CD sa Github Actions para sa Flask+Angular nga proyekto

frontend

CI/CD sa Github Actions para sa Flask+Angular nga proyekto
Importante nga pagpatin-aw. Ang tanan nga mga URL i-proxy sa frontend nga sudlanan, gawas sa mga nagsugod sa /api/ - sila i-proxy sa likod nga sudlanan (sa ingon sa likod nga sudlanan, ang tanan nga mga handler kinahanglan magsugod sa /api/).

Mga resulta

Karon ang among site kinahanglan nga magamit sa helloworld.ru ug dev.helloworld.ru (prod- ug dev-environments, matag usa).

Sa kinatibuk-an, nahibal-an namon kung giunsa ang pag-andam sa usa ka yano nga aplikasyon sa Flask ug Angular ug nagbutang usa ka pipeline sa Github Actions aron i-roll kini sa usa ka server nga nagpadagan sa Plesk.

Akong doblehon ang mga link sa mga repository nga adunay code: backend, atubangan.

Source: www.habr.com

Idugang sa usa ka comment