Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@suzuki_sh

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等のデプロイ環境を組むと思うのであまり気にしなくていいと思います。

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

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?