CI/CD dalam Tindakan Github untuk projek Flask+Angular

CI/CD dalam Tindakan Github untuk projek Flask+Angular
Dalam artikel ini, saya akan berkongsi pengalaman saya menyediakan CI/CD menggunakan Panel Kawalan Plesk dan Tindakan Github. Hari ini kita akan belajar bagaimana untuk menggunakan projek mudah dengan nama yang tidak rumit "Helloworld". Ia ditulis dalam rangka kerja Flask Python, dengan pekerja Celery dan bahagian hadapan Angular 8.

Pautan ke repositori: hujung belakang, bahagian hadapan.

Pada bahagian pertama artikel, kami akan melihat projek kami dan bahagiannya. Dalam yang kedua, kami akan memikirkan cara untuk menyediakan Plesk dan memasang sambungan dan komponen yang diperlukan (DB, RabbitMQ, Redis, Docker, dll.).

Dalam bahagian ketiga, kami akhirnya akan memikirkan cara untuk menyediakan saluran paip untuk menggunakan projek kami ke pelayan dalam persekitaran pembangun dan prod. Dan kemudian kami akan melancarkan tapak pada pelayan.

Dan ya, saya terlupa untuk memperkenalkan diri saya. Nama saya Oleg Borzov, saya pembangun fullstack dalam pasukan CRM untuk pengurus gadai janji di Domclick.

Gambaran Keseluruhan Projek

Mula-mula, mari kita lihat dua repositori projek - bahagian belakang dan hadapan - dan semak kod tersebut.

Bahagian belakang: Kelalang+Saderi

Untuk bahagian belakang, saya mengambil sekumpulan yang agak popular di kalangan pembangun Python: rangka kerja Flask (untuk API) dan Celery (untuk baris gilir tugas). SQLAchemy digunakan sebagai ORM. Alembic digunakan untuk migrasi. Untuk pengesahan JSON dalam pemegang - Marshmallow.

Π’ repositori terdapat fail Readme.md dengan penerangan terperinci tentang struktur dan arahan untuk menjalankan projek.

API Bahagian Web agak tidak rumit, terdiri daripada 6 pen:

  • /ping - untuk menyemak ketersediaan;
  • mengendalikan untuk pendaftaran, kebenaran, pembatalan kebenaran dan mendapatkan pengguna yang dibenarkan;
  • pemegang e-mel yang meletakkan tugasan dalam baris gilir Saderi.

Bahagian saderi lebih mudah, hanya ada satu masalah send_mail_task.

Dalam folder / konf terdapat dua subfolder:

  • docker dengan dua fail Docker (base.dockerfile untuk membina imej asas yang jarang berubah dan Dockerfile untuk perhimpunan utama);
  • .env_files - dengan fail dengan pembolehubah persekitaran untuk persekitaran yang berbeza.

Terdapat empat fail docker-compose pada akar projek:

  • docker-compose.local.db.yml untuk meningkatkan pangkalan data tempatan untuk pembangunan;
  • docker-compose.local.workers.yml untuk peningkatan tempatan pekerja, pangkalan data, Redis dan RabbitMQ;
  • docker-compose.test.yml untuk menjalankan ujian semasa penggunaan;
  • docker-compose.yml untuk penempatan.

Dan folder terakhir yang kami minati - .ci-cd. Ia mengandungi skrip shell untuk penggunaan:

  • deploy.sh β€” pelancaran migrasi dan penempatan. Berjalan pada pelayan selepas membina dan menjalankan ujian dalam Tindakan Github;
  • rollback.sh - pemulangan bekas ke versi pemasangan sebelumnya;
  • curl_tg.sh - menghantar pemberitahuan penempatan ke Telegram.

Bahagian hadapan pada Sudut

Repositori dengan bahagian hadapan lebih mudah daripada Beck. Bahagian hadapan terdiri daripada tiga muka surat:

  • Halaman utama dengan borang untuk menghantar e-mel dan butang keluar.
  • Halaman log masuk.
  • Halaman pendaftaran.

Halaman utama kelihatan bertapa:

CI/CD dalam Tindakan Github untuk projek Flask+Angular
Terdapat dua fail di root Dockerfile ΠΈ docker-compose.yml, serta folder biasa .ci-cd dengan skrip yang lebih sedikit daripada di repositori belakang (skrip dialih keluar untuk menjalankan ujian).

Memulakan projek di Plesk

Mari kita mulakan dengan menyediakan Plesk dan membuat langganan untuk tapak kami.

Memasang sambungan

