CI/CD ing Tindakan Github kanggo proyek Flask+Angular

CI/CD ing Tindakan Github kanggo proyek Flask+Angular
Ing artikel iki, aku bakal nuduhake pengalaman nyetel CI / CD nggunakake Panel Kontrol Plesk lan Tindakan Github. Dina iki kita bakal sinau carane masang proyek prasaja kanthi jeneng uncomplicated "Helloworld". Iki ditulis ing framework Flask Python, karo buruh Celery lan frontend Angular 8.

Link menyang repositori: mburi, ngarep.

Ing bagean pisanan artikel, kita bakal ndeleng proyek kita lan bagean-bageane. Ing kaloro, kita bakal nemtokake cara nyiyapake Plesk lan nginstal ekstensi lan komponen sing dibutuhake (DB, RabbitMQ, Redis, Docker, lsp).

Ing bagean katelu, pungkasane kita bakal nemtokake cara nyiyapake pipa kanggo nyebarake proyek menyang server ing lingkungan dev lan prod. Banjur kita bakal miwiti situs ing server.

Lan ya, aku lali ngenalake aku. Jenengku Oleg Borzov, aku dadi pangembang fullstack ing tim CRM kanggo manajer hipotek ing Domclick.

Ringkesan proyek

Pisanan, ayo goleki rong repositori proyek - mburi lan ngarep - lan goleki kode kasebut.

Backend: Flask + Seledri

Kanggo sisih mburi, aku njupuk Bunch sing cukup populer ing antarane pangembang Python: framework Flask (kanggo API) lan Celery (kanggo antrian tugas). SQLAchemy digunakake minangka ORM. Alembic digunakake kanggo migrasi. Kanggo validasi JSON ing gagang - Marshmallow.

Π’ repositori ana file Readme.md kanthi katrangan rinci babagan struktur lan instruksi kanggo mbukak proyek kasebut.

Web Part API cukup ora rumit, kasusun saka 6 pena:

  • /ping - kanggo mriksa kasedhiyan;
  • nangani kanggo registrasi, wewenang, de-wewenang lan entuk pangguna sing sah;
  • nangani email sing nempatno tugas ing antrian Celery.

Bagian celery malah luwih gampang, ana mung siji masalah send_mail_task.

Ing folder / conf ana rong subfolder:

  • docker karo rong Dockerfiles (base.dockerfile kanggo mbangun gambar dhasar arang ngganti lan Dockerfile kanggo majelis utama);
  • .env_files - karo file karo variabel lingkungan kanggo lingkungan beda.

Ana papat file docker-compose ing oyod proyek:

  • docker-compose.local.db.yml kanggo mundhakaken database lokal kanggo pembangunan;
  • docker-compose.local.workers.yml kanggo mundhakaken lokal saka buruh, database, Redis lan RabbitMQ;
  • docker-compose.test.yml kanggo mbukak tes sajrone penyebaran;
  • docker-compose.yml kanggo penyebaran.

Lan folder pungkasan sing kita kasengsem - .ci-cd. Isine skrip shell kanggo panyebaran:

  • deploy.sh - Bukak migrasi lan penyebaran. Mlaku ing server sawise mbangun lan mbukak tes ing Tindakan Github;
  • rollback.sh - rollback kontaner menyang versi perakitan sadurunge;
  • curl_tg.sh - ngirim kabar penyebaran menyang Telegram.

Frontend ing Angular

Repositori karo ngarep luwih prasaja tinimbang Beck. Ing ngarep kasusun saka telung kaca:

  • Kaca utama kanthi formulir kanggo ngirim email lan tombol metu.
  • kaca mlebu.
  • Kaca registrasi.

Kaca utama katon tapa:

CI/CD ing Tindakan Github kanggo proyek Flask+Angular
Ana rong file ing ROOT Dockerfile ΠΈ docker-compose.yml, uga folder akrab .ci-cd kanthi skrip sing rada sithik tinimbang ing repositori mburi (skrip sing dibuwang kanggo tes sing mlaku).

Miwiti proyek ing Plesk

Ayo miwiti kanthi nyetel Plesk lan nggawe langganan kanggo situs kita.

Nginstal ekstensi

