Салам! Менин атым Дима, мен Wrikeдеги SysOps командасынын техникалык жетекчисимин. Бул макалада мен сизге кантип веб-сайтты колдонуучуга мүмкүн болушунча жакын кылууну жана аны 10 мүнөттө жана айына 5 доллардан автоматташтырууну айтып берем. Макала биздин команданын ичинде чечкен көйгөйлөргө дээрлик эч кандай тиешеси жок. Бул менин жеке тажрыйбам жана мен үчүн жаңы технология менен таанышуудан алган таасирлерим. Мен кадамдарды мүмкүн болушунча майда-чүйдөсүнө чейин сүрөттөп берүүгө аракет кылдым, андыктан нускамалар ар кандай тажрыйбасы бар адамдар үчүн пайдалуу болот. Мен сага жагат деп ишенем. Go!
Демек, сиз веб-сайтты өткөрүүнүн жөнөкөй жана арзан жолун тапкандырсыз. Балким, бул сүрөттөлгөндөй, ал тургай, бекер.
Бирок күтүлбөгөн жерден сиз дагы эле зеригип жатасыз жана технологиянын кайраттуу жаңы дүйнөсүнө тийгиңиз келеби? Сиз жайгаштырууну автоматташтыруу жөнүндө ойлонуп жатасыз дейли жана сайтыңызды мүмкүн болушунча тездеткиңиз келеби? Бул макалада биз колдонобуз, бирок бул милдеттүү эмес.
Биз 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. Биз блог A-record түзөбүз жана ал үчүн кандайдыр бир ойдон чыгарылган IP көрсөтөбүз (бул расмий, бирок алар аны бир аз сулуураак кылып коюшса болмок).
2-кадам: Cloudflare Токен
-
Менин профилим -> API токендери табулатура-> Токен түзүү -> Ыңгайлаштырылган Токен түзүү
Бул жерде сиз токенди эсептерге жана аймактарга чектешиңиз керек, бирок сүрөттө көрсөтүлгөн уруксаттар үчүн Түзөтүү опциясын калтырыңыз.
Токенди келечекке сактаңыз, үчүнчү бөлүктө бизге керек болот.
3-кадам: Accountid жана zoneid алыңыз
домен → жалпы көрүнүш → [оң каптал тилкеси]
Булар меники, колдонбоңуз сураныч :)
Токендин жанына сактап коюңуз, үчүнчү бөлүктө бизге да керек болот.
4-кадам: Жумушчуларды активдештирүү
домен → жумушчулар → Жумушчуларды башкаруу
Биз уникалдуу аталышты жана тарифти тандайбыз Жумушчулар → Чексиз (бүгүнкү күндө айына $5). Кааласаңыз, кийинчерээк акысыз версияга жаңырта аласыз.
3-бөлүк: Биринчи жайылтуу (кол менен жайылтуу)
Мен ал жерде эмне болуп жатканын билүү үчүн биринчи кол менен жайылттым. Мунун баары жөнөкөй кылса болот да:
-
Wrangler орнотуу:
npm i @cloudflare/wrangler -g -
Блогубуздун каталогуна баралы:
cd blog.example.com -
Wranglerди ишке киргизүү:
wrangler init — site hugo-worker -
Wrangler үчүн конфигурацияны түзүңүз (суралганда токенди киргизиңиз):
wrangler config
Эми жаңы түзүлгөн файлга өзгөртүүлөрдү киргизүүгө аракет кылалы wrangler.toml ( мүмкүн болгон орнотуулардын толук тизмеси):
-
Биз көрсөтүп жатабыз эсептик жана зонеид
-
Change жол * сыяктуу нерсегеblog.example.com/*
-
Биз көрсөтүп жатабыз жалган үчүн жумушчулардев
-
Чаканы ./public деп өзгөртүңүз (же сиздин статикалык сайтыңыз кайда жайгашкан)
-
Жолдо бирден ашык домениңиз болсо, анда жумушчу скрипттеги жолду оңдоо керек: works-site/index.js (функцияны караңыз handleEvent)
Жакшы, команданы колдонуу менен сайтты жайылтууга убакыт келди wrangler publish.
4-бөлүк: Жайгаштырууну автоматташтыруу
Бул колдонмо Gitlab үчүн жазылган, бирок ал жалпысынан автоматташтырылган жайылтуунун маңызын жана жеңилдигин камтыйт.
1-кадам: Биздин долбоорду түзүү жана конфигурациялоо
-
Жаңы GitLab долбоорун түзүп, сайтты жүктөңүз: каталог blog.example.com бардык мазмуну менен долбоордун түпкү каталогунда жайгашкан болушу керек
-
Биз орнотобуз өзгөрмө CFAPITOKEN бул жерде: Орнотуулар → CI / CD → Variables
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!
жыйынтыктоо
Ооба, мен аны бир аз басынтып койгондурмун жана бүт процесс он мүнөттөн ашык убакытты алды. Бирок азыр сизде автоматтык түрдө жайгаштырылган тез сайт жана Жумушчулар менен дагы эмне кыла ала тургандыгы тууралуу жаңы идеялар бар.
Source: www.habr.com