CI/CD Github Actions-ում Flask+Angular նախագծի համար
Այս հոդվածում ես կկիսվեմ CI/CD-ի ստեղծման իմ փորձով՝ օգտագործելով Plesk Control Panel-ը և Github Actions-ը: Այսօր մենք կսովորենք, թե ինչպես տեղադրել «Helloworld» ոչ բարդ անունով պարզ նախագիծ: Այն գրված է Flask Python շրջանակում, Celery աշխատողներով և Angular 8 ճակատով:
Հոդվածի առաջին մասում մենք կանդրադառնանք մեր նախագծին և դրա մասերին: Երկրորդում մենք կպարզենք, թե ինչպես կարգավորել Plesk-ը և տեղադրել անհրաժեշտ ընդարձակումներ և բաղադրիչներ (DB, RabbitMQ, Redis, Docker և այլն):
Երրորդ մասում մենք վերջապես կպարզենք, թե ինչպես ստեղծել խողովակաշար՝ մեր նախագիծը սերվերի վրա մշակող և պրոդ միջավայրում տեղակայելու համար: Եվ հետո մենք կգործարկենք կայքը սերվերի վրա:
Եվ այո, ես մոռացել էի ներկայանալ։ Ես Օլեգ Բորզովն եմ, ես «Domclick»-ի հիփոթեքային մենեջերների համար CRM թիմում fullstack ծրագրավորող եմ:
Ծրագրի ակնարկ
Նախ, եկեք նայենք երկու նախագծի պահեստներին՝ հետին և առջևին, և անցնենք կոդը:
Backend՝ Flask+Celery
Հետևի մասում ես վերցրեցի մի փունջ, որը բավականին տարածված է Python-ի մշակողների շրջանում՝ Flask Framework (API-ի համար) և Celery (առաջադրանքի հերթի համար): SQLAchemy-ն օգտագործվում է որպես ORM: Alembic-ը օգտագործվում է միգրացիայի համար։ Բռնակներում JSON վավերացման համար՝ Marshmallow:
В պահոցներ կա Readme.md ֆայլ՝ կառուցվածքի մանրամասն նկարագրությամբ և նախագիծը գործարկելու հրահանգներով:
docker երկու Dockerfiles-ով (base.dockerfile կառուցել հազվադեպ փոփոխվող բազային պատկեր և Dockerfile հիմնական հավաքների համար);
.env_files - տարբեր միջավայրերի համար շրջակա միջավայրի փոփոխականներով ֆայլերով:
Ծրագրի հիմքում կան չորս docker-compose ֆայլեր.
docker-compose.local.db.yml ստեղծել տեղական տվյալների բազա զարգացման համար.
docker-compose.local.workers.yml աշխատողի, տվյալների բազայի, Redis-ի և RabbitMQ-ի տեղական բարձրացման համար;
docker-compose.test.yml տեղակայման ընթացքում թեստեր անցկացնել;
docker-compose.yml տեղակայման համար։
Եվ վերջին թղթապանակը, որը մեզ հետաքրքրում է. .ci-cd. Այն պարունակում է shell սցենարներ տեղակայման համար.
deploy.sh — միգրացիայի և տեղակայման մեկնարկը: Գործում է սերվերի վրա Github Actions-ում թեստեր կառուցելուց և գործարկելուց հետո;
rollback.sh - բեռնարկղերի վերադարձը հավաքի նախորդ տարբերակին.
curl_tg.sh - տեղակայման ծանուցումներ ուղարկել Telegram-ին:
Frontend Angular-ում
Պահեստ՝ առջևով շատ ավելի պարզ, քան Բեկը: Դիմացը բաղկացած է երեք էջից.
Գլխավոր էջ՝ նամակ ուղարկելու ձևով և ելքի կոճակով:
Մուտքի էջ.
Գրանցման էջ.
Գլխավոր էջը ասկետիկ տեսք ունի.
Արմատում կա երկու ֆայլ Dockerfile и docker-compose.yml, ինչպես նաև ծանոթ թղթապանակը .ci-cd մի փոքր ավելի քիչ սկրիպտներով, քան հետևի պահոցում (հեռացվել են սկրիպտներ՝ թեստերի համար):
Նախագիծ սկսել Պլեսկում
Սկսենք Plesk-ը կարգավորելուց և մեր կայքի համար բաժանորդագրություն ստեղծելուց:
Ընդլայնումների տեղադրում
Plesk-ում մեզ անհրաժեշտ է չորս ընդարձակում.
Docker կառավարել և տեսողականորեն ցուցադրել բեռնարկղերի կարգավիճակը Plesk ադմինիստրատորի վահանակում.
Git սերվերի վրա տեղակայման քայլը կարգավորելու համար.
Let's Encrypt ստեղծել (և ավտոմատ թարմացնել) անվճար TLS վկայականներ.
Firewall մուտքային տրաֆիկի զտումը կարգավորելու համար:
Դուք կարող եք դրանք տեղադրել Plesk ադմինիստրատորի վահանակի միջոցով Extensions բաժնում.
Մենք չենք հաշվի առնի ընդլայնումների մանրամասն կարգավորումները, լռելյայն կարգավորումները կանեն մեր ցուցադրական նպատակների համար:
Ստեղծեք բաժանորդագրություն և կայք
Հաջորդը, մենք պետք է բաժանորդագրություն ստեղծենք մեր helloworld.ru կայքի համար և այնտեղ ավելացնենք dev.helloworld.ru ենթադոմեյնը:
Ստեղծեք բաժանորդագրություն helloworld.ru տիրույթի համար և նշեք մուտքի գաղտնաբառը համակարգի օգտագործողի համար.
Ստուգեք վանդակը էջի ներքևում Ապահովեք տիրույթը Let's Encrypt-ովեթե մենք ցանկանում ենք ստեղծել HTTPS կայքի համար.
Հաջորդը, այս բաժանորդագրության մեջ ստեղծեք ենթադոմեյն dev.helloworld.ru (որի համար կարող եք նաև տրամադրել անվճար TLS վկայագիր).
Սերվերի բաղադրիչների տեղադրում
Մենք ունենք սերվեր OS Debian Stretch 9.12 և տեղադրվել է կառավարման վահանակ Պլեսկ Օբսիդիան 18.0.27.
Մենք պետք է տեղադրենք և կարգավորենք մեր նախագծի համար.
PostgreSQL (մեր դեպքում կլինի մեկ սերվեր՝ երկու տվյալների բազայով՝ մշակողների և պրոդ միջավայրերի համար):
RabbitMQ (նույն օրինակը տարբեր vhost-ներով միջավայրերի համար):
Redis-ի երկու օրինակ (dev and prod միջավայրերի համար):
Docker Registry (ներկառուցված Docker պատկերների տեղական պահպանման համար):
UI Docker ռեեստրի համար:
PostgreSQL
Plesk-ն արդեն գալիս է PostgreSQL DBMS-ով, բայց ոչ վերջին տարբերակով (Plesk Obsidian-ը գրելու պահին աջակցել է Postgres տարբերակները 8.4–10.8): Մենք ցանկանում ենք մեր հավելվածի վերջին տարբերակը (12.3 այս գրելու պահին), այնպես որ մենք այն կտեղադրենք ձեռքով:
Ցանցում Debian-ում Postgres-ը տեղադրելու շատ մանրամասն հրահանգներ կան (օրինակ), այնպես որ ես դրանք մանրամասն չեմ նկարագրի, ես պարզապես կտամ հրամանները.
Հաշվի առնելով, որ PostgreSQL-ն ունի բավականին միջակ լռելյայն կարգավորումներ, անհրաժեշտ է շտկել կոնֆիգուրացիան։ Սա մեզ կօգնի հաշվիչԴուք պետք է քշեք ձեր սերվերի պարամետրերով և փոխարինեք ֆայլի կարգավորումները /etc/postgresql/12/main/postgresql.confառաջարկվողներին։ Այստեղ պետք է նշել, որ նման հաշվիչները կախարդական փամփուշտ չեն, և հիմքը պետք է ավելի ճշգրիտ կարգավորվի՝ ելնելով ձեր սարքաշարից, հավելվածից և հարցումների բարդությունից: Բայց սա բավական է սկսելու համար:
Բացի հաշվիչի առաջարկած կարգավորումներից, մենք նաև փոխվում ենք postgresql.confլռելյայն պորտը 5432 մյուսին (մեր օրինակում - 53983).
Կազմաձևման ֆայլը փոխելուց հետո վերագործարկեք postgresql-server-ը հրամանով.
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
Rabbit MQ
Եկեք անցնենք RabbitMQ-ի՝ Celery-ի հաղորդագրությունների բրոքերի տեղադրմանը: Debian-ում այն տեղադրելը բավականին պարզ է.
Այժմ եկեք տեղադրենք և կազմաձևենք մեր հավելվածի վերջին բաղադրիչը՝ Redis-ը: Այն կօգտագործվի որպես հետին պլան՝ Celery առաջադրանքների արդյունքները պահելու համար:
Մենք կբարձրացնենք երկու Docker կոնտեյներ Redis-ով մշակողի և պրոդ միջավայրերի համար՝ օգտագործելով ընդլայնումը Docker Պլեսկի համար։
Մենք գնում ենք Plesk, գնում ենք Extensions բաժին, փնտրում Docker ընդլայնումը և տեղադրում այն (մեզ անհրաժեշտ է անվճար տարբերակ).
Գնացեք տեղադրված ընդլայնում, որոնման միջոցով գտեք պատկերը redis bitnami և տեղադրել վերջին տարբերակը՝
Մենք մտնում ենք ներբեռնված կոնտեյներ և կարգավորում ենք կոնֆիգուրացիան. նշեք նավահանգիստը, առավելագույն հատկացված RAM-ի չափը, գաղտնաբառը շրջակա միջավայրի փոփոխականներում և տեղադրեք ծավալը.
Մենք կատարում ենք 2-3 քայլերը պրոդ կոնտեյների համար, կարգավորումներում մենք փոխում ենք միայն պարամետրերը՝ նավահանգիստ, գաղտնաբառ, RAM չափը և սերվերի ծավալի թղթապանակի ուղին.
Docker ռեեստր
Հիմնական ծառայություններից բացի, լավ կլիներ սերվերի վրա տեղադրել ձեր սեփական Docker պատկերի պահոցը: Բարեբախտաբար, սերվերի տարածքն այժմ բավականին էժան է (անշուշտ ավելի էժան, քան DockerHub-ի բաժանորդագրությունը), իսկ մասնավոր պահեստի ստեղծման գործընթացը շատ պարզ է:
Եկեք մեր բաժանորդագրության մեջ Plesk-ում ստեղծենք երկու ենթադոմեյն՝ docker.helloworld.ru և docker-ui.helloworld.ru, և կարգավորենք Let's Encrypt վկայականները նրանց համար:
Ֆայլը ավելացրեք docker.helloworld.ru ենթադոմեյնի պանակում docker-compose.yml այսպիսի բովանդակությամբ.
Եվ մենք պետք է վերահղենք Nginx-ը մեր կոնտեյներներին: Դա կարելի է անել Plesk-ի միջոցով:
Հետևյալ քայլերը պետք է կատարվեն docker.helloworld.ru և docker-ui.helloworld.ru ենթադոմեյնների համար.
Բաժին DevTools մեր կայքը գնալ Docker Proxy-ի կանոններ:
Եվ մի կանոն ավելացրեք վստահված անձի մուտքային տրաֆիկին մեր կոնտեյներ.
Մենք ստուգում ենք, որ կարող ենք մուտք գործել մեր կոնտեյներ տեղական մեքենայից.
$ 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
Ստուգենք նաև docker-ui.helloworld.ru ենթադոմեյնի աշխատանքը.
Երբ սեղմում եք Փնտրել պահեստները, զննարկիչը կցուցադրի թույլտվության պատուհան, որտեղ դուք պետք է մուտքագրեք պահեստի օգտվողի անունը և գաղտնաբառը: Դրանից հետո մենք կտեղափոխվենք պահեստների ցանկով էջ (առայժմ այն ձեզ համար դատարկ կլինի).
Նավահանգիստների բացում Plesk Firewall-ում
Բաղադրիչները տեղադրելուց և կազմաձևելուց հետո մենք պետք է բացենք նավահանգիստները, որպեսզի բաղադրիչները հասանելի լինեն Docker կոնտեյներներից և արտաքին ցանցից:
Տեսնենք, թե ինչպես դա անել, օգտագործելով Firewall-ի ընդլայնումը Plesk-ի համար, որը մենք ավելի վաղ տեղադրել էինք:
Գնալ Գործիքներ և կարգավորումներ > Կարգավորումներ > Firewall:
Գնալ Փոփոխեք Plesk Firewall-ի կանոնները > Ավելացնել մաքսային կանոն և բացեք հետևյալ TCP պորտերը Docker ենթացանկի համար (172.0.0.0 / 8):
RabbitMQ՝ 1883, 4369, 5671-5672, 25672, 61613-61614
Redis՝ 32785, 32786
Մենք նաև կավելացնենք կանոն, որը արտաքին աշխարհին կբացի PostgreSQL պորտերը և RabbitMQ կառավարման վահանակները.
Կիրառեք կանոնները՝ օգտագործելով «Կիրառել փոփոխություններ» կոճակը.
CI/CD-ի կարգավորում Github Actions-ում
Եկեք իջնենք ամենահետաքրքիր մասին՝ շարունակական ինտեգրացիոն խողովակաշարի տեղադրում և մեր նախագիծը սերվերին առաքում:
Այս խողովակաշարը բաղկացած կլինի երկու մասից.
պատկերի կառուցում և փորձարկումներ (հետին պլանի համար) - Github-ի կողմում;
Նախ անդրադառնանք երկրորդ կետին (քանի որ առաջինը դրանից է կախված):
Մենք կկարգավորենք տեղակայման գործընթացը՝ օգտագործելով Plesk-ի Git ընդլայնումը:
Դիտարկենք Prod միջավայրի օրինակ Backend պահեստի համար:
Մենք գնում ենք մեր Helloworld կայքի բաժանորդագրություն և գնում Git ենթաբաժին.
Տեղադրեք մեր Github պահեստի հղումը «Remote Git» դաշտում և փոխեք լռելյայն թղթապանակը httpdocs մյուսին (օրինակ. /httpdocs/hw_back):
Պատճենեք SSH հանրային բանալին նախորդ քայլից և ավելացնել այն Github-ի կարգավորումներում է:
Սեղմեք OK էկրանին քայլ 2-ում, որից հետո մենք կվերահղվենք դեպի Plesk պահեստի էջ: Այժմ մենք պետք է կարգավորենք պահեստը, որպեսզի այն թարմացվի գլխավոր մասնաճյուղի պարտավորությունների վերաբերյալ: Դա անելու համար գնացեք Պահեստի կարգավորումներ և պահպանել արժեքը Webhook URL (այն մեզ ավելի ուշ պետք կգա Github Actions-ը կարգավորելիս).
Նախորդ պարբերության էկրանի Գործողություններ դաշտում մուտքագրեք սկրիպտը՝ տեղակայումը գործարկելու համար.
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} - սերվերի վրա գտնվող backend պահեստի prod թղթապանակի ուղին. {ENV} - միջավայր (dev / prod), մեր դեպքում prod; {DOCKER_REGISTRY_HOST} - մեր դոկերի պահեստի հյուրընկալողը {TG_BOT_TOKEN} — Telegram բոտի նշան; {TG_CHAT_ID} — Չաթի/ալիքի 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
Ավելացրեք օգտատեր մեր բաժանորդագրությունից Docker խմբին (որպեսզի նրանք կարողանան կառավարել բեռնարկղերը).
sudo usermod -aG docker helloworld_admin
Ծրագրի միջավայրը հետին պահոցի և ճակատային մասի համար ստեղծվել են նույն ձևով:
Տեղակայման խողովակաշար Github Actions-ում
Եկեք անցնենք Github Actions-ում մեր CI/CD խողովակաշարի առաջին մասի ստեղծմանը:
Բայց նախքան այն վերլուծելը, եկեք լրացնենք Գաղտնի փոփոխականները, որոնք մեզ անհրաժեշտ են Github-ում: Դա անելու համար գնացեք Կարգավորումներ -> Գաղտնիքներ:
DOCKER_REGISTRY - մեր Docker պահեստի հյուրընկալողը (docker.helloworld.ru);
DOCKER_LOGIN - մուտք գործել Docker պահեստ;
DOCKER_PASSWORD - դրա գաղտնաբառը;
DEPLOY_HOST — հոսթ, որտեղ հասանելի է Plesk ադմինիստրատորի վահանակը (օրինակ. helloworld.ru:8443 կամ 123.4.56.78:8443);
DEPLOY_BACK_PROD_TOKEN - սերվերի վրա prod-պահեստում տեղակայման նշան (մենք այն ստացել ենք Deployment in Plesk էջ 4);
Տեղակայման գործընթացը պարզ է և բաղկացած է երեք հիմնական քայլերից.
պատկերի կառուցում և հրապարակում մեր պահեստում;
թեստերի անցկացումը կոնտեյներով՝ հիմնված թարմ կառուցված պատկերի վրա.
տեղակայում դեպի ցանկալի միջավայր՝ կախված ճյուղից (dev/master):
Դիմային մաս
Deploy.yml ֆայլը առջևի պահեստի համար քիչ տարբերվում է Բեկից: Այն չունի քայլ կատարվող թեստերի հետ և փոխում է տեղակայման համար նախատեսված նշանների անվանումները: Առջևի պահեստի գաղտնիքները, ի դեպ, պետք է լրացվեն առանձին:
Կայքի կարգավորում
Proxying տրաֆիկի միջոցով Nginx
Դե, մենք հասել ենք ավարտին: Մնում է միայն կարգավորել մուտքային և ելքային տրաֆիկի պրոքսինգը դեպի մեր կոնտեյներ Nginx-ի միջոցով: Մենք արդեն անդրադարձել ենք այս գործընթացին Docker Registry-ի կարգավորումների 5-րդ քայլում: Նույնը պետք է կրկնվի ետևի և առջևի մասերի համար՝ ծրագրավորող և պրոդ միջավայրերում:
Ես կներկայացնեմ պարամետրերի սքրինշոթները:
backend
Դիմային մաս
Կարևոր պարզաբանում. Բոլոր URL-ները կփոխանցվեն ճակատային կոնտեյներով, բացառությամբ սկսվողների /api/ - դրանք կփոխանցվեն հետևի կոնտեյներով (այսպես հետևի կոնտեյներով, բոլոր կարգավորիչները պետք է սկսեն /api/).
Արդյունքները
Այժմ մեր կայքը պետք է հասանելի լինի helloworld.ru և dev.helloworld.ru կայքերում (համապատասխանաբար prod- և dev-environments):
Ընդհանուր առմամբ, մենք սովորեցինք, թե ինչպես պատրաստել պարզ հավելված Flask-ում և Angular-ում և տեղադրել խողովակաշար Github Actions-ում, որպեսզի այն փոխանցվի Plesk-ով աշխատող սերվերի վրա: