ວິທີການສ້າງເວັບໄຊທ໌ static ຢູ່ໃນ Cloudflare Workers Sites

ສະບາຍດີ! ຂ້ອຍຊື່ Dima, ຂ້ອຍເປັນຫົວຫນ້າດ້ານວິຊາການສໍາລັບທີມງານ SysOps ຢູ່ Wrike. ໃນບົດຄວາມນີ້ຂ້າພະເຈົ້າຈະບອກທ່ານກ່ຽວກັບວິທີເຮັດໃຫ້ເວັບໄຊທ໌ທີ່ໃກ້ຊິດກັບຜູ້ໃຊ້ເທົ່າທີ່ເປັນໄປໄດ້ໃນ 10 ນາທີແລະ 5 ໂດລາຕໍ່ເດືອນແລະອັດຕະໂນມັດການນໍາໃຊ້ຂອງມັນ. ບົດຄວາມມີເກືອບບໍ່ມີຫຍັງກ່ຽວຂ້ອງກັບບັນຫາທີ່ພວກເຮົາແກ້ໄຂພາຍໃນທີມງານຂອງພວກເຮົາ. ນີ້ແມ່ນປະສົບການສ່ວນຕົວຂອງຂ້ອຍ ແລະຄວາມປະທັບໃຈທີ່ໄດ້ຮູ້ຈັກກັບເທັກໂນໂລຢີທີ່ໃໝ່ສຳລັບຂ້ອຍ. ຂ້າພະເຈົ້າໄດ້ພະຍາຍາມອະທິບາຍຂັ້ນຕອນໃນລາຍລະອຽດຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ເພື່ອວ່າຄໍາແນະນໍາຈະເປັນປະໂຫຍດສໍາລັບຜູ້ທີ່ມີປະສົບການທີ່ແຕກຕ່າງກັນ. ຂ້ອຍຫວັງວ່າເຈົ້າຈະມີຄວາມສຸກ. ໄປ!

ດັ່ງນັ້ນ, ບາງທີເຈົ້າໄດ້ພົບເຫັນວິທີທີ່ງ່າຍດາຍແລະລາຄາຖືກທີ່ຈະເປັນເຈົ້າພາບເວັບໄຊທ໌. ບາງທີແມ່ນບໍ່ເສຍຄ່າ, ດັ່ງທີ່ໄດ້ອະທິບາຍໄວ້ໃນນີ້ ບົດ​ຄວາມ​ທີ່​ຍິ່ງ​ໃຫຍ່​.

ແຕ່ທັນທີທັນໃດທ່ານຍັງເບື່ອແລະຕ້ອງການທີ່ຈະສໍາຜັດກັບໂລກໃຫມ່ທີ່ກ້າຫານຂອງເຕັກໂນໂລຊີ? ສົມມຸດວ່າທ່ານກໍາລັງຄິດກ່ຽວກັບການນໍາໄປໃຊ້ອັດຕະໂນມັດແລະຕ້ອງການເລັ່ງເວັບໄຊທ໌ຂອງເຈົ້າໃຫ້ຫຼາຍເທົ່າທີ່ເປັນໄປໄດ້ບໍ? ໃນບົດຄວາມນີ້ພວກເຮົາຈະໃຊ້ Hugo, ແຕ່ນີ້ແມ່ນທາງເລືອກ.

ພວກເຮົາໃຊ້ Gitlab CI / CD ສໍາລັບອັດຕະໂນມັດ, ແຕ່ວ່າການເລັ່ງ? ໃຫ້ໃຊ້ເວັບໄຊໂດຍກົງກັບ Cloudflare ໂດຍໃຊ້ ສະຖານທີ່ເຮັດວຽກ.

ສິ່ງທີ່ຕ້ອງການເພື່ອເລີ່ມຕົ້ນ:

• Gitlab (ຂອງທ່ານເອງຫຼື ມີເມກ)

• ບັນຊີ ໃນ Cloudflare

• ຕິດຕັ້ງແລ້ວ nodejs/npm

ສ່ວນທີ 1: ການຕິດຕັ້ງ Hugo

ຖ້າທ່ານມີ Hugo ຕິດຕັ້ງແລ້ວ, ຫຼືຖ້າທ່ານຕ້ອງການເຄື່ອງສ້າງເວັບໄຊທ໌ຄົງທີ່ທີ່ແຕກຕ່າງກັນ (ຫຼືບໍ່ໄດ້ໃຊ້ອັນໃດອັນຫນຶ່ງ), ຫຼັງຈາກນັ້ນທ່ານສາມາດຂ້າມສ່ວນນີ້ໄດ້.

1. ດາວໂຫລດ Hugo ຈາກ https://github.com/gohugoio/hugo/releases

