Cara membuat tapak statik di Tapak Pekerja Cloudflare

hello! Nama saya Dima, saya adalah ketua teknikal untuk pasukan SysOps di Wrike. Dalam artikel ini saya akan memberitahu anda cara membuat tapak web sedekat mungkin dengan pengguna dalam 10 minit dan 5 dolar sebulan dan mengautomasikan penggunaannya. Artikel itu hampir tiada kaitan dengan masalah yang kami selesaikan dalam pasukan kami. Ini adalah pengalaman peribadi dan tanggapan saya untuk mengenali teknologi yang baru kepada saya. Saya cuba menerangkan langkah-langkah dengan seberapa terperinci yang mungkin supaya arahan itu berguna untuk orang yang mempunyai pengalaman yang berbeza. Saya harap anda akan menikmati. Pergi!

Cara membuat tapak statik di Tapak Pekerja Cloudflare

Jadi, mungkin anda telah menemui cara yang mudah dan murah untuk menjadi hos laman web. Mungkin juga percuma, seperti yang diterangkan dalam ini artikel yang hebat.

Tetapi tiba-tiba anda masih bosan dan ingin menyentuh dunia teknologi baru yang berani? Katakan anda sedang memikirkan tentang mengautomasikan penggunaan dan ingin mempercepatkan tapak anda sebanyak mungkin? Dalam artikel ini kami akan gunakan Hugo, tetapi ini adalah pilihan.

Kami menggunakan Gitlab CI/CD untuk automasi, tetapi bagaimana pula dengan pecutan? Mari gunakan tapak terus ke Cloudflare menggunakan Tapak Pekerja.

Apa yang diperlukan untuk memulakan:

Bahagian 1: Memasang Hugo

Jika anda sudah memasang Hugo, atau jika anda lebih suka penjana tapak statik yang berbeza (atau tidak menggunakannya langsung), maka anda boleh melangkau bahagian ini.

  1. Muat turun Hugo daripada https://github.com/gohugoio/hugo/releases

  2. Kami meletakkan fail boleh laku Hugo mengikut salah satu daripada yang ditakrifkan dalam PATH cara

  3. Mencipta tapak baharu: hugo new site blog.example.com

  4. Tukar direktori semasa kepada yang baru dibuat: cd blog.example.com

  5. Pilih tema reka bentuk (https://github.com/budparr/gohugo-theme-ananke/releases atau apa sahaja)

  6. Mari buat siaran pertama: hugo new posts/my-amazing-post.md

  7. Tambahkan kandungan pada fail yang dibuat: content/posts/my-amazing-post.md.
    Apabila semuanya selesai, tukar nilai draf kepada palsu

  8. Menjana fail statik: hugo -D

Kini tapak statik kami terletak di dalam direktori ./awam dan bersedia untuk penggunaan manual pertama anda.

Bahagian 2: Menyediakan Cloudflare

Sekarang mari kita lihat persediaan awal Cloudflare. Mari kita anggap bahawa kita sudah mempunyai domain untuk tapak tersebut. Mari kita ambil sebagai contoh blog.example.com.

Langkah 1: Buat entri DNS

Mula-mula, pilih domain kami, dan kemudian item menu DNS. Kami mencipta rekod A blog dan menunjukkan beberapa IP rekaan untuknya (ini adalah rasmi cadangan, tetapi mereka boleh menjadikannya lebih cantik sedikit).

Cara membuat tapak statik di Tapak Pekerja Cloudflare

Langkah 2: Token Cloudflare

  1. Profil saya -> token API tab-> Buat Token -> Cipta Token Tersuai

Cara membuat tapak statik di Tapak Pekerja Cloudflare

Di sini anda perlu mengehadkan token kepada akaun dan zon, tetapi biarkan pilihan Edit untuk kebenaran yang disenaraikan dalam gambar.

Simpan token untuk masa depan, kami akan memerlukannya di bahagian ketiga.

Langkah 3: Dapatkan accountid dan zoneid

domain β†’ Gambaran Keseluruhan β†’ [bar sisi kanan]

Cara membuat tapak statik di Tapak Pekerja CloudflareIni milik saya, tolong jangan gunakannya :)

Simpan mereka di sebelah token, kami juga memerlukannya di bahagian ketiga.

Langkah 4: Aktifkan Pekerja

domain β†’ Pekerja β†’ Pekerja Pengurusan

Kami memilih nama unik dan tarif Pekerja β†’ Tidak terhad ($5 sebulan hari ini). Jika anda mahu, anda boleh menaik taraf kepada versi percuma kemudian.

Bahagian 3: Penggunaan pertama (pengerahan manual)

Saya melakukan penggunaan manual pertama untuk mengetahui apa yang sebenarnya berlaku di sana. Walaupun semua ini boleh dilakukan dengan lebih mudah:

  1. Pasang wrangler: npm i @cloudflare/wrangler -g

  2. Mari pergi ke direktori blog kami: cd blog.example.com

  3. Pelancaran wrangler: wrangler init β€” site hugo-worker

  4. Buat konfigurasi untuk wrangler (masukkan token apabila ditanya): wrangler config

Sekarang mari cuba buat perubahan pada fail yang baru dibuat wrangler.toml (di sini senarai penuh kemungkinan tetapan):

  1. Kami menunjukkan akaunid dan zonid

  2. Kita berubah laluan kepada sesuatu seperti *blog.example.com/*

  3. Kami menunjukkan palsu untuk pekerjadev

  4. Tukar baldi kepada ./public (atau tempat tapak statik anda berada)

  5. Jika anda mempunyai lebih daripada satu domain dalam laluan, maka anda harus membetulkan laluan dalam skrip kerja: tapak pekerja/index.js (lihat fungsi handleEvent)

Bagus, sudah tiba masanya untuk menggunakan tapak menggunakan pasukan wrangler publish.

Bahagian 4: Automasi penggunaan

Panduan ini ditulis untuk Gitlab, tetapi ia menangkap intipati dan kemudahan penggunaan automatik secara umum.

Langkah 1: Cipta dan konfigurasikan projek kami

  1. Buat projek GitLab baharu dan muat naik direktori tapak: blog.example.com dengan semua kandungan mesti terletak dalam direktori akar projek

  2. Kami tetapkan pembolehubah CFAPITOKEN di sini: Tetapan β†’ CI / CD β†’ Pembolehubah

Langkah 2: Buat fail .gitlab-ci.yml dan jalankan penggunaan pertama

Buat fail .gitlab-ci.yml dalam akar dengan kandungan berikut:

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 #

Kami melancarkan penggunaan pertama secara manual (CI/CD β†’ Talian Paip β†’ Jalankan Saluran Paip) atau dengan memberi komitmen kepada cawangan induk. Voila!

Kesimpulan

Baiklah, saya mungkin telah meremehkannya sedikit, dan keseluruhan proses mengambil masa lebih sepuluh minit sahaja. Tetapi kini anda mempunyai tapak yang pantas dengan penggunaan automatik dan beberapa idea baharu tentang perkara lain yang boleh anda lakukan dengan Workers.

 Pekerja Cloudflare    Hugo    GitLab Ci

Sumber: www.habr.com

Tambah komen