CI / CD dina Github Actions pikeun proyék Flask + Angular

CI / CD dina Github Actions pikeun proyék Flask + Angular
Dina tulisan ieu, kuring bakal ngabagi pangalaman kuring pikeun nyetél CI / CD nganggo Panel Kontrol Plesk sareng Aksi Github. Dinten ieu kami bakal diajar kumaha carana nyebarkeun hiji proyék basajan kalawan ngaran uncomplicated "Helloworld". Hal ieu ditulis dina kerangka Flask Python, kalawan pagawe Seledri sarta sudut 8 frontend.

Tumbu ka repositories: tonggong, tungtung payun.

Dina bagian mimiti artikel, urang bakal kasampak di proyék urang jeung bagian na. Dina kadua, urang bakal terang kumaha nyetél Plesk sareng masang ekstensi sareng komponén anu diperyogikeun (DB, RabbitMQ, Redis, Docker, jsb.).

Dina bagian katilu, urang tungtungna bakal terang kumaha nyetél pipa pikeun nyebarkeun proyék kami ka server dina lingkungan dev sareng prod. Lajeng urang bakal ngajalankeun situs dina server.

Na enya, kuring poho ngenalkeun diri. Nami abdi Oleg Borzov, Abdi pamekar fullstack di tim CRM pikeun manajer KPR di Domclick.

Tinjauan proyék

Kahiji, hayu urang nempo dua repositories proyék - backend jeung hareup - sarta balik leuwih kode.

Backend: Flask + Seledri

Pikeun bagian tukang, abdi nyandak kebat anu cukup populer di kalangan pamekar Python: kerangka Flask (pikeun API) jeung Seledri (pikeun antrian tugas). SQLAchemy dipaké salaku ORM. Alembic dipaké pikeun migrasi. Pikeun validasi JSON di handles - Marshmallow.

В repositories aya file Readme.md kalawan pedaran lengkep ngeunaan struktur jeung parentah pikeun ngajalankeun proyek.

Web Bagian API cukup basajan, diwangun ku 6 pulpén:

  • /ping - pikeun pariksa kasadiaan;
  • handles pikeun pendaptaran, otorisasina, de-otorisasi sarta meunangkeun hiji pamaké otorisasi;
  • cecekelan email nu nempatkeun tugas dina antrian Seledri.

Bagian seledri malah gampang, aya ngan hiji masalah send_mail_task.

Dina folder /conf aya dua subfolder:

  • docker sareng dua Dockerfiles (base.dockerfile ngawangun gambar dasar jarang ngarobah na Dockerfile pikeun majelis utama);
  • .env_files - sareng file sareng variabel lingkungan pikeun lingkungan anu béda.

Aya opat file docker-compose dina akar proyék:

  • docker-compose.local.db.yml pikeun ngangkat database lokal pikeun pangwangunan;
  • docker-compose.local.workers.yml pikeun raising lokal tina worker, database, Redis na RabbitMQ;
  • docker-compose.test.yml pikeun ngajalankeun tés salila deployment;
  • docker-compose.yml pikeun deployment.

Sareng polder terakhir anu dipikaresep ku urang - .ci-cd. Éta ngandung skrip cangkang pikeun panyebaran:

  • deploy.sh - peluncuran migrasi jeung deployment. Dijalankeun dina server saatos ngawangun sareng ngajalankeun tés dina Github Actions;
  • rollback.sh - rollback wadahna ka versi saméméhna tina assembly;
  • curl_tg.sh - ngirim bewara panyebaran ka Telegram.

Frontend on Angular

Repository kalawan hareup leuwih basajan ti Beck urang. Bagian hareup diwangun ku tilu halaman:

  • Halaman utama kalayan formulir pikeun ngirim email sareng tombol kaluar.
  • Kaca login.
  • Kaca pendaptaran.

Kaca utama kasampak ascetic:

CI / CD dina Github Actions pikeun proyék Flask + Angular
Aya dua file dina akar Dockerfile и docker-compose.yml, kitu ogé folder akrab .ci-cd kalawan Aksara rada kurang ti dina Repository deui (dipiceun Aksara pikeun ngajalankeun tés).

Ngamimitian proyék di Plesk

Hayu urang mimitian ku nyetél Plesk sareng nyiptakeun langganan pikeun situs urang.

Masang ekstensi

Dina Plesk, urang peryogi opat ekstensi:

  • Docker pikeun ngatur sareng ningalikeun status wadahna dina panel admin Plesk;
  • Git pikeun ngonpigurasikeun léngkah deployment dina server;
  • Let's Encrypt pikeun ngahasilkeun (sareng otomatis-renew) sertipikat TLS gratis;
  • Firewall pikeun ngonpigurasikeun nyaring lalulintas asup.

