วิธีสร้างไซต์แบบคงที่บนไซต์ Cloudflare Workers

สวัสดี! ฉันชื่อ Dima เป็นหัวหน้าฝ่ายเทคนิคของทีม SysOps ที่ Wrike ในบทความนี้ ฉันจะบอกวิธีสร้างเว็บไซต์ให้ใกล้กับผู้ใช้มากที่สุดใน 10 นาทีและ 5 ดอลลาร์ต่อเดือน และปรับใช้อัตโนมัติ บทความนี้แทบจะไม่เกี่ยวข้องกับปัญหาที่เราแก้ไขภายในทีมของเราเลย นี่เป็นประสบการณ์ส่วนตัวและความประทับใจในการทำความรู้จักกับเทคโนโลยีที่ใหม่สำหรับฉัน ฉันพยายามอธิบายขั้นตอนต่างๆ ให้ละเอียดที่สุดเท่าที่จะเป็นไปได้ เพื่อให้คำแนะนำมีประโยชน์สำหรับผู้ที่มีประสบการณ์ต่างกัน ฉันหวังว่าคุณจะเพลิดเพลิน ไป!

ดังนั้น บางทีคุณอาจพบวิธีที่ง่ายและราคาถูกในการโฮสต์เว็บไซต์แล้ว อาจจะฟรีตามที่อธิบายไว้ในนี้ บทความที่ดี.

แต่จู่ๆ คุณยังรู้สึกเบื่อและอยากสัมผัสโลกใหม่ของเทคโนโลยีที่กล้าหาญใช่ไหม? สมมติว่าคุณกำลังคิดที่จะปรับใช้อัตโนมัติและต้องการเพิ่มความเร็วไซต์ของคุณให้มากที่สุดใช่ไหม ในบทความนี้เราจะใช้ ฮิวโก้แต่นี่เป็นทางเลือก

เราใช้ Gitlab CI/CD สำหรับการทำงานอัตโนมัติ แต่การเร่งความเร็วล่ะ มาปรับใช้ไซต์โดยตรงกับ Cloudflare โดยใช้ ไซต์คนงาน.

สิ่งที่จำเป็นในการเริ่มต้น:

• Gitlab (ของคุณเองหรือ เมฆมาก)

• บัญชี บนคลาวด์แฟลร์

• ติดตั้งแล้ว nodejs/npm

ส่วนที่ 1: การติดตั้ง Hugo

หากคุณได้ติดตั้ง Hugo ไว้แล้ว หรือหากคุณต้องการตัวสร้างไซต์แบบคงที่อื่น (หรือไม่ต้องการใช้เลย) คุณสามารถข้ามส่วนนี้ได้

1. ดาวน์โหลดฮิวโก้จาก https://github.com/gohugoio/hugo/releases

2. เราวางไฟล์ปฏิบัติการ Hugo ตามหนึ่งในไฟล์ที่กำหนดไว้ เส้นทาง วิธี

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. เพิ่มเนื้อหาลงในไฟล์ที่สร้างขึ้น: เนื้อหา/โพสต์/my-amazing-post.md.
   เมื่อทุกอย่างเสร็จแล้วให้เปลี่ยนค่าร่างเป็น เท็จ

8. การสร้างไฟล์คงที่: hugo -D

ขณะนี้ไซต์คงที่ของเราอยู่ภายในไดเร็กทอรี ./สาธารณะ และพร้อมสำหรับการปรับใช้ด้วยตนเองครั้งแรกของคุณ

ส่วนที่ 2: การตั้งค่า Cloudflare

ตอนนี้เรามาดูการตั้งค่าเริ่มต้นของ Cloudflare กัน สมมติว่าเรามีโดเมนสำหรับไซต์อยู่แล้ว ลองมาเป็นตัวอย่าง บล็อก.example.com.

ขั้นตอนที่ 1: สร้างรายการ DNS

ขั้นแรก เลือกโดเมนของเรา จากนั้นเลือกรายการเมนู DNS. เราสร้างบล็อก A-record และระบุ IP ปลอมๆ (นี่คือข้อมูลอย่างเป็นทางการ) คำแนะนำแต่พวกเขาสามารถทำให้มันสวยขึ้นอีกหน่อยได้)

ขั้นตอนที่ 2: โทเค็น Cloudflare

1. My Profile -> โทเค็น API แท็บ -> สร้างโทเค็น -> สร้างโทเค็นที่กำหนดเอง

ที่นี่คุณจะต้องจำกัดโทเค็นไว้เฉพาะบัญชีและโซน แต่ปล่อยให้ตัวเลือกแก้ไขสำหรับการอนุญาตที่แสดงอยู่ในรูปภาพ

เก็บโทเค็นไว้ใช้ในอนาคต เราจะต้องใช้มันในส่วนที่สาม

ขั้นตอนที่ 3: รับบัญชีและโซนไอดี

โดเมน → ขององค์กร → [แถบด้านข้างขวา]

สิ่งเหล่านี้เป็นของฉัน โปรดอย่าใช้มัน :)

บันทึกไว้ข้างๆ โทเค็น เราจะต้องการมันในส่วนที่สามด้วย

ขั้นตอนที่ 4: เปิดใช้งานพนักงาน

โดเมน → แรงงาน → จัดการคนงาน

เราเลือกชื่อที่ไม่ซ้ำและอัตราภาษี คนงาน → ไม่จำกัด ($5 ต่อเดือนวันนี้) หากต้องการ คุณสามารถอัปเกรดเป็นเวอร์ชันฟรีได้ในภายหลัง

ส่วนที่ 3: การปรับใช้ครั้งแรก (การปรับใช้ด้วยตนเอง)

ฉันปรับใช้ด้วยตนเองครั้งแรกเพื่อดูว่าเกิดอะไรขึ้นที่นั่นจริงๆ แม้ว่าทั้งหมดนี้สามารถทำได้ง่ายกว่า:

1. ติดตั้งแรงเลอร์: npm i @cloudflare/wrangler -g

2. ไปที่ไดเรกทอรีของบล็อกของเรา: cd blog.example.com

3. เปิดตัวแรงเลอร์: wrangler init — site hugo-worker

4. สร้างการกำหนดค่าสำหรับ wrangler (ป้อนโทเค็นเมื่อถูกถาม): wrangler config

ตอนนี้เรามาลองเปลี่ยนแปลงไฟล์ที่สร้างขึ้นใหม่กัน wrangler.toml (ที่นี่ รายการการตั้งค่าที่เป็นไปได้ทั้งหมด):

1. แสดง บัญชีและโซนไอดี

2. เราเปลี่ยนแปลง เส้นทาง ถึงสิ่งที่ต้องการ *blog.example.com/*

3. แสดง เท็จ สำหรับ คนงาน

4. เปลี่ยนที่เก็บข้อมูลเป็น ./public (หรือที่ตั้งไซต์คงที่ของคุณ)

5. หากคุณมีโดเมนมากกว่าหนึ่งโดเมนในเส้นทาง คุณควรแก้ไขเส้นทางในสคริปต์การทำงาน: ไซต์คนงาน/index.js (ดูฟังก์ชั่น จัดการเหตุการณ์)

เยี่ยมมาก ถึงเวลาปรับใช้ไซต์โดยใช้ทีมแล้ว wrangler publish.

ส่วนที่ 4: การปรับใช้อัตโนมัติ

คู่มือนี้เขียนขึ้นสำหรับ Gitlab แต่ได้รวบรวมสาระสำคัญและความง่ายของการปรับใช้อัตโนมัติโดยทั่วไป

ขั้นตอนที่ 1: สร้างและกำหนดค่าโครงการของเรา

1. สร้างโครงการ GitLab ใหม่และอัปโหลดไดเรกทอรี site: บล็อก.example.com โดยที่เนื้อหาทั้งหมดจะต้องอยู่ในไดเร็กทอรีรูทของโปรเจ็กต์

2. เราตั้ง ตัวแปร ซีฟาปิโทเคน ที่นี่: การตั้งค่า → CI / ซีดี → ตัวแปร

ขั้นตอนที่ 2: สร้างไฟล์ .gitlab-ci.yml และเรียกใช้การปรับใช้ครั้งแรก

สร้างไฟล์ .gitlab-ci.yml ใน root โดยมีเนื้อหาดังต่อไปนี้:

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 #

เราเปิดตัวการปรับใช้ครั้งแรกด้วยตนเอง (ซีไอ/ซีดี → ท่อ → เรียกใช้ไปป์ไลน์) หรือโดยการผูกพันกับสาขาหลัก เอาล่ะ!

ข้อสรุป

ฉันอาจจะพูดน้อยไปหน่อยและกระบวนการทั้งหมดใช้เวลาเพียงสิบนาทีกว่าๆ แต่ตอนนี้คุณมีไซต์ที่รวดเร็วพร้อมการปรับใช้งานอัตโนมัติและมีแนวคิดใหม่ๆ เกี่ยวกับสิ่งอื่นๆ ที่คุณสามารถทำได้กับ Workers

 คนงาน Cloudflare    ฮิวโก้    GitLab ซี

ที่มา: will.com