Hallo! Mijn naam is Dima, ik ben teamleider van het SysOps-team bij Wrike. In dit artikel zal ik uitleggen hoe je in 10 minuten en voor 5 dollar per maand een gebruikersvriendelijke website kunt maken en de implementatie ervan kunt automatiseren. Het artikel heeft bijna niets te maken met de problemen die we binnen ons team oplossen. Het is eerder mijn persoonlijke ervaring en indrukken van het kennismaken met een nieuwe technologie. Ik heb geprobeerd de stappen zo gedetailleerd mogelijk te beschrijven, zodat de instructie nuttig is voor mensen met verschillende ervaringsniveaus. Ik hoop dat je het leuk vindt. Laten we beginnen!
Dus, misschien heb je al een eenvoudige en goedkope manier gevonden om je website te hosten. Misschien zelfs gratis, zoals beschreven in deze.
Maar misschien verveel je je toch en wil je in aanraking komen met de wonderlijke nieuwe wereld van technologieën? Stel dat je denkt aan het automatiseren van implementatie en je wilt je website zo snel mogelijk maken? In dit artikel zullen we gebruikmaken van, maar dat is niet verplicht.
Voor de automatisering gebruiken we Gitlab CI/CD, maar wat doen we met de snelheidsverbetering? Laten we de website rechtstreeks in Cloudflare implementeren met behulp van.
Wat is er nodig om te starten:
Gitlab (jouw eigen of )
op Cloudflare
Geïnstalleerde
Deel 1: Hugo installeren
Als je Hugo al hebt geïnstalleerd of als je een andere generator voor statische websites verkiest (of helemaal geen gebruikt), kun je deze stap overslaan.
Download Hugo van
Plaats het uitvoerbare bestand Hugo in een van de paden die zijn gedefinieerd in deze paden
Maak een nieuwe website aan:
hugo new site blog.example.comVerander de huidige directory naar de zojuist aangemaakte:
cd blog.example.comKies een thema ( of wat dan ook)
Maak de eerste post aan:
hugo new posts/my-amazing-post.mdVoeg inhoud toe aan het gemaakte bestand: content/posts/my-amazing-post.md.
Wanneer alles is gedaan, verander de waarde van draft naar falseGenereer de statische bestanden:
hugo -D
Nu bevindt onze statische website zich in de directory ./public en is klaar voor de eerste handmatige implementatie.
Deel 2: Cloudflare configureren
Laten we nu de initiële configuratie van Cloudflare bekijken. Stel dat we al een domein voor de website hebben. Laten we als voorbeeld nemen blog.example.com.
Stap 1: Maak een DNS-record aan
Kies eerst ons domein en vervolgens het menu-item DNS. Maak een A-record aan voor blog en geef een fictief IP op (dit is officieel een, maar ze zouden het op een mooiere manier kunnen doen).
Stap 2: Cloudflare Token
Mijn Profiel -> API-tokens tab-> Token Aanmaken -> Aangepast Token Aanmaken
Hier moet je het token beperken tot accounts en zones, maar de mogelijkheid om te Bewerken voor de vermelde machtigingen in de afbeelding te behouden.
Bewaar het token voor later, het zal nodig zijn in het derde deel.
Stap 3: Verkrijg accountid en zoneid
Domein → Overzicht → [rechter zijpaneel]
Dit zijn de mijne, gebruik ze alsjeblieft niet 🙂
Bewaar ze naast het token, ze zullen ook nodig zijn in het derde deel.
Stap 4: Activeer Workers
Domein → Workers → Beheer Workers
Kies een unieke naam en tarief voor Workers → Onbeperkt ($5 per maand op dit moment). Later kun je overstappen op de gratis versie als je dat wilt.
Deel 3: Eerste Deployment (handmatige implementatie)
Ik heb de eerste implementatie handmatig gedaan om te begrijpen wat er echt aan de hand is. Hoewel alles ook eenvoudiger kan:
Installeer wrangler:
npm i @cloudflare/wrangler -gGa naar de directory van onze blog:
cd blog.example.comStart wrangler:
wrangler init — site hugo-workerMaak een config voor wrangler (voer het token in wanneer erom wordt gevraagd):
wrangler config
Laten we nu proberen wijzigingen aan te brengen in het net aangemaakte bestand wrangler.toml ( volledige lijst van mogelijke instellingen):
Geef op accountid en zoneid
Verander route in iets als *blog.example.com/*
Geef op false voor workersdev
Verander bucket naar . /public (of waar je statische site zich bevindt)
Als je meer dan één domein in de route hebt, moet je het pad in het werkscript corrigeren: workers-site/index.js (zie functie handleEvent)
Geweldig, het is tijd om de site te implementeren met het commando wrangler publish.
Deel 4: Automatisering van deployment
Deze instructie is opgesteld voor Gitlab, maar het geeft de essentie en eenvoud van geautomatiseerde implementatie in het algemeen weer.
Stap 1: Creëer en configureer ons project
Maak een nieuw GitLab-project en upload de site: de directory blog.example.com met alle inhoud moet zich in de hoofdmap van het project bevinden
Stel variabele CFAPITOKEN hier in: Instellingen → CI/CD → Variabelen
Stap 2: Maak een bestand .gitlab-ci.yml en start de eerste implementatie
Maak een bestand aan .gitlab-ci.yml in de wortel met de volgende inhoud:
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 # deze taak heeft alleen invloed op de 'master' tak
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 # deze taak heeft alleen invloed op de 'master' tak
tags:
- gitlab-org-docker #Start de eerste uitrol handmatig (CI / CD → Pipelines → Run Pipeline) of door een commit naar de master tak te sturen. Voilà!
Conclusie
Nou, misschien heb ik het een beetje geminimaliseerd en heeft het hele proces iets meer dan tien minuten geduurd. Maar nu heb je een snelle website met automatische uitrol en een paar frisse ideeën over wat je nog meer kunt doen met Workers.
Bron: habr.com
