როგორ შევქმნათ სტატიკური საიტი Cloudflare Workers Sites-ზე

გამარჯობა! მე მქვია დიმა, მე ვარ ტექნიკური ლიდერი SysOps გუნდისთვის Wrike-ში. ამ სტატიაში მე გეტყვით, თუ როგორ გააკეთოთ ვებსაიტი რაც შეიძლება ახლოს მომხმარებელთან თვეში 10 წუთში და 5 დოლარში და ავტომატიზირება მოახდინოს მის განთავსებაზე. სტატიას თითქმის არაფერი აქვს საერთო იმ პრობლემებთან, რომლებსაც ჩვენ გუნდში ვწყვეტთ. ეს არის ჩემი პირადი გამოცდილება და შთაბეჭდილებები, რომ გავიცნო ტექნოლოგია, რომელიც ჩემთვის ახალია. შევეცადე, რაც შეიძლება დეტალურად აღმეწერა ნაბიჯები, რათა ინსტრუქციები სასარგებლო ყოფილიყო სხვადასხვა გამოცდილების მქონე ადამიანებისთვის. იმედია ისიამოვნებთ. წადი!

ასე რომ, ალბათ თქვენ უკვე იპოვეთ ვებსაიტის მასპინძლობის მარტივი და იაფი გზა. შესაძლოა, უფასოც კი, როგორც ეს აღწერილია დიდი სტატია.

მაგრამ უცებ მაინც მოგწყინდათ და გსურთ შეეხოთ ტექნოლოგიის მამაც ახალ სამყაროს? ვთქვათ, თქვენ ფიქრობთ განლაგების ავტომატიზაციაზე და გსურთ თქვენი საიტის მაქსიმალურად დაჩქარება? ამ სტატიაში ჩვენ გამოვიყენებთ უგო, მაგრამ ეს არჩევითია.

ჩვენ ვიყენებთ 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 ჩანაწერი

ჯერ აირჩიეთ ჩვენი დომენი და შემდეგ მენიუს ელემენტი DNS. ჩვენ ვქმნით ბლოგს A-ჩანაწერს და მივუთითებთ ამისთვის ფიქტიურ IP-ს (ეს არის ოფიციალური რეკომენდაცია, მაგრამ მათ შეეძლოთ ცოტა უფრო გალამაზებულიყო).

ნაბიჯი 2: Cloudflare Token

1. ჩემი პროფილი -> API ტოკენები tab-> შექმნა Token -> შექმენით საბაჟო ნიშანი

აქ მოგიწევთ ტოკენის შეზღუდვა ანგარიშებითა და ზონებით, მაგრამ დატოვეთ რედაქტირების ვარიანტი სურათზე ჩამოთვლილი ნებართვებისთვის.

შეინახეთ ჟეტონი მომავლისთვის, ის დაგვჭირდება მესამე ნაწილში.

ნაბიჯი 3: მიიღეთ ანგარიში და ზონიდი

დომენის → მიმოხილვა → [მარჯვენა გვერდითი ზოლი]

ესენი ჩემია, ნუ გამოიყენებ გთხოვ :)

შეინახეთ ისინი ჟეტონის გვერდით, მესამე ნაწილშიც დაგვჭირდება.

ნაბიჯი 4: მუშების გააქტიურება

დომენის → მუშაკთა → მუშების მართვა

ჩვენ ვირჩევთ უნიკალურ სახელს და ტარიფს Workers → Unlimited (დღეს 5$ თვეში). თუ გსურთ, შეგიძლიათ მოგვიანებით განაახლოთ უფასო ვერსიაზე.

ნაწილი 3: პირველი განლაგება (ხელით განლაგება)

მე გავაკეთე პირველი ხელით განლაგება იმის გასარკვევად, თუ რა ხდებოდა იქ. მიუხედავად იმისა, რომ ეს ყველაფერი შეიძლება გაკეთდეს უფრო მარტივად:

1. დააინსტალირეთ wrangler: npm i @cloudflare/wrangler -g

2. მოდით გადავიდეთ ჩვენი ბლოგის დირექტორიაში: cd blog.example.com

3. გაშვება wrangler: wrangler init — site hugo-worker

4. შექმენით კონფიგურაცია wrangler-ისთვის (შეიყვანეთ ჟეტონი მოთხოვნისას): wrangler config

ახლა ვცადოთ ცვლილებების შეტანა ახლად შექმნილ ფაილში მეჩხუბარი.ტომლ (აქ შესაძლო პარამეტრების სრული სია):

1. ჩვენ მივუთითებთ აღრიცხული და ზონიდური

2. შეცვლა მარშრუტი რაღაც მსგავსი *blog.example.com/*

3. ჩვენ მივუთითებთ ყალბი ამისთვის მუშადევ

4. თაიგულის შეცვლა ./public (ან სად მდებარეობს თქვენი სტატიკური საიტი)

5. თუ თქვენ გაქვთ ერთზე მეტი დომენი გზაზე, მაშინ უნდა შეასწოროთ ბილიკი სამუშაო სკრიპტში: მუშა-საიტი/index.js (იხ. ფუნქცია handleEvent)

შესანიშნავია, დროა განათავსოთ საიტი გუნდის გამოყენებით wrangler publish.

ნაწილი 4: განლაგების ავტომატიზაცია

ეს სახელმძღვანელო დაწერილია Gitlab-ისთვის, მაგრამ ის ასახავს ზოგადად ავტომატური განლაგების არსს და სიმარტივეს.

ნაბიჯი 1: შექმენით და დააკონფიგურირეთ ჩვენი პროექტი

1. შექმენით ახალი GitLab პროექტი და ატვირთეთ საიტი: დირექტორია blog.example.com ყველა შინაარსით უნდა განთავსდეს პროექტის root დირექტორიაში

2. დავაყენეთ ცვლადი 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 → მილსადენები → გაუშვით მილსადენი) ან სამაგისტრო ფილიალში ჩაბარებით. ვოილა!

დასკვნა

კარგად, მე შეიძლება ოდნავ შევაფასე და მთელი პროცესი ათ წუთზე მეტხანს დასჭირდა. მაგრამ ახლა თქვენ გაქვთ სწრაფი საიტი ავტომატური განლაგებით და ახალი იდეებით იმის შესახებ, თუ რა შეგიძლიათ გააკეთოთ მუშებთან.

 Cloudflare მუშაკები    უგო    GitLab Ci

წყარო: www.habr.com