Halo! Nama saya Dima, saya pimpinan teknis tim SysOps di Wrike. Pada artikel ini saya akan memberi tahu Anda cara membuat situs web sedekat mungkin dengan pengguna dalam 10 menit dan 5 dolar sebulan dan mengotomatiskan penerapannya. Artikel ini hampir tidak ada hubungannya dengan masalah yang kami selesaikan dalam tim kami. Ini lebih merupakan pengalaman dan kesan pribadi saya dalam mengenal teknologi yang baru bagi saya. Saya mencoba menjelaskan langkah-langkahnya sedetail mungkin sehingga petunjuknya dapat bermanfaat bagi orang-orang dengan pengalaman berbeda. Saya harap Anda akan menikmati. Pergi!
Jadi, mungkin Anda sudah menemukan cara sederhana dan murah untuk menghosting situs web. Bahkan mungkin gratis, seperti yang dijelaskan di sini.
Namun tiba-tiba Anda masih bosan dan ingin menyentuh dunia teknologi baru yang berani? Katakanlah Anda berpikir untuk mengotomatiskan penerapan dan ingin mempercepat situs Anda sebanyak mungkin? Pada artikel ini kita akan menggunakan, tapi ini opsional.
Kami menggunakan Gitlab CI/CD untuk otomatisasi, tapi bagaimana dengan akselerasi? Mari terapkan situs ini langsung ke Cloudflare menggunakan.
Apa yang diperlukan untuk memulai:
-
Gitlab (milik Anda atau )
-
di Cloudflare
-
Terpasang
Bagian 1: Menginstal Hugo
Jika Anda sudah menginstal Hugo, atau jika Anda lebih memilih generator situs statis yang berbeda (atau tidak menggunakannya sama sekali), Anda dapat melewati bagian ini.
-
Unduh Hugo dari
-
Kami menempatkan file Hugo yang dapat dieksekusi sesuai dengan salah satu yang ditentukan di cara
-
Membuat situs baru:
hugo new site blog.example.com -
Ubah direktori saat ini ke direktori yang baru dibuat:
cd blog.example.com -
Pilih tema desain ( atau terserah)
-
Mari kita buat postingan pertama:
hugo new posts/my-amazing-post.md -
Tambahkan konten ke file yang dibuat: konten/postingan/postingan-saya-menakjubkan.md.
Jika semuanya sudah selesai, ubah nilai draf menjadi palsu -
Menghasilkan file statis:
hugo -D
Sekarang situs statis kita terletak di dalam direktori ./publik dan siap untuk penerapan manual pertama Anda.
Bagian 2: Menyiapkan Cloudflare
Sekarang mari kita lihat pengaturan awal Cloudflare. Anggaplah kita sudah memiliki domain untuk situs tersebut. Mari kita ambil contoh blog.contoh.com.
Langkah 1: Buat entri DNS
Pertama, pilih domain kami, lalu item menu DNS. Kami membuat blog A-record dan menunjukkan beberapa IP fiktif untuknya (ini yang resmi, tapi mereka bisa membuatnya sedikit lebih cantik).
Langkah 2: Token Cloudflare
-
Profil saya -> Token API tab-> Buat Token -> Buat Token Khusus
Di sini Anda perlu membatasi token ke akun dan zona, tetapi biarkan opsi Edit untuk izin yang tercantum dalam gambar.
Simpan tokennya untuk kedepannya, kita akan membutuhkannya di bagian ketiga.
Langkah 3: Dapatkan akunid dan zoneid
Domain β Ringkasan β [bilah sisi kanan]
Ini milikku, tolong jangan gunakan :)
Simpan di sebelah token, kita juga membutuhkannya di bagian ketiga.
Langkah 4: Aktifkan Pekerja
Domain β Pekerja β Kelola Pekerja
Kami memilih nama dan tarif unik Pekerja β Tidak Terbatas ($5 per bulan hari ini). Jika mau, nanti Anda dapat meningkatkan ke versi gratis.
Bagian 3: Penerapan pertama (penerapan manual)
Saya melakukan penerapan manual pertama untuk mencari tahu apa yang sebenarnya terjadi di sana. Meskipun semua ini dapat dilakukan dengan lebih sederhana:
-
Instal penengkar:
npm i @cloudflare/wrangler -g -
Mari kita masuk ke direktori blog kita:
cd blog.example.com -
Luncurkan penengkar:
wrangler init β site hugo-worker -
Buat konfigurasi untuk wrangler (masukkan token saat ditanya):
wrangler config
Sekarang mari kita coba melakukan perubahan pada file yang baru dibuat wrangler.toml ( daftar lengkap kemungkinan pengaturan):
-
Kami menunjukkan akunid dan zoneid
-
Kita berubah rute untuk sesuatu seperti *blog.example.com/*
-
Kami menunjukkan palsu untuk pekerjadev
-
Ubah keranjang menjadi ./public (atau di mana situs statis Anda berada)
-
Jika Anda memiliki lebih dari satu domain di jalur tersebut, maka Anda harus memperbaiki jalur di skrip yang berfungsi: situs pekerja/index.js (lihat fungsi handleEvent)
Hebat, saatnya menyebarkan situs menggunakan tim wrangler publish.
Bagian 4: Otomatisasi penerapan
Panduan ini ditulis untuk Gitlab, namun mencakup esensi dan kemudahan penerapan otomatis secara umum.
Langkah 1: Buat dan konfigurasikan proyek kami
-
Buat proyek GitLab baru dan unggah direktori site: blog.contoh.com dengan semua konten harus ditempatkan di direktori root proyek
-
Kami mengatur variabel CFAPITOKEN di sini: Settings β CI / CD β Variabel
Langkah 2: Buat file .gitlab-ci.yml dan jalankan penerapan pertama
Buat file .gitlab-ci.yml di root dengan konten 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 meluncurkan penerapan pertama secara manual (CI/CD β Jaringan pipa β Jalankan Saluran Pipa) atau dengan melakukan ke cabang master. Voila!
Kesimpulan
Yah, saya mungkin sedikit meremehkannya, dan seluruh prosesnya hanya memakan waktu sepuluh menit. Namun kini Anda memiliki situs cepat dengan penerapan otomatis dan beberapa ide segar tentang hal lain yang dapat Anda lakukan dengan Workers.
Sumber: www.habr.com