CI/CD σε Github Actions για ένα έργο Flask+Angular

CI/CD σε Github Actions για ένα έργο Flask+Angular
Σε αυτό το άρθρο, θα μοιραστώ την εμπειρία μου από τη ρύθμιση CI/CD χρησιμοποιώντας τον Πίνακα Ελέγχου Plesk και τις Ενέργειες Github. Σήμερα θα μάθουμε πώς να αναπτύξουμε ένα απλό έργο με το απλό όνομα "Helloworld". Είναι γραμμένο στο πλαίσιο Flask Python, με εργάτες Celery και μια πρόσοψη Angular 8.

Σύνδεσμοι σε αποθετήρια: backend, frontend.

Στο πρώτο μέρος του άρθρου, θα δούμε το έργο μας και τα μέρη του. Στο δεύτερο, θα καταλάβουμε πώς να ρυθμίσετε το Plesk και να εγκαταστήσετε τις απαραίτητες επεκτάσεις και στοιχεία (DB, RabbitMQ, Redis, Docker κ.λπ.).

Στο τρίτο μέρος, θα καταλάβουμε τελικά πώς να ρυθμίσουμε μια διοχέτευση για την ανάπτυξη του έργου μας σε έναν διακομιστή σε περιβάλλον προγραμματισμού και παραγωγής. Και μετά θα εκκινήσουμε τον ιστότοπο στον διακομιστή.

Και ναι, ξέχασα να συστηθώ. Το όνομά μου είναι Oleg Borzov, είμαι προγραμματιστής fullstack στην ομάδα CRM για διαχειριστές στεγαστικών δανείων στο Domclick.

Επισκόπηση έργου

Αρχικά, ας δούμε δύο αποθετήρια έργου - το backend και το front - και ας εξετάσουμε τον κώδικα.

Backend: Flask+Celery

Για το πίσω μέρος, πήρα μια δέσμη που είναι αρκετά δημοφιλής μεταξύ των προγραμματιστών της Python: το πλαίσιο Flask (για το API) και το Celery (για την ουρά εργασιών). Το SQLAchemy χρησιμοποιείται ως ORM. Το Alembic χρησιμοποιείται για μεταναστεύσεις. Για επικύρωση JSON σε λαβές - Marshmallow.

В αποθετήρια υπάρχει ένα αρχείο Readme.md με αναλυτική περιγραφή της δομής και οδηγίες για την εκτέλεση του έργου.

Web Part API αρκετά απλό, αποτελείται από 6 στυλό:

  • /ping - για έλεγχο διαθεσιμότητας
  • χειρίζεται την εγγραφή, την εξουσιοδότηση, την κατάργηση της εξουσιοδότησης και την απόκτηση εξουσιοδοτημένου χρήστη·
  • μια λαβή email που βάζει μια εργασία στην ουρά Celery.

Σέλινο μέρος ακόμα πιο εύκολο, υπάρχει μόνο ένα πρόβλημα send_mail_task.

Σε φάκελο /συνδ υπάρχουν δύο υποφάκελοι:

  • 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. Περιέχει σενάρια φλοιού για ανάπτυξη:

  • deploy.sh — έναρξη της μετάβασης και της ανάπτυξης. Εκτελείται στον διακομιστή μετά τη δημιουργία και εκτέλεση δοκιμών στο Github Actions.
  • rollback.sh - επαναφορά δοχείων στην προηγούμενη έκδοση του συγκροτήματος.
  • curl_tg.sh - αποστολή ειδοποιήσεων ανάπτυξης στο Telegram.

Frontend στο Angular

Αποθήκη με μπροστινό μέρος πολύ πιο απλό από αυτό του Μπεκ. Το μπροστινό μέρος αποτελείται από τρεις σελίδες:

  • Κύρια σελίδα με φόρμα αποστολής email και κουμπί εξόδου.
  • Σελίδα σύνδεσης.
  • Σελίδα εγγραφής.

