Здраво! Јас се викам Дима, јас сум технички лидер за тимот 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. Ние создаваме блог А-запис и укажуваме на некоја фиктивна IP адреса (ова е официјалната, но можеа да го направат малку поубав).
Чекор 2: Токен на Cloudflare
-
Мој Профил -> АПИ токени таб-> Создадете знак -> Креирајте прилагоден токен
Овде ќе треба да го ограничите токенот на сметки и зони, но оставете ја опцијата Уреди за дозволите наведени на сликата.
Зачувајте го токенот за во иднина, ќе ни треба во третиот дел.
Чекор 3: Земете сметки и зонаид
Домен → Преглед → [десна странична лента]
Овие се мои, немој да ги користиш :)
Зачувајте ги до токенот, ќе ни требаат и во третиот дел.
Чекор 4: Активирајте ги работниците
Домен → Работници → Менаџмент работници
Избираме единствено име и тарифа Работници → Неограничено (5 долари месечно денес). Доколку сакате, подоцна можете да ја надградите на бесплатната верзија.
Дел 3: Прво распоредување (рачно распоредување)
Го направив првото рачно распоредување за да дознаам што навистина се случува таму. Иако сето ова може да се направи поедноставно:
-
Инсталирајте wrangler:
npm i @cloudflare/wrangler -g -
Ајде да одиме во директориумот на нашиот блог:
cd blog.example.com -
Лансирање wrangler:
wrangler init — site hugo-worker -
Креирајте конфигурација за wrangler (внесете го токенот кога ќе биде побарано):
wrangler config
Сега да се обидеме да направиме промени во новосоздадената датотека кавгаџија.toml ( целосна листа на можни поставки):
-
Ние укажуваме сметководствени и зонидни
-
Се менуваме пат на нешто како *blog.example.com/*
-
Ние укажуваме лажни за работницидев
-
Променете ја корпата во ./public (или каде се наоѓа вашата статична локација)
-
Ако имате повеќе од еден домен на патеката, тогаш треба да ја поправите патеката во работната скрипта: работници-сајт/индекс.js (види функција handleEvent)
Одлично, време е да ја распоредите страницата користејќи го тимот wrangler publish.
Дел 4: Автоматизација на распоредување
Овој водич е напишан за Gitlab, но ја доловува суштината и леснотијата на автоматското распоредување воопшто.
Чекор 1: Креирајте и конфигурирајте го нашиот проект
-
Направете нов проект GitLab и поставете го директориумот на сајтот: blog.example.com со сите содржини мора да се наоѓа во root директориумот на проектот
-
Поставивме променлива 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 → Цевководи → Стартувај цевковод) или со обврзување на главната гранка. Voila!
Заклучок
Па, можеби малку го потценив, а целиот процес траеше нешто повеќе од десет минути. Но, сега имате брза локација со автоматско распоредување и неколку нови идеи за тоа што друго можете да направите со Workers.
Извор: www.habr.com