高木のブログ

GitHub ActionsからReactアプリをCloudflare Workers Sitesにデプロイする

2021/12/03

前回、ローカルから「Create React Appで作ったReactアプリをCloudflare Workers Sitesにデプロイする」をやったので、今回はGitHub Actionsから自動デプロイできるようにしてみる

Deploy to Cloudflare Workers with Wrangler

手順

APIトークンを取得する

APIトークンはここで取得できる
https://dash.cloudflare.com/profile/api-tokens

テンプレートは「Edit Cloudflare Workers」を選択

APIトークンをGitHubのSecretsに登録

Nameは「CF_API_TOKEN」で登録

ワークフローファイルを作成する

.github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/[email protected]
      - uses: actions/setup-[email protected]
        with:
          node-version: '14'
          cache: yarn
      - name: Install Dependencies
        run: yarn install
      - name: Build
        run: yarn build
      - name: Publish
        uses: cloudflare/wrangler-[email protected]
        with:
          apiToken: ${{ secrets.CF_API_TOKEN }}

補足

キャッシュ

キャッシュは後回しする予定だったけど、いつの間にか actions/setup-node がキャッシュ機能をサポートしていたので簡単にできた

以下の4行を追加するだけ

- uses: actions/setup-[email protected]
  with:
    node-version: '14'
    cache: yarn

今のところ依存パッケージが少ないから20秒ほどの短縮


ytkg

Written by ytkg, Twitter, GitHub