Cloudflare Pagesで静的HTMLをCLIだけを使ってデプロイする
薄田達哉 / tatsuyasusukidaGUI+GitHubを使う方法については下記の記事にまとめられている
薄田達哉 / tatsuyasusukidaコーディングの準備
mkdir cloudflare-static-html
cd cloudflare-static-html
npm init -y
npm install --save-dev wrangler
mkdir dist
touch dist/index.html
index.htmlのコーディング
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to deploy static HTML to Cloudflare Pages using CLI only</title>
</head>
<body>
<h1>How to deploy static HTML to Cloudflare Pages using CLI only</h1>
</body>
</html>
今回はtouchコマンドでindex.htmlを作成しているが、手元にある静的HTMLを公開したい場合はcopyコマンドを使用する旨について言及する
薄田達哉 / tatsuyasusukidaプロジェクトの作成コマンド
~/workspace/js/cloudflare-static-html$ npx wrangler pages project create project-name
初回はログインを求められる
Attempting to login via OAuth...
しばらく何もしないとタイムアウトになる
薄田達哉 / tatsuyasusukida--production-branchオプションを指定しないと質問される
Enter the production branch name: main
GitHubを使わないのにproduction-branchを設定することに意味はあるのだろうか？
薄田達哉 / tatsuyasusukida認証完了ページ
薄田達哉 / tatsuyasusukidaプロジェクト作成完了メッセージ
✨ Successfully created the 'cloudflare-static-html' project. It will be available at https://cloudflare-static-html.pages.dev/ once you create your first deployment.
To deploy a folder of assets, run 'wrangler pages publish [directory]'.
改善のためのメトリクス送信の質問メッセージ
Would you like to help improve Wrangler by sending usage metrics to Cloudflare?
(y/n)
yを入力した場合のメッセージ
Your choice has been saved in the following file: ../../../.wrangler/config/metrics.json.
You can override the user level setting for a project in `wrangler.toml`:
- to disable sending metrics for a project: `send_metrics = false`
- to enable sending metrics for a project: `send_metrics = true`
デプロイするコマンド
npx wrangler pages publish dist
デプロイするとまた認証ページが表示される、これって毎回必要なのかな？どこかにログインセッションが保存されていればいいのに
Attempting to login via OAuth...
アップロードが成功した時のメッセージ
🌎 Uploading... (1/1)
✨ Success! Uploaded 1 files (1.39 sec)
✨ Deployment complete! Take a peek over at https://8e150140.cloudflare-static-html.pages.dev
https://8e150140.cloudflare-static-html.pages.dev/ か https://cloudflare-static-html.pages.dev/ のどちらかにアクセスするとページが表示される
薄田達哉 / tatsuyasusukida試しにちょこっとだけ修正して再度アップロードしてみる
<h1>How to deploy static HTML to Cloudflare Pages using CLI only!!!</h1>
最後にビックリマークを3個つけた
薄田達哉 / tatsuyasusukida2回目はログインページが表示されなかった！良かった！
🌍 Uploading... (1/1)
✨ Success! Uploaded 1 files (1.12 sec)
✨ Deployment complete! Take a peek over at https://ecaca32e.cloudflare-static-html.pages.dev
薄田達哉 / tatsuyasusukida認証についてはOAuthのほかにもAPIキーを使う方法もある
GitHub Actionsなどの場合はこちらの方を使う
薄田達哉 / tatsuyasusukidaログイン中のユーザーについて調べるコマンド
npx wrangler whoami
実行結果
⛅️ wrangler 2.1.15
--------------------
Getting User settings...
👋 You are logged in with an OAuth Token, associated with the email
'susukida@example.com'!
┌─────────────────────────────────────┬──────────────────────────────────┐
│ Account Name │ Account ID │
├─────────────────────────────────────┼──────────────────────────────────┤
│ Susukida@example.com's Account │ 00000000000000000000000000000000 │
└─────────────────────────────────────┴──────────────────────────────────┘
🔓 Token Permissions: If scopes are missing, you may need to logout and
re-login.
Scope (Access)
- account (read)
- user (read)
- workers (write)
- workers_kv (write)
- workers_routes (write)
- workers_scripts (write)
- workers_tail (read)
- d1 (write)
- pages (write)
- zone (read)
- offline_access
ログアウトするコマンド
npx wrangler logout
実行結果
⛅️ wrangler 2.1.15
--------------------
Successfully logged out.
ちなみに認証ページでDenyした場合のメッセージ
✘ [ERROR] Error: Consent denied. You must grant consent to Wrangler in order to login.
If you don't want to do this consider passing an API token via the
`CLOUDFLARE_API_TOKEN` environment variable
✘ [ERROR] Did not login, quitting...
If you think this is a bug then please create an issue at https://github.com/cloudflare/wrangler2/issues/new/choose
ところで下記のデプロイのコマンドだが、どのようにデプロイ先のプロジェクトを決めているのだろうか？
npx wrangler pages publish dist
下記によると--project-nameが未指定の場合は質問されると書いてあるが質問されない
Your site is deployed to <PROJECT_NAME>.pages.dev. If you do not provide the --project-name argument, you will be prompted to enter <PROJECT_NAME> in your terminal after you run the command.
もしかしてディレクトリの名前とかpackage.jsonのnameプロパティとかで判断している？
薄田達哉 / tatsuyasusukidaプロジェクトを削除してから再度デプロイしてみた
npx wrangler pages publish dist
エラーメッセージが表示された
✘ [ERROR] A request to the Cloudflare API (/accounts/00000000000000000000000000000000/pages/projects/cloudflare-static-html/upload-token) failed.
Project not found [code: 8000007]
If you think this is a bug, please open an issue at:
https://github.com/cloudflare/wrangler2/issues/new/choose
npx wrangler pages project createをした時点でデフォルトのプロジェクトが設定されてしまうのだろうか？
薄田達哉 / tatsuyasusukidaもう一度、プロジェクト名を変えて作成してみる
npx wrangler pages project create cloudflare-static-html-test --production-branch main
メッセージ
✨ Successfully created the 'cloudflare-static-html-test' project. It will be available at https://cloudflare-static-html-test.pages.dev/ once you create your first deployment.
To deploy a folder of assets, run 'wrangler pages publish [directory]'.
デプロイ
npx wrangler pages publish dist
メッセージ
🌎 Uploading... (1/1)
✨ Success! Uploaded 1 files (2.78 sec)
✨ Deployment complete! Take a peek over at https://7460b8b9.cloudflare-static-html-test.pages.dev
ディレクトリの名前とかpackage.jsonのnameプロパティとかで判断している訳では無さそう
薄田達哉 / tatsuyasusukidaどこに保存されているのかどうしても気になるのでソースコードをちょっと読んでみた
なるほど node_modules/.cache/wrangler/pages.json にあるのか！
{
"account_id": "00000000000000000000000000000000",
"project_name": "cloudflare-static-html-test"
}
すっきりすっきり
薄田達哉 / tatsuyasusukida最後にAPIキーを使った認証について調べてみよう
まずはAPIを作成する
https://dash.cloudflare.com/profile/api-tokens に移動する
API tokenとGlobal API Tokenがあるんだな、Global API Tokenはほぼ何でもできそう
いろんなテンプレートがあるけどPagesのはないのでGet Startedボタンをクリック
とりあえずできた、なんか権限足りなくてエラーになりそうだけど
薄田達哉 / tatsuyasusukidaドキュメントに従ってAPIキーを設定しようとしたらエラー
$ npx wrangler config
✘ [ERROR] Deprecation:
`wrangler config` has been deprecated, please refer to
https://developers.cloudflare.com/workers/wrangler/migration/deprecations/#config
for alternatives
ドキュメントによるとCLOUDFLARE_API_TOKEN環境変数を使うとのこと
薄田達哉 / tatsuyasusukida普通にできた、嬉しい
$ CLOUDFLARE_API_TOKEN=xxxxxxxxxxxxxxxxxxxxxxxxx npx wrangler pages publish dist
🌍 Uploading... (1/1)
✨ Success! Uploaded 0 files (1 already uploaded) (0.55 sec)
✨ Deployment complete! Take a peek over at https://3268552b.cloudflare-static-html-test.pages.dev
ちなみにAPIトークンが間違っているとしっかりエラーになる
$ CLOUDFLARE_API_TOKEN=invalid_api_token npx wrangler pages publish dist
✘ [ERROR] A request to the Cloudflare API (/accounts/00000000000000000000000000000000/pages/projects/cloudflare-static-html-test/upload-token) failed.
Authentication error [code: 10000]
ちなみにAPIトークンは二度と表示できないので紛失してしまった場合は再度作成する
薄田達哉 / tatsuyasusukidaここに書いてある内容＋GitHub Actionsの設定までnwtgckさんの記事にまとめられている
素晴らしい記事