כיצד ליצור אתר סטטי באתרי Cloudflare Workers

שלום! שמי דימה, אני מוביל טכני של צוות SysOps ב-Wrike. במאמר זה אספר לכם כיצד להפוך אתר אינטרנט כמה שיותר קרוב למשתמש ב-10 דקות ו-5 דולר לחודש ולהפוך את הפריסה שלו לאוטומטית. למאמר אין כמעט שום קשר לבעיות שאנו פותרים בצוות שלנו. זה דווקא החוויה האישית וההתרשמות שלי מהיכרות עם טכנולוגיה חדשה לי. ניסיתי לתאר את השלבים בפירוט רב ככל האפשר כדי שההוראות יהיו שימושיות עבור אנשים עם ניסיון שונה. אני מקווה שתהנו. ללכת!

אז אולי כבר מצאתם דרך פשוטה וזולה לארח אתר אינטרנט. אולי אפילו בחינם, כפי שמתואר כאן מאמר נהדר.

אבל פתאום אתה עדיין משועמם ורוצה לגעת בעולם החדש והאמיץ של הטכנולוגיה? נניח שאתה חושב על אוטומציה של פריסה וברצונך להאיץ את האתר שלך ככל האפשר? במאמר זה נשתמש הוגו, אבל זה אופציונלי.

אנחנו משתמשים ב-Gitlab CI/CD לאוטומציה, אבל מה לגבי האצה? בואו נפרוס את האתר ישירות ל-Cloudflare באמצעות אתרי עובדים.

מה נדרש כדי להתחיל:

• Gitlab (או מְעוּנָן)

• חשבון ב-Cloudflare

• מוּתקָן nodejs/npm

חלק 1: התקנת הוגו

אם כבר התקנת את הוגו, או אם אתה מעדיף מחולל אתרים סטטי אחר (או לא משתמש באחד בכלל), אז אתה יכול לדלג על החלק הזה.

1. הורד את הוגו מ https://github.com/gohugoio/hugo/releases

2. אנו מניחים את קובץ ההפעלה של הוגו לפי אחד מאלה המוגדרים ב נתיב דרכים

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-> צור אסימון -> צור אסימון מותאם אישית

כאן תצטרך להגביל את האסימון לחשבונות ואזורים, אך השאר את אפשרות העריכה עבור ההרשאות הרשומות בתמונה.

שמור את האסימון לעתיד, נזדקק לו בחלק השלישי.

שלב 3: קבל accountid ו-zoneid

תְחוּם → סקירה כללית → [סרגל צד ימין]

אלה שלי, אל תשתמש בהם בבקשה :)

שמור אותם ליד האסימון, נצטרך אותם גם בחלק השלישי.

שלב 4: הפעל עובדים

תְחוּם → עובדים → נהל עובדים

אנו בוחרים שם ייחודי ותעריף עובדים → ללא הגבלה (5$ לחודש היום). אם תרצה, תוכל לשדרג מאוחר יותר לגרסה החינמית.

חלק 3: פריסה ראשונה (פריסה ידנית)

עשיתי את הפריסה הידנית הראשונה כדי לגלות מה באמת קורה שם. למרות שכל זה יכול להיעשות בצורה פשוטה יותר:

1. התקן רנגלר: npm i @cloudflare/wrangler -g

2. בוא נלך לספריית הבלוג שלנו: cd blog.example.com

3. הפעל רנגלר: wrangler init — site hugo-worker

4. צור תצורה עבור רנגלר (הזן את האסימון כשתתבקש): wrangler config

כעת ננסה לבצע שינויים בקובץ החדש שנוצר wrangler.toml (כאן רשימה מלאה של הגדרות אפשריות):

1. אנו מציינים accountid ו-zoneid

2. משתנה מַסלוּל למשהו כמו *blog.example.com/*

3. אנו מציינים שקר עבור workersdev

4. שנה את הדלי ל-./public (או היכן נמצא האתר הסטטי שלך)

5. אם יש לך יותר מדומיין אחד בנתיב, עליך לתקן את הנתיב בסקריפט העבודה: workers-site/index.js (ראה פונקציה handleEvent)

מצוין, הגיע הזמן לפרוס את האתר באמצעות הצוות wrangler publish.

חלק 4: אוטומציה של פריסה

מדריך זה נכתב עבור Gitlab, אך הוא לוכד את המהות והקלות של פריסה אוטומטית באופן כללי.

שלב 1: צור והגדר את הפרויקט שלנו

1. צור פרויקט GitLab חדש והעלה את ספריית האתר: blog.example.com עם כל התוכן חייב להיות ממוקם בספריית השורש של הפרויקט

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 → צינורות → הפעל צינור) או בהתחייבות לסניף המאסטר. וואלה!

מסקנה

ובכן, יכול להיות שהזיזתי את זה מעט, וכל התהליך לקח קצת יותר מעשר דקות. אבל עכשיו יש לך אתר מהיר עם פריסה אוטומטית וכמה רעיונות חדשים לגבי מה עוד אתה יכול לעשות עם Workers.

 עובדי Cloudflare    הוגו    GitLab Ci

מקור: www.habr.com