Flask+Angular projesi için Github Eylemlerinde CI/CD

Flask+Angular projesi için Github Eylemlerinde CI/CD
Bu yazımda Plesk Control Panel ve Github Actions kullanarak CI/CD kurma deneyimimi paylaşacağım. Bugün karmaşık olmayan adı "Helloworld" olan basit bir projeyi nasıl konuşlandıracağımızı öğreneceğiz. Flask Python çerçevesinde, Celery çalışanları ve bir Angular 8 ön ucu ile yazılmıştır.

Depolara bağlantılar: arka uç, başlangıç ​​aşaması.

Yazımızın ilk bölümünde projemize ve bölümlerine bakacağız. İkincisinde Plesk'i nasıl kuracağımızı ve gerekli uzantıları ve bileşenleri (DB, RabbitMQ, Redis, Docker vb.) kurmayı öğreneceğiz.

Üçüncü bölümde, projemizi dev ve prod ortamındaki bir sunucuya dağıtmak için bir boru hattını nasıl kuracağımızı nihayet anlayacağız. Ardından siteyi sunucuda başlatacağız.

Ve evet, kendimi tanıtmayı unuttum. Benim adım Oleg Borzov, Domclick'te ipotek yöneticileri için CRM ekibinde eksiksiz bir geliştiriciyim.

proje Genel bakış

İlk olarak, iki proje deposuna - arka uç ve ön - bakalım ve kodun üzerinden geçelim.

Arka uç: Şişe + Kereviz

Arka kısım için, Python geliştiricileri arasında oldukça popüler olan bir demet aldım: Flask çerçevesi (API için) ve Kereviz (görev kuyruğu için). ORM olarak SQLAchemy kullanılmaktadır. Alembik, göçler için kullanılır. Tanıtıcılarda JSON doğrulaması için - Marshmallow.

В depolar yapının ayrıntılı bir açıklamasını ve projeyi çalıştırmak için talimatları içeren bir Readme.md dosyası vardır.

Web Bölümü API'sı oldukça basit, 6 kalemden oluşur:

  • /ping - kullanılabilirliği kontrol etmek için;
  • kayıt, yetkilendirme, yetkilendirmeyi kaldırma ve yetkili bir kullanıcı elde etme işlemlerini yürütür;
  • Kereviz kuyruğuna bir görev koyan bir e-posta tanıtıcısı.

kereviz parçası daha da kolay, tek bir sorun var send_mail_task.

Klasöründe /konf iki alt klasör vardır:

  • docker iki Docker dosyasıyla (base.dockerfile nadiren değişen bir temel görüntü oluşturmak ve Dockerfile ana tertibatlar için);
  • .env_files - farklı ortamlar için ortam değişkenlerine sahip dosyalarla.

Projenin kökünde dört docker-compose dosyası vardır:

  • docker-compose.local.db.yml geliştirme için yerel bir veritabanı oluşturmak;
  • docker-compose.local.workers.yml işçinin, veritabanının, Redis ve RabbitMQ'nun yerel olarak yükseltilmesi için;
  • docker-compose.test.yml dağıtım sırasında testleri çalıştırmak için;
  • docker-compose.yml dağıtım için.

Ve ilgilendiğimiz son klasör - .ci-cd. Dağıtım için kabuk betikleri içerir:

  • deploy.sh — geçiş ve dağıtımın başlatılması. Github Eylemlerinde testler oluşturup çalıştırdıktan sonra sunucuda çalışır;
  • rollback.sh - kapların montajın önceki sürümüne geri alınması;
  • curl_tg.sh - Telegram'a dağıtım bildirimleri gönderme.

Angular'da ön uç

ön ile depo Beck'inkinden çok daha basit. ön üç sayfadan oluşur:

  • E-posta göndermek için bir form ve bir çıkış düğmesi içeren ana sayfa.
  • Giriş sayfası.
  • Kayıt sayfası.