Ing Plesk, kita butuh papat ekstensi:

  • Docker kanggo ngatur lan nampilake status wadhah kanthi visual ing panel admin Plesk;
  • Git kanggo ngatur langkah panyebaran ing server;
  • Let's Encrypt kanggo ngasilake (lan otomatis gawe anyar) sertifikat TLS gratis;
  • Firewall kanggo ngatur nyaring lalu lintas mlebu.

Sampeyan bisa nginstal liwat panel admin Plesk ing bagean Ekstensi:

CI/CD ing Tindakan Github kanggo proyek Flask+Angular
Kita ora bakal nganggep setelan rinci kanggo ekstensi, setelan gawan bakal ditindakake kanggo tujuan demo.

Nggawe langganan lan situs

Sabanjure, kita kudu nggawe langganan kanggo situs web helloworld.ru lan nambahake subdomain dev.helloworld.ru ing kana.

  1. Nggawe langganan kanggo domain helloworld.ru lan nemtokake login-sandi kanggo pangguna sistem:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular
    Centhang kothak ing sisih ngisor kaca Ngamanake domain karo Ayo Encryptyen kita pengin nyiyapake HTTPS kanggo situs kasebut:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  2. Sabanjure, ing langganan iki, gawe subdomain dev.helloworld.ru (sing sampeyan uga bisa ngetokake sertifikat TLS gratis):

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

Nginstal Komponen Server

We duwe server karo OS Debian Stretch 9.12 lan panel kontrol sing diinstal Plesk Obsidian 18.0.27.

Kita kudu nginstal lan ngatur kanggo proyek kita:

  • PostgreSQL (ing kasus kita, bakal ana siji server karo rong database kanggo lingkungan dev lan prod).
  • RabbitMQ (padha, padha karo vhosts beda kanggo lingkungan).
  • Rong conto Redis (kanggo lingkungan dev lan prod).
  • Docker Registry (kanggo panyimpenan lokal gambar Docker sing dibangun).
  • UI kanggo pendaptaran Docker.

PostgreSQL

Plesk wis dilengkapi PostgreSQL DBMS, nanging dudu versi paling anyar (nalika nulis Plesk Obsidian didhukung Postgres versi 8.4–10.8). Kita pengin versi paling anyar kanggo aplikasi kita (12.3 nalika nulis iki), supaya kita bakal nginstal kanthi manual.

Ana akeh instruksi rinci kanggo nginstal Postgres ing Debian ing net (conto), dadi aku ora bakal njlèntrèhaké kanthi rinci, aku mung bakal menehi prentah:

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

Ngelingi PostgreSQL duwe setelan standar sing rada biasa, mula konfigurasi kasebut kudu dibenerake. Iki bakal mbantu kita kalkulator: sampeyan kudu drive ing paramèter server lan ngganti setelan ing file /etc/postgresql/12/main/postgresql.confmarang sing ditawakake. Perlu dicathet ing kene yen kalkulator kasebut dudu peluru ajaib, lan dhasar kudu disetel kanthi luwih tepat, adhedhasar hardware, aplikasi, lan kerumitan pitakon. Nanging iki cukup kanggo miwiti.

Saliyane setelan sing diusulake dening kalkulator, kita uga ngganti postgresql.confport standar 5432 menyang liyane (ing conto kita - 53983).

Sawise ngganti file konfigurasi, restart postgresql-server kanthi printah:

service postgresql restart

Kita wis nginstal lan ngatur PostgreSQL. Saiki ayo nggawe database, pangguna kanggo lingkungan dev lan prod, lan menehi hak pangguna kanggo ngatur 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

KelinciMQ

Ayo pindhah menyang nginstal RabbitMQ, broker pesen kanggo Celery. Nginstal ing Debian cukup prasaja:

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

Sawise instalasi, kita kudu nggawe vhosts, pangguna lan menehi hak sing dibutuhake:

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

Saiki ayo instal lan konfigurasi komponen pungkasan kanggo aplikasi kita - Redis. Bakal digunakake minangka backend kanggo nyimpen asil tugas Celery.

Kita bakal ngunggahake rong wadah Docker karo Redis kanggo lingkungan dev lan prod nggunakake ekstensi kasebut Docker kanggo Plesk.

  1. Kita menyang Plesk, pindhah menyang bagean Ekstensi, goleki ekstensi Docker lan instal (kita butuh versi gratis):

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  2. Pindhah menyang ekstensi sing diinstal, temokake gambar liwat telusuran redis bitnami lan nginstal versi paling anyar:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  3. Kita pindhah menyang wadhah sing diunduh lan atur konfigurasi: nemtokake port, ukuran RAM maksimum sing dialokasikan, tembung sandhi ing variabel lingkungan, lan pasang volume:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  4. Kita nindakake langkah 2-3 kanggo wadhah prod, ing setelan kita mung ngganti paramèter: port, sandi, ukuran RAM lan path menyang folder volume ing server:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

