Open20

cloudflareでドメイン取ったのでcloudflareにデプロイする

kurehajimekurehajime

作ったWebサービス置き場としてasweb.appというドメインを取った。
本格的な引っ越しは後からするが、とりあえずトップページだけ作っておく。

kurehajimekurehajime

ドキュメントを読む。

https://developers.cloudflare.com/pages/framework-guides/deploy-a-nextjs-site/

このガイドでは、以下を展開する方法について説明します。

Edge ランタイムを使用するフルスタック Next.js プロジェクト。
静的エクスポートを使用した静的サイト Next.js プロジェクト。

Edge ランタイムを試したい気持ちもあるが、それはサブドメインでやる。
トップページは静的なサイトでいいや。

kurehajimekurehajime

nextのプロジェクトを作る

npm create cloudflare@latest aswebapp -- --framework=next

とりあえず全部デフォルトでいいや

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/gabill/src/GitHub/aswebapp.

まだGithubにもあげてないのにhttps://aswebapp.pages.dev/にデプロイできてしまった。これはお手軽過ぎる。

kurehajimekurehajime

と思ったらなんかエラー出てた。

├ Waiting for DNS to propagate
│ DNS propagation complete.
│
┌ Waiting for deployment to become available (277s) ..
Error: 005366DA01000000:error:0A000410:SSL routines:ssl3_read_bytes:sslv3 alert handshake failure:../deps/openssl/openssl/ssl/record/rec_layer_s3.c:1605:SSL alert number 40

npm ERR! code 1
npm ERR! path /Users/gabill/src/GitHub
npm ERR! command failed
npm ERR! command sh -c create-cloudflare aswebapp --framework=next

npm ERR! A complete log of this run can be found in: /Users/gabill/.npm/_logs/2023-11-04T06_50_21_566Z-debug-0.log
kurehajimekurehajime

2023-11-04T06_50_21_566Z-debug-0.log
が見つからない…

いったん進むか

kurehajimekurehajime

package.jsonを覗いてみる

    "pages:build": "npx @cloudflare/next-on-pages",
    "pages:deploy": "npm run pages:build && wrangler pages deploy .vercel/output/static",
    "pages:watch": "npx @cloudflare/next-on-pages --watch",
    "pages:dev": "npx wrangler pages dev .vercel/output/static --compatibility-date=2023-10-30 --compatibility-flag=nodejs_compat"

wranglerとはなんぞや。ChatGPTに聞いてみた。

https://chat.openai.com/share/7544b35f-fe80-41df-b1a9-6169d700fa3d

Cloud flareのツールらしい。
deployはともかくpages:devでも必要なのかな、と思ったけど、edgeの環境を再現してくれるらしい。なるほど便利。

kurehajimekurehajime

とはいえデプロイコマンドをいちいち叩くのは面倒。
GithubにPushしたら勝手にデプロイされて欲しい。

うーん、新たにPagesを作る際のGit連携方法は書いてるけど、既存の設定を変更する方法が見当たらない。

kurehajimekurehajime

あーedgeランタイム向けのプロジェクト構築してた。
やり直そう。

kurehajimekurehajime

静的サイトでやりなおし

npx create-next-app --example with-static-export homeaswebapp

なるほどstaticなWebサイト作る場合はデプロイコマンドとかは付いてこないのか。

    "dev": "next",
    "build": "next build",
    "start": "serve out"

いや、よく見ると普通のcreate-next-appか。なら当然か。

kurehajimekurehajime

デプロイ

Pages → Gitに接続

フレームワーク プリセットはNextの静的エクスポート。

はいできた。

kurehajimekurehajime

カスタムドメイン

なんとドメイン取得済みならこんな簡単にいけるのか。


kurehajimekurehajime

あれ？
アクセスできない。

時間かかるのかな、と思ったりもしたけれど、pages.dev経由でもアクセスできなくなってしまった。

kurehajimekurehajime

フルセットアップのドメインの場合、ドメインは、ドメインのアクティブ化から15 分から 24 時間以内にユニバーサル SSL 証明書を自動的に受信します。。

SSL/TLS→エッジ証明書を見ると検証保留中のステータスが

ユニバーサル証明書の発行には最大 24 時間かかる場合があるため、証明書のステータスを監視して待ってください。

待つしか無いか。

kurehajimekurehajime

4時間待ったらpages.devの方は回復した。

独自ドメインのほうはまだ

kurehajimekurehajime

digの結果のbefore/after

反映される前

% dig CNAME asweb.app

; <<>> DiG 9.10.6 <<>> CNAME asweb.app
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: SERVFAIL, id: 5905
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;asweb.app.			IN	CNAME

;; Query time: 879 msec
;; SERVER: 218.40.229.16#53(218.40.229.16)
;; WHEN: Sat Nov 04 21:14:14 JST 2023
;; MSG SIZE  rcvd: 38

反映された後

% dig CNAME asweb.app

; <<>> DiG 9.10.6 <<>> CNAME asweb.app
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 59492
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 1, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;asweb.app.			IN	CNAME

;; AUTHORITY SECTION:
asweb.app.		300	IN	SOA	etta.ns.cloudflare.com. dns.cloudflare.com. 2324625910 10000 2400 604800 1800

;; Query time: 50 msec
;; SERVER: 218.40.229.40#53(218.40.229.40)
;; WHEN: Sun Nov 05 13:15:38 JST 2023
;; MSG SIZE  rcvd: 100
kurehajimekurehajime

TXTレコードのbefore/after

before

% dig TXT asweb.app

; <<>> DiG 9.10.6 <<>> TXT asweb.app
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: SERVFAIL, id: 56489
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;asweb.app.			IN	TXT

;; Query time: 944 msec
;; SERVER: 218.40.229.16#53(218.40.229.16)
;; WHEN: Sat Nov 04 17:40:48 JST 2023
;; MSG SIZE  rcvd: 38

after

% dig TXT asweb.app

; <<>> DiG 9.10.6 <<>> TXT asweb.app
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 15747
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 1, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 1232
;; QUESTION SECTION:
;asweb.app.			IN	TXT

;; AUTHORITY SECTION:
asweb.app.		300	IN	SOA	etta.ns.cloudflare.com. dns.cloudflare.com. 2324625910 10000 2400 604800 1800

;; Query time: 141 msec
;; SERVER: 218.40.229.40#53(218.40.229.40)
;; WHEN: Sun Nov 05 13:17:53 JST 2023
;; MSG SIZE  rcvd: 100
kurehajimekurehajime

反映に時間がかかると「本当に自分の操作は正しかったのか？他にもやらないといけない操作があったのでは？」と不安になるなぁ。