Cloudflare Workers Sitesで静的サイトを作成する方法

こんにちは！ 私の名前は Dima です。Wrike の SysOps チームのテクニカル リードです。 この記事では、Web サイトをユーザーにできるだけ近づけて、10 分、月額 5 ドルで展開を自動化する方法を説明します。 この記事は、私たちがチーム内で解決している問題とはほとんど関係がありません。 これはむしろ、私にとって新しいテクノロジーを知ったときの個人的な経験と感想です。 さまざまな経験を持つ人にとって役立つように、手順をできるだけ詳しく説明するように努めました。 楽しんでいただければ幸いです。 行く！

したがって、おそらく、Web サイトをホストするための簡単で安価な方法をすでに見つけているかもしれません。 この記事で説明されているように、おそらく無料ですらあります 素晴らしい記事.

しかし、突然、まだ退屈していて、素晴らしい新しいテクノロジーの世界に触れたいと思っていませんか? デプロイメントの自動化を検討しており、サイトをできるだけ高速化したいと考えているとします。 この記事では、 ヒューゴー, ただし、これはオプションです。

自動化には Gitlab CI/CD を使用していますが、高速化についてはどうですか? を使用してサイトをCloudflareに直接デプロイしましょう ワーカーサイト.

始めるために必要なもの:

• Gitlab (独自のものまたは 曇り)

• アカウント クラウドフレアについて

• インストール済み ノードjs/npm

パート 1: Hugo のインストール

Hugo がすでにインストールされている場合、または別の静的サイト ジェネレーターを使用する場合 (またはまったく使用しない場合)、この部分はスキップできます。

1. Hugo をダウンロードする https://github.com/gohugoio/hugo/releases

2. Hugo 実行可能ファイルは、次で定義されているファイルのいずれかに従って配置されます。 パス 方法

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.
   すべてが完了したら、ドラフト値を次のように変更します。 false

8. 静的ファイルの生成: hugo -D

これで、静的サイトがディレクトリ内に配置されました。 。/公共 これで、最初の手動展開の準備が整いました。

パート 2: Cloudflare のセットアップ

次に、Cloudflareの初期設定を見てみましょう。 サイトのドメインがすでにあると仮定しましょう。 例として見てみましょう blog.example.com。

ステップ 1: DNS エントリを作成する

まず、ドメインを選択してから、メニュー項目を選択します DNS。 ブログの A レコードを作成し、それに架空の IP を指定します (これは公式の IP アドレスです)。 勧告、しかし、彼らはそれをもう少し美しくすることができたでしょう）。

ステップ 2: Cloudflare トークン

1. プロフィール -> APIトークン タブ-> Create Token -> カスタムトークンの作成

ここでは、トークンをアカウントとゾーンに制限する必要がありますが、図にリストされている権限の編集オプションはそのままにしておきます。

将来のためにトークンを保存します。XNUMX 番目の部分で必要になります。

ステップ 3: アカウント ID とゾーン ID を取得する

ドメイン → 概要 → [右側のサイドバー]

これらは私のものです、使用しないでください:)

それらをトークンの隣に保存します。これらは XNUMX 番目の部分でも必要になります。

ステップ 4: ワーカーをアクティブ化する

ドメイン → 労働者 → 労働者を管理する

一意の名前と料金表を選択します。 Workers → Unlimited (現在は月額 5 ドル)。必要に応じて、後で無料バージョンにアップグレードできます。

パート 3: 最初の展開 (手動展開)

そこで実際に何が起こっているのかを調べるために、最初の手動デプロイメントを実行しました。 これらすべてをもっと簡単に行うこともできます。

1. ラングラーをインストールします。 npm i @cloudflare/wrangler -g

2. ブログのディレクトリに移動しましょう。 cd blog.example.com

3. ラングラーを起動します。 wrangler init — site hugo-worker

4. Wrangler の構成を作成します (要求されたらトークンを入力します)。 wrangler config

次に、新しく作成したファイルに変更を加えてみましょう ラングラー.toml (ここで 可能な設定の完全なリスト):

1. 特定 アカウントIDとゾーンID

2. 私たちは変わります route * のようなものにblog.example.com/*

3. 特定 false のために 労働者開発

4. バケットを ./public に変更します (または静的サイトが配置されている場所)

5. パスに複数のドメインがある場合は、作業スクリプト内のパスを修正する必要があります。 ワーカーサイト/index.js (関数を参照 ハンドルイベント)

わかりました。チームを使用してサイトをデプロイする時期が来ました wrangler publish.

パート 4: 導入の自動化

このガイドは Gitlab 向けに書かれていますが、一般的な自動デプロイメントの本質と容易さを捉えています。

ステップ 1: プロジェクトを作成して構成する

1. 新しい GitLab プロジェクトを作成し、site: ディレクトリをアップロードします。 blog.example.com すべてのコンテンツをプロジェクトのルート ディレクトリに配置する必要があります

2. 設定しました 変数 CFAPITOKEN ここに： 設定 → CI / CD → Variables

ステップ 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 → パイプライン → パイプラインの実行) または、master ブランチにコミットします。 出来上がり！

まとめ

そうですね、少し言い過ぎたかもしれませんが、このプロセス全体で XNUMX 分強かかりました。 しかし、自動デプロイを備えた高速なサイトと、ワーカーを使用して他に何ができるかについての新鮮なアイデアが得られました。

 Cloudflareワーカー    ヒューゴー    GitLab Ci

出所： habr.com