Ana sayfa münzevi görünüyor:

Flask+Angular projesi için Github Eylemlerinde CI/CD
Kökte iki dosya var Dockerfile и docker-compose.yml, tanıdık klasörün yanı sıra .ci-cd arka depodakinden biraz daha az komut dosyasıyla (testleri çalıştırmak için kaldırılan komut dosyaları).

Plesk'te bir proje başlatmak

Plesk'i kurarak ve sitemiz için bir abonelik oluşturarak başlayalım.

Uzantıları yükleme

Plesk'te dört uzantıya ihtiyacımız var:

  • Docker Plesk admin panelinde container'ların durumunu yönetmek ve görsel olarak görüntülemek için;
  • Git sunucudaki dağıtım adımını yapılandırmak için;
  • Let's Encrypt ücretsiz TLS sertifikaları oluşturmak (ve otomatik olarak yenilemek);
  • Firewall gelen trafiğin filtrelenmesini yapılandırmak için.

Bunları Plesk yönetici panelinin Uzantılar bölümünden kurabilirsiniz:

Flask+Angular projesi için Github Eylemlerinde CI/CD
Uzantıların ayrıntılı ayarlarını dikkate almayacağız, demo amaçlarımız için varsayılan ayarlar yeterli olacaktır.

Bir abonelik ve site oluşturun

Ardından, helloworld.ru web sitemiz için bir abonelik oluşturmamız ve buraya dev.helloworld.ru alt alan adını eklememiz gerekiyor.

  1. Helloworld.ru etki alanı için bir abonelik oluşturun ve sistem kullanıcısı için oturum açma parolasını belirtin:

    Flask+Angular projesi için Github Eylemlerinde CI/CD
    Sayfanın altındaki kutuyu işaretleyin Let's Encrypt ile alan adının güvenliğini sağlayınsite için HTTPS kurmak istiyorsak:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  2. Ardından, bu abonelikte bir dev.helloworld.ru alt etki alanı oluşturun (bunun için ücretsiz bir TLS sertifikası da verebilirsiniz):

    Flask+Angular projesi için Github Eylemlerinde CI/CD

Sunucu Bileşenlerini Yükleme

ile bir sunucumuz var. İşletim Sistemi Debian Uzatma 9.12 ve yüklü kontrol paneli Plesk Obsidyen 18.0.27.

Projemiz için kurmamız ve yapılandırmamız gerekiyor:

  • PostgreSQL (bizim durumumuzda dev ve prod ortamları için iki veritabanına sahip bir sunucu olacaktır).
  • RabbitMQ (ortamlar için farklı sankonlarla aynı, aynı örnek).
  • İki Redis örneği (geliştirme ve üretim ortamları için).
  • Docker Kayıt Defteri (yerleşik Docker görüntülerinin yerel olarak depolanması için).
  • Docker kayıt defteri için kullanıcı arabirimi.

PostgreSQL

