PRを自動発行しているワークフローで、複数のトリガーがほぼ同時に来た回だけ、一部のPRにCloudflareのプレビューURLコメントが付かない現象が起きました。ワークフロー自体はgreen表示でエラーもなく、原因調査には手こずりましたが、最終的にGitHub Actionsのconcurrency設定で解決した実体験をまとめます。

ブログはPRでレビューしてからマージする運用ですが、マージ後の本番反映はずっと手動で、反映忘れに何度も悩まされていました。GitHub Actionsに既存workflowと連携するdeployジョブを追加し、マージをトリガーに自動でビルド・デプロイする仕組みと、認証エラーでハマった実体験をまとめます。

背景を透明にしたいのにPhotoshopはないし、オンラインツールは画像をアップロードするのがなんとなく不安…。しかも白背景の白い被写体はどうやってもきれいに抜けない。そんな地味な困りごとを、ブラウザだけで完結する背景透過ツール「とうかねっこ」にまとめました。色でも領域でもきれいに透け、iPhoneのHEIC写真もそのまま読み込めます。どんなツールでどう使うのかを紹介します。

個人開発のReact SPAに忍者AdMaxを貼ったら、審査が「審査中」のまま一向に進まない…。忍者側の不具合かと疑いましたが、原因は全部自分の設定でした。Cloudflareのボット保護が審査クローラを弾き、SPAでは切替タグのswitch型IDでないと広告が描画されない。半日ハマって切り分けた3つの原因と直し方を、実録デバッグ記としてまとめます。

顔をモザイクで隠したい、スクショに写り込んだ住所やAPIキーを消したい——でも他人のサーバーに画像をアップロードするのは少し怖いですよね。そこで画像を一切ネットに出さず、ブラウザ内のCanvasだけで加工する無料ツール「もざいくにゃん」を作りました。React CDN・完全クライアント処理・Cloudflare Pagesという低コスト構成を、実装のポイントとあわせて紹介します。

概要

今回はブログのホスティングをGitHub PagesからCloudflare Pagesに移行する方法を紹介します。

しかも基本的には現在のリリース方法と同じで大丈夫な方法になります！

Cloudflare Pagesは無料プランでも帯域幅が無制限、グローバルCDN配信、自動SSL、DDoS保護が使えるので、GitHub Pagesからの移行先としてかなり優秀です。

同じように移行を検討している方の参考になれば嬉しいです。
それではやっていきましょう！

概要

今回はCloudflareでブログへの不正なBotアクセスを無料でブロックする方法について紹介していきます。

きっかけは、自分のサイトでGoogle AdSenseの「無効な操作: 自己クリック」が突然検知され、心当たりが全く無いのにアカウント停止になってしまったことでした（- -;

調べてみると広告が止まった時刻とぴったり同じタイミングで60並列の同時接続が発生していて、明らかにVPN経由とみられる不審なBotアクセスが原因だったんですね。

放っておくとまた同じことが起きてしまうので、なんとか自力で守る方法はないかと探した結果たどり着いたのが、CloudflareをサイトとサーバのあいだにかませてBotを弾くやり方でした。

この記事では、CloudflareのDNS切り替えからボットファイトモードとセキュリティルールでBotをブロックするところまでを、実際の画面キャプチャ付きで一通り紹介していきます。
無料でここまでできるので、AdSenseを運用しているブロガーの方にはかなりお勧めです。
それではやっていきましょう！