Η κεντρική σελίδα φαίνεται ασκητική:

CI/CD σε Github Actions για ένα έργο Flask+Angular
Υπάρχουν δύο αρχεία στη ρίζα Dockerfile и docker-compose.yml, καθώς και τον γνωστό φάκελο .ci-cd με ελαφρώς λιγότερα σενάρια από ό,τι στο πίσω αποθετήριο (καταργήθηκαν σενάρια για εκτέλεση δοκιμών).

Ξεκινώντας ένα έργο στο Plesk

Ας ξεκινήσουμε ρυθμίζοντας το Plesk και δημιουργώντας μια συνδρομή για τον ιστότοπό μας.

Εγκατάσταση επεκτάσεων

Στο Plesk, χρειαζόμαστε τέσσερις επεκτάσεις:

  • Docker για διαχείριση και οπτική εμφάνιση της κατάστασης των κοντέινερ στον πίνακα διαχείρισης του Plesk.
  • Git για να διαμορφώσετε το βήμα ανάπτυξης στον διακομιστή.
  • Let's Encrypt για τη δημιουργία (και αυτόματη ανανέωση) δωρεάν πιστοποιητικών TLS.
  • Firewall για να διαμορφώσετε το φιλτράρισμα της εισερχόμενης κίνησης.

Μπορείτε να τα εγκαταστήσετε μέσω του πίνακα διαχείρισης του Plesk στην ενότητα Επεκτάσεις:

CI/CD σε Github Actions για ένα έργο Flask+Angular
Δεν θα εξετάσουμε τις λεπτομερείς ρυθμίσεις για τις επεκτάσεις, οι προεπιλεγμένες ρυθμίσεις θα ισχύουν για τους σκοπούς της επίδειξης μας.

Δημιουργήστε μια συνδρομή και έναν ιστότοπο

Στη συνέχεια, πρέπει να δημιουργήσουμε μια συνδρομή για τον ιστότοπό μας helloworld.ru και να προσθέσουμε τον υποτομέα dev.helloworld.ru εκεί.

  1. Δημιουργήστε μια συνδρομή για τον τομέα helloworld.ru και καθορίστε τον κωδικό πρόσβασης για τον χρήστη του συστήματος:

    CI/CD σε Github Actions για ένα έργο Flask+Angular
    Επιλέξτε το πλαίσιο στο κάτω μέρος της σελίδας Ασφαλίστε τον τομέα με το Let's Encryptεάν θέλουμε να ρυθμίσουμε το HTTPS για τον ιστότοπο:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  2. Στη συνέχεια, σε αυτήν τη συνδρομή, δημιουργήστε έναν υποτομέα dev.helloworld.ru (για τον οποίο μπορείτε επίσης να εκδώσετε ένα δωρεάν πιστοποιητικό TLS):

    CI/CD σε Github Actions για ένα έργο Flask+Angular

Εγκατάσταση εξαρτημάτων διακομιστή

Έχουμε διακομιστή με OS Debian Stretch 9.12 και εγκατεστημένος πίνακας ελέγχου Plesk Obsidian 18.0.27.

Πρέπει να εγκαταστήσουμε και να διαμορφώσουμε για το έργο μας:

  • PostgreSQL (στην περίπτωσή μας θα υπάρχει ένας διακομιστής με δύο βάσεις δεδομένων για περιβάλλοντα dev και prod).
  • RabbitMQ (ίδιο, ίδιο παράδειγμα με διαφορετικούς vhost για περιβάλλοντα).
  • Δύο περιπτώσεις Redis (για περιβάλλοντα dev και prod).
  • Μητρώο Docker (για τοπική αποθήκευση ενσωματωμένων εικόνων Docker).
  • UI για το μητρώο Docker.

PostgreSQL