Registry Docker

Saliyane layanan dhasar, luwih becik nyelehake repositori gambar Docker dhewe ing server. Untunge, ruang server saiki cukup murah (mesthi luwih murah tinimbang langganan DockerHub), lan proses nyetel repositori pribadi gampang banget.

Kita pengin duwe:

Kanggo:

  1. Ayo nggawe rong subdomain ing Plesk ing langganan kita: docker.helloworld.ru lan docker-ui.helloworld.ru, lan atur sertifikat Ayo Encrypt kanggo wong-wong mau.
  2. Tambah file menyang folder subdomain docker.helloworld.ru docker-compose.yml kanthi isi kaya iki:
    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. Ing SSH, kita bakal ngasilake file .htpasswd kanggo wewenang dhasar ing gudang Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Nglumpukake lan angkat wadhah:
    docker-compose up -d
  5. Lan kita kudu ngarahake Nginx menyang wadhah kita. Iki bisa ditindakake liwat Plesk.

Langkah-langkah ing ngisor iki kudu ditindakake kanggo subdomain docker.helloworld.ru lan docker-ui.helloworld.ru:

bagean Piranti Piranti situs kita pindhah menyang Aturan Proxy Docker:

CI/CD ing Tindakan Github kanggo proyek Flask+Angular
Lan tambahake aturan kanggo proxy lalu lintas mlebu menyang wadhah kita:

CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  1. Kita priksa manawa kita bisa mlebu menyang wadhah saka mesin lokal:
    $ 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. Ayo uga mriksa operasi subdomain docker-ui.helloworld.ru:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular
    Nalika sampeyan ngeklik Telusuri repositori, browser bakal nampilake jendela wewenang ing ngendi sampeyan kudu ngetik jeneng pangguna lan sandhi kanggo repositori. Sawise iku, kita bakal ditransfer menyang kaca kanthi dhaptar repositori (saiki, bakal kosong kanggo sampeyan):

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

Mbukak port ing Plesk Firewall

Sawise nginstal lan ngatur komponen, kita kudu mbukak port supaya komponen bisa diakses saka wadhah Docker lan jaringan eksternal.

Ayo ndeleng carane nindakake iki nggunakake ekstensi Firewall kanggo Plesk sing wis diinstal sadurunge.

  1. Menyang Piranti & Setelan > Setelan > Firewall:
    CI/CD ing Tindakan Github kanggo proyek Flask+Angular
  2. Menyang Owahi Plesk Firewall Aturan > Tambah Aturan Kustom lan bukak port TCP ing ngisor iki kanggo subnet Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  3. Kita uga bakal nambah aturan sing bakal mbukak port PostgreSQL lan panel manajemen RabbitMQ menyang jagad njaba:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  4. Gunakake aturan nggunakake tombol Apply Changes:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

Nyetel CI / CD ing Tindakan Github

Ayo mudhun menyang bagean sing paling menarik - nyetel pipa integrasi sing terus-terusan lan ngirim proyek menyang server.

Pipa iki bakal kalebu rong bagean:

  • mbangun gambar lan mbukak tes (kanggo backend) - ing sisih Github;
  • migrasi mlaku (kanggo backend) lan nyebarke kontaner - ing server.

Pasang menyang Plesk

Ayo dadi urusan karo titik kapindho pisanan (amarga sing pisanan gumantung ing).

Kita bakal ngatur proses penyebaran nggunakake ekstensi Git kanggo Plesk.

Coba conto karo lingkungan Prod kanggo repositori Backend.

  1. Kita pindhah menyang langganan situs web Helloworld lan pindhah menyang bagean Git:

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  2. Lebokake link menyang repositori Github menyang kolom "Remote Git repository" lan ganti folder standar httpdocs menyang liyane (contone. /httpdocs/hw_back):

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  3. Nyalin kunci SSH Public saka langkah sadurunge lan nambahi ing setelan Github.
  4. Klik OK ing layar ing langkah 2, sawise kita bakal dialihake menyang kaca repositori ing Plesk. Saiki kita kudu ngonfigurasi repositori sing bakal dianyari ing commits menyang cabang master. Kanggo nindakake iki, pindhah menyang Setelan panyimpenan lan nyimpen nilai Webhook URL (kita bakal mbutuhake mengko nalika nyetel Tindakan Github):

    CI/CD ing Tindakan Github kanggo proyek Flask+Angular

  5. Ing lapangan Tindakan ing layar saka paragraf sadurunge, ketik skrip kanggo miwiti panyebaran:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    ing pundi:

    {REPOSITORY_ABSOLUTE_PATH} - path menyang folder prod saka repositori backend ing server;
    {ENV} - lingkungan (dev / prod), ing kasus kita prod;
    {DOCKER_REGISTRY_HOST} - host gudang docker kita
    {TG_BOT_TOKEN} - Token bot Telegram;
    {TG_CHAT_ID} - ID obrolan / saluran kanggo ngirim kabar.

    Tuladha skrip:

    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. Tambah pangguna saka langganan kita menyang grup Docker (supaya bisa ngatur wadhah):
    sudo usermod -aG docker helloworld_admin

Lingkungan dev kanggo repositori backend lan frontend diatur kanthi cara sing padha.

Pipa penyebaran ing Tindakan Github

Ayo pindhah menyang nyetel bagean pisanan saka pipa CI / CD ing Tindakan Github.

Backend

Pipa kasebut diterangake ing file deploy.yml.

Nanging sadurunge parsing, ayo ngisi variabel Rahasia sing dibutuhake ing Github. Kanggo nindakake iki, pindhah menyang Setelan -> Rahasia:

  • DOCKER_REGISTRY - host repositori Docker kita (docker.helloworld.ru);
  • DOCKER_LOGIN - mlebu menyang gudang Docker;
  • DOCKER_PASSWORD - sandi kanggo iku;
  • DEPLOY_HOST - host ing ngendi panel admin Plesk kasedhiya (umpamane: helloworld.com: 8443 utawa 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - token kanggo penyebaran prajurit menyang prod-gudang ing server (kita tak ing Penyebaran ing Plesk p. 4);
  • DEPLOY_BACK_DEV_TOKEN - token kanggo panyebaran menyang gudang dev ing server.

Proses penyebaran gampang lan kasusun saka telung langkah utama:

  • mbangun lan nerbitake gambar ing repositori kita;
  • mlaku tes ing wadhah adhedhasar gambar sing anyar dibangun;
  • penyebaran menyang lingkungan sing dikarepake gumantung ing cabang (dev / master).

frontend

File deploy.yml kanggo gudang ngarep sethitik beda saka Beck kang. Ora ana langkah karo tes sing mlaku lan ngganti jeneng token kanggo penyebaran. Rahasia kanggo repositori ngarep, kanthi cara, kudu diisi kanthi kapisah.

Persiyapan situs

Lalu lintas proxy liwat Nginx

Inggih, kita wis tekan pungkasan. Iku tetep mung kanggo ngatur proxying lalu lintas mlebu lan metu menyang wadhah kita liwat Nginx. Kita wis nutupi proses iki ing langkah 5 saka persiyapan Docker Registry. Bab sing padha kudu diulang kanggo bagian mburi lan ngarep ing lingkungan dev lan prod.

Aku bakal nyedhiyani gambar saka setelan.

Backend

CI/CD ing Tindakan Github kanggo proyek Flask+Angular

frontend

CI/CD ing Tindakan Github kanggo proyek Flask+Angular
klarifikasi penting. Kabeh URL bakal diproksi menyang wadhah frontend, kajaba sing diwiwiti /api/ - bakal diproksi menyang wadhah mburi (dadi ing wadhah mburi, kabeh pawang kudu miwiti karo /api/).

Hasil

Saiki situs kita kudu kasedhiya ing helloworld.ru lan dev.helloworld.ru (prod- lan dev-lingkungan, mungguh).

Secara total, kita sinau carane nyiyapake aplikasi sing prasaja ing Flask lan Angular lan nyiyapake pipa ing Tindakan Github kanggo muter menyang server sing mlaku Plesk.

Aku bakal duplikat pranala menyang repositori kanthi kode: mburi, ngarep.

Source: www.habr.com

Add a comment