Cloudflare Çalışan Sitelerinde statik site nasıl yapılır

Merhaba! Adım Dima, Wrike'taki SysOps ekibinin teknik lideriyim. Bu yazıda size ayda 10 dakika ve 5 dolar karşılığında kullanıcıya olabildiğince yakın bir web sitesini nasıl oluşturacağınızı ve dağıtımını nasıl otomatikleştireceğinizi anlatacağım. Makalenin ekibimizde çözdüğümüz sorunlarla neredeyse hiçbir ilgisi yok. Bu daha ziyade benim için yeni olan bir teknolojiyi tanımaya dair kişisel deneyimim ve izlenimlerim. Talimatların farklı deneyime sahip kişilere faydalı olması için adımları olabildiğince ayrıntılı olarak anlatmaya çalıştım. Umarım eğlenirsiniz. Gitmek!

Belki de bir web sitesini barındırmanın basit ve ucuz bir yolunu bulmuşsunuzdur. Hatta belki de burada açıklandığı gibi ücretsiz harika makale.

Ama birdenbire hala sıkılmaya başladınız ve teknolojinin cesur yeni dünyasına dokunmak mı istiyorsunuz? Diyelim ki dağıtımı otomatikleştirmeyi düşünüyorsunuz ve sitenizi mümkün olduğunca hızlandırmak istiyorsunuz? Bu yazıda kullanacağımız Hugoancak bu isteğe bağlıdır.

Otomasyon için Gitlab CI/CD'yi kullanıyoruz, peki ya hızlandırma? Siteyi doğrudan Cloudflare'e dağıtalım. İşçi Siteleri.

Başlamak için gerekenler:

• Gitlab (kendinizin veya bulutlu)

• Hesap Cloudflare'de

• Kurulmuş düğüm/npm

Bölüm 1: Hugo'yu Yükleme

Hugo'yu zaten yüklediyseniz veya farklı bir statik site oluşturucuyu tercih ediyorsanız (veya hiç kullanmıyorsanız), bu bölümü atlayabilirsiniz.

1. Hugo'yu şuradan indirin: https://github.com/gohugoio/hugo/releases

2. Hugo çalıştırılabilir dosyasını şurada tanımlananlardan birine göre yerleştiriyoruz. PATH yollar

3. Yeni bir site oluşturma: hugo new site blog.example.com

4. Geçerli dizini yeni oluşturulan diziyle değiştirin: cd blog.example.com

5. Bir tasarım teması seçin (https://github.com/budparr/gohugo-theme-ananke/releases ya da her neyse)

6. İlk yazıyı oluşturalım: hugo new posts/my-amazing-post.md

7. Oluşturulan dosyaya içerik ekleyin: içerik/yazılar/my-amazing-post.md.
   Her şey bittiğinde taslak değerini şu şekilde değiştirin: yanlış

8. Statik dosyalar oluşturma: hugo -D

Artık statik sitemiz bir dizinin içinde yer alıyor ./halk ve ilk manuel dağıtımınıza hazırsınız.

Bölüm 2: Cloudflare Kurulumu

Şimdi Cloudflare'in ilk kurulumuna bakalım. Site için zaten bir alan adımızın olduğunu varsayalım. Örnek olarak ele alalım blog.example.com.

1. Adım: DNS girişi oluşturun

Öncelikle alan adımızı ve ardından menü öğesini seçin DNS. Bir blog A kaydı oluşturuyoruz ve bunun için bazı hayali IP'ler belirtiyoruz (bu, resmi kayıttır) öneriama biraz daha güzel yapabilirlerdi).

Adım 2: Cloudflare Tokenı

1. Profilim -> API belirteçleri sekme-> Jeton Oluştur -> Özel Belirteç Oluştur

Burada belirteci hesaplar ve bölgelerle sınırlamanız gerekir, ancak resimde listelenen izinler için Düzenle seçeneğini bırakın.

Belirteci gelecek için saklayın, üçüncü bölümde ona ihtiyacımız olacak.

3. Adım: Hesap kimliğini ve bölge kimliğini alın

domain → Genel Bakış → [sağ kenar çubuğu]

Bunlar benim, lütfen kullanmayın :)

Bunları jetonun yanına kaydedin, üçüncü bölümde de onlara ihtiyacımız olacak.

4. Adım: İşçileri Etkinleştirin

domain → Işçiler → Yönetim Çalışanları

Benzersiz bir isim ve tarife seçiyoruz İşçiler → Sınırsız (bugün ayda 5$). Dilerseniz daha sonra ücretsiz sürüme geçebilirsiniz.

Bölüm 3: İlk dağıtım (manuel dağıtım)

Orada gerçekte neler olup bittiğini öğrenmek için ilk manuel konuşlandırmayı yaptım. Her ne kadar tüm bunlar daha basit yapılabilirse de:

1. Wrangler'ı yükleyin: npm i @cloudflare/wrangler -g

2. Blogumuzun dizinine gidelim: cd blog.example.com

3. Wrangler'ı başlatın: wrangler init — site hugo-worker

4. Wrangler için bir yapılandırma oluşturun (istendiğinde belirteci girin): wrangler config

Şimdi yeni oluşturulan dosyada değişiklik yapmayı deneyelim. wrangler.toml (burada olası ayarların tam listesi):

1. belirtmek hesap kimliği ve bölge kimliği

2. Biz değiştiririz degistirebilirsin. * gibi bir şeyeblog.example.com/*

3. belirtmek yanlış için işçilerdev

4. Paketi ./public olarak değiştirin (veya statik sitenizin bulunduğu yer)

5. Yolda birden fazla alan adı varsa çalışma komut dosyasındaki yolu düzeltmelisiniz: işçi-site/index.js (bkz. fonksiyon tanıtıcıOlay)

Harika, ekibi kullanarak siteyi dağıtmanın zamanı geldi wrangler publish.

Bölüm 4: Dağıtım otomasyonu

Bu kılavuz Gitlab için yazılmıştır ancak genel olarak otomatik dağıtımın özünü ve kolaylığını yansıtmaktadır.

Adım 1: Projemizi oluşturun ve yapılandırın

1. Yeni bir GitLab projesi oluşturun ve site: dizinini yükleyin blog.example.com tüm içeriğin proje kök dizininde bulunması gerekir

2. Ayarladık değişken CFAPITOKEN burada: Ayarlar → CI / CD → Değişkenler

Adım 2: Bir .gitlab-ci.yml dosyası oluşturun ve ilk dağıtımı çalıştırın

dosya oluştur .gitlab-ci.yml aşağıdaki içeriğe sahip kökte:

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 #

İlk dağıtımı manuel olarak başlatıyoruz (CI/CD → Boru Hatları → Boru Hattını Çalıştır) veya ana şubeye taahhütte bulunarak. İşte!

Sonuç

Biraz hafife almış olabilirim ve tüm süreç on dakikadan biraz fazla sürdü. Ancak artık otomatik dağıtıma sahip hızlı bir siteniz ve Workers ile başka neler yapabileceğinize dair bazı yeni fikirleriniz var.

 Cloudflare Çalışanları    Hugo    GitLab Ci

Kaynak: habr.com