Cloudflare WorkersをDockerで（ホストにWranglerをインストールせずに）開発する

Cloudflare Workersで開発するには、通常は公式ドキュメントにあるとおり$ npm install -g @cloudflare/wranglerでCLIツール「wrangler」をPCにインストールして行います。本稿ではwranglerを直接PCにはインストールせずDockerのみで開発してみました。

環境

• debian_version 10.9 (ChromeOS Linux)
• Docker version 19.03.13, build 4484c46d9d
• docker-compose version 1.27.4, build 40524192
• wrangler 1.15.0

設定

下記のようにファイルを設定していきます。

docker-compose.yml

version: '3'
services:
  app:
    build: .
    volumes:
      - .:/app
    ports:
      - 8080:80

Dockerfile

FROM nginx:1.19-alpine
WORKDIR /app

# nginx
COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf

# wrangler
RUN apk add nodejs npm
COPY ./package.json ./
COPY ./package-lock.json ./
RUN npm install --also=dev

CMD nginx && npx @cloudflare/wrangler dev

package.json

{
  // 中略
  "devDependencies": {
    "@cloudflare/wrangler": "^1.15.0"
  }
}

nginx/default.conf

server {
  listen 80;
  proxy_set_header Host $host:8080;

  location / {
    proxy_pass http://localhost:8787;
  }
}

nginx:alpineのDockerイメージにwranglerをインストールして両方同時に立ち上げています。こうすることでコンテナ外（ホスト）からwrangler devの実行結果を覗けるようになります。あまりきれいな方法ではないのですが、今回は開発環境のみということで...
「ホスト:8080→nginx:80→wrangler:8787」の順番でポートをつないでいきます。もちろん数字は整合していれば何でも構いません。

$ docker-compose upで立ち上げたら http://localhost:8080 にアクセスすると$ wrangler devの開発サーバの結果を確認することができます。

デプロイは少々面倒ですが、$ docker-compose exec app shでコンテナの中に入った後

# npx @cloudflare/wrangler login
# npx @cloudflare/wrangler publish

...することで対応しています。認証情報ファイルをホストに配置してからコピーすることで$ wrangler loginせずに実行できるようにしても良いかも知れません。本格的に開発するようであればCI/CD等のデプロイ環境を組むと思うのであまり気にしなくていいと思います。

この方法で開発したものが以下です。