Zenn
📦

Webpackを使ったCloudflare Workersのデプロイ方法

2023/04/21に公開
webpack
Cloudflare
worker
tech

この記事では、Webpack を使用して Cloudflare Workers のコードをビルドし、デプロイする方法を紹介します。Cloudflare Workers は、Cloudflare のエッジネットワーク上で実行されるサーバーレスプラットフォームです。これにより、WebサイトやAPIに対するリクエストの処理を、低遅延で効率的に実行できます。Webpack を使って Cloudflare Workers のコードをビルドすることで、モジュールの依存関係を解決し、コードの最適化や圧縮を行うことができます。

コードのレポジトリ

コードの全体像はこちらのレポジトリに格納しています。
https://github.com/takoyaki-3/worker-webpack

前提条件

プロジェクトのセットアップ

  1. 新しいプロジェクトディレクトリを作成し、npm initを実行してpackage.jsonを生成します。
mkdir cloudflare-worker-example
cd cloudflare-worker-example
npm init -y
  1. 必要なパッケージをインストールします。
npm install --save-dev webpack webpack-cli @cloudflare/wrangler cfworker babel-loader @babel/core @babel/preset-env
  1. Webpack 設定ファイルを作成し、エントリーポイントと出力先を設定します。また、Babel を使ってコードをトランスパイルするための設定も行います。
const path = require('path');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'worker.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  target: 'webworker',
};
  1. ソースコードを作成し、HTTPリクエストを受け取り、簡単なメッセージを返すようにします。
addEventListener('fetch', (event) => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  return new Response('Hello from Cloudflare Workers using Webpack!', {
    status: 200,
    headers: { 'Content-Type': 'text/plain' },
  });
}
  1. Wrangler 設定ファイルを作成します。
name = "my-worker"
main = "dist/worker.js"
compatibility_date = "2023-04-20"
type = "webpack"
  1. package.json にビルドスクリプト、デプロイスクリプト、プレビュースクリプトを追加します。
{
  "name": "my-worker",
  "version": "0.0.0",
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "jest": "^29.5.0",
    "webpack": "^5.80.0",
    "wrangler": "2.16.0"
  },
  "private": true,
  "scripts": {
    "start": "wrangler dev",
    "deploy": "wrangler publish",
    "test": "jest",
    "build": "webpack"
  },
  "dependencies": {
    "webpack-cli": "^5.0.1"
  },
  "devtool": "cheap-module-source-map",
  "main": "dist/index.js"
}

これでプロジェクトのセットアップが完了しました。

ビルドとデプロイ

コマンドラインで、以下のコマンドを実行してビルドを行います。

npm run build

これにより、dist ディレクトリに worker.js が生成されます。

プロジェクトを Cloudflare Workers にデプロイするには、以下のコマンドを実行します。

npm run deploy

これにより、指定したルート（この例では example.com/*）で動作するように Worker がデプロイされます。

プレビュー

ローカルで開発を行い、変更をプレビューするには、以下のコマンドを使用します。

npm run start

これにより、Cloudflare Workers のプレビューエンドポイントが開きます。

まとめ

この記事では、Webpack を使用して Cloudflare Workers のコードをビルドし、デプロイする方法を紹介しました。Webpack を使うことで、コードの最適化やモジュールの依存関係の解決を行い、効率的にサーバーレスアプリケーションを構築できます。今回は外部モジュールを利用してないため、外部モジュールを利用したコードも書いてみたいと思います。

Discussion