Next.jsの自作漫画サイトをVercelからCloudflare Pages+R2に乗せ換えた話
はじめに
自作漫画サイトRESIGN THREATを、Vercel+S3+Cloudflare(CDN)から、Cloudflare Pages+R2に置き換えた。主にその苦労話。
自作漫画サイトRESIGN THREATを、Vercel+S3+Cloudflare(CDN)から、Cloudflare Pages+R2に置き換えた。主にその苦労話。
この日記の続編。残課題とか、その辺について。
ブログをHugo+Cloudflare Pagesに移行した。とかいいつつ、これを書いてる時点ではまだローカルで hugo server -D
とかやって遊んでるレベルなのだが、今後移行に際して遭遇する様々な問題は都度書き残しておかないとどうせ忘れてしまうので、取り急ぎ筆をとった次第である。移行完了がいつになるのかはわからないけどとりあえず振り返り用の記事として用意する。
以前Amplifyで個人開発のNext.jsのアプリをビルドさせたら遅すぎて萎えたって話をしたことがあるが、そういえば同じやつを他でビルドしてみたらどうなるんだろうと思って試してみた。その結果のまとめ。
まあタイトルの通りなのだが。。。
Herokuのカスタムドメインを使ってSSLを ”無料で” 実現する方法として、よく言われているのが、前段にCloudflareを配置して、SSL/TLS設定を「フレキシブル」にしたうえでHerokuに繋げる、というやり方である。
Herokuの無料Dyno(Free Dyno)でカスタムドメインを利用する場合、SSLは対応していないので、前段にCloudflareを配置し、受け口をhttpsにして、CDNから先のHerokuにはnon-SSLで通信させて、とりあえずhttps通信を実現させている。
ただ、CloudflareのSSL/TLS設定はアカウント全体で1つなので、Cloudflare配下に複数のドメイン(サイト)を持つ場合、Herokuのためだけに「フレキシブル」にしておけない、ということもあると思う。
というか実際私はあったのだ。
具体的には、「フル(厳密)」を選択したかったのだが、上述の通りで、Heroku側がSSLに対応していないため、単純にこれを選択するとCloudflare→Heroku間の通信が失敗してHTTP 526エラーが返ってくる。
というわけでこれをどうやって実現したらよいか?を検証した記録。
まあ色々検索すれば出てくるのだが、自分のための備忘録を兼ねて。