Γειά σου! Ονομάζομαι Dima, είμαι τεχνικός επικεφαλής για την ομάδα SysOps στο Wrike. Σε αυτό το άρθρο θα σας πω πώς να φτιάξετε έναν ιστότοπο όσο το δυνατόν πιο κοντά στον χρήστη σε 10 λεπτά και 5 δολάρια το μήνα και να αυτοματοποιήσετε την ανάπτυξή του. Το άρθρο δεν έχει σχεδόν καμία σχέση με τα προβλήματα που λύνουμε μέσα στην ομάδα μας. Αυτή είναι μάλλον η προσωπική μου εμπειρία και εντυπώσεις από τη γνωριμία με μια νέα τεχνολογία για μένα. Προσπάθησα να περιγράψω τα βήματα με όσο το δυνατόν περισσότερες λεπτομέρειες, ώστε οι οδηγίες να είναι χρήσιμες για άτομα με διαφορετική εμπειρία. Ελπίζω να απολαύσετε. Πηγαίνω!
Έτσι, ίσως έχετε ήδη βρει έναν απλό και φθηνό τρόπο να φιλοξενήσετε έναν ιστότοπο. Ίσως ακόμη και δωρεάν, όπως περιγράφεται σε αυτό.
Αλλά ξαφνικά βαριέσαι ακόμα και θέλεις να αγγίξεις τον γενναίο νέο κόσμο της τεχνολογίας; Ας υποθέσουμε ότι σκέφτεστε να αυτοματοποιήσετε την ανάπτυξη και θα θέλατε να επιταχύνετε τον ιστότοπό σας όσο το δυνατόν περισσότερο; Σε αυτό το άρθρο θα χρησιμοποιήσουμε, αλλά αυτό είναι προαιρετικό.
Χρησιμοποιούμε το Gitlab CI/CD για αυτοματισμό, αλλά τι γίνεται με την επιτάχυνση; Ας αναπτύξουμε τον ιστότοπο απευθείας στο Cloudflare χρησιμοποιώντας.
Τι απαιτείται για να ξεκινήσει:
-
Gitlab (το δικό σας ή )
-
στο Cloudflare
-
Εγκατεστημένο
Μέρος 1: Εγκατάσταση του Hugo
Εάν έχετε ήδη εγκαταστήσει το Hugo ή εάν προτιμάτε μια διαφορετική δημιουργία στατικών τοποθεσιών (ή δεν χρησιμοποιείτε καθόλου), τότε μπορείτε να παραλείψετε αυτό το μέρος.
-
Κατεβάστε το Hugo από
-
Τοποθετούμε το εκτελέσιμο αρχείο Hugo σύμφωνα με ένα από αυτά που ορίζονται στο τρόπους
-
Δημιουργία νέου ιστότοπου:
hugo new site blog.example.com -
Αλλάξτε τον τρέχοντα κατάλογο στον νέο κατάλογο:
cd blog.example.com -
Επιλέξτε ένα θέμα σχεδίασης ( ή οτιδήποτε)
-
Ας δημιουργήσουμε την πρώτη ανάρτηση:
hugo new posts/my-amazing-post.md -
Προσθέστε περιεχόμενο στο αρχείο που δημιουργήθηκε: content/posts/my-amazing-post.md.
Όταν ολοκληρωθούν όλα, αλλάξτε την πρόχειρη τιμή σε ψευδής -
Δημιουργία στατικών αρχείων:
hugo -D
Τώρα η στατική τοποθεσία μας βρίσκεται μέσα σε έναν κατάλογο ./δημόσιο και έτοιμο για την πρώτη σας χειροκίνητη ανάπτυξη.
Μέρος 2: Ρύθμιση του Cloudflare
Τώρα ας δούμε την αρχική ρύθμιση του Cloudflare. Ας υποθέσουμε ότι έχουμε ήδη έναν τομέα για τον ιστότοπο. Ας πάρουμε ως παράδειγμα blog.example.com.
Βήμα 1: Δημιουργήστε μια καταχώρηση DNS
Πρώτα, επιλέξτε τον τομέα μας και μετά το στοιχείο μενού DNS. Δημιουργούμε ένα blog A-record και υποδεικνύουμε κάποια πλασματική IP για αυτό (αυτή είναι η επίσημη, αλλά θα μπορούσαν να το είχαν κάνει λίγο πιο όμορφο).
Βήμα 2: Token Cloudflare
-
Το προφίλ μου -> Tokens API καρτέλα-> Δημιουργία διακριτικού -> Δημιουργία προσαρμοσμένου διακριτικού
Εδώ θα χρειαστεί να περιορίσετε το διακριτικό σε λογαριασμούς και ζώνες, αλλά αφήστε την επιλογή Επεξεργασία για τα δικαιώματα που αναφέρονται στην εικόνα.
Αποθηκεύστε το token για το μέλλον, θα το χρειαστούμε στο τρίτο μέρος.
Βήμα 3: Λάβετε accountid και zoneid
Domain → Επισκόπηση → [δεξιά πλαϊνή γραμμή]
Αυτά είναι δικά μου, μην τα χρησιμοποιείτε παρακαλώ :)
Αποθηκεύστε τα δίπλα στο token, θα τα χρειαστούμε και στο τρίτο μέρος.
Βήμα 4: Ενεργοποίηση Εργαζομένων
Domain → Οι εργαζόμενοι → Διαχείριση εργαζομένων
Επιλέγουμε μοναδικό όνομα και τιμολόγιο Workers → Unlimited (5$ το μήνα σήμερα). Εάν θέλετε, μπορείτε αργότερα να κάνετε αναβάθμιση στη δωρεάν έκδοση.
Μέρος 3: Πρώτη ανάπτυξη (χειροκίνητη ανάπτυξη)
Έκανα την πρώτη χειροκίνητη ανάπτυξη για να μάθω τι πραγματικά συνέβαινε εκεί. Αν και όλα αυτά μπορούν να γίνουν πιο απλά:
-
Εγκαταστήστε το wrangler:
npm i @cloudflare/wrangler -g -
Ας πάμε στον κατάλογο του ιστολογίου μας:
cd blog.example.com -
Launch wrangler:
wrangler init — site hugo-worker -
Δημιουργήστε μια διαμόρφωση για wrangler (εισαγάγετε το διακριτικό όταν σας ζητηθεί):
wrangler config
Τώρα ας προσπαθήσουμε να κάνουμε αλλαγές στο νέο αρχείο τσακωτός.toml ( πλήρης λίστα πιθανών ρυθμίσεων):
-
Προσδιορίζω λογιστική και ζώνη
-
Αλλάζουμε Διαδρομή σε κάτι σαν *blog.example.com/*
-
Προσδιορίζω ψευδής για Workerdev
-
Αλλάξτε τον κάδο σε ./public (ή πού βρίσκεται ο στατικός ιστότοπός σας)
-
Εάν έχετε περισσότερους από έναν τομείς στη διαδρομή, τότε θα πρέπει να διορθώσετε τη διαδρομή στο σενάριο εργασίας: Workers-site/index.js (βλέπε λειτουργία handleEvent)
Τέλεια, ήρθε η ώρα να αναπτύξετε τον ιστότοπο χρησιμοποιώντας την ομάδα wrangler publish.
Μέρος 4: Αυτοματοποίηση ανάπτυξης
Αυτός ο οδηγός είναι γραμμένος για το Gitlab, αλλά καταγράφει την ουσία και την ευκολία της αυτοματοποιημένης ανάπτυξης γενικά.
Βήμα 1: Δημιουργήστε και διαμορφώστε το έργο μας
-
Δημιουργήστε ένα νέο έργο GitLab και ανεβάστε τον κατάλογο site: blog.example.com με όλα τα περιεχόμενα πρέπει να βρίσκεται στον ριζικό κατάλογο του έργου
-
Ρυθμίσαμε μεταβλητός CFAPITOKEN εδώ: ρυθμίσεις → CI / CD → Μεταβλητές
Βήμα 2: Δημιουργήστε ένα αρχείο .gitlab-ci.yml και εκτελέστε την πρώτη ανάπτυξη
Δημιουργήστε ένα αρχείο .gitlab-ci.yml στη ρίζα με το ακόλουθο περιεχόμενο:
stages:
- build
- deploy
build:
image: monachus/hugo
stage: build
variables:
GIT_SUBMODULE_STRATEGY: recursive
script:
- cd blog.example.com/
- hugo
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #
deploy:
image: timbru31/ruby-node:2.3
stage: deploy
script:
- wget https://github.com/cloudflare/wrangler/releases/download/v1.8.4/wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- tar xvzf wrangler-v1.8.4-x86_64-unknown-linux-musl.tar.gz
- cd blog.example.com/
- ../dist/wrangler publish
artifacts:
paths:
- blog.example.com/public
only:
- master # this job will affect only the 'master' branch
tags:
- gitlab-org-docker #Ξεκινάμε την πρώτη ανάπτυξη με μη αυτόματο τρόπο (CI/CD → Αγωγοί → Run Pipeline) ή με τη δέσμευση στον κύριο κλάδο. Voila!
Συμπέρασμα
Λοιπόν, μπορεί να το υποτίμησα ελαφρώς, και η όλη διαδικασία κράτησε λίγο περισσότερο από δέκα λεπτά. Τώρα, όμως, έχετε έναν γρήγορο ιστότοπο με αυτόματη ανάπτυξη και μερικές φρέσκες ιδέες για το τι άλλο μπορείτε να κάνετε με το Workers.
Πηγή: www.habr.com