GitHub Actionsを使ってCloudflare Workersを自動にデプロイする

# はじめに
Cloudflare Workersプロジェクトをデプロイする場合、Wranglerを使ってデプロイをします。
しかし、手動でデプロイするより、特定の動作によって自動にデプロイができればすれより楽になると思います。
今回は、GitHub Actionsを使って、GitHubの`main`ブランチがPushされた時、Cloudflare Workersプロジェクトを自動にデプロイする方法について整理してみました。

# 手順
手順は以下の通りになります

[1. Cloudflare Workers プロジェクトとGitHub リポジトリを作成][label-1]
[2. CloudflareのAPI TokenとAccount IDを取得][label-2]
[3. GitHub Actionsを設定][label-3]
[4. Workflowを追加][label-4]
[5. 自動デプロイのテスト][label-5]

[label-1]: #1-cloudflare-workers-プロジェクトとgithub-リポジトリを作成
[label-2]: #2-cloudflareのapi-tokenとaccount-idを取得
[label-3]: #3-github-actionsを設定
[label-4]: #4-workflowを追加
[label-5]: #5-自動デプロイのテスト

## 1. Cloudflare Workers プロジェクトとGitHub リポジトリを作成
#### 1.1. Cloudflare Workers プロジェクトを生成します
```console
$ npm create cloudflare@latest
```
詳細なCloudflare Workers プロジェクトの生成については、以下の記事を参考してください。

https://qiita.com/dev-cho/items/8c66395dda41db7543e2#cli%E3%83%84%E3%83%BC%E3%83%AB%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%A6%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E4%BD%9C%E6%88%90

※ 現在のBranch名を`main`に修正したい場合は、以下のコマンドで修正します
```console
$ git branch -m main
```


#### 1.2. GitHubで新規のリポジトリを作成し、リポジトリのURLをコピーします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/5c82f250-d4ec-5e5b-31f1-2ee92e111d59.png)

#### 1.3. Cloudflare Workers プロジェクトにコピーしたURLを設定し、プロジェクトをPushします
```console
$ git remote add origin git@github.com:foo/bar.git
$ git push --set-upstream origin main
```
SSH Keyを設定する必要がある場合、以下の記事を参考してみてください。

https://qiita.com/dev-cho/items/b0f5574689d9e28c844c

## 2. CloudflareのAPI TokenとAccount IDを取得
#### 2.1. ダッシュボードから右上のアイコンをクリックし、`My Profile`に入ります
https://dash.cloudflare.com/

#### 2.2. `My Profile`の`API Tokens`のページに入って、`Create Token`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/d5e0e52d-aab8-4156-144d-92b913b93a21.png)

#### 2.3. テンプレートの中で`Edit Cloudflare Workers`を探して、`Use template`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/01a2afa4-d34a-e0b6-95e4-8fdea87eda9b.png)

#### 2.4. トークン名をわかりやすい名前に修正します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/65d53b5f-b38e-b3f0-f40d-84f7c37dc65b.png)

#### 2.5. `Account Resources`と`Zone Resources`を設定します
- Account Resources
  - Include
  - ログインしたアカウント (`〇〇's Account`)
- Zone Resources
  - Include
  - All zones from an account
  - ログインしたアカウント (`〇〇's Account`)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/3e743ca5-40e6-dc8a-81db-62b6375b0113.png)

#### 2.6. `Continue to summary`をクリックして次に進みます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/aa8a7c14-759e-55bf-4d93-99f9bdacb0cf.png)

#### 2.7. 権限設定に問題なければ、`Create Token`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/bdd8f9bb-af54-40f3-72d6-a003324a1200.png)

#### 2.8. 生成されたAPI Tokenをコピーします
:::note warn
この画面は再び表示されないので、
忘れないように必ずTokenをメモしてください
:::
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/ccd85a62-8977-e476-7ad5-b7e195ea5d6e.png)

#### 2.9. Account IDをコピーします
`ダッシュボード > Workers & Pages`で`Account ID`を取得します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/fa69d2ec-1213-1cd4-c479-a89f73871ab8.png)



## 3. GitHub Actionsを設定
#### 3.1. GitHubのリポジトリのSecretを追加します
GitHubのリポジトリの`Settings > Secrets and variables > Actions`で、`New Repository secret`をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/98f9fee3-928d-e307-0dd0-af59ab8d929f.png)

#### 3.2. Secret設定を追加します
以下の2つのSecret設定を追加します

**1. API TokenのSecret設定**
- Name : CLOUDFLARE_API_TOKEN
- Secret : [Cloudflare API Tokenの値][apiToken-1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/6b7c28bf-3ea2-578f-c6d5-7fc7cd0d7316.png)

[apiToken-1]: #28-生成されたapi-tokenをコピーします

**2. Account IDのSecret設定**
- Name : CLOUDFLARE_ACCOUNT_ID
- Secret : [Cloudflare Account IDの値][accountId-1]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/b366112b-9bb3-a49c-22d3-e2a51ce52ec0.png)

[accountId-1]: #29-account-idをコピーします

追加したリポジトリのSecret設定の一覧は以下のようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/b49979db-5e79-18e6-c5aa-d37e226a05e1.png)



## 4. Workflowを追加
#### 4.1. プロジェクトのリポジトリでworkflowファイルを追加します
```console
$ mkdir -p .github/workflows
$ vim .github/workflows/deploy.yml
```
#### 4.2. deploy.ymlの内容を作成します
`main`ブランチがpushされたら、自動にデプロイするように内容を作成しました。
```yml:.github/workflows/deploy.yml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - uses: actions/checkout@v4
      - name: Deploy
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
```

#### 4.3. 変更をpushします
```console
$ git add .
$ git commit -m "Add deploy workflow"
$ git push
```
その後、GitHubでWorkflowが正しく動作しているのか確認ができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/d716f3f6-ff71-8fba-6988-245950f97e48.png)

#### GitHub Actionsのデプロイが失敗する場合
ローカル環境ではデプロイできるが、GitHub Actionsではデプロイが失敗する場合は、以下のリンクも参考してみてください。

https://qiita.com/dev-cho/items/0e824cc1bb69b13913a7

## 5. 自動デプロイのテスト
#### 5.1. ソースコードを少し修正して、pushします
```diff_typescript:src/index.ts
export default {
	async fetch(request, env, ctx): Promise<Response> {
-		return new Response('Hello World!');
+		return new Response('Hello World! Hello GitHub Actions!');
	},
} satisfies ExportedHandler<Env>;
```
#### 5.2. コード修正が反映されたか確認します
- 修正前の結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/bcbdaad4-6e3e-85e9-5ee9-ebbeeeaa94e9.png)

- 修正後の結果
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/a2846cee-7c31-fa4d-115c-26be352d4727.png)

- Workflows確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1184971/c6adba8a-baac-da44-6fbd-1821cf23d3d3.png)

# おわりに
今回、GitHub Actionsを使って、Cloudflare WorkersのCI/CD設定の手順を整理してみました。

以下に参考できるドキュメントやURLを追記しますので、そちらも参考してみてください。

https://developers.cloudflare.com/workers/ci-cd/external-cicd/github-actions/

https://developers.cloudflare.com/fundamentals/api/get-started/create-token/

https://github.com/cloudflare/wrangler-action