Anjeun tiasa masang aranjeunna ngalangkungan panel admin Plesk dina bagian Ekstensi:

CI / CD dina Github Actions pikeun proyék Flask + Angular
Kami moal nganggap setélan lengkep pikeun ekstensi, setélan standar bakal dilakukeun pikeun tujuan demo kami.

Jieun langganan jeung situs

Salajengna, urang kedah ngadamel langganan pikeun halaman wéb helloworld.ru kami sareng nambihan subdomain dev.helloworld.ru di dinya.

  1. Jieun langganan pikeun domain helloworld.ru jeung tangtukeun login-sandi pikeun pamaké sistem:

    CI / CD dina Github Actions pikeun proyék Flask + Angular
    Pariksa kotak di handapeun kaca Ngamankeun domain kalawan Hayu urang Encryptupami urang hoyong nyetél HTTPS pikeun situs:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  2. Salajengna, dina langganan ieu, jieun subdomain dev.helloworld.ru (nu anjeun ogé tiasa ngaluarkeun sertipikat TLS gratis):

    CI / CD dina Github Actions pikeun proyék Flask + Angular

Masang Komponén Server

Simkuring boga server kalawan OS Debian Stretch 9.12 jeung panel kontrol dipasang Plesk Obsidian 18.0.27.

Urang kedah masang sareng ngonpigurasikeun pikeun proyék kami:

  • PostgreSQL (dina hal urang, bakal aya hiji server sareng dua basis data pikeun lingkungan dev sareng prod).
  • RabbitMQ (sarua, conto anu sami sareng vhosts anu béda pikeun lingkungan).
  • Dua instansi Redis (pikeun lingkungan dev sareng prod).
  • Docker Registry (pikeun neundeun lokal gambar Docker anu diwangun).
  • UI pikeun pendaptaran Docker.

PostgreSQL

Plesk parantos hadir sareng PostgreSQL DBMS, tapi sanés versi panganyarna (dina waktos nyerat Plesk Obsidian dirojong Vérsi Postgres 8.4–10.8). Kami hoyong versi panganyarna pikeun aplikasi kami (12.3 dina waktos tulisan ieu), janten kami bakal masang sacara manual.

Aya seueur petunjuk lengkep pikeun masang Postgres dina Debian dina jaring (conto), janten kuring moal ngajelaskeun sacara rinci, kuring ngan ukur masihan paréntah:

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

Nunjukkeun yén PostgreSQL gaduh setélan standar anu biasa-biasa waé, éta penting pikeun nyaluyukeun konfigurasi. Ieu bakal nulungan urang kalkulator: anjeun kudu ngajalankeun dina parameter tina server anjeun sarta ngaganti setélan dina file /etc/postgresql/12/main/postgresql.confka nu ditawarkeun. Perlu dicatet di dieu yén kalkulator sapertos kitu sanés pélor ajaib, sareng dasarna kedah disaluyukeun langkung tepat, dumasar kana hardware, aplikasi, sareng pajeulitna pamundut anjeun. Tapi ieu cukup pikeun ngamimitian.

Salian setélan anu diusulkeun ku kalkulator, kami ogé robih postgresql.confport standar 5432 ka anu sanés (dina conto urang - 53983).

Saatos ngarobih file konfigurasi, balikan deui postgresql-server kalayan paréntah:

service postgresql restart

Kami parantos dipasang sareng ngonpigurasikeun PostgreSQL. Ayeuna hayu urang nyieun database, pamaké pikeun dev- jeung prod-lingkungan, sarta méré hak pamaké pikeun 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

Kelenci MQ

Hayu urang teraskeun kana masang RabbitMQ, calo pesen pikeun Seledri. Masangna dina Debian cukup saderhana:

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

Saatos instalasi, urang kudu nyieun vhosts, pamaké sarta méré hak diperlukeun:

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

Ayeuna hayu urang pasang sareng konpigurasikeun komponén terakhir pikeun aplikasi urang - Redis. Ieu bakal dipaké salaku backend pikeun nyimpen hasil tugas Seledri.

Kami bakal ngangkat dua wadah Docker sareng Redis pikeun lingkungan dev sareng prod nganggo ekstensi Docker pikeun Plesk.

  1. Kami angkat ka Plesk, angkat ka bagian Ekstensi, milarian ekstensi Docker sareng pasang (urang peryogi versi gratis):

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  2. Pindah ka ekstensi anu dipasang, panggihan gambar ngalangkungan panéangan redis bitnami tur masang versi panganyarna:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  3. Kami lebet kana wadah anu diunduh sareng saluyukeun konfigurasi: sebutkeun port, ukuran RAM maksimal anu dialokasikeun, kecap akses dina variabel lingkungan, sareng pasang polumeu:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  4. Kami ngalaksanakeun léngkah 2-3 pikeun wadah prod, dina setélan kami ngan ukur ngarobih parameter: port, sandi, ukuran RAM sareng jalur ka polder volume dina server:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

Docker pendaptaran

Salian jasa dasar, éta hadé pikeun nempatkeun gudang gambar Docker anjeun sorangan dina server. Untungna, rohangan server ayeuna rada murah (pasti langkung mirah tibatan langganan DockerHub), sareng prosés nyetél gudang pribadi saderhana pisan.

Kami hoyong gaduh:

Jang ngalampahkeun ieu:

  1. Hayu urang ngadamel dua subdomain di Plesk dina langganan urang: docker.helloworld.ru sareng docker-ui.helloworld.ru, sareng konpigurasikeun sertipikat Hayu Encrypt pikeun aranjeunna.
  2. Tambahkeun file kana folder subdomain docker.helloworld.ru docker-compose.yml kalayan eusi sapertos kieu:
    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. Dina SSH, urang bakal ngahasilkeun file .htpasswd pikeun otorisasi Dasar dina gudang Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Kumpulkeun sareng angkat wadahna:
    docker-compose up -d
  5. Sareng urang kedah alihan Nginx kana wadah kami. Ieu bisa dilakukeun ngaliwatan Plesk.

Léngkah-léngkah ieu kedah dilakukeun pikeun subdomain docker.helloworld.ru sareng docker-ui.helloworld.ru:

bagean Alat Pakakas situs urang buka Aturan Proxy Docker:

CI / CD dina Github Actions pikeun proyék Flask + Angular
Sareng tambahkeun aturan pikeun proxy lalu lintas asup kana wadah kami:

CI / CD dina Github Actions pikeun proyék Flask + Angular

  1. Kami pariksa yén urang tiasa asup kana wadahna tina 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. Hayu urang ogé pariksa operasi subdomain docker-ui.helloworld.ru:

    CI / CD dina Github Actions pikeun proyék Flask + Angular
    Nalika anjeun ngaklik Browse repositories, browser bakal ningalikeun jandela otorisasi dimana anjeun kedah ngalebetkeun nami pangguna sareng kecap konci pikeun gudang. Saatos éta, urang bakal dialihkeun ka halaman anu gaduh daptar repositori (pikeun ayeuna, éta bakal kosong pikeun anjeun):

    CI / CD dina Github Actions pikeun proyék Flask + Angular

Muka palabuhan di Plesk firewall

Saatos masang sareng ngonpigurasikeun komponén, urang kedah muka palabuhan supados komponén tiasa diaksés tina wadah Docker sareng jaringan éksternal.

Hayu urang tingali kumaha ngalakukeun ieu nganggo ekstensi Firewall pikeun Plesk anu parantos dipasang sateuacana.

  1. Pindah ka Parabot & Setélan> Setélan> Firewall:
    CI / CD dina Github Actions pikeun proyék Flask + Angular
  2. Pindah ka Ngarobah Plesk Firewall Aturan> Tambahkeun Aturan Adat sareng buka palabuhan TCP di handap ieu pikeun subnet Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  3. Kami ogé bakal nambihan aturan anu bakal muka palabuhan PostgreSQL sareng panél manajemén RabbitMQ ka dunya luar:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  4. Larapkeun aturan nganggo tombol Apply Changes:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

Nyetél CI / CD dina Github Actions

Hayu urang turun ka bagian anu paling pikaresepeun - nyetél pipa integrasi kontinyu sareng ngirimkeun proyék urang ka server.

Pipa ieu bakal diwangun ku dua bagian:

  • ngawangun gambar sareng ngajalankeun tés (pikeun backend) - di sisi Github;
  • ngajalankeun migrasi (pikeun backend nu) sarta deploying peti - dina server.

Nyebarkeun ka Plesk

Hayu urang nungkulan titik kadua kahiji (sabab nu kahiji gumantung kana eta).

Kami bakal ngonpigurasikeun prosés panyebaran nganggo ekstensi Git pikeun Plesk.

Pertimbangkeun conto sareng lingkungan Prod pikeun gudang Backend.

  1. Kami angkat ka langganan halaman wéb Helloworld kami sareng angkat ka subseksi Git:

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  2. Selapkeun tautan kana gudang Github kami kana widang "Repositori Git Jauh" sareng robih polder standar httpdocs ka nu sejen (misalna. /httpdocs/hw_back):

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  3. Nyalin konci SSH Public ti hambalan saméméhna tur nambahan na dina setélan Github.
  4. Klik OK dina layar dina hambalan 2, nu satutasna urang bakal dialihkeun ka kaca Repository di Plesk. Ayeuna urang kedah ngonpigurasikeun Repository pikeun diropéa dina commits kana cabang master. Jang ngalampahkeun ieu, buka Setélan Repository tur nyimpen nilai Webhook URL (urang peryogi engké nalika nyetél Github Actions):

    CI / CD dina Github Actions pikeun proyék Flask + Angular

  5. Dina widang Aksi dina layar ti paragraf saméméhna, lebetkeun skrip pikeun ngajalankeun panyebaran:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    dimana:

    {REPOSITORY_ABSOLUTE_PATH} - jalur ka folder prod tina gudang backend dina server;
    {ENV} - lingkungan (dev / prod), dina kasus urang prod;
    {DOCKER_REGISTRY_HOST} - host tina gudang docker kami
    {TG_BOT_TOKEN} - Token bot Telegram;
    {TG_CHAT_ID} - ID obrolan / saluran pikeun ngirim bewara.

    conto naskah:

    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. Tambihkeun pangguna tina langganan kami ka grup Docker (supaya aranjeunna tiasa ngatur wadah):
    sudo usermod -aG docker helloworld_admin

Lingkungan dev pikeun gudang backend sareng frontend diatur dina cara anu sami.

Pipa deployment di Github Actions

Hayu urang teraskeun kana nyetél bagian kahiji tina pipa CI/CD kami di Github Actions.

Backend

Pipa dijelaskeun dina file deploy.yml.

Tapi sateuacan nga-parsing, hayu urang eusian variabel Rahasia anu urang peryogikeun dina Github. Jang ngalampahkeun ieu, buka Setélan -> Rahasia:

  • DOCKER_REGISTRY - host tina gudang Docker kami (docker.helloworld.ru);
  • DOCKER_LOGIN - login ka gudang Docker;
  • DOCKER_PASSWORD - sandi pikeun eta;
  • DEPLOY_HOST — host dimana panel admin Plesk sayogi (contona: helloworld.com: 8443 atawa 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - a token pikeun deployment ka prod-Repository on server (urang meunang eta di deployment di Plesk p. 4);
  • DEPLOY_BACK_DEV_TOKEN - token pikeun deployment ka Repository dev on server.

Prosés panyebaran saderhana sareng diwangun ku tilu léngkah utama:

  • ngawangun sareng nyebarkeun gambar dina gudang kami;
  • ngajalankeun tés dina wadah dumasar kana gambar anu nembe diwangun;
  • deployment ka lingkungan nu dipikahoyong gumantung kana cabangna (dev / master).

Tungtung payun

The deploy.yml file pikeun gudang hareup saeutik béda ti Beck urang. Ieu lacks undak kalawan ngajalankeun tés jeung ngarobah ngaran tokens pikeun deployment. Rahasia pikeun gudang hareup, ku jalan kitu, kudu dieusian nyalira.

Setélan situs

Proxying lalulintas ngaliwatan Nginx

Nya, urang parantos dugi ka tungtungna. Tetep ngan ukur pikeun ngonpigurasikeun proxying lalu lintas asup sareng kaluar kana wadahna kami ngalangkungan Nginx. Kami parantos nutupan prosés ieu dina léngkah 5 tina setélan Docker Registry. Hal anu sami kedah diulang pikeun bagian tukang sareng payun dina lingkungan dev sareng prod.

Kuring baris nyadiakeun Potret layar tina setélan.

Backend

CI / CD dina Github Actions pikeun proyék Flask + Angular

Tungtung payun

CI / CD dina Github Actions pikeun proyék Flask + Angular
klarifikasi penting. Kabéh URL bakal proxied kana wadah frontend, iwal nu dimimitian ku /api/ - aranjeunna bakal proxied kana wadahna deui (jadi dina wadah deui, sadaya pawang kudu mimitian ku /api/).

hasil

Ayeuna situs urang kedah sayogi di helloworld.ru sareng dev.helloworld.ru (prod- sareng dev-environments, masing-masing).

Dina total, urang diajar kumaha carana nyiapkeun aplikasi basajan dina Flask jeung Sudut tur nyetel pipa di Github Aksi pikeun gulung kaluar ka server ngajalankeun Plesk.

Kuring bakal duplikat Tumbu ka repositories kalawan kode: tonggong, tungtung payun.

sumber: www.habr.com

Tambahkeun komentar