Το Plesk έρχεται ήδη με PostgreSQL DBMS, αλλά όχι την πιο πρόσφατη έκδοση (τη στιγμή που γραφόταν το 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-server με την εντολή:

service postgresql restart

Έχουμε εγκαταστήσει και ρυθμίσει την PostgreSQL. Τώρα ας δημιουργήσουμε μια βάση δεδομένων, χρήστες για περιβάλλοντα dev και prod και ας δώσουμε στους χρήστες δικαιώματα διαχείρισης της βάσης δεδομένων:

$ 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

Ας προχωρήσουμε στην εγκατάσταση του RabbitMQ, ενός μεσίτη μηνυμάτων για το Celery. Η εγκατάστασή του στο 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

Μετά την εγκατάσταση, πρέπει να δημιουργήσουμε vhosts, χρήστες και παραχωρούν τα απαραίτητα δικαιώματα:

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. Θα χρησιμοποιηθεί ως backend για την αποθήκευση των αποτελεσμάτων των εργασιών Celery.

Θα δημιουργήσουμε δύο κοντέινερ Docker με το Redis για περιβάλλοντα dev και prod χρησιμοποιώντας την επέκταση Docker για τον Plesk.

  1. Πηγαίνουμε στο Plesk, πηγαίνουμε στην ενότητα Επεκτάσεις, αναζητούμε την επέκταση Docker και την εγκαθιστούμε (χρειαζόμαστε μια δωρεάν έκδοση):

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  2. Μεταβείτε στην εγκατεστημένη επέκταση, βρείτε την εικόνα μέσω της αναζήτησης redis bitnami και εγκαταστήστε την πιο πρόσφατη έκδοση:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  3. Πηγαίνουμε στο κοντέινερ που κατεβάσατε και προσαρμόζουμε τη διαμόρφωση: καθορίστε τη θύρα, το μέγιστο εκχωρημένο μέγεθος RAM, τον κωδικό πρόσβασης στις μεταβλητές περιβάλλοντος και προσαρτήστε τον τόμο:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  4. Εκτελούμε τα βήματα 2-3 για το κοντέινερ prod, στις ρυθμίσεις αλλάζουμε μόνο τις παραμέτρους: θύρα, κωδικός πρόσβασης, μέγεθος RAM και διαδρομή προς το φάκελο τόμου στον διακομιστή:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

Μητρώο 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, θα δημιουργήσουμε το αρχείο .htpasswd για Βασική εξουσιοδότηση στο αποθετήριο Docker:
    htpasswd -bBc .htpasswd hw_docker_admin hw_docker_password
  4. Συλλέξτε και ανυψώστε δοχεία:
    docker-compose up -d
  5. Και πρέπει να ανακατευθύνουμε το Nginx στα κοντέινερ μας. Αυτό μπορεί να γίνει μέσω του Plesk.

Τα ακόλουθα βήματα πρέπει να γίνουν για τους υποτομείς docker.helloworld.ru και docker-ui.helloworld.ru:

Στο τμήμα Dev Tools μεταβείτε στον ιστότοπό μας Κανόνες διακομιστή μεσολάβησης Docker:

CI/CD σε Github Actions για ένα έργο Flask+Angular
Και προσθέστε έναν κανόνα στην εισερχόμενη κυκλοφορία διακομιστή μεσολάβησης στο κοντέινερ μας:

CI/CD σε Github Actions για ένα έργο Flask+Angular

  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:

    CI/CD σε Github Actions για ένα έργο Flask+Angular
    Όταν κάνετε κλικ στο Αναζήτηση αποθετηρίων, το πρόγραμμα περιήγησης θα εμφανίσει ένα παράθυρο εξουσιοδότησης όπου θα χρειαστεί να εισαγάγετε το όνομα χρήστη και τον κωδικό πρόσβασης για το χώρο αποθήκευσης. Μετά από αυτό, θα μεταφερθούμε σε μια σελίδα με μια λίστα αποθετηρίων (προς το παρόν, θα είναι κενή για εσάς):

    CI/CD σε Github Actions για ένα έργο Flask+Angular

Άνοιγμα θυρών στο τείχος προστασίας Plesk

Μετά την εγκατάσταση και τη διαμόρφωση των στοιχείων, πρέπει να ανοίξουμε θύρες έτσι ώστε τα στοιχεία να είναι προσβάσιμα από τα κοντέινερ του Docker και το εξωτερικό δίκτυο.

Ας δούμε πώς να το κάνουμε αυτό χρησιμοποιώντας την επέκταση τείχους προστασίας για το Plesk που εγκαταστήσαμε νωρίτερα.

  1. Παω σε Εργαλεία & Ρυθμίσεις > Ρυθμίσεις > Τείχος προστασίας:
    CI/CD σε Github Actions για ένα έργο Flask+Angular
  2. Παω σε Τροποποίηση κανόνων τείχους προστασίας Plesk > Προσθήκη προσαρμοσμένου κανόνα και ανοίξτε τις ακόλουθες θύρες TCP για το υποδίκτυο Docker (172.0.0.0 / 8):
    RabbitMQ: 1883, 4369, 5671-5672, 25672, 61613-61614
    Redis: 32785, 32786

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  3. Θα προσθέσουμε επίσης έναν κανόνα που θα ανοίγει τις θύρες PostgreSQL και τους πίνακες διαχείρισης RabbitMQ στον έξω κόσμο:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  4. Εφαρμόστε τους κανόνες χρησιμοποιώντας το κουμπί Εφαρμογή αλλαγών:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

Ρύθμιση CI/CD στο Github Actions

Ας πάμε στο πιο ενδιαφέρον μέρος - τη δημιουργία ενός αγωγού συνεχούς ενοποίησης και την παράδοση του έργου μας στον διακομιστή.

Αυτός ο αγωγός θα αποτελείται από δύο μέρη:

  • δημιουργία εικόνας και εκτέλεση δοκιμών (για το backend) - στην πλευρά του Github.
  • εκτέλεση μετεγκατάστασης (για το backend) και ανάπτυξη κοντέινερ - στον διακομιστή.

Αναπτύξτε στο Plesk

Ας ασχοληθούμε πρώτα με το δεύτερο σημείο (γιατί το πρώτο εξαρτάται από αυτό).

Θα διαμορφώσουμε τη διαδικασία ανάπτυξης χρησιμοποιώντας την επέκταση Git για το Plesk.

Εξετάστε ένα παράδειγμα με ένα περιβάλλον Prod για ένα αποθετήριο Backend.

  1. Πηγαίνουμε στη συνδρομή του ιστότοπού μας Helloworld και πηγαίνουμε στην υποενότητα Git:

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  2. Εισαγάγετε έναν σύνδεσμο προς το αποθετήριο Github στο πεδίο "Remote Git repository" και αλλάξτε τον προεπιλεγμένο φάκελο httpdocs σε άλλον (π.χ. /httpdocs/hw_back):

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  3. Αντιγράψτε το δημόσιο κλειδί SSH από το προηγούμενο βήμα και Προσθήκη είναι στις ρυθμίσεις Github.
  4. Κάντε κλικ στο OK στην οθόνη στο βήμα 2, μετά από το οποίο θα ανακατευθυνθούμε στη σελίδα αποθετηρίου στο Plesk. Τώρα πρέπει να διαμορφώσουμε το αποθετήριο ώστε να ενημερώνεται για δεσμεύσεις στον κύριο κλάδο. Για να το κάνετε αυτό, μεταβείτε στο Ρυθμίσεις αποθετηρίου και αποθηκεύστε την αξία Webhook URL (θα το χρειαστούμε αργότερα κατά τη ρύθμιση του Github Actions):

    CI/CD σε Github Actions για ένα έργο Flask+Angular

  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} - διαδρομή προς το φάκελο prod του αποθετηρίου υποστήριξης στον διακομιστή.
    {ENV} - περιβάλλον (dev / prod), στην περίπτωσή μας prod;
    {DOCKER_REGISTRY_HOST} - ο οικοδεσπότης του αποθετηρίου μας docker
    {TG_BOT_TOKEN} — Διακριτικό bot 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