Plesk zaten PostgreSQL DBMS ile geliyor, ancak en son sürümle gelmiyor (Plesk Obsidian'ı yazarken поддерживал Postgres sürümleri 8.4–10.8). Uygulamamız için en son sürümü istiyoruz (bu yazının yazıldığı sırada 12.3), bu yüzden onu manuel olarak kuracağız.

İnternette Postgres'i Debian'a kurmak için birçok ayrıntılı talimat var (örnek), bu yüzden onları ayrıntılı olarak açıklamayacağım, sadece komutları vereceğim:

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'in oldukça vasat varsayılan ayarlara sahip olduğu düşünüldüğünde, yapılandırmayı düzeltmek gerekir. Bu bize yardımcı olacak hesap makinesi: sunucunuzun parametrelerinde sürmeniz ve dosyadaki ayarları değiştirmeniz gerekir /etc/postgresql/12/main/postgresql.confsunulanlara. Burada, bu tür hesap makinelerinin sihirli bir değnek olmadığına ve donanım, uygulama ve sorgu karmaşıklığına bağlı olarak tabanın daha hassas bir şekilde ayarlanması gerektiğine dikkat edilmelidir. Ama bu başlamak için yeterli.

Hesap makinesi tarafından önerilen ayarlara ek olarak, postgresql.confvarsayılan bağlantı noktası 5432'den diğerine (bizim örneğimizde - 53983).

Yapılandırma dosyasını değiştirdikten sonra, postgresql-server'ı şu komutla yeniden başlatın:

service postgresql restart

PostgreSQL'i kurduk ve yapılandırdık. Şimdi dev- ve prod-ortamları için bir veritabanı oluşturalım ve kullanıcılara veritabanını yönetme hakları verelim:

$ 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

Şimdi Celery için bir mesaj aracısı olan RabbitMQ'nun kurulumuna geçelim. Debian'a yüklemek oldukça basittir:

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

Kurulumdan sonra, oluşturmamız gerekiyor vhosts, kullanıcılar ve gerekli hakları verin:

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

Şimdi uygulamamızın son bileşeni olan Redis'i yükleyip yapılandıralım. Kereviz görevlerinin sonuçlarını depolamak için bir arka uç olarak kullanılacaktır.

Uzantıyı kullanarak dev ve prod ortamları için Redis ile iki Docker kapsayıcısı oluşturacağız Docker Plesk için.

  1. Plesk'e gidiyoruz, Uzantılar bölümüne gidiyoruz, Docker uzantısını arıyoruz ve kuruyoruz (ücretsiz bir sürüme ihtiyacımız var):

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  2. Yüklü uzantıya gidin, görseli arama yoluyla bulun redis bitnami ve en son sürümü yükleyin:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  3. İndirilen kaba giriyoruz ve yapılandırmayı ayarlıyoruz: bağlantı noktasını, ayrılan maksimum RAM boyutunu, ortam değişkenlerinde parolayı belirtin ve birimi bağlayın:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  4. Üretim kabı için 2-3 adımlarını gerçekleştiriyoruz, ayarlarda yalnızca parametreleri değiştiriyoruz: bağlantı noktası, şifre, RAM boyutu ve sunucudaki birim klasörüne giden yol:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

Docker Kayıt Defteri

Temel hizmetlere ek olarak, kendi Docker görüntü deponuzu sunucuya koymak güzel olurdu. Neyse ki, sunucu alanı artık oldukça ucuz (kesinlikle bir DockerHub aboneliğinden daha ucuz) ve özel bir havuz kurma süreci çok basit.

sahip olmak istiyoruz:

Bunu yapmak için:

  1. Aboneliğimizde Plesk'te iki alt alan oluşturalım: docker.helloworld.ru ve docker-ui.helloworld.ru ve bunlar için Let's Encrypt sertifikalarını yapılandıralım.
  2. Dosyayı docker.helloworld.ru alt etki alanı klasörüne ekleyin docker-compose.yml bunun gibi içerikle:
    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 altında, Docker deposunda Temel yetkilendirme için .htpasswd dosyasını oluşturacağız:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Konteynerleri toplayın ve kaldırın:
    docker-compose up -d
  5. Ve Nginx'i kapsayıcılarımıza yönlendirmemiz gerekiyor. Bu, Plesk aracılığıyla yapılabilir.

docker.helloworld.ru ve docker-ui.helloworld.ru alt alan adları için aşağıdaki adımların gerçekleştirilmesi gerekir:

Bölümünde Geliştirme Araçları sitemize git Docker Proxy Kuralları:

Flask+Angular projesi için Github Eylemlerinde CI/CD
Ve gelen trafiği kapsayıcımıza yönlendirmek için bir kural ekleyin:

Flask+Angular projesi için Github Eylemlerinde CI/CD

  1. Yerel makineden kapsayıcımıza giriş yapıp yapamayacağımızı kontrol ediyoruz:
    $ 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 alt alan adının işleyişini de kontrol edelim:

    Flask+Angular projesi için Github Eylemlerinde CI/CD
    Depolara göz at'a tıkladığınızda, tarayıcı, havuz için kullanıcı adını ve parolayı girmeniz gereken bir yetkilendirme penceresi görüntüler. Bundan sonra, depo listesinin bulunduğu bir sayfaya aktarılacağız (şimdilik sizin için boş olacak):

    Flask+Angular projesi için Github Eylemlerinde CI/CD

Plesk Firewall'da port açma

Bileşenleri kurduktan ve yapılandırdıktan sonra, bileşenlere Docker kapsayıcılarından ve harici ağdan erişilebilmesi için portları açmamız gerekiyor.

Daha önce kurduğumuz Plesk için Güvenlik Duvarı uzantısını kullanarak bunu nasıl yapacağımızı görelim.

  1. Biz geçmek Araçlar ve Ayarlar > Ayarlar > Güvenlik Duvarı:
    Flask+Angular projesi için Github Eylemlerinde CI/CD
  2. Biz geçmek Plesk Güvenlik Duvarı Kurallarını Değiştir > Özel Kural Ekle ve Docker alt ağı için aşağıdaki TCP bağlantı noktalarını açın (172.0.0.0 / 8):
    TavşanMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  3. Ayrıca PostgreSQL portlarını ve RabbitMQ yönetim panellerini dış dünyaya açacak bir kural ekleyeceğiz:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  4. Değişiklikleri Uygula düğmesini kullanarak kuralları uygulayın:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

Github Eylemlerinde CI/CD kurulumu

En ilginç kısma geçelim - sürekli bir entegrasyon hattı kurmak ve projemizi sunucuya teslim etmek.

Bu boru hattı iki bölümden oluşacaktır:

  • Github tarafında bir görüntü oluşturmak ve testleri çalıştırmak (arka uç için);
  • sunucuda geçişleri çalıştırma (arka uç için) ve kapsayıcıları dağıtma.

Plesk'e dağıtın

Önce ikinci noktayı ele alalım (çünkü birincisi buna bağlıdır).

Dağıtım sürecini Plesk için Git uzantısını kullanarak yapılandıracağız.

Bir Arka Uç deposu için Prod ortamına sahip bir örneği ele alalım.

  1. Helloworld web sitemizin aboneliğine gidiyoruz ve Git alt bölümüne gidiyoruz:

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  2. "Uzak Git deposu" alanına Github havuzumuza bir bağlantı ekleyin ve varsayılan klasörü değiştirin httpdocs diğerine (örn. /httpdocs/hw_back):

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  3. SSH Ortak anahtarını önceki adımdan kopyalayın ve ekleme Github ayarlarında.
  4. 2. adımdaki ekranda Tamam'ı tıklayın, ardından Plesk'teki depo sayfasına yönlendirileceğiz. Şimdi ana şubeye yapılan taahhütlerde güncellenecek depoyu yapılandırmamız gerekiyor. Bunu yapmak için şuraya gidin: Depo Ayarları ve değeri kaydedin Webhook URL (Github Actions'ı ayarlarken daha sonra ihtiyacımız olacak):

    Flask+Angular projesi için Github Eylemlerinde CI/CD

  5. Önceki paragraftaki ekrandaki Eylemler alanına, dağıtımı başlatmak için komut dosyasını girin:
    cd {REPOSITORY_ABSOLUTE_PATH}
    .ci-cd/deploy.sh {ENV} {DOCKER_REGISTRY_HOST} {DOCKER_USER} {DOCKER_PASSWORD} {TG_BOT_TOKEN} {TG_CHAT_ID} 

    burada:

    {REPOSITORY_ABSOLUTE_PATH} - sunucudaki arka uç deposunun prod klasörünün yolu;
    {ENV} - çevre (dev / prod), bizim durumumuzda prod;
    {DOCKER_REGISTRY_HOST} - liman işçisi depomuzun ana bilgisayarı
    {TG_BOT_TOKEN} — Telegram bot belirteci;
    {TG_CHAT_ID} — Bildirim göndermek için sohbetin/kanalın kimliği.

    Örnek komut dosyası:

    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 grubuna aboneliğimizden bir kullanıcı ekleyin (böylece kapsayıcıları yönetebilirler):
    sudo usermod -aG docker helloworld_admin

Arka uç deposu ve ön uç için geliştirme ortamı aynı şekilde kurulur.

Github Eylemlerinde dağıtım boru hattı

Github Actions'ta CI/CD işlem hattımızın ilk bölümünü kurmaya geçelim.

Backend

Boru hattı içinde açıklanmaktadır konuşlandırma.yml dosyası.

Ama ayrıştırmadan önce Github'da ihtiyacımız olan Secret değişkenlerini dolduralım. Bunu yapmak için şuraya gidin: Ayarlar -> Sırlar:

  • DOCKER_REGISTRY - Docker depomuzun sunucusu (docker.helloworld.ru);
  • DOCKER_LOGIN - Docker deposunda oturum açın;
  • DOCKER_PASSWORD - şifre;
  • DEPLOY_HOST — Plesk yönetici panelinin mevcut olduğu ana bilgisayar (örnek: merhabaworld.com: 8443 veya 123.4.56.78:8443);
  • DEPLOY_BACK_PROD_TOKEN - sunucudaki ürün deposuna dağıtım için bir belirteç (bunu Plesk'te Dağıtım s. 4'te aldık);
  • DEPLOY_BACK_DEV_TOKEN - sunucudaki dev deposuna dağıtım için belirteç.

Dağıtım süreci basittir ve üç ana adımdan oluşur:

  • görüntüyü havuzumuzda oluşturmak ve yayınlamak;
  • yeni oluşturulmuş bir görüntüyü temel alan bir kapsayıcıda testler çalıştırma;
  • dala (dev/master) bağlı olarak istenen ortama dağıtım.

Frontend

Ön havuz için konuşlandırma.yml dosyası Beck'inkinden biraz farklı. Test çalıştırma adımından yoksundur ve konuşlandırma için belirteçlerin adlarını değiştirir. Bu arada, ön deponun sırlarının ayrıca doldurulması gerekiyor.

Site kurulumu

Nginx aracılığıyla proxy trafiği

Eh, sona geldik. Geriye yalnızca Nginx aracılığıyla kapsayıcımıza gelen ve giden trafiğin proxy'sini yapılandırmak kalır. Docker Registry kurulumunun 5. adımında bu süreci zaten ele aldık. Dev ve prod ortamlarında arka ve ön kısımlar için aynısı tekrarlanmalıdır.

Ayarların ekran görüntülerini vereceğim.

Backend

Flask+Angular projesi için Github Eylemlerinde CI/CD

Frontend

Flask+Angular projesi için Github Eylemlerinde CI/CD
Önemli açıklama. İle başlayanların dışındaki tüm URL'ler, ön uç kapsayıcısına vekil olarak atanır. /api/ - arka kapsayıcıya vekalet edilecekler (böylece arka kapsayıcıda, tüm işleyiciler şununla başlamalıdır: /api/).

sonuçlar

Artık sitemiz helloworld.ru ve dev.helloworld.ru adreslerinde mevcut olmalıdır (sırasıyla prod- ve dev-environments).

Toplamda, Flask ve Angular'da basit bir uygulamanın nasıl hazırlanacağını ve bunu Plesk çalıştıran bir sunucuya dağıtmak için Github Actions'ta bir ardışık düzen kurmayı öğrendik.

Depolara olan bağlantıları kodla çoğaltacağım: arka uç, başlangıç ​​aşaması.

Kaynak: habr.com

Yorum ekle