メインコンテンツまでスキップ

Cloudflareでプロジェクトを立ち上げる環境構築

今回作成するGit LFS Serverではコードを動かすCloudflare Workers, ファイルをホスティングするR2, エンドポイントへの認証を管理するZero Trustを利用します。小さな規模でのプロジェクトであれば動かすために必要な費用は必要ありません。

ですが今回はCPU Timeが無料枠の10msでは収まらないため有料プランのunboundを使います。

Cloudflareではworkerへのアクセスは開発用のドメインとして <name>.worker.dev を利用できます。Cloudflareでドメインを管理している場合にはworkerに簡単にカスタムドメインを設定できるため便利です。Cloudflareではドメイン取得もできます。Cloudflareが管理できる状態にするとCloudflareが提供する便利な機能を組み合わせられます。適当に1つ取得して何ができるか試してみると良いです。

プロジェクトの作成​

プロジェクトの構築ではnpm create cloudflare@latestを利用して初期セットアップができます。

 ❯ npm create cloudflare@latest
Need to install the following packages:
  [email protected]
Ok to proceed? (y)

using create-cloudflare version 2.1.1

╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./withered-glitter-44b9
│
├ What type of application do you want to create?
│ type "Hello World" Worker
│
├ Do you want to use TypeScript?
│ yes typescript
│
├ Copying files from "hello-world" template
│
├ Do you want to use TypeScript?
│ yes typescript
│
├ Retrieving current workerd compatibility date
│ compatibility date 2023-08-14
│
├ Do you want to use git for version control?
│ yes git
│
╰ Application created

╭ Installing dependencies Step 2 of 3
│
├ Installing dependencies
│ installed via `npm install`
│
├ Committing new files
│ git initial commit
│
╰ Dependencies Installed

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
├  APPLICATION CREATED  Deploy your application with npm run deploy
│
│ Navigate to the new directory cd withered-glitter-44b9
│ Run the development server npm run start
│ Deploy your application npm run deploy
│ Read the documentation https://developers.cloudflare.com/workers
│ Stuck? Join us at https://discord.gg/cloudflaredev
│
╰ See you again soon!
 ❯ tree
.
├── package-lock.json
├── package.json
├── src
│   └── worker.ts
├── tsconfig.json
└── wrangler.toml

2 directories, 5 files

Wrangler.tomlの設定​

Cloudflareのworkerに対してプロジェクトを設定するためにはwrangler.tomlを利用します。 今回はルートにカスタムドメインを設定しています。またusage_modelにunboundを設定しています。bundledではCPUTimeが50msになります。平均して45ms程度かかり、かなりギリギリの処理となります。

 ❯ bat wrangler.toml
───────┬────────────────────────────────────────────────────────────────────────────────────
       │ File: wrangler.toml
───────┼────────────────────────────────────────────────────────────────────────────────────
   1   │ name = "withered-glitter-44b9"
   2   │ compatibility_date = "2023-08-14"
   3   │ usage_model = "unbound"
   4   │ main = "src/worker.ts"
   5   │
   6   │ # account
   7   │ account_id = "111122223333aaabbbcccxxxxyyyyzzz"
   8   │
   9   │ routes = [{ pattern = "git-lfs-server.mydomain.example", custom_domain = true }]
  10   │
  11   │ [dev]
  12   │ port = 25252
  13   │
  14   │ [vars]
  15   │ ACCOUNT_ID = "111122223333aaabbbcccxxxxyyyyzzz"
  16   │ BUCKET_NAME = "git-lfs"
  17   │
  18   │ [[r2_buckets]]
  19   │ binding = "LFS_BUCKET"
  20   │ bucket_name = "git-lfs"
  21   │ preview_bucket_name = "git-lfs"
───────┴────────────────────────────────────────────────────────────────────────────────────