Το περιβάλλον dev για το αποθετήριο του backend και το frontend έχουν ρυθμιστεί με τον ίδιο τρόπο.

Διοχέτευση ανάπτυξης στο Github Actions

Ας προχωρήσουμε στη ρύθμιση του πρώτου μέρους του αγωγού CI/CD στο Github Actions.

Backend

Ο αγωγός περιγράφεται στο αρχείο deploy.yml.

Αλλά πριν το αναλύσουμε, ας συμπληρώσουμε τις Secret μεταβλητές που χρειαζόμαστε στο 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 - ένα διακριτικό για την ανάπτυξη στο prod-repository του διακομιστή (το πήραμε στο Deployment στο Plesk σελ. 4).
  • DEPLOY_BACK_DEV_TOKEN - διακριτικό για ανάπτυξη στο αποθετήριο dev του διακομιστή.

Η διαδικασία ανάπτυξης είναι απλή και αποτελείται από τρία βασικά βήματα:

  • δημιουργία και δημοσίευση της εικόνας στο αποθετήριο μας.
  • εκτέλεση δοκιμών σε κοντέινερ με βάση μια πρόσφατα κατασκευασμένη εικόνα.
  • ανάπτυξη στο επιθυμητό περιβάλλον ανάλογα με τον κλάδο (dev/master).

