Helló! A nevem Dima, én vagyok a SysOps csapat technikai vezetője a Wrike-nál. Ebben a cikkben bemutatom, hogyan lehet 10 perc alatt, havi 5 dollárért egy felhasználóbarát weboldalt létrehozni és automatizálni a telepítését. A cikk szinte semmiben sem kapcsolódik azokhoz a problémákhoz, amelyeket a csapatunkon belül megoldunk. Inkább a saját tapasztalataim és a számomra új technológia megismerésének benyomásai. Megpróbáltam a lépéseket a lehető legrészletesebben leírni, hogy az útmutató hasznos legyen különböző tapasztalattal rendelkező emberek számára. Remélem, tetszeni fog. Induljunk!
Tehát lehet, hogy már találtál magadnak egy egyszerű és olcsó megoldást a weboldalad hostolására. Talán még ingyenes is, ahogy ezt a.
Lehet, hogy mégis unalmasnak találod, és szeretnéd felfedezni a technológiák csodálatos új világát? Mondjuk, azon gondolkodsz, hogy automatizáld a telepítést és maximálisan felgyorsítsd a weboldalt? Ebben a cikkben használni fogjuk, de ez nem kötelező.
Az automatizálásra a Gitlab CI/CD-t használjuk, de mi a helyzet a gyorsítással? Lássuk, hogyan telepíthetjük közvetlenül a Cloudflare-re.
Mi szükséges a kezdéshez:
Gitlab (saját vagy )
a Cloudflare-en
Telepítve
1. rész: Hugo telepítése
Ha már telepítve van a Hugo, vagy ha egy másik statikus weboldal generátort preferálsz (vagy egyáltalán nem használsz ilyet), akkor ezt a részt át lehet ugrani.
Töltsd le a Hugót a
Helyezd el a végrehajtható fájlt a megadott utak egyikére
Hozd létre az új weboldalt:
hugo new site blog.example.comVáltsd a jelenlegi könyvtárat az éppen létrehozottra:
cd blog.example.comVálaszd ki a téma dizájnt ( vagy bármi mást)
Hozd létre az első bejegyzést:
hugo new posts/my-amazing-post.mdAdd meg a tartalmat a létrehozott fájlban: content/posts/my-amazing-post.md.
Amikor minden kész, állítsd be a draft értékét hamisGeneráljuk a statikus fájlokat:
hugo -D
Most a statikus weboldalunk a következő könyvtárban található: ./public és készen áll az első manuális telepítésre.
2. rész: Cloudflare beállítása
Most nézzük meg a Cloudflare kezdeti beállításait. Tegyük fel, hogy van doménünk a weboldalhoz. Példaként vegyük blog.example.com.
1. lépés: DNS rekord létrehozása
Első lépésként válaszd ki a doménünket, majd a menüpontot DNS. Hozz létre egy A rekordot blog néven, és adj meg neki egy valamilyen álváltozatú IP címet (ez egy hivatalos, de pedig kicsit szebbé is tehették volna).
2. lépés: Cloudflare token
Profilom -> API tokenok fül-> Token létrehozása -> Egyedi token létrehozása
Itt meg kell határoznia a tokenhez tartozó fiókokat és zónákat, de az Edit lehetőséget hagyja meg a képen felsorolt engedélyekhez.
Mentse el a tokent a jövőbeli használatra, szükségünk lesz rá a harmadik részben.
3. lépés: accountid és zoneid megszerzése
Domain → Áttekintés → [jobb oldalsáv]
Ez az én tokendem, légyszi ne használd őket 🙂
Tartsd őket a token mellett, erre is szükségünk lesz a harmadik részben.
4. lépés: Workers aktiválása
Domain → Workers → Workers kezelése
Válasszunk ki egy egyedi nevet és tarifát a Workers-hez → Unlimited (jelenleg 5 dollár havonta). Ha szeretnéd, később áttérhetsz az ingyenes verzióra.
3. rész: Első telepítés (kézi telepítés)
Kézzel végeztem el az első telepítést, hogy kiderüljön, mi is történik valójában. Bár mindezt egyszerűbben is meg lehet oldani:
Telepítjük a wrangler-t:
npm i @cloudflare/wrangler -gLépjünk be a blogunk könyvtárába:
cd blog.example.comFuttatjuk a wrangler-t:
wrangler init — site hugo-workerHozzuk létre a wrangler konfigurációt (írja be a tokent, amikor megkérik):
wrangler config
Most próbáljunk meg módosításokat végezni az imént létrehozott fájlban wrangler.toml ( a lehetséges beállítások teljes listája):
Megadjuk accountid és zoneid
Change route valami ilyesmit:blog.example.com/*
Megadjuk hamis a workersdev
A bucketet változtassuk .\/public-ra (vagy ahol a statikus oldalunk található)
Ha több domain is van az útvonalban, akkor érdemes a munkascripten javítani az útvonalat: workers-site/index.js (lásd a function handleEvent)
Remek, itt az idő az oldal telepítésére a következő parancs segítségével: wrangler publish.
4. rész: A telepítés automatizálása
Ez az útmutató a Gitlab számára készült, de a lényeget és az automatizált telepítés egyszerűségét átadja általában.
1. lépés: Hozzuk létre és állítsuk be a projektünket
Hozzunk létre egy új GitLab projektet és töltsük fel az oldalt: a könyvtár blog.example.com minden tartalmának a projekt gyökérmappájában kell lennie
Adjunk meg egy változóba CFAPITOKEN itt: Beállítások → CI/CD → Változók
2. lépés: Hozzunk létre egy .gitlab-ci.yml fájlt és indítsuk el az első telepítést
Hozzuk létre a fájlt .gitlab-ci.yml a gyökérben a következő tartalommal:
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 # ez a feladat csak a 'master' ágra vonatkozik
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 # ez a feladat csak a 'master' ágra vonatkozik
tags:
- gitlab-org-docker #Futtassuk az első telepítést kézzel (Gitlab CI → Pipelines → Futtatás vagy egy commitot küldve a master ágra. Voilà!
Zárás
Nos, talán kicsit alábecsültem, és az egész folyamat valójában kicsit több mint tíz percet vett igénybe. De most már van egy gyors weboldalad automatikus telepítéssel és néhány új ötleted arról, mit lehet még tenni a Workers segítségével.
Forrás: habr.com
