Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
Бұл мақалада мен Plesk басқару тақтасын және Github әрекеттерін пайдаланып CI/CD орнату тәжірибеммен бөлісемін. Бүгін біз «Helloworld» атымен қарапайым жобаны қалай орналастыру керектігін үйренеміз. Ол Flask Python шеңберінде жазылған, балдыркөк жұмысшылары және Angular 8 фронтенді.

Репозиторийлерге сілтемелер: сервер, алғы жақ.

Мақаланың бірінші бөлігінде біз жобамызды және оның бөліктерін қарастырамыз. Екіншіден, біз Plesk-ті қалай орнату керектігін және қажетті кеңейтімдер мен компоненттерді (DB, RabbitMQ, Redis, Docker және т.б.) орнатуды анықтаймыз.

Үшінші бөлімде біз жобамызды әзірлеуші ​​және өнім ортасындағы серверге орналастыру үшін құбырды қалай орнату керектігін анықтаймыз. Содан кейін серверде сайтты іске қосамыз.

Иә, мен өзімді таныстыруды ұмытып кетіппін. Менің атым Олег Борзов, мен Domclick-тегі ипотекалық менеджерлерге арналған CRM командасының толық әзірлеушісімін.

жоба шолу

Алдымен, жобаның екі репозиторийін қарастырайық - сервер және фронт - және кодты қарастырайық.

Backend: Колба+Сельдерей

Артқы бөлік үшін мен Python әзірлеушілері арасында өте танымал топтаманы алдым: Flask құрылымы (API үшін) және балдыркөк (тапсырма кезегі үшін). SQLAchemy ORM ретінде пайдаланылады. Алембик көші-қон үшін қолданылады. Дескриптордағы JSON тексеруі үшін - Marshmallow.

В репозиторийлер құрылымның толық сипаттамасы және жобаны іске қосу нұсқаулары бар Readme.md файлы бар.

Web Part API өте қарапайым, 6 қаламнан тұрады:

  • /ping - қолжетімділігін тексеру;
  • тіркеу, авторизациялау, авторизациядан шығару және уәкілетті пайдаланушыны алуды жүзеге асырады;
  • Балдыркөк кезегіне тапсырма қоятын электрондық пошта дескрипті.

Балдыркөк бөлігі одан да оңай, бір ғана мәселе бар send_mail_task.

Қалтада /conf екі ішкі қалта бар:

  • docker екі Докер файлымен (base.dockerfile сирек өзгеретін негізгі кескінді құру және Dockerfile негізгі жинақтар үшін);
  • .env_files - әртүрлі орталарға арналған орта айнымалылары бар файлдармен.

Жобаның түбірінде төрт докер құрастыратын файл бар:

  • docker-compose.local.db.yml дамыту үшін жергілікті деректер базасын құру;
  • docker-compose.local.workers.yml жергілікті жұмысшыны көтеру үшін, дерекқор, Redis және RabbitMQ;
  • docker-compose.test.yml орналастыру кезінде сынақтарды жүргізу;
  • docker-compose.yml орналастыру үшін.

Бізді қызықтыратын соңғы қалта - .ci-cd. Ол орналастыруға арналған қабық сценарийлерін қамтиды:

  • deploy.sh — көші-қонды іске қосу және орналастыру. Github әрекеттерінде сынақтарды құрастырып, іске қосқаннан кейін серверде іске қосылады;
  • rollback.sh - контейнерлерді құрастырудың алдыңғы нұсқасына қайтару;
  • curl_tg.sh - Telegram-ға орналастыру туралы хабарламаларды жіберу.

Бұрыштық бет

Алдыңғы жағы бар репозиторий Бекке қарағанда әлдеқайда қарапайым. Алдыңғы бет үш беттен тұрады:

  • Электрондық поштаны жіберу пішіні және шығу түймесі бар басты бет.
  • Жүйеге кіру беті.
  • Тіркеу парағы.

Негізгі бет аскеттік көрінеді:

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
Түбірде екі файл бар Dockerfile и docker-compose.yml, сонымен қатар таныс қалта .ci-cd артқы репозиторийге қарағанда сәл аз сценарийлермен (тесттерді орындау үшін жойылған сценарийлер).

Plesk-те жобаны бастау

Plesk орнатудан және біздің сайтқа жазылуды жасаудан бастайық.

Кеңейтімдерді орнату

Plesk-те бізге төрт кеңейтім қажет:

  • Docker Plesk басқару панелінде контейнерлердің күйін басқару және визуалды түрде көрсету;
  • Git серверде орналастыру қадамын конфигурациялау үшін;
  • Let's Encrypt тегін TLS сертификаттарын жасау (және автоматты түрде жаңарту);
  • Firewall кіріс трафикті сүзуді конфигурациялау үшін.

Оларды кеңейтімдер бөліміндегі Plesk басқару тақтасы арқылы орнатуға болады:

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
Біз кеңейтімдердің егжей-тегжейлі параметрлерін қарастырмаймыз, әдепкі параметрлер біздің демонстрациялық мақсаттарымыз үшін орындалады.

Жазылым мен сайт жасаңыз

Әрі қарай, helloworld.ru веб-сайтына жазылым жасап, dev.helloworld.ru қосалқы доменін қосуымыз керек.

  1. helloworld.ru доменіне жазылым жасаңыз және жүйе пайдаланушысы үшін логин-парольді көрсетіңіз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
    Беттің төменгі жағындағы құсбелгіні қойыңыз Let's Encrypt көмегімен доменді қорғаңызегер біз сайт үшін HTTPS орнатқымыз келсе:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  2. Әрі қарай, осы жазылымда dev.helloworld.ru қосалқы доменін жасаңыз (ол үшін сіз тегін TLS сертификатын да бере аласыз):

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Сервер құрамдастарын орнату

Бізде сервер бар OS Debian Stretch 9.12 және орнатылған басқару тақтасы Plesk Obsidian 18.0.27.

Бізге жобамыз үшін орнату және конфигурациялау қажет:

  • PostgreSQL (біздің жағдайда әзірлеу және өнім орталарына арналған екі дерекқоры бар бір сервер болады).
  • RabbitMQ (орталар үшін әртүрлі вхосттары бар бірдей, бірдей данасы).
  • Екі Redis данасы (әзірлеуші ​​және өнім орталары үшін).
  • Docker Registry (құрылған Docker кескіндерін жергілікті сақтау үшін).
  • Docker тізіліміне арналған UI.

PostgreSQL

Plesk PostgreSQL ДҚБЖ-мен бірге келеді, бірақ соңғы нұсқасы емес (Plesk Obsidian жазу кезінде) қолдау көрсетті Postgres нұсқалары 8.4–10.8). Қолданбамыздың соңғы нұсқасын қалаймыз (осы жазу кезінде 12.3), сондықтан оны қолмен орнатамыз.

Желіде Postgres-ті Debian-ға орнату бойынша көптеген егжей-тегжейлі нұсқаулар бар (мысал), сондықтан мен оларды егжей-тегжейлі сипаттамаймын, мен тек командаларды беремін:

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

PostgreSQL-де әдепкі параметрлері орташа екенін ескере отырып, конфигурацияны түзету қажет. Бұл бізге көмектеседі калькулятор: серверіңіздің параметрлерін жүргізіп, файлдағы параметрлерді ауыстыруыңыз керек /etc/postgresql/12/main/postgresql.confұсынылғандарға. Бұл жерде айта кету керек, мұндай калькуляторлар сиқырлы оқ емес, база сіздің аппараттық құралыңызға, қолданбаңызға және сұраудың күрделілігіне қарай дәлірек реттелуі керек. Бірақ бұл бастау үшін жеткілікті.

Калькулятор ұсынған параметрлерден басқа, біз де өзгертеміз postgresql.confәдепкі порт 5432 басқасына (біздің мысалда - 53983).

Конфигурация файлын өзгерткеннен кейін, postgresql-серверін келесі пәрменмен қайта іске қосыңыз:

service postgresql restart

Біз PostgreSQL орнаттық және конфигурацияладық. Енді дерекқорды, әзірлеуші ​​​​және өнім орталары үшін пайдаланушыларды жасайық және пайдаланушыларға дерекқорды басқару құқығын берейік:

$ 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

Қоян MQ

RabbitMQ орнатуға көшейік, балдыркөк үшін хабар брокер. Оны 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

Орнатқаннан кейін біз жасауымыз керек вхосттар, пайдаланушыларға және қажетті құқықтарды беруге:

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. Ол балдыркөк тапсырмаларының нәтижелерін сақтау үшін сервер ретінде пайдаланылады.

Кеңейтімді пайдаланып әзірлеу және өнім орталарына арналған Redis көмегімен екі Docker контейнерін көтереміз Docker Plesk үшін.

  1. Біз Plesk-ке барамыз, «Кеңейтімдер» бөліміне өтіп, Docker кеңейтімін іздеп, оны орнатамыз (бізге тегін нұсқа қажет):

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  2. Орнатылған кеңейтімге өтіңіз, іздеу арқылы суретті табыңыз redis bitnami және соңғы нұсқаны орнатыңыз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  3. Біз жүктеп алынған контейнерге кіріп, конфигурацияны реттейміз: портты, ең үлкен бөлінген жедел жад өлшемін, қоршаған ортаның айнымалы мәндеріндегі құпия сөзді көрсетіңіз және дыбыс деңгейін орнатыңыз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  4. Біз өнім контейнері үшін 2-3 қадамдарды орындаймыз, параметрлерде біз тек параметрлерді өзгертеміз: порт, құпия сөз, ЖЖҚ өлшемі және сервердегі дыбыс қалтасына жол:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Docker тізілімі