frontend

Το αρχείο deploy.yml για το μπροστινό αποθετήριο λίγο διαφορετικό από αυτό του Μπεκ. Λείπει ένα βήμα με δοκιμές εκτέλεσης και αλλάζει τα ονόματα των διακριτικών για ανάπτυξη. Τα μυστικά για το μπροστινό αποθετήριο, παρεμπιπτόντως, πρέπει να συμπληρωθούν ξεχωριστά.

Ρύθμιση ιστότοπου

Διακίνηση μεσολάβησης μέσω του Nginx

Λοιπόν, φτάσαμε στο τέλος. Απομένει μόνο να διαμορφώσουμε τον διακομιστή μεσολάβησης της εισερχόμενης και εξερχόμενης κίνησης στο κοντέινερ μας μέσω του Nginx. Έχουμε ήδη καλύψει αυτήν τη διαδικασία στο βήμα 5 της ρύθμισης του Μητρώου Docker. Το ίδιο θα πρέπει να επαναληφθεί για το πίσω και το μπροστινό μέρος σε περιβάλλοντα dev και prod.

Θα δώσω στιγμιότυπα οθόνης των ρυθμίσεων.

Backend

CI/CD σε Github Actions για ένα έργο Flask+Angular

frontend

CI/CD σε Github Actions για ένα έργο Flask+Angular
Σημαντική διευκρίνιση. Όλες οι διευθύνσεις URL θα αποστέλλονται με μεσολάβηση στο κοντέινερ της διεπαφής, εκτός από αυτές που ξεκινούν με /api/ - θα τοποθετηθούν στο πίσω μέρος του δοχείου (έτσι στο πίσω δοχείο, όλοι οι χειριστές πρέπει να ξεκινούν με /api/).

Αποτελέσματα της

Τώρα ο ιστότοπός μας θα πρέπει να είναι διαθέσιμος στη διεύθυνση helloworld.ru και dev.helloworld.ru (prod- και dev-environments, αντίστοιχα).

Συνολικά, μάθαμε πώς να προετοιμάζουμε μια απλή εφαρμογή σε Flask και Angular και να ρυθμίζουμε μια διοχέτευση στο Github Actions για να τη διαθέσουμε σε έναν διακομιστή που εκτελεί το Plesk.

Θα αντιγράψω τους συνδέσμους προς τα αποθετήρια με τον κώδικα: backend, frontend.

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο