Windows 環境でCloudflare 開発ツール Wranglerを設定する方法とHello World!の実行まで

この記事は、Windows環境でClouflareのサーバレスエッジコンピューティングサービスであるWorkersを操作するためのCLIツールであるWranglerをWindows環境で構築するための手順。
（なんですが大人しくMacかLinuxをお勧めします。後ほど説明しますが、クラウド型IDEでは動作しません。作業環境とインストールする環境のIPアドレスが同じじゃないと動作しないです）

1.Node環境の整備
https://nodejs.org/en/
からインストーラーをダウンロードしてインストールします。

ここにチェックをつけるといろいろ追加でインストールされますが、チェックは不要です。

インストールが完了したらパワーシェルかVSCodeなので以下を実行します。

node --version
npm --version
なにか数字が出てくれば（エラーが出なければ）OKです。

2.Wranglerのインストール
npm install -g wrangler
を実行します。（いつも通りdepreciatedは友達、怖くない。気にしない）
2023/5/20 Updated
Wrangler バージョン3がリリースされ、Python3が実行環境に事前にインストールされていることが必須となっています。Python3がインストールされていない場合は以下のコマンドで古いバージョンをインストールしてください。
npm install -g wrangler@2.14.0
本記事の以下の手順は2.14.0ベースです。

3.権限の設定
wrangler login
を実行するとURLが出てきますので、クリックするとブラウザーが起動します。（環境によっては直接ブラウザが起動するかもしれません。）

Cloudflareのログイン画面が出てくるので、ログインします。
その後権限を付与していいか尋ねられますのでAllowを押します。

以下の画面が出れば成功です。

(この時にクラウドIDEなどCLI実行環境とブラウザを開く環境が異なる場合は、localhostに認証結果が元どってくるためエラーとなります。CLI実行環境のブラウザを開いてください)

4.テスト
さて、準備ができましたので簡単なプロジェクトを作成してみましょう
wrangler init kamedatest
を実行します。

もし以下のエラーが出た場合は、
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
を実行してください。セッション限定で実行権限が付与されます。

対話プロンプトは以下を参考に入力してください。

（Depcreciatedは友達、怖くない）
[kamedatest]というディレクトリができているので
cd kamedatest
に移動します。

5. Deploy
   今までの環境で出来上がったコードをCloudflare Workersへアップロードします。
   wrangler publishを実行します

マネージメントコンソールのWorkers画面に無事アップロードされていれば成功です。

[プロジェクト名]部分をクリックするとドメイン出てきます。上記の例だと20230328です。この手順だと[kamedatest]になっているはずです。
初めて作業を行った場合、xxxx.workers.devで皆さん専用のサブドメインが作成中でしばらく待ちになります。URLが表示されるまで待ちます。アクセスできるURLは
https://<projet-name>.<皆さん専用サブドメイン>.workers.devです。

それをクリックし、Hello World!
が表示されればデプロイ完了です。

(2023/2/11追記)
6.Fetch API
Workersは簡易的なマイクロウェブサイトをホスティングすることに利用できますが、一般的な利用方法はリクエスト元のクライアントとリクエスト先のオリジンの間にCDNエッジとして噛みこんで、リクエストやレスポンスのヘッダやボディ書き換えなどが可能です。無償プランでは、例えばHTTPヘッダ書き換えなどよく攻撃に用いられるものは制限されていますが、ここでは簡易的なFetchAPIを試してみます。
以下のソースコードでsrc/index.jsの内容を置き換えて保存します。

export default {
  async fetch(request) {
    /**
     * Example someHost at URL is set up to respond with HTML
     * Replace URL with the host you wish to send requests to
     */
    const someHost = 'https://www.cloudflare.com';
    const url = someHost + '/ja-jp/';

    /**
     * gatherResponse awaits and returns a response body as a string.
     * Use await gatherResponse(..) in an async function to get the response body
     * @param {Response} response
     */
    async function gatherResponse(response) {
      const { headers } = response;
      const contentType = headers.get('content-type') || '';
      if (contentType.includes('application/json')) {
        return JSON.stringify(await response.json());
      } else if (contentType.includes('application/text')) {
        return response.text();
      } else if (contentType.includes('text/html')) {
        return response.text();
      } else {
        return response.text();
      }
    }

    const init = {
      headers: {
        'content-type': 'text/html;charset=UTF-8',
      },
    };

    const response = await fetch(url, init);
    const results = await gatherResponse(response);
    return new Response(results, init);
  },
};

そして再度wrangler publishを実行してください。
アクセスするとCloudflareの日本語ホームページがFetchされ出力されていれば完了です。
例えば最後の1行をいかに置き換えると中身をWorkersで書き換えたのちクライアントブラウザにHTMLを戻していることを確認できます。

const results2 = results.replace(/クラウド/g, "cloud");
return new Response(results2, init);

最後に：
WorkersはJavaScript、TypeScript、Rust、Python、Scala、Reason、FSharp、Dart、Kotlin、COBOL、Perl、PHPと非常に多彩な環境で動作します。
Webにある多くの情報はMacがベースとなっていることも多く、諸事情でWindowsしか使えない方は苦労することもあるかと思いますが、私もそうですので一緒に頑張っていきましょう。