2. ພວກເຮົາວາງໄຟລ໌ທີ່ປະຕິບັດໄດ້ Hugo ຕາມຫນຶ່ງທີ່ໄດ້ກໍານົດໄວ້ໃນ PATH ວິທີ

3. ການສ້າງເວັບໄຊໃໝ່: hugo new site blog.example.com

4. ປ່ຽນໄດເຣັກທໍຣີປັດຈຸບັນເປັນອັນທີ່ສ້າງໃໝ່: cd blog.example.com

5. ເລືອກ​ຫົວ​ຂໍ້​ການ​ອອກ​ແບບ (https://github.com/budparr/gohugo-theme-ananke/releases ຫຼືໃດກໍ່ຕາມ)

6. ຂໍໃຫ້ສ້າງບົດທໍາອິດ: hugo new posts/my-amazing-post.md

7. ເພີ່ມເນື້ອຫາໃສ່ໄຟລ໌ທີ່ສ້າງຂຶ້ນ: content/posts/my-amazing-post.md.
   ເມື່ອທຸກຢ່າງສຳເລັດແລ້ວ, ໃຫ້ປ່ຽນຄ່າຮ່າງເປັນ ທີ່ບໍ່ຖືກຕ້ອງ

8. ການສ້າງໄຟລ໌ຄົງທີ່: hugo -D

ໃນປັດຈຸບັນສະຖານທີ່ຄົງທີ່ຂອງພວກເຮົາແມ່ນຕັ້ງຢູ່ໃນໄດເລກະທໍລີ ./ສາທາລະນະ ແລະກຽມພ້ອມສໍາລັບການນໍາໃຊ້ຄູ່ມືທໍາອິດຂອງທ່ານ.

ສ່ວນທີ 2: ການຕັ້ງຄ່າ Cloudflare

ຕອນນີ້ໃຫ້ເບິ່ງການຕັ້ງຄ່າເບື້ອງຕົ້ນຂອງ Cloudflare. ໃຫ້ສົມມຸດວ່າພວກເຮົາມີໂດເມນສໍາລັບເວັບໄຊທ໌ແລ້ວ. ໃຫ້​ໃຊ້​ເວ​ລາ​ເປັນ​ຕົວ​ຢ່າງ​ blog.example.com.

ຂັ້ນຕອນທີ 1: ສ້າງ DNS entry

ທໍາອິດ, ເລືອກໂດເມນຂອງພວກເຮົາ, ແລະຫຼັງຈາກນັ້ນລາຍການເມນູ DNS. ພວກເຮົາສ້າງ blog A-record ແລະຊີ້ບອກບາງ IP ປອມສໍາລັບມັນ (ນີ້ແມ່ນຢ່າງເປັນທາງການ ຄຳແນະນຳ, ແຕ່ພວກເຂົາສາມາດເຮັດໃຫ້ມັນງາມກວ່າເລັກນ້ອຍ).

ຂັ້ນຕອນທີ 2: Cloudflare Token

1. ຂໍ້ມູນຂອງຂ້າພະເຈົ້າ -> API tokens ແຖບ-> ສ້າງໂທເຄັນ -> ສ້າງ Custom Token

ໃນທີ່ນີ້ທ່ານຈະຕ້ອງຈໍາກັດ token ໃນບັນຊີແລະເຂດ, ແຕ່ອອກຈາກທາງເລືອກ Edit ສໍາລັບການອະນຸຍາດທີ່ລະບຸໄວ້ໃນຮູບ.

ບັນທຶກ token ສໍາລັບອະນາຄົດ, ພວກເຮົາຈະຕ້ອງການມັນຢູ່ໃນສ່ວນທີສາມ.

ຂັ້ນຕອນທີ 3: ໄດ້ຮັບບັນຊີແລະ zoneid

ໂດເມນ → ພາບລວມ → [ແຖບດ້ານຂວາ]

ເຫຼົ່ານີ້ແມ່ນຂອງຂ້ອຍ, ຢ່າໃຊ້ພວກມັນ :)

ບັນທຶກພວກມັນຢູ່ຂ້າງ token, ພວກເຮົາຍັງຕ້ອງການພວກມັນຢູ່ໃນສ່ວນທີສາມ.

ຂັ້ນຕອນທີ 4: ເປີດໃຊ້ພະນັກງານ

ໂດເມນ → ພະ​ນັກ​ງານ → ຄຸ້ມຄອງຜູ້ອອກແຮງງານ

ພວກ​ເຮົາ​ເລືອກ​ເອົາ​ຊື່​ທີ່​ເປັນ​ເອ​ກະ​ລັກ​ແລະ​ອັດ​ຕາ​ພາ​ສີ​ຄົນ​ງານ → ບໍ່​ຈໍາ​ກັດ ($5 ຕໍ່​ເດືອນ​ໃນ​ມື້​ນີ້​)​. ຖ້າທ່ານຕ້ອງການ, ທ່ານສາມາດອັບເກຣດເປັນເວີຊັນຟຣີໃນພາຍຫຼັງ.

ສ່ວນທີ 3: ການນຳໃຊ້ຄັ້ງທຳອິດ (ການນຳໃຊ້ດ້ວຍມື)

ຂ້າພະເຈົ້າໄດ້ນໍາໃຊ້ຄູ່ມືຄັ້ງທໍາອິດເພື່ອຊອກຫາສິ່ງທີ່ເກີດຂຶ້ນຢູ່ບ່ອນນັ້ນ. ເຖິງແມ່ນວ່າທັງຫມົດນີ້ສາມາດເຮັດໄດ້ງ່າຍກວ່າ:

1. ຕິດ​ຕັ້ງ wrangler​: npm i @cloudflare/wrangler -g

2. ໃຫ້ໄປທີ່ໄດເລກະທໍລີຂອງ blog ຂອງພວກເຮົາ: cd blog.example.com

3. ເປີດຕົວ wrangler: wrangler init — site hugo-worker

4. ສ້າງ config ສໍາລັບ wrangler (ໃສ່ token ເມື່ອຖືກຖາມ): wrangler config

ຕອນນີ້ໃຫ້ເຮົາພະຍາຍາມປ່ຽນແປງໄຟລ໌ທີ່ສ້າງຂຶ້ນໃໝ່ wrangler.toml (ທີ່ນີ້ ບັນຊີລາຍຊື່ເຕັມຂອງການຕັ້ງຄ່າທີ່ເປັນໄປໄດ້):

1. ລະບຸວ່າ ບັນຊີແລະ zoneid

2. ປ່ຽນແປງ ເສັ້ນທາງ ກັບ​ບາງ​ສິ່ງ​ບາງ​ຢ່າງ *blog.example.com/*

3. ລະບຸວ່າ ທີ່ບໍ່ຖືກຕ້ອງ ການ ຄົນງານ

4. ປ່ຽນ bucket ເປັນ ./public (ຫຼືບ່ອນທີ່ສະຖານທີ່ຄົງທີ່ຂອງເຈົ້າຕັ້ງຢູ່)

5. ຖ້າທ່ານມີຫຼາຍກວ່າຫນຶ່ງໂດເມນໃນເສັ້ນທາງ, ທ່ານຄວນແກ້ໄຂເສັ້ນທາງໃນສະຄິບທີ່ເຮັດວຽກ: workers-site/index.js (ເບິ່ງຫນ້າທີ່ handleEvent)

ດີຫຼາຍ, ມັນເຖິງເວລາແລ້ວທີ່ຈະນຳໃຊ້ເວັບໄຊໂດຍໃຊ້ທີມງານ wrangler publish.

ສ່ວນທີ 4: ການນຳໃຊ້ອັດຕະໂນມັດ

ຄູ່ມືນີ້ຖືກຂຽນໄວ້ສໍາລັບ Gitlab, ແຕ່ມັນເກັບກໍາຄວາມສໍາຄັນແລະຄວາມງ່າຍດາຍຂອງການນໍາໃຊ້ອັດຕະໂນມັດໂດຍທົ່ວໄປ.

ຂັ້ນຕອນທີ 1: ສ້າງແລະກໍາຫນົດຄ່າໂຄງການຂອງພວກເຮົາ

1. ສ້າງໂຄງການ GitLab ໃຫມ່ແລະອັບໂຫລດເວັບໄຊທ໌: ໄດເລກະທໍລີ blog.example.com ກັບເນື້ອໃນທັງຫມົດຕ້ອງໄດ້ຮັບການຕັ້ງຢູ່ໃນລະບົບຮາກໂຄງການ

2. ພວກເຮົາກໍານົດ ຕົວແປ 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 → ທໍ່ → ແລ່ນທໍ່) ຫຼືໂດຍການໃຫ້ຄໍາຫມັ້ນສັນຍາກັບສາຂາຕົ້ນສະບັບ. ວ້າວ!

ສະຫລຸບ

ດີ, ຂ້າພະເຈົ້າອາດຈະ understated ມັນເລັກນ້ອຍ, ແລະຂະບວນການທັງຫມົດໃຊ້ເວລາພຽງແຕ່ສິບນາທີ. ແຕ່ຕອນນີ້ເຈົ້າມີເວັບໄຊໄວທີ່ມີການນຳໃຊ້ອັດຕະໂນມັດ ແລະບາງແນວຄວາມຄິດໃໝ່ໆກ່ຽວກັບສິ່ງທີ່ເຈົ້າສາມາດເຮັດໄດ້ກັບຄົນງານ.

 ພະນັກງານ Cloudflare    Hugo    GitLab Ci

ແຫຼ່ງຂໍ້ມູນ: www.habr.com