Сәлеметсіз бе! Менің атым Дима, мен Wrike-тегі SysOps командасының техникалық жетекшісімін. Бұл мақалада мен сізге 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. Біз блог A-жазбасын жасаймыз және ол үшін жалған IP көрсетеміз (бұл ресми, бірақ олар оны сәл әдемірек ете алар еді).
2-қадам: Cloudflare Token
-
Менің профилім -> 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 ( ықтимал параметрлердің толық тізімі):
-
Көрсетіңіз бухгалтерлік есеп және аймақтық
-
Біз өзгереміз маршрут * сияқты нәрсегеblog.example.com/*
-
Көрсетіңіз жалған үшін жұмысшылардев
-
Шелекті ./public деп өзгертіңіз (немесе сіздің статикалық сайтыңыз қайда орналасқан)
-
Жолда бірнеше домен болса, жұмыс сценарийіндегі жолды түзету керек: works-site/index.js (функцияны қараңыз handleEvent)
Керемет, топты пайдаланып сайтты орналастыру уақыты келді wrangler publish.
4-бөлім: Орналастыруды автоматтандыру
Бұл нұсқаулық Gitlab үшін жазылған, бірақ ол жалпы автоматтандырылған орналастырудың мәні мен қарапайымдылығын қамтиды.
1-қадам: Жобамызды жасаңыз және конфигурациялаңыз
-
Жаңа GitLab жобасын жасаңыз және сайтты жүктеңіз: каталог 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 → Құбырлар → Құбырды іске қосу) немесе негізгі филиалға міндеттеме беру арқылы. Voila!
қорытынды
Мүмкін, мен оны аздап төмендеткен шығармын және бүкіл процесс он минуттан астам уақытты алды. Бірақ қазір сізде автоматты орналастыруы бар жылдам сайт және Жұмысшылармен тағы не істеуге болатыны туралы жаңа идеялар бар.
Ақпарат көзі: www.habr.com