Негізгі қызметтерге қоса, серверге өзіңіздің Docker кескіндер репозиторийіңізді қойсаңыз жақсы болар еді. Бақытымызға орай, сервер кеңістігі қазір айтарлықтай арзан (DockerHub жазылымынан арзанырақ) және жеке репозиторийді орнату процесі өте қарапайым.

Бізге ие болғымыз келеді:

  • ішкі доменде қол жетімді құпия сөзбен қорғалған Docker репозиторийі https://docker.helloworld.ru;
  • Репозиторийдегі кескіндерді көруге арналған UI, мына мекенжайда қолжетімді https://docker-ui.helloworld.ru.

Осыған:

  1. Жазылымымызда Plesk-те екі қосалқы домен жасайық: docker.helloworld.ru және docker-ui.helloworld.ru және олар үшін Let's Encrypt сертификаттарын конфигурациялаңыз.
  2. Файлды docker.helloworld.ru ішкі домен қалтасына қосыңыз docker-compose.yml келесідей мазмұнмен:
    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. SSH астында біз Docker репозиторийінде Негізгі авторизация үшін .htpasswd файлын жасаймыз:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Контейнерлерді жинау және көтеру:
    docker-compose up -d
  5. Біз Nginx-ті контейнерлерімізге қайта бағыттауымыз керек. Мұны Plesk арқылы жасауға болады.

docker.helloworld.ru және docker-ui.helloworld.ru ішкі домендері үшін келесі қадамдарды орындау қажет:

бөлім Құрал-саймандар біздің сайтқа өтіңіз Docker прокси ережелері:

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
Біздің контейнерге келетін трафикті проксиге жіберуге ереже қосыңыз:

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  1. Біз контейнерге жергілікті құрылғыдан кіре алатынымызды тексереміз:
    $ 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. Сондай-ақ docker-ui.helloworld.ru қосалқы доменінің жұмысын тексерейік:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
    Репозиторийлерді шолу түймешігін басқан кезде браузер авторизация терезесін көрсетеді, онда репозиторийдің пайдаланушы аты мен құпия сөзін енгізу қажет болады. Осыдан кейін біз репозитарийлер тізімі бар бетке ауысамыз (әзірше ол сіз үшін бос болады):

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Plesk брандмауэрінде порттарды ашу

Құрамдастарды орнатып, конфигурациялаған соң, компоненттерге Docker контейнерлерінен және сыртқы желіден қол жеткізуге болатындай порттарды ашу керек.

Мұны біз бұрын орнатқан Plesk үшін брандмауэр кеңейтімін пайдаланып қалай жасау керектігін көрейік.

  1. Бару Құралдар және параметрлер > Параметрлер > Брандмауэр:
    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
  2. Бару Plesk брандмауэр ережелерін өзгерту > Теңшелетін ережені қосу және Docker ішкі желісі үшін келесі TCP порттарын ашыңыз (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  3. Сондай-ақ біз PostgreSQL порттары мен RabbitMQ басқару панелдерін сыртқы әлемге ашатын ережені қосамыз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  4. Өзгерістерді қолдану түймешігін пайдаланып ережелерді қолданыңыз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Github әрекеттерінде CI/CD орнату

Ең қызықты бөлікке көшейік - үздіксіз интеграциялық құбырды орнату және жобамызды серверге жеткізу.

Бұл құбыр екі бөліктен тұрады:

  • кескінді құру және сынақтарды орындау (бэкленд үшін) - Github жағында;
  • тасымалдауларды іске қосу (бағдарлама үшін) және контейнерлерді орналастыру - серверде.

Plesk-ке орналастырыңыз

Алдымен екінші тармақпен айналысайық (өйткені біріншісі соған байланысты).

Plesk үшін Git кеңейтімін пайдаланып орналастыру процесін конфигурациялаймыз.

Backend репозиторийіне арналған Prod ортасы бар мысалды қарастырыңыз.

  1. Біз Helloworld веб-сайтымыздың жазылымына өтіп, Git бөліміне өтеміз:

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  2. Біздің Github репозиторийіне сілтемені «Қашықтағы Git репозиторийі» өрісіне енгізіп, әдепкі қалтаны өзгертіңіз. httpdocs басқасына (мысалы. /httpdocs/hw_back):

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  3. Алдыңғы қадамнан SSH ашық кілтін көшіріңіз және қосу ол Github параметрлерінде.
  4. 2-қадамда экранда OK түймесін басыңыз, содан кейін біз Plesk репозиторий бетіне қайта бағытталамыз. Енді біз репозиторийді негізгі тармаққа міндеттемелерде жаңартылатын етіп конфигурациялауымыз керек. Мұны істеу үшін өтіңіз Репозиторий параметрлері және мәнді сақтаңыз Webhook URL (бұл бізге кейінірек Github әрекеттерін орнату кезінде қажет болады):

    Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

  5. Алдыңғы абзацтағы экрандағы Әрекеттер өрісіне орналастыруды іске қосу үшін сценарийді енгізіңіз:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    мұнда:

    {REPOSITORY_ABSOLUTE_PATH} - сервердегі серверлік репозиторийдің өнім қалтасына жол;
    {ENV} - орта (dev / prod), біздің жағдайда prod;
    {DOCKER_REGISTRY_HOST} - біздің докер репозиторийінің хосты
    {TG_BOT_TOKEN} — Telegram ботының таңбалауышы;
    {TG_CHAT_ID} — Хабарландыруларды жіберуге арналған чат/арна идентификаторы.

    Сценарий мысалы:

    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. Біз жазылымымыздан пайдаланушыны Docker тобына қосамыз (ол контейнерлерді басқара алатындай):
    sudo usermod -aG docker helloworld_admin

Сервер репозиторийіне арналған әзірлеуші ​​​​ортасы және алдыңғы интерфейс бірдей жолмен орнатылады.

Github әрекеттерінде орналастыру құбыры

Github әрекеттерінде CI/CD құбырының бірінші бөлігін орнатуға көшейік.

Тетік бағдарламасы

Құбырда сипатталған deploy.yml файлы.

Бірақ оны талдаудан бұрын Github-та бізге қажет құпия айнымалыларды толтырайық. Мұны істеу үшін өтіңіз Параметрлер -> Құпиялар:

  • DOCKER_REGISTRY - біздің Docker репозиторийінің хосты (docker.helloworld.ru);
  • DOCKER_LOGIN - Docker репозиторийіне кіру;
  • DOCKER_PASSWORD - оған құпия сөз;
  • DEPLOY_HOST — Plesk басқару тақтасы қолжетімді хост (мысалы: helloworld.com: 8443 немесе 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - сервердегі прод-репозиторийге орналастыруға арналған таңбалауыш (біз оны Plesk-те орналастыруда 4-бетте алдық);
  • DEPLOY_BACK_DEV_TOKEN - сервердегі әзірлеуші ​​репозиторийге орналастыруға арналған таңбалауыш.

Орналастыру процесі қарапайым және үш негізгі қадамнан тұрады:

  • біздің репозиторийдегі суретті құру және жариялау;
  • жаңадан салынған кескінге негізделген контейнерде сынақтарды жүргізу;
  • тармаққа (dev/master) байланысты қалаған ортаға орналастыру.

Алғы жақ

Алдыңғы репозиторийге арналған deploy.yml файлы Бектен айырмашылығы шамалы. Оған сынақтарды орындау қадамы жоқ және орналастыру үшін таңбалауыштардың атауларын өзгертеді. Алдыңғы репозиторийге арналған құпияларды, айтпақшы, бөлек толтыру керек.

Сайтты реттеу

Nginx арқылы прокси трафик

Міне, біз соңына жеттік. Nginx арқылы біздің контейнерге кіріс және шығыс трафиктің проксиін конфигурациялау ғана қалады. Біз бұл процесті Docker Registry орнатуының 5-қадамында қарастырдық. Әзірлеуші ​​және өнім орталарындағы артқы және алдыңғы бөліктер үшін де солай қайталануы керек.

Мен параметрлердің скриншоттарын беремін.

Тетік бағдарламасы

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD

Алғы жақ

Flask+Angular жобасына арналған Github әрекеттеріндегі CI/CD
Маңызды түсініктеме. деп басталатындардан басқа, барлық URL мекенжайлары фронтондық контейнерге проксиденеді /api/ - олар артқы контейнерге прокси болады (сондықтан артқы контейнерде барлық өңдеушілер мынадан бастау керек /api/).

Нәтижелері

Енді біздің сайт helloworld.ru және dev.helloworld.ru сайттарында қолжетімді болуы керек (тиісінше өнім және әзірлеу орталары).

Жалпы алғанда, біз Flask және Angular-да қарапайым қосымшаны қалай дайындауды және оны Plesk жұмыс істейтін серверге шығару үшін Github Actions бағдарламасында құбырды орнатуды үйрендік.

Мен репозиторийлерге сілтемелерді кодпен қайталаймын: сервер, алғы жақ.

Ақпарат көзі: www.habr.com

пікір қалдыру