Cloudflare Pagesにローカルからアップロードするならwranglerを使おうという話

  • タグ:#Cloudflare Pages#雑記

  • まえがき

    当サイトは現在Xserverドメインでドメインを取得し、Cloudflare Pagesを利用して公開する形をとっています。

    普通はシンプルにサーバー契約して付属サービスとしてWordpressを使うものなんでしょうが、そもそも.comドメイン取得前はフリードメインサービスとNetlifyを使用し、ブログテンプレートのHTML素材を弄って利用していました。 フリーBGM配信サイトとして作り直すにあたり、サーバーをどうするかが一番の問題だったのですが、

    • 最大20000ファイルまでのアップロードに対応
    • 1ファイル当たりの容量は25MBまで
    • 商用利用可能 (重要)

    というなかなかに太っ腹なCloudflare Pagesの仕様を見て「もうこれでいいじゃん」と思い、かつて断念した静的サイトジェネレーターGatsbyを使用して公開することに決めました。

    クッッッッソ大変でした。

    が、それは別の話なのでとりあえず置いておきます。

    ブラウザからのアップロードに対応しているとのことなので、アップロード周りのことをまったく調べずに出来上がったサイトをすぐに公開し始めました。これがいけなかった。


    ある日…

    動画URLを埋め込む都合上Youtubeへのアップロード後にサイトを更新しているのですが、それはその時起こりました。

    01

    は?1000ファイルって何?いやいやサイトに20000ファイルって書いてあったじゃんと思い調べたところ、ブラウザからのアップロードは1000ファイルが上限だと別のページにしっかり記載が…

    02

    こりゃいかんと思い急いで何とかしようとしたのですが、前述のとおりGitHub等からのデプロイなんてまったく調べておりません。 そもそもローカルからサイトデータだけを直アップロードしたいからこの方法をとっていました。

    さてどうしようと思っていたところ、上記画像に答えがそのまま書いてあることにようやく気が付く。 ローカルからならwranglerを使えということらしいです。

    導入からいきなり躓く

    とにかくアップロードができればよかったのでササッと調べてインストールしたのですが、wrangler loginコマンド打っても動かない… 結局一度アンインストールし、グローバルインストールで使えるようになりました。

    npm install -g wrangler

    gatsbyのプロジェクトフォルダでコンソール開いてインストールしたのがまずかったんだろうか? 通常はnpm install wranglerを使用するようなので、グローバルインストールはそれだと使用できなかった場合のみ試したほうがいいかもしれません。


    最終的に使用したコマンド

    当初既存プロジェクトへのデプロイ方法が分からず、新規にプロジェクトを作ったりしていましたが、wrangler loginで認証した後既にプロジェクトが存在する場合、以下のようにすればデプロイが可能でした。

    wrangler pages deploy <アップロードフォルダ> --project-name <Pagesのプロジェクト名> --branch <Pagesのプロダクションブランチ名>

    ブラウザからのアップロードで作成したプロジェクトだと、mainがプロダクションブランチになっているはずです。 branchコマンドを使いmainを指定しないとmasterブランチで上がってしまい、プレビュー環境へのデプロイしかできません。

    また、wranglerでプロダクションブランチ名master以外で作成しても、--branchコマンドなしの場合のデプロイ先ブランチ名はmasterになります。 wranglerでのプロジェクト作成時のデフォルトプロダクションブランチ名がmasterなので、その想定しかされていないのかもしれません。

    ちなみに…

    公式の説明ではプロダクションブランチ名は変更できるというような記述がありますが、私の環境では設定タブ内のどこにもそのような物は見当たりません。 git環境用の設定でしょうか… branchコマンドにより直接名前を指定しまうのが手っ取り早いと思います。

    Gatsby環境だとプロジェクトのディレクトリでコンソールを開いてコマンドを実行することにより、node_modules/.cache/wranglerフォルダ内に設定が保存されます。 この状態になれば--project-nameのみは省略しても同じプロジェクトにアップロードできるようになります。 ただしデフォルトのブランチ名の固定方法は無い模様。

    まあ普通はテキストにコード保存してコピペするかバッチ作るか、そもそも普通にGitHubやGitLabを利用してデプロイすると思うので、問題ないユーザーが多いということなんだと思います。


    導入した感想

    そういう訳で急遽導入したwranglerでしたが、環境整った後はすごい快適になりました。 ブラウザからのアップロードはおそらく全ファイル処理なのでちょっと時間がかかりますが、wrangler通したローカル環境だと差分更新が効くんですね。

    何度か使った感じページ内容の更新はちゃんと反映されているし、Gatsby cleanからのbuildでファイル総数変わった場合も反映できていたので導入してよかったです。(このページのサムネはその実験中の画像)

    20000ファイル、1ファイル25MBの縛りはGithub等からのデプロイでも変わらないので、このままwranglerで更新しようと思います。


    あとがき

    まえがきで商用利用可能 (重要) って書いてるけど、2023年7月10日現在、まだGoogle AdSenseには申し込んでない。 曲素材数は最低でも50曲はあったほうがいいという以下の記事を見たからです。

    要件満たしててもダメなことは普通にあるらしいので、最低限のラインに届いてないうちは申し込まない。というか申し込めない。

    Youtubeに上げてる自作曲はちょっとずつ反応もらえるようになって登録者数も増えてきた。 ただ収益化の最低条件が登録者数1,000人と1年以内の動画総再生時間4,000時間なので、どちらもまだ1割にすら届いていないし、なんなら再生時間はようやく1%行くかどうか。 まあ今年の5月に作ったアカウントならそりゃそうだろって話ではある。

    このサイトもYoutubeの自作曲アカウントも収益化を目標に更新し続けてるけど、無名どころの話で済まないんで、道は遠い…