Pulumiを使ってWorkerをデプロイする

Last reviewed: 9 months ago

このチュートリアルでは、Cloudflare WorkersとPulumi Infrastructure as Code (IaC)を使用してHello Worldウェブアプリケーションをデプロイするためのステップバイステップの手順を説明します。これにより、リソース管理ライフサイクルに慣れることができます。特に、Worker、Route、およびDNSレコードを作成してアプリケーションにアクセスし、その後すべてのリソースをクリーンアップします。

alt_text

始める前に

以下を確認してください：

このチュートリアルのリソースを編集する権限を持つCloudflareアカウントとAPIトークン。必要に応じて、Cloudflareアカウント ↗にサインアップしてください。
Pulumi Cloudアカウント。常に無料の個人プラン ↗にサインアップできます。
npm ↗とPulumi CLIがマシンにインストールされていること。
Cloudflareゾーン。サイトを追加するチュートリアルを完了して作成してください。

このチュートリアルの完全なソリューションは、このPulumiリポジトリとブランチ ↗にあります。最終バージョンをデプロイするには、以下を実行してください：

mkdir serverless-cloudflare && cd serverless-cloudflare
pulumi new https://github.com/pulumi/tutorials/tree/cloudflare-typescript-hello-world-end
npm install
pulumi up --yes

Pulumiの初期化

a. ディレクトリを作成

このチュートリアル用に新しい空のディレクトリを使用します。

mkdir serverless-cloudflare
cd serverless-cloudflare

b. ログイン

プロンプトでEnterを押して、ブラウザを介してPulumi Cloudアカウントにログインします。あるいは、Pulumi Cloudアクセストークン ↗を提供することもできます。

pulumi login

c. プログラムを作成

プログラムを作成するには、以下を実行します：

pulumi new https://github.com/pulumi/tutorials/tree/cloudflare-typescript-hello-world-begin

利用可能なデフォルトでプロンプトを完了してください。そうでない場合は、要求された情報を提供します。必要なものは：

CloudflareのアカウントID。
CloudflareのゾーンID。
登録済みのドメイン。例えば、example.com
有効なCloudflare API トークン。

d. スタックを作成

スタックを作成するには、以下を実行します：

pulumi up --yes

上記のコマンドが完了したら、myFirstOutputの値が正しいか確認してください。

e. (オプション) スタックを確認

上記の出力から、あなたの ブラウザで表示 リンクをたどってPulumiスタックに慣れてください。

例：

ブラウザで表示 (Ctrl+O):
https://app.pulumi.com/diana-pulumi-corp/serverless-cloudflare/dev/updates/1

alt_text

Workerを追加

これからPulumiスタックdevにCloudflare Workerを追加します。

a. index.tsにCloudflare Workerを追加

index.tsファイルの内容を以下のように置き換えます：

import * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";

const config = new pulumi.Config();
const accountId = config.require("accountId");

// 呼び出すWorkerスクリプト
export const script = new cloudflare.WorkerScript("hello-world-script", {
  accountId: accountId,
  name: "hello-world",
  // ファイルからWorkerの内容を読み込む
  content: fs.readFileSync("./app/worker.ts", "utf8"),
});

b. 依存関係をインストール

npm install @pulumi/cloudflare

c. 変更を適用

pulumi up --yes

d. (オプション) Cloudflareダッシュボードを表示

CloudflareダッシュボードでCloudflareリソースを直接確認して、その存在を検証できます。

Cloudflareダッシュボード ↗にログインします。
アカウントを選択します。
Workers & Pagesに移動します。
“hello-world”アプリケーションを開きます。例：

Workerルートを追加

これからPulumiスタックdevにWorkerルートを追加して、スクリプトにエンドポイントを持たせます。

a. index.tsにWorkerルートを追加

index.tsファイルの内容を以下のように置き換えます：

import * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";

const config = new pulumi.Config();
const accountId = config.require("accountId");
const zoneId = config.require("zoneId");
const domain = config.require("domain");

// 呼び出すWorkerスクリプト
export const script = new cloudflare.WorkerScript("hello-world-script", {
  accountId: accountId,
  name: "hello-world",
  // ファイルからWorkerの内容を読み込む
  content: fs.readFileSync("./app/worker.ts", "utf8"),
});

// リクエストを処理するWorkerルートとWorkerスクリプト
export const route = new cloudflare.WorkerRoute("hello-world-route", {
  zoneId: zoneId,
  pattern: "hello-world." + domain,
  scriptName: script.name,
});

b. 変更を適用

pulumi up --yes

c. (オプション) ダッシュボードでCloudflare Workerルートを表示

Cloudflareダッシュボードで、Workerアプリケーションには以前に定義したWorkerルートが含まれています。

Cloudflareダッシュボード ↗にログインします。
アカウントを選択します。
Workers & Pagesに移動します。
アプリケーションを選択します。
ルートの下で表示を選択して、Workerルートの詳細が定義と一致することを確認します。

DNSレコードを追加

これからドメインにDNSレコードを追加して、以前に設定したルートにURL経由でアクセスできるようにします。

a. index.tsにDNSレコードを追加

index.tsファイルの内容を以下のように置き換えます：

import * as pulumi from "@pulumi/pulumi";
import * as cloudflare from "@pulumi/cloudflare";
import * as fs from "fs";

const config = new pulumi.Config();
const accountId = config.require("accountId");
const zoneId = config.require("zoneId");
const domain = config.require("domain");

// 呼び出すWorkerスクリプト
export const script = new cloudflare.WorkerScript("hello-world-script", {
  accountId: accountId,
  name: "hello-world",
  // ファイルからWorkerの内容を読み込む
  content: fs.readFileSync("./app/worker.ts", "utf8"),
});

// リクエストを処理するWorkerルートとWorkerスクリプト
export const route = new cloudflare.WorkerRoute("hello-world-route", {
  zoneId: zoneId,
  pattern: "hello-world." + domain,
  scriptName: script.name,
});

// ドメインからルートにアクセスするためのDNSレコード
export const record = new cloudflare.Record("hello-world-record", {
  zoneId: zoneId,
  name: script.name,
  value: "192.0.2.1",
  type: "A",
  proxied: true,
});

export const url = route.pattern;

b. 変更を適用

pulumi up --yes

c. (オプション) Pulumi Cloudで全リソースを表示

ブラウザでPulumi Cloud ↗を開きます。
スタックserverless-cloudflare/devに移動します。
定義されたすべてのリソースが作成され、正常であることを確認します。例：

alt_text

アプリをテスト

Hello Worldアプリケーションを実行し、アクセスするために必要なすべてのCloudflareリソースを段階的に追加しました。これは、TypeScriptでリソースを定義し、Pulumiが残りを処理することで実現されました。

ターミナルまたはブラウザを介してアプリケーションをテストできます。

ターミナルで

pulumi stack output url

hello-world.atxyall.com

curl "https://$(pulumi stack output url)"

<!DOCTYPE html>
  <html>
    <head>
      <title>  Hello World </title>
    </head>
    <body>
      <h1>Serverless with Pulumi</h1>
      <p>現在の時刻は: <span id="date">Thu Oct 05 2023 22:02:17 GMT+0000 (Coordinated Universal Time)</span>です。</p>
    <script defer src="https://static.cloudflareinsights.com/beacon.min.js/v8b253dfea2ab4077af8c6f58422dfbfd1689876627854" integrity="sha512-bjgnUKX4azu3dLTVtie9u6TKqgx29RBwfj3QXYt5EKfWM/9hPSAI/4qcV5NACjwAo8UtTeWefx6Zq5PHcMm7Tg==" data-cf-beacon='{"rayId":"8118f2b5ddb5eb02","version":"2023.8.0","r":1,"b":1,"token":"240f365d9d42457597f861e6e46c6ce9","si":100}' crossorigin="anonymous"></script>
</body>
  </html>

ブラウザでhello-world.YOUR_DOMAIN.comを開きます。

例：

alt_text

クリーンアップ

最後のステップでは、チュートリアル中に使用したリソースとスタックをクリーンアップするためにいくつかのコマンドを実行します。

a. Cloudflareリソースを削除

pulumi destroy

b. Pulumiスタックを削除

pulumi stack rm dev

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings