React でなにかつくる

目的

• React の勉強
• フロントエンド関連の知識アップデート
• ホスティング周りの知識アップデート

やったこと

個人ドメインが失効していたため、再取得した

1. レジストラの選定
   • 過去に利用したことがあるレジストラ(利用順)
     • Data Japan
     • GoDaddy
     • Google domains (提供終了, Squarespaceに移管)
2. 利用したことがなく色々できそうなレジストラを調べた
   • 候補
     • AWS Route 53
     • Cloudflare Registrar
     • さくらのドメイン
3. 結局
   • Cloudflare Registrar にした
     • ちょっと高かった
     • TLD-List でレジストラを比較できる
4. 選定理由
   • デフォルトで Whois 情報を秘匿してくれる
   • Cloudflare Pages と WAF をつかってみたかった
   • 他にも多数の機能があったためつかってみたかった
5. Cloudflare で
   • よかったこと
   • ドメイン取得まで1分(paypal/クレカ支払い)
     • Dashboard が日本語対応
       • Chrome の DevTools を開いているとエラーが起こる
     • みやすい
   • 残念なこと
     • Chrome の DevTools を開いているとエラーが起こる

CloudFlare Pages 前提で React のページを作った

ref: https://zenn.dev/kat/articles/ce1b0bb2d037ae

プロジェクト作成

• 特徴
  • npm
    • pnpm を使ってみたかったが、今回はデフォルトのままにしｔが
  • React
    • 今回の目的
  • TypeScript
    • Rreact のデフォルト言語が TypeScript になっていた
  • SWC (知らなかった)
    • Speedy Web Compiler, ビルドが早くなるらしい
  • Vite (知らなかった)
    • ビルドツール

$ node -v
v20.16.0
$ npm -v
10.9.0
$ npm create cloudflare@latest cf-timer -- --framework=react

> npx
> create-cloudflare cf-timer --framework=react


─────────────────────────────────────────────────────────────────────────────────────────────────────👋 Welcome to create-cloudflare v2.30.1!
🧡 Let's get started.
📊 Cloudflare collects telemetry about your usage of Create-Cloudflare.

Learn more at: https://github.com/cloudflare/workers-sdk/blob/main/packages/create-cloudflare/telemetry.md
─────────────────────────────────────────────────────────────────────────────────────────────────────
╭ Create an application with Cloudflare Step 1 of 3
│
├ In which directory do you want to create your application?
│ dir ./cf-timer
│
├ What would you like to start with?
│ category Framework Starter
│
├ Which development framework do you want to use?
│ framework React
│
├ Select a variant:
│ variant TypeScript + SWC
│
├ Continue with React via `npx create-vite@5.5.3 cf-timer --template react-swc-ts`
│


Scaffolding project in F:\creative\workspace\react\cf-timer...

Done. Now run:

  cd cf-timer
  npm install
  npm run dev


├ Installing dependencies    
│ installed via `npm install`
│
╰ Application created

╭ Configuring your application for Cloudflare Step 2 of 3
│
├ Installing wrangler A command line tool for building Cloudflare Workers 
│ installed via `npm install wrangler --save-dev`
│
├ Installing @cloudflare/workers-types 
│ installed via npm
│
├ Adding latest types to `tsconfig.json`
│ added @cloudflare/workers-types/2023-07-01
│
├ Adding Wrangler files to the .gitignore file
│ updated .gitignore file
│
├ Updating `package.json` scripts 
│ updated `package.json`
│
├ Do you want to use git for version control?
│ yes git
│
├ Initializing git repo 
│ initialized git       
│
├ Committing new files 
│ git commit
│
╰ Application configured

╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `npm run deploy`
│
╰ Done

────────────────────────────────────────────────────────────
🎉  SUCCESS  Application created successfully!

💻 Continue Developing
Change directories: cd cf-timer
Start dev server: npm run dev
Deploy: npm run deploy

📖 Explore Documentation
https://developers.cloudflare.com/pages

💬 Join our Community
https://discord.cloudflare.com
────────────────────────────────────────────────────────────

$ npm run dev
  VITE v5.4.10  ready in 206 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

デフォルトブランチを main に変更して Github に push

/cf-timer (master)
$ git remote add origin xxxx.git

/cf-timer (master)
$ git branch 
* master

/cf-timer (master)
$ git checkout -b main 
Switched to a new branch 'main'

/cf-timer (main)
$ git branch -M main

CloudFlare Pages にデプロイ

GitHub 経由でデプロイするようにした CloudFlare の Dashboard 上でポチポチするだけ ローカルから CLI でデプロイする方法もあるみたい

TODO