Εισαγωγή
Η Τεχνολογία Λογισμικού είναι ένας ταχέως εξελισσόμενος και ανταγωνιστικός τομέας. Η ταχύτερη διάθεση των προϊόντων σας στους χρήστες θα σας δώσει πλεονέκτημα έναντι των ανταγωνιστών σας. Από τη θετική πλευρά, υπάρχουν βέλτιστες πρακτικές του κλάδου που βοηθούν τις εταιρείες να έχουν ίσους όρους ανταγωνισμού.
Η Συνεχής Ενσωμάτωση και η Συνεχής Ανάπτυξη (CICD) είναι ένα παράδειγμα στρατηγικής που αξιοποιεί τις βέλτιστες πρακτικές του κλάδου για να δώσει στις εταιρείες πλεονέκτημα σε αυτόν τον ανταγωνιστικό τομέα.
Το GitHub, ένα διαδικτυακό αποθετήριο με το Git, ένα εργαλείο ελέγχου εκδόσεων, επιτρέπει σε προγραμματιστές λογισμικού, μηχανικούς και αρχιτέκτονες να εφαρμόζουν CI/CD. Η Συνεχής Ανάπτυξη (CD) είναι η πρακτική της αυτοματοποίησης των builds, των δοκιμών και των αναπτύξεων. Η Συνεχής Ενσωμάτωση (CI) επιτρέπει σε πολλούς ανθρώπους να συνεργάζονται στο ίδιο έργο και να ελέγχουν ότι ο κώδικας λειτουργεί χωρίς να ανησυχούν για συγκρούσεις συγχώνευσης.
Τα GitHub Actions μάς επιτρέπουν να γράφουμε βήματα που αυτοματοποιούν τα builds, τις δοκιμές και την ανάπτυξη.
Σε αυτόν τον οδηγό, θα μάθετε πώς να ρυθμίζετε τη Συνεχή Ενσωμάτωση με τα GitHub Actions. Θα ξεκινήσουμε ρυθμίζοντας ένα αποθετήριο Git για τη φιλοξενία του κώδικά μας. Στη συνέχεια, θα διαμορφώσουμε μια διαδικασία GitHub CI για την παρακολούθηση των αλλαγών στον κώδικά μας, την εκκίνηση ενός CI runner για την εκτέλεση δοκιμών, τη δημιουργία και την ανάπτυξη της εφαρμογής μας σε έναν διακομιστή Ubuntu 22.04 που τρέχει Nginx.
Προαπαιτούμενα
Για να παρακολουθήσετε αυτόν τον οδηγό, θα χρειαστείτε τα εξής:
-
Έναν διακομιστή που τρέχει Ubuntu 22.04. Μπορείτε να ακολουθήσετε αυτόν τον οδηγό για την αρχική ρύθμιση διακομιστή Ubuntu, προσθήκη μη-root χρήστη, και ενεργοποίηση του τείχους προστασίας UFW του Ubuntu.
-
Θα χρειαστείτε εγκατεστημένο το Node.js στον διακομιστή σας, κατά προτίμηση έκδοση 14 και άνω. Έχουμε έναν οδηγό σχετικά με το πώς να εγκαταστήσετε το Node.js στο Ubuntu.
-
Θα χρειαστείτε εγκατεστημένο το λογισμικό διακομιστή Nginx. Έχουμε έναν οδηγό για το Πώς να εγκαταστήσετε το Nginx σε έναν διακομιστή που τρέχει Ubuntu.
-
Θα χρειαστείτε το Docker και το Docker Compose εγκατεστημένα στον τοπικό σας υπολογιστή για να τρέξετε ένα απομονωμένο περιβάλλον ανάπτυξης. Παρακαλούμε ακολουθήστε τον οδηγό μας για να μάθετε Πώς να εγκαταστήσετε και να λειτουργήσετε το Docker στο cloud.
Τώρα που έχουμε όλα όσα χρειαζόμαστε, ας ξεκινήσουμε.
Βήμα 1. Κλωνοποίηση του Αποθετηρίου του Έργου.
Θα βασίσουμε αυτόν τον οδηγό στο Reactjs, μια δηλωτική βιβλιοθήκη Javascript για τη δημιουργία διεπαφών χρήστη. Εάν θέλετε να δημιουργήσετε ένα νέο έργο από την αρχή, μπορείτε να χρησιμοποιήσετε αυτήν την πηγή για τη Ρύθμιση μιας Εφαρμογής React. Για συντομία, θα χρησιμοποιήσουμε έναν κλώνο αυτού του React.js repo που έχουμε ήδη ρυθμίσει στο GitHub.
Η εφαρμογή που κλωνοποιούμε είναι μια απλή εφαρμογή react με react-router 6 και μια δοκιμή που έγινε με το React Testing Library, το οποίο μας δίνει μεθόδους για πρόσβαση στο DOM.
Για να κλωνοποιήσετε το αποθετήριο, κάντε κλικ στο πράσινο κουμπί και αντιγράψτε τη διεύθυνση URL.
Ανοίξτε το τερματικό στον χώρο εργασίας σας και εκτελέστε την παρακάτω εντολή για να κλωνοποιήσετε την εφαρμογή:
|
1 |
git clone git@github.com:EspiraMarvin/cicd-tut.git |
Μόλις κλωνοποιήσετε το αποθετήριο, μεταβείτε στον κατάλογο του έργου:
|
1 |
cd cicd-tut |
Εκτελέστε την εντολή docker-compose up για να δημιουργήσετε και να τρέξετε την εφαρμογή:
|
1 |
docker-compose up --build --force-recreate |
Όταν ολοκληρωθεί η διαδικασία, επισκεφθείτε το http://localhost:3000
Θα πρέπει να δείτε κάτι παρόμοιο με αυτό:
Βήμα 2. Κατανόηση του Αρχείου Node.js.yml.
Σε αυτό το βήμα, θα ορίσουμε τις οδηγίες στο αρχείο GitHub Yaml για να μας βοηθήσουν να καταλάβουμε τι συμβαίνει. Στο αποθετήριο, υπάρχει ένας κατάλογος .github/workflows που περιέχει ένα node.js.yml αρχείο, το οποίο έχει βήματα ροής εργασίας που ακολουθούν οι github runners αφού στείλετε τις αλλαγές στο αποθετήριο κώδικά σας στο GitHub. YAML Η σύνταξη YAML χρησιμοποιείται για τη συγγραφή ροών εργασίας για τα GitHub Actions. Τα αρχεία YAML καταλήγουν με μια επέκταση yaml ή yml.
Ανοίξτε το node.js.yml αρχείο, θα πρέπει να μοιάζει με αυτό:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
name: cicd-tut on: push: branches: [ "main" ] pull_request: branches: [ "main" ] jobs: build: # Ο τύπος runner στον οποίο θα εκτελεστεί η εργασία runs-on: self-hosted strategy: matrix: node-version: [16.x] # Τα βήματα αντιπροσωπεύουν μια σειρά εργασιών που θα εκτελεστούν ως μέρος της εργασίας steps: - name: 'checkout' uses: actions/checkout@v3 - name: 'setup node actions' uses: actions/setup-node@v3 with: node-version: "16" cache: 'npm' - run: npm i - run: npm test - run: npm run build # - run: cp -r ~/actions-runner/cicd-react/react-tut-test/react-tut-test/build /var/www/react-cicd |
Κατά τη συγγραφή αυτού του οδηγού, χρησιμοποιούσαμε την έκδοση 16 του Node.js 16. Τώρα, ας κατανοήσουμε τη ροή εργασίας του GitHub Actions:
-
name
name: cicd-tut
Το όνομα της ροής εργασίας σας, αυτό το όνομα θα εμφανίζεται στο αποθετήριό σας Actions καρτέλα.
-
on
|
1 2 3 4 5 |
on: push: branches: [ "main" ] pull_request: branches: [ "main" ] |
on χρησιμοποιείται για τον ορισμό συμβάντων. Τα συμβάντα μπορούν να ενεργοποιήσουν αυτόματα μια ροή εργασίας ή να προγραμματιστούν για αργότερα. Τα συμβάντα μπορεί να είναι μεμονωμένα ή πολλαπλά, ενώ μπορείτε επίσης να καθορίσετε εκτελέσεις ροής εργασίας σε συγκεκριμένα κλαδιά, ετικέτες ή αρχεία. Αυτό λειτουργεί σαν φίλτρο.
Στο αρχείο YAML μας ορίζουμε αυτόματα πολλαπλά συμβάντα, τα οποία είναι:
-
Ένα push συμβάν ενεργοποιείται όταν κώδικας υποβάλλεται σε ένα αποθετήριο
-
Ένα pull_request συμβάν ενεργοποιείται όταν δημιουργείται ένα pull request στο κύριο κλαδί.
Καθορίζουμε ένα όνομα κλαδιού main προκειμένου να περιορίσουμε την εκτέλεση της ροής εργασίας μόνο σε αυτό το κλαδί. Μπορούμε επίσης να καθορίσουμε κλαδιά που θα αγνοηθούν χρησιμοποιώντας τη σημαία ! ακολουθούμενη από το όνομα του κλαδιού.
-
jobs
Μια ροή εργασίας αποτελείται ουσιαστικά από μία ή περισσότερες εργασίες. Αυτές οι εργασίες εκτελούνται διαδοχικά από την πρώτη έως την τελευταία.
|
1 2 3 4 |
jobs: build: # Ο τύπος runner στον οποίο θα εκτελεστεί η εργασία runs-on: self-hosted |
Κάθε εργασία εκτελείται σε ένα περιβάλλον runner που καθορίζεται από το runs-on. Μπορείτε να επιλέξετε να εκτελέσετε εργασίες είτε σε runners του GitHub που υποδεικνύονται από το ubuntu-latest είτε σε έναν self-hosted runner που υποδεικνύεται από το self-hosted. Η επιλογή σας θα εξαρτηθεί από τον αριθμό των εργασιών που χρειάζεστε. Με τους self-hosted runners, έχετε μεγαλύτερη ευελιξία και έλεγχο των πόρων.
Στο επόμενο βήμα μας, θα εκτελέσουμε πρώτα τις εργασίες μας σε runners του GitHub και, στη συνέχεια, θα ρυθμίσουμε έναν GitHub self-hosted runner στον δικό μας διακομιστή.
-
strategy
Η στρατηγική (strategy) μας επιτρέπει να χρησιμοποιούμε μεταβλητές σε έναν μόνο ορισμό εργασίας για να δημιουργούμε αυτόματα πολλαπλές εκτελέσεις εργασιών που βασίζονται στους συνδυασμούς των μεταβλητών.
Στο αρχείο YAML μας, έχουμε μία μεταβλητή για την έκδοση node (node-version), αλλά αν προσθέσουμε άλλη μία για την έκδοση node 18, ως εξής: node-version: [16.x, 18.x], τότε η στρατηγική matrix θα δημιουργήσει 2 εκτελέσεις εργασιών για την εφαρμογή react μας, τόσο για την έκδοση node 16 όσο και για την 18.
|
1 2 3 |
strategy: matrix: node-version: [16.x] |
-
steps
Τα βήματα (steps) είναι μια σειρά από εργασίες που συνθέτουν μια εργασία. Τα βήματα μπορούν να εκτελούν εντολές, να ρυθμίζουν εργασίες, να εκτελούν ενέργειες στο δημόσιο αποθετήριό σας ή ενέργειες που έχουν δημοσιευτεί σε ένα μητρώο docker.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
steps: - name: 'checkout' uses: actions/checkout@v3 - name: 'setup node actions' uses: actions/setup-node@v3 with: node-version: "16" cache: 'npm' - run: npm i - run: npm test - run: npm run build |
Ένα βήμα έχει ένα όνομα. Αν και είναι προαιρετικό, μπορείτε να το χρησιμοποιήσετε για να καθορίσετε έναν εύκολο τρόπο αναγνώρισης του ονόματος για το βήμα σας που θα εμφανίζεται στο Github.
Σε ένα βήμα, μπορείτε να επιλέξετε μια ενέργεια για εκτέλεση στη δουλειά σας, οι ενέργειες είναι επαναχρησιμοποιήσιμες. Οι εκδόσεις της ενέργειας καθορίζονται κατά τον ορισμό μιας ενέργειας, αυτό είναι σημαντικό καθώς αποτρέπει τη διακοπή της ροής εργασίας σας όταν ο κάτοχος της ενέργειας δημοσιεύει μια ενημέρωση.
Στο παραπάνω απόσπασμα κώδικα, checkout@v3 είναι ένα παράδειγμα μιας ενέργειας με καθορισμένη έκδοση 3. Αυτή η ενέργεια κάνει checkout το αποθετήριό σας, ώστε η ροή εργασίας σας να μπορεί να έχει πρόσβαση σε αυτό.
Ορισμένες ενέργειες όπως το actions/setup-node@v3 παραπάνω έχουν εισόδους που υποδεικνύονται χρησιμοποιώντας τη λέξη-κλειδί with, οι ενέργειες setup node απαιτούν την έκδοση node 16 και το npm να είναι αποθηκευμένο στην προσωρινή μνήμη.
-
run
Αυτή η ενέργεια εκτελεί προγράμματα γραμμής εντολών χρησιμοποιώντας το κέλυφος του λειτουργικού συστήματος’.
Στο παραπάνω αρχείο YAML, έχουμε τρεις εντολές, και οι τρεις θα εκτελεστούν χρησιμοποιώντας το ίδιο κέλυφος στο περιβάλλον του runner.
-
Η πρώτη εντολή npm i εγκαθιστά όλες τις εξαρτήσεις που απαιτούνται από την εφαρμογή react μας.
-
Η δεύτερη npm test, εκτελεί τη δοκιμή που έχουμε γράψει. Η δοκιμή αναμένει το κείμενο learn react να εμφανίζεται στην Αρχική σελίδα.
-
Τέλος, npm run build η εντολή δημιουργεί έναν κατάλογο build με μια έκδοση παραγωγής της εφαρμογής μας. Αργότερα, θα χρησιμοποιήσουμε αυτόν τον κατάλογο build στο δικό μας Nginx server block.
Βήμα 3. Δοκιμή του Github CI με GitHub Runners.
Σε αυτό το βήμα, θα δοκιμάσουμε τη διαδικασία Συνεχούς Ενσωμάτωσης με GitHub runners. Ξεκινήστε ανοίγοντας το αρχείο node.js.yml. Τροποποιήστε τον τύπο του runner στον οποίο θα εκτελούνται οι ενέργειες σε ubuntu-latest. Ο σκοπός αυτού είναι να δοκιμάσουμε εάν η ροή εργασίας του GitHub λειτουργεί τέλεια στους GitHub runners πριν ρυθμίσουμε τους δικούς μας self-hosted runners.
|
1 2 3 |
jobs: build: runs-on: ubuntu-latest |
Δημιουργήστε ένα νέο αποθετήριο στον GitHub account. Πριν συνεχίσουμε, επιστρέψτε στον κατάλογο του χώρου εργασίας σας και διαγράψτε τον κατάλογο .git, εάν δεν μπορείτε να τον δείτε, ελέγξτε τα κρυφά αρχεία σας. Μπορείτε να χρησιμοποιήσετε την ακόλουθη εντολή στο τερματικό σας για να διαγράψετε τον κατάλογο:
|
1 |
rm -rf .git |
Τώρα μπορείτε να κάνετε git add όλα τα αρχεία του έργου σας, commit και push στο αποθετήριό σας. Εάν κολλήσετε, χρησιμοποιήστε αυτόν τον οδηγό για τη connecting your project folder to the GitHub repository που δημιουργήσατε παραπάνω.
Όταν τελειώσετε, κάντε κλικ στην καρτέλα Code στο αποθετήριό σας, και θα δείτε μια μικρή πορτοκαλί κουκκίδα δίπλα στον συνολικό αριθμό των commits. Όταν κάνετε κλικ σε αυτήν, θα δείτε ένα παράθυρο παρόμοιο με το παρακάτω, που υποδεικνύει ότι η ροή εργασίας σας έχει μπει σε σειρά αναμονής:
Τώρα κάντε κλικ στον σύνδεσμο Details στο παράθυρο ή μεταβείτε στην καρτέλα Actions, θα δείτε κάθε βήμα της ροής εργασίας node.js.yml να εκτελείται από τους GitHub runners:
Εάν πετύχει, κάντε κλικ στην καρτέλα Actions, θα πρέπει να μοιάζει κάπως έτσι:
Και αυτό είναι όλο, η μικρή πορτοκαλί κουκκίδα στην καρτέλα Code θα πρέπει τώρα να είναι ένα πράσινο σημάδι ελέγχου. Ο GitHub runner δημιούργησε την εφαρμογή μας με επιτυχία.
Now, let’s go a step further and change the build environment to use GitHub self-hosted runners in our own Ubuntu Server Infrastructure.
Βήμα 4. Ρύθμιση της ροής εργασίας GitHub για χρήση ενός self-hosted runner.
Πριν εγκαταστήσουμε τον self-hosted runner στον διακομιστή μας, ας επιστρέψουμε στον χώρο εργασίας μας και ας επεξεργαστούμε το αρχείο ροής εργασίας node.js.yml ώστε να εκτελείται σε GitHub self-hosted runners.
|
1 2 3 |
jobs: build: runs-on: self-hosted |
Σε αυτό το στάδιο, όταν κάνετε commit τις αλλαγές, η εργασία θα μπει σε σειρά αναμονής, καθώς δεν έχει οριστεί ακόμα κάποιος self-hosted runner.
Στο αποθετήριό σας, κάντε κλικ στην καρτέλα
Settings, στην αριστερή πλευρική εργαλειοθήκη κάντε κλικ στο
Actions, then click
Runners:
Κάντε κλικ στο New self-hosted runner, και select Linux ως το λειτουργικό σύστημα.
Θα δείτε οδηγίες που σας δείχνουν πώς να κατεβάσετε τον runner και να τον εγκαταστήσετε στον διακομιστή σας.
Βήμα 5. Εγκατάσταση και ρύθμιση ενός Github self-hosted runner στον διακομιστή μας.
Σε αυτό το βήμα, θα ρυθμίσουμε έναν self-hosted GitHub runner. Ένας self-hosted runner είναι ένα σύστημα που μπορεί να αναπτύξει και να διαχειριστεί την εκτέλεση εργασιών από το GitHub Actions στον ιστότοπο του GitHub. Ένα πλεονέκτημα που έχει ο self-hosted runner έναντι του runner που φιλοξενείται από το GitHub είναι η ευελιξία. Προσφέρει μεγαλύτερο έλεγχο του λειτουργικού συστήματος, του υλικού και άλλων εργαλείων που μπορούν να προσαρμοστούν για να καλύψουν τις ανάγκες της εφαρμογής σας.
Οι self-hosted runners μπορούν να προστεθούν σε διάφορα επίπεδα, όπως:
-
Runners σε επίπεδο αποθετηρίου (Repository-level), αυτοί είναι αποκλειστικά για ένα μόνο αποθετήριο.
-
Runners σε επίπεδο οργανισμού (Organization-level), αυτοί μπορούν να επεξεργαστούν εργασίες για πολλαπλά αποθετήρια σε έναν οργανισμό.
-
Επίπεδο επιχείρησης (Enterprise-level) που μπορούν να ανατεθούν σε πολλαπλούς οργανισμούς.
Για να συνεχίσετε, συνδεθείτε στον διακομιστή σας μέσω ssh:
|
1 |
ssh username@server_ip |
Μεταβείτε στον αρχικό σας κατάλογο με την εντολή:
|
1 |
cd ~ |
Στη συνέχεια, δημιουργήστε έναν κατάλογο με το όνομα action-runners και πλοηγηθείτε σε αυτόν:
|
1 |
mkdir actions-runner && cd actions-runner |
Στη συνέχεια, κατεβάστε την τελευταία έκδοση του πακέτου runner:
|
1 |
curl -o actions-runner-linux-x64-2.298.2.tar.gz -L https://github.com/actions/runner/releases/download/v2.298.2/actions-runner-linux-x64-2.298.2.tar.gz |
Στη συνέχεια, εξαγάγετε το πακέτο που κατεβάσατε με την εντολή:
|
1 |
tar xzf ./actions-runner-linux-x64-2.298.2.tar.gz |
Πίσω στο αποθετήριό σας, στην καρτέλα Settings, στο αριστερό πλαϊνό μενού κάντε κλικ στο Actions, στη συνέχεια Runners, ακριβώς όπως κάναμε στο Step 4.
Θα δείτε μια εντολή στη λίστα που περιλαμβάνει ένα token που συνδέει τον self-hosted runner σας με το αποθετήριό σας στο GitHub. Ενώ βρίσκεστε ακόμα μέσα στον κατάλογο στον οποίο εξαγάγατε τον κώδικα του GitHub runner, χρησιμοποιήστε την εντολή που αναφέρεται για να συνδέσετε τον runner σας, για παράδειγμα:
|
1 |
./config.sh --url https://github.com/EspiraMarvin/react-tut-test --token XXXXXXXXXXXXXXXXXXXXXXXXXXX |
Θα πρέπει να γίνει επιτυχής έλεγχος ταυτότητας:
Πατήστε enter για την προεπιλεγμένη ομάδα runner (Default).
Στη συνέχεια, εισαγάγετε ένα όνομα για τον runner σας, για παράδειγμα, my-runner, και πατήστε enter.
Πατήστε Enter για να παρακάμψετε την προσθήκη επιπλέον ετικετών, θα πρέπει να δείτε το μήνυμα επιτυχίας στο παρακάτω στιγμιότυπο οθόνης:
Εισαγάγετε το όνομα του καταλόγου εργασίας σας, για παράδειγμα, react-cicd, θα πρέπει να είναι επιτυχές με το κείμενο settings saved.
Τέλος, εκτελέστε ./run.sh, αυτό θα πρέπει να εμφανίσει Connected to Github:
Αλλά αυτό δεν εκτελείται στο παρασκήνιο, αν πληκτρολογήσουμε ctrl+c στο τερματικό μας, ο runner θα σταματήσει, πρέπει να τον αντικαταστήσουμε με την υπηρεσία .svc.sh για να διατηρήσουμε τον runner σε λειτουργία ως υπηρεσία, ώστε να μπορούμε να συνεχίσουμε να αλληλεπιδρούμε μαζί του.
Σταματήστε τον runner με ctrl+c. Μπορείτε να εγκαταστήσετε την υπηρεσία .svc.sh εκτελώντας την εντολή:
|
1 |
sudo ./svc.sh install |
Μόλις εγκατασταθεί, ξεκινήστε την υπηρεσία με την εντολή:
|
1 |
sudo ./svc.sh start |
Αυτό θα πρέπει να είναι επιτυχές, εμφανίζοντας active (running).
Για να επιβεβαιώσετε ότι η υπηρεσία svc.sh είναι ενεργή και εκτελείται, εκτελέστε την εντολή:
|
1 |
sudo ./svc/sh status |
Σε αυτό το σημείο, οποιαδήποτε ροή εργασίας (workflow) που μπορεί να είχε μπει σε ουρά αναμονής περιμένοντας έναν self-hosted runner θα πρέπει να εκτελεστεί με επιτυχία. Μπορείτε επίσης να επεξεργαστείτε ένα αρχείο και να δοκιμάσετε πράγματα. Για παράδειγμα, τροποποιήστε το αρχείο Σχετικά.tsx, κάντε commit και push τις αλλαγές, και ο self-hosted runner θα ολοκληρώσει την εργασία με επιτυχία.
Βήμα 6. Ρύθμιση του Nginx server block
Σε αυτό το βήμα, θα ρυθμίσουμε ένα server block στο Nginx για να δούμε την έκδοση build της react εφαρμογής μας. Έχουμε έναν οδηγό σχετικά με τη Ρύθμιση των Nginx server blocks που μπορεί να σας φανεί χρήσιμος.
Παρακάτω είναι ένα παράδειγμα ενός server block που χρησιμοποιείται σε αυτόν τον οδηγό:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
server { listen 80; listen [::]:80; server_name react.test; root /var/www/react-cicd/build; index index.html index.htm index.nginx-debian.html; add_header X-Frame-Options "SAMEORIGIN"; add_header X-XSS-Protection "1; mode=block"; add_header X-Content-Type-Options "nosniff"; charset utf-8; location / { try_files $uri $uri/ =404; } } |
Θα δημιουργήσετε ένα αρχείο ρυθμίσεων server block του Nginx μέσα στον /etc/nginx/sites-available κατάλογο.
Ανοίξτε ένα αρχείο για τις ρυθμίσεις του server block του ιστότοπού σας με τον επεξεργαστή nano χρησιμοποιώντας την εντολή:
|
1 |
sudo nano /etc/nginx/sites-available/react-cicd |
Αντιγράψτε το server block που κοινοποιήθηκε παραπάνω, τροποποιήστε το σύμφωνα με τις διαδρομές των καταλόγων σας και επικολλήστε το στο αρχείο που ανοίξατε. Όταν τελειώσετε με την επεξεργασία, πατήστε ctrl+x στη συνέχεια πατήστε y και enter για αποθήκευση και έξοδο.
Μόλις αποθηκευτεί, δημιουργήστε έναν συμβολικό σύνδεσμο (symlink) για τις ρυθμίσεις του server block react-cicd από το /etc/nginx/sites-available στο /etc/nginx/sites-enabled εκτελώντας την εντολή:
|
1 |
sudo ln -s /etc/nginx/sites-available/react-cicd /etc/nginx/sites-enabled/ |
Για να εφαρμοστούν οι αλλαγές, πρέπει να επανεκκινήσετε το Nginx. Ωστόσο, προτού επανεκκινήσετε την υπηρεσία Nginx, ελέγξτε αν οι ρυθμίσεις του Nginx είναι έγκυρες, εκτελώντας την εντολή:
|
1 |
sudo nginx -t |
Εάν η ρύθμιση είναι σωστή, ο έλεγχος θα πρέπει να είναι επιτυχής.
Παρατηρήστε την τιμή της οδηγίας server_name “ react.test ” στο server block; Θα προσθέσετε αυτήν την τιμή στο αρχείο hosts στον τοπικό σας υπολογιστή. Αυτό θα σας επιτρέψει να ανοίξετε την εφαρμογή στο πρόγραμμα περιήγησής σας. Αυτό το βήμα είναι απαραίτητο μόνο για εικονικούς τομείς (virtual domains) που χρησιμοποιούνται σε τοπικά περιβάλλοντα ανάπτυξης. Εάν έχετε ένα καταχωρημένο όνομα τομέα (domain name) συνδεδεμένο με μια δημόσια IP του διακομιστή σας, τότε το όνομα τομέα θα πρέπει να είναι ήδη προσβάσιμο στο πρόγραμμα περιήγησής σας.
Στον τοπικό σας υπολογιστή, ανοίξτε το αρχείο hosts με την εντολή:
|
1 |
sudo nano /etc/hosts |
Μέσα στο αρχείο hosts, προσθέστε τη διεύθυνση IP του διακομιστή σας, π.χ. 127.0.0.1, ακολουθούμενη από το εικονικό όνομα τομέα σας.
Ένα παράδειγμα φαίνεται παρακάτω. Στη συνέχεια, κλείστε το αρχείο και αποθηκεύστε:
|
1 |
192.168.3.123 react.test |
Πίσω στον διακομιστή σας, μέσα στον κατάλογο /var/www , δημιουργήστε έναν νέο κατάλογο, μπορείτε να τον ονομάσετε react-cicd εκτελώντας:
|
1 |
mkdir react-cicd |
Σε αυτό το στάδιο, θα αφαιρέσουμε τα σχόλια (uncomment) από την τελευταία εντολή στο αρχείο node.js.yml .
Αυτή η εντολή αντιγράφει τον φάκελο build της εφαρμογής react από εκεί που καθορίσαμε τον φάκελο εργασίας μας μέσα στον κατάλογο actions-runner στο προηγούμενο βήμα 5.
Και τοποθετεί τον φάκελο public μέσα στον κατάλογο /var/www/react-cicd .
Το server block μπορεί πλέον να έχει πρόσβαση στην εφαρμογή μας και να την εμφανίσει σε ένα πρόγραμμα περιήγησης.
Τέλος, επανεκκινήστε την υπηρεσία Nginx με την εντολή:
|
1 |
sudo service nginx restart |
Τώρα, μπορείτε να κάνετε μια αλλαγή στο αρχείο Σχετικά.tsx , στη συνέχεια να κάνετε commit και push τις αλλαγές σας στο αποθετήριό σας. Μετά από μια επιτυχή δημιουργία (build), θα δείτε την έκδοση build της εφαρμογής react στο http://react.test ή στο όνομα τομέα που καθορίσατε. Αποφύγετε την επεξεργασία του στοιχείου href στο αρχείο Home.tsx καθώς αυτό μπορεί να προκαλέσει αποτυχία της ήδη γραμμένης δοκιμής. Η καρτέλα Actions στο αποθετήριό σας θα πρέπει επίσης να δείχνει την ολοκληρωμένη εργασία build.
Συμπέρασμα
Η συνεχής ενσωμάτωση με το Github Actions συνοδεύεται από πολλά πλεονεκτήματα, όπως η καλή εμπειρία προγραμματιστή, η βοήθεια στις συνεχείς δοκιμές, η ευκολότερη συνεργασία σε μεγαλύτερες ομάδες, η μείωση του χρόνου ανάπτυξης, οι γρήγορες κυκλοφορίες νέων δυνατοτήτων, η ανατροφοδότηση σε πραγματικό χρόνο και η ικανοποίηση των πελατών, δίνοντάς σας ένα πλεονέκτημα έναντι των ανταγωνιστών σας. Για να επεκτείνετε αυτή τη γνώση, ίσως θέλετε επίσης να μάθετε για Ρύθμιση GitLab Continuous Integration (CI) Pipelines σε Ubuntu. και τη χρήση ενός Αυτοδιαχειριζόμενου GitLab Instance για τη φιλοξενία των Docker Images σας και την εκτέλεση ιδιωτικών builds.
Καλή συνέχεια!
Σχόλια
Δεν υπάρχουν σχόλια ακόμα. Γράψτε το πρώτο.