Dalam Plesk, kami memerlukan empat sambungan:

  • Docker untuk mengurus dan memaparkan secara visual status bekas dalam panel pentadbir Plesk;
  • Git untuk mengkonfigurasi langkah penggunaan pada pelayan;
  • Let's Encrypt untuk menjana (dan memperbaharui secara automatik) sijil TLS percuma;
  • Firewall untuk mengkonfigurasi penapisan trafik masuk.

Anda boleh memasangnya melalui panel pentadbir Plesk dalam bahagian Sambungan:

CI/CD dalam Tindakan Github untuk projek Flask+Angular
Kami tidak akan mempertimbangkan tetapan terperinci untuk sambungan, tetapan lalai akan dilakukan untuk tujuan demo kami.

Buat langganan dan tapak

Seterusnya, kami perlu membuat langganan untuk tapak web helloworld.ru kami dan menambah subdomain dev.helloworld.ru di sana.

  1. Buat langganan untuk domain helloworld.ru dan nyatakan kata laluan log masuk untuk pengguna sistem:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular
    Tandai kotak di bahagian bawah halaman Lindungi domain dengan Let's Encryptjika kami ingin menyediakan HTTPS untuk tapak:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  2. Seterusnya, dalam langganan ini, cipta subdomain dev.helloworld.ru (yang mana anda juga boleh mengeluarkan sijil TLS percuma):

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

Memasang Komponen Pelayan

Kami mempunyai pelayan dengan OS Debian Regangan 9.12 dan panel kawalan yang dipasang Plesk Obsidian 18.0.27.

Kami perlu memasang dan mengkonfigurasi untuk projek kami:

  • PostgreSQL (dalam kes kami, akan ada satu pelayan dengan dua pangkalan data untuk persekitaran dev dan prod).
  • RabbitMQ (sama, contoh yang sama dengan vhost yang berbeza untuk persekitaran).
  • Dua contoh Redis (untuk persekitaran dev dan prod).
  • Pendaftaran Docker (untuk storan tempatan imej Docker terbina).
  • UI untuk pendaftaran Docker.

PostgreSQL

Plesk sudah disertakan dengan DBMS PostgreSQL, tetapi bukan versi terkini (pada masa penulisan Plesk Obsidian disokong Postgres versi 8.4–10.8). Kami mahukan versi terkini untuk aplikasi kami (12.3 pada masa penulisan ini), jadi kami akan memasangnya secara manual.

Arahan terperinci tentang cara memasang Postgres pada Debian terdapat banyak di internet (contoh), jadi saya tidak akan menerangkannya secara terperinci, saya hanya akan memberikan arahan:

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

Memandangkan PostgreSQL mempunyai tetapan lalai yang agak biasa-biasa saja, adalah perlu untuk membetulkan konfigurasi. Ini akan membantu kita kalkulator: anda perlu memandu dalam parameter pelayan anda dan menggantikan tetapan dalam fail /etc/postgresql/12/main/postgresql.confkepada yang ditawarkan. Perlu diingatkan di sini bahawa kalkulator sedemikian bukanlah peluru ajaib, dan pangkalannya harus ditala dengan lebih tepat, berdasarkan perkakasan, aplikasi dan kerumitan pertanyaan anda. Tetapi ini sudah cukup untuk bermula.

Sebagai tambahan kepada tetapan yang dicadangkan oleh kalkulator, kami juga menukarnya postgresql.confport lalai 5432 kepada yang lain (dalam contoh kami - 53983).

Selepas menukar fail konfigurasi, mulakan semula postgresql-server dengan arahan:

service postgresql restart

Kami telah memasang dan mengkonfigurasi PostgreSQL. Sekarang mari kita cipta pangkalan data, pengguna untuk persekitaran dev dan prod, dan berikan hak kepada pengguna untuk mengurus pangkalan data:

$ 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

Mari kita teruskan dengan memasang RabbitMQ, broker mesej untuk Celery. Ia dipasang pada Debian Ia agak mudah:

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

Selepas pemasangan, kita perlu membuat vhosts, pengguna dan berikan hak yang diperlukan:

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

Sekarang mari pasang dan konfigurasikan komponen terakhir untuk aplikasi kami - Redis. Ia akan digunakan sebagai bahagian belakang untuk menyimpan hasil tugasan Saderi.

Kami akan menaikkan dua bekas Docker dengan Redis untuk persekitaran dev dan prod menggunakan sambungan Docker untuk Plesk.

  1. Kami pergi ke Plesk, pergi ke bahagian Sambungan, cari sambungan Docker dan pasangkannya (kami memerlukan versi percuma):

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  2. Pergi ke sambungan yang dipasang, cari imej melalui carian redis bitnami dan pasang versi terkini:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  3. Kami masuk ke dalam bekas yang dimuat turun dan laraskan konfigurasi: tentukan port, saiz RAM maksimum yang diperuntukkan, kata laluan dalam pembolehubah persekitaran, dan lekapkan volum:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  4. Kami melakukan langkah 2-3 untuk bekas prod, dalam tetapan kami hanya menukar parameter: port, kata laluan, saiz RAM dan laluan ke folder volum pada pelayan:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

Pendaftaran Docker

Sebagai tambahan kepada perkhidmatan asas, adalah baik untuk meletakkan repositori imej Docker anda sendiri pada pelayan. Nasib baik, ruang pelayan kini agak murah (tentunya lebih murah daripada langganan DockerHub), dan proses menyediakan repositori peribadi adalah sangat mudah.

Kami ingin mempunyai:

Untuk melakukan ini:

  1. Mari buat dua subdomain dalam Plesk dalam langganan kami: docker.helloworld.ru dan docker-ui.helloworld.ru, dan konfigurasikan sijil Mari Sulitkan untuk mereka.
  2. Tambahkan fail pada folder subdomain docker.helloworld.ru docker-compose.yml dengan kandungan seperti ini:
    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. Di bawah SSH, kami akan menjana fail .htpasswd untuk kebenaran Asas dalam repositori Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Kumpul dan angkat bekas:
    docker-compose up -d
  5. Dan kami perlu mengubah hala Nginx ke bekas kami. Ini boleh dilakukan melalui Plesk.

Langkah berikut perlu dilakukan untuk subdomain docker.helloworld.ru dan docker-ui.helloworld.ru:

Dalam seksyen Alat Dev laman web kami pergi ke Peraturan Proksi Docker:

CI/CD dalam Tindakan Github untuk projek Flask+Angular
Dan tambahkan peraturan pada proksi trafik masuk ke bekas kami:

CI/CD dalam Tindakan Github untuk projek Flask+Angular

  1. Kami menyemak sama ada kami boleh log masuk ke bekas kami dari mesin tempatan:
    $ 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. Mari kita semak operasi subdomain docker-ui.helloworld.ru:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular
    Apabila anda mengklik pada Semak imbas repositori, penyemak imbas akan memaparkan tetingkap kebenaran di mana anda perlu memasukkan nama pengguna dan kata laluan untuk repositori. Selepas itu, kami akan dipindahkan ke halaman dengan senarai repositori (buat masa ini, ia akan kosong untuk anda):

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

Membuka port dalam Plesk Firewall

Selepas memasang dan mengkonfigurasi komponen, kita perlu membuka port supaya komponen boleh diakses daripada bekas Docker dan rangkaian luaran.

Mari lihat cara melakukan ini menggunakan sambungan Firewall untuk Plesk yang kami pasang sebelum ini.

  1. Pergi ke Alat & Tetapan > Tetapan > Firewall:
    CI/CD dalam Tindakan Github untuk projek Flask+Angular
  2. Pergi ke Ubah suai Peraturan Tembok Api Plesk > Tambah Peraturan Tersuai dan buka port TCP berikut untuk subnet Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  3. Kami juga akan menambah peraturan yang akan membuka port PostgreSQL dan panel pengurusan RabbitMQ ke dunia luar:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  4. Gunakan peraturan menggunakan butang Guna Perubahan:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

Menyediakan CI/CD dalam Tindakan Github

Mari kita turun ke bahagian yang paling menarik - menyediakan saluran paip penyepaduan berterusan dan menghantar projek kami ke pelayan.

Saluran paip ini akan terdiri daripada dua bahagian:

  • membina imej dan menjalankan ujian (untuk bahagian belakang) - di sebelah Github;
  • menjalankan migrasi (untuk bahagian belakang) dan menggunakan bekas - pada pelayan.

Sebarkan ke Plesk

Mari kita berurusan dengan perkara kedua dahulu (kerana yang pertama bergantung padanya).

Kami akan mengkonfigurasi proses penempatan menggunakan sambungan Git untuk Plesk.

Pertimbangkan contoh dengan persekitaran Prod untuk repositori Backend.

  1. Kami pergi ke langganan laman web Helloworld kami dan pergi ke subseksyen Git:

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  2. Masukkan pautan ke repositori Github kami ke dalam medan "Repositori Git Jauh" dan tukar folder lalai httpdocs kepada yang lain (cth. /httpdocs/hw_back):

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  3. Salin kunci Awam SSH dari langkah sebelumnya dan Tambah dalam tetapan Github.
  4. Klik OK pada skrin dalam langkah 2, selepas itu kami akan dialihkan ke halaman repositori di Plesk. Sekarang kita perlu mengkonfigurasi repositori untuk dikemas kini pada komit ke cawangan induk. Untuk melakukan ini, pergi ke Tetapan Repositori dan simpan nilai Webhook URL (kami akan memerlukannya kemudian apabila menyediakan Tindakan Github):

    CI/CD dalam Tindakan Github untuk projek Flask+Angular

  5. Dalam medan Tindakan pada skrin daripada perenggan sebelumnya, masukkan skrip untuk melancarkan penggunaan:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    di mana:

    {REPOSITORY_ABSOLUTE_PATH} - laluan ke folder prod repositori bahagian belakang pada pelayan;
    {ENV} - persekitaran (dev / prod), dalam kes kami prod;
    {DOCKER_REGISTRY_HOST} - hos repositori buruh pelabuhan kami
    {TG_BOT_TOKEN} β€” Token bot Telegram;
    {TG_CHAT_ID} β€” ID sembang/saluran untuk menghantar pemberitahuan.

    Contoh 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. Tambahkan pengguna daripada langganan kami ke kumpulan Docker (supaya mereka boleh mengurus bekas):
    sudo usermod -aG docker helloworld_admin

Persekitaran dev untuk repositori bahagian belakang dan bahagian hadapan disediakan dengan cara yang sama.

Saluran paip penggunaan dalam Tindakan Github

Mari kita teruskan untuk menyediakan bahagian pertama saluran paip CI/CD kami dalam Tindakan Github.

Backend

Saluran paip diterangkan dalam fail deploy.yml.

Tetapi sebelum menghuraikannya, mari kita isikan pembolehubah Rahsia yang kita perlukan dalam Github. Untuk melakukan ini, pergi ke Tetapan -> Rahsia:

  • DOCKER_REGISTRY - hos repositori Docker kami (docker.helloworld.ru);
  • DOCKER_LOGIN - log masuk ke repositori Docker;
  • DOCKER_PASSWORD - kata laluan kepadanya;
  • DEPLOY_HOST β€” hos di mana panel pentadbir Plesk tersedia (contoh: helloworld.com: 8443 atau 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - token untuk penempatan ke repositori prod pada pelayan (kami mendapatnya dalam Deployment dalam Plesk ms 4);
  • DEPLOY_BACK_DEV_TOKEN - token untuk penempatan ke repositori dev pada pelayan.

Proses penyebaran adalah mudah dan terdiri daripada tiga langkah utama:

  • membina dan menerbitkan imej dalam repositori kami;
  • menjalankan ujian dalam bekas berdasarkan imej yang baru dibina;
  • penempatan ke persekitaran yang dikehendaki bergantung pada cawangan (dev/master).

Frontend

Fail deploy.yml untuk repositori hadapan sedikit berbeza daripada Beck. Ia tidak mempunyai langkah dengan menjalankan ujian dan menukar nama token untuk penggunaan. Rahsia untuk repositori hadapan, dengan cara itu, perlu diisi secara berasingan.

Penyediaan laman web

Memproksi trafik melalui Nginx

Nah, kita sudah sampai ke penghujungnya. Ia kekal hanya untuk mengkonfigurasi proksi trafik masuk dan keluar ke bekas kami melalui Nginx. Kami telah membincangkan proses ini dalam titik 5 persediaan Pendaftaran Docker. Perkara yang sama harus diulang untuk bahagian belakang dan hadapan dalam persekitaran dev dan prod.

Saya akan memberikan tangkapan skrin tetapan.

Backend

CI/CD dalam Tindakan Github untuk projek Flask+Angular

Frontend

CI/CD dalam Tindakan Github untuk projek Flask+Angular
Penjelasan penting. Semua URL akan diproksikan ke bekas bahagian hadapan, kecuali yang bermula dengan /api/ - mereka akan diproksikan ke bekas belakang (jadi dalam bekas belakang, semua pengendali mesti bermula dengan /api/).

Keputusan

Kini tapak kami sepatutnya tersedia di helloworld.ru dan dev.helloworld.ru (masing-masing prod dan dev-environment).

Secara keseluruhan, kami mempelajari cara menyediakan aplikasi mudah dalam Flask dan Angular dan menyediakan saluran paip dalam Tindakan Github untuk melancarkannya ke pelayan yang menjalankan Plesk.

Saya akan menduplikasi pautan ke repositori dengan kod: hujung belakang, bahagian hadapan.

Sumber: www.habr.com

Beli pengehosan yang boleh dipercayai untuk tapak dengan perlindungan DDoS, pelayan VPS VDS πŸ”₯ Beli pengehosan laman web yang boleh dipercayai dengan perlindungan DDoS, pelayan VPS VDS | ProHoster