Zenn
⚡

CloudflareでWebアプリ開発[1/3] React(Vite)とCloudflare PagesでWebサイトを作成する

2025/01/01に公開
GitHub
React
TypeScript
Vite
Cloudflare Pages
tech

はじめに

今回は、React（Vite）でWebサイトを作成し、Cloudflare Pagesで公開したいと思います。

この記事はこんな人におすすめ！

  • React(Vite)でWebサイトを作成したい人
  • Cloudflare PagesでWebサイトを公開したい人

バージョン情報

  • vite: ^6.0.5
  • react: ^18.3.1
  • typescript: ~5.6.2

1. GitHubでリポジトリの新規作成

  1. GitHubでリポジトリを新規作成します。リポジトリ名はプロジェクト名にします。ここでは「vite-project」とします。
    • Repository name » vite-project
    • visibility » Private
      リポジトリの新規作成
  2. リポジトリの作成されたら、HTTPSのURIをコピーします。
    新規リポジトリ
  3. VS Codeなどのターミナルで以下を実行し、クローンしてください。リポジトリ名と同じ名前の空のフォルダが作成されます。
    ターミナル
    git clone ＜GitHubリポジトリのURI＞

2. Reactプロジェクトの新規作成

  1. VS Codeなどのターミナルで、以下コマンドを実行します。引数としてプロジェクト名を入力してください。ここでは「vite-project」とします。（Ctrl + Cで中断できます。）
    ターミナル
    npm create vite@latest vite-project
  2. フレームワークはReact、バリアントはTypeScript + SWC選択します。
    ターミナル
    Select a framework: » React
Select a variant: » TypeScript + SWC
  3. プロジェクトが作成されたら、クローンしたフォルダ内に以下のようなフォルダやファイルが生成されます。
    vite-project
├── public
│   └── vite.svg
├── src
│   ├── assets
│   │   └── react.svg
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── .gitignore
├── eslint.config.js
├── index.html
├── package.json
├── README.md
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
  4. プロジェクトのディレクトリに移動します。
    ターミナル
    cd ＜プロジェクト名＞
  5. ライブラリをインストールします。
    ターミナル
    npm install
  6. プロジェクトが正常に作成できたか確認するため、ローカルで起動します。
    ターミナル
    npm run dev
  7. ブラウザでhttp://localhost:5173/にアクセスし、以下のようなWebサイトが表示されたら成功です。（Ctrl + Cで停止できます。）
    Viteプロジェクト
  8. GitHubにプッシュします。
    ターミナル
    git add .
git commit -m "initial commit"
git push

3. Cloudflare Pagesの新規作成

  1. Cloudflareにアクセスし、「Workers & Pages」のページで「作成」ボタンを押下します。
  2. 「Pages」を選択し、「Gitに接続」ボタンを押下します。
    Cloudflare Pagesの新規作成
  3. GitHubに接続し、先ほど作成したリポジトリを選択します。「セットアップの開始」ボタンを押下します。
  4. 「フレームワーク プリセット」は「React (Vite)」を選択します。「保存してデプロイする」ボタンを押下します。
    ビルドとデプロイのセットアップ
  5. ビルドとデプロイに成功すると、以下のような画面になります。「プロジェクトに進む」ボタンを押下します。
    ビルドとデプロイに成功
  6. 「訪問する」を押下すると、ローカルで起動した時と同じWebサイトが、Cloudflare Pagesで公開されていることを確認できます。
    Viteプロジェクト

4. Reactプロジェクトのクリーンアップ

不要なファイルがたくさんあるので、削除・修正していきます。

  1. 以下フォルダ及びファイルを削除します。
    • public/vite.svg
    • src/assets
    • src/assets/react.svg
    • src/App.css
    • src/index.css
  2. publicフォルダに自作のfavicon.icoをアップロードします。
    私は、Favicon ジェネレーターを使用してファビコンを作成しました。
  3. src/App.tsxを以下コードで上書きします。
    App.tsx
    function App() {

  return (
    <>
    </>
  )
}

export default App
    元のコード
    App.tsx
    -   import { useState } from 'react'
-   import reactLogo from './assets/react.svg'
-   import viteLogo from '/vite.svg'
-   import './App.css'

    function App() {
-      const [count, setCount] = useState(0)

      return (
        <>
-         <div>
-           <a href="https://vite.dev" target="_blank">
-             <img src={viteLogo} className="logo" alt="Vite logo" />
-           </a>
-           <a href="https://react.dev" target="_blank">
-             <img src={reactLogo} className="logo react" alt="React logo" />
-           </a>
-         </div>
-         <h1>Vite + React</h1>
-         <div className="card">
-           <button onClick={() => setCount((count) => count + 1)}>
-             count is {count}
-           </button>
-           <p>
-             Edit <code>src/App.tsx</code> and save to test HMR
-           </p>
-         </div>
-         <p className="read-the-docs">
-           Click on the Vite and React logos to learn more
-         </p>
        </>
      )
    }

    export default App
  4. src/main.tsxを以下コードで上書きします。
    main.tsx
    import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
      <App />
  </StrictMode>
)
    元のコード
    main.tsx
        import { StrictMode } from 'react'
    import { createRoot } from 'react-dom/client'
-   import './index.css'
    import App from './App.tsx'

    createRoot(document.getElementById('root')!).render(
      <StrictMode>
        <App />
      </StrictMode>,
    )
  5. index.htmlを以下コードで上書きします。ここではタイトルを「vite project」としました。
    index.html
    <!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite project</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
    元のコード
    index.html
        <!doctype html>
-   <html lang="en">
+   <html lang="ja">
      <head>
        <meta charset="UTF-8" />
-       <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+       <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-       <title>Vite + React + TS</title>
+       <title>vite project</title>
      </head>
      <body>
        <div id="root"></div>
        <script type="module" src="/src/main.tsx"></script>
      </body>
    </html>
  6. クリーンアップ後のフォルダ構成は以下のようになります。
        vite-project
    ├── node_modules
    ├── public
+   │   ├── favicon.ico
-   │   └── vite.svg
    ├── src
-   │   ├── assets
-   │   │   └── react.svg
-   │   ├── App.css
!   │   ├── App.tsx
-   │   ├── index.css
!   │   ├── main.tsx
    │   └── vite-env.d.ts
    ├── .gitignore
    ├── eslint.config.js
!   ├── index.html
    ├── package-lock.json
    ├── package.json
    ├── README.md
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
    └── vite.config.ts

5. Reactプロジェクトの便利設定

いずれも任意の設定項目ですが、開発が楽になるため設定することを推奨します。

  1. ローカルでプロジェクトを起動したときに、他のデバイスからもアクセスできるようにするため、vite.config.tsのdefineConfig内にserver: { host: true },を追記します。

    vite.config.ts
        import { defineConfig } from 'vite'
    import react from '@vitejs/plugin-react-swc'

    // https://vite.dev/config/
    export default defineConfig({
      plugins: [react()],
+     server: { host: true },
    })

  2. GitHubへのプッシュを楽にするため、package.jsonのscriptsに "git": "git add . && git commit && git push"を追記します。

    package.json
        {
      "name": "vite-project",
      "private": true,
      "version": "0.0.0",
      "type": "module",
      "scripts": {
        "dev": "vite",
        "build": "tsc -b && vite build",
        "lint": "eslint .",
        "preview": "vite preview",
+       "git": "git add . && git commit && git push"
      },
      "dependencies": {
        "react": "^18.3.1",
        "react-dom": "^18.3.1"
      },
      "devDependencies": {
        "@eslint/js": "^9.17.0",
        "@types/react": "^18.3.18",
        "@types/react-dom": "^18.3.5",
        "@vitejs/plugin-react-swc": "^3.5.0",
        "eslint": "^9.17.0",
        "eslint-plugin-react-hooks": "^5.0.0",
        "eslint-plugin-react-refresh": "^0.4.16",
        "globals": "^15.14.0",
        "typescript": "~5.6.2",
        "typescript-eslint": "^8.18.2",
        "vite": "^6.0.5"
      }
    }

    以下コマンドを実行するとGitHubにプッシュできるようになります。

    ターミナル
    npm run git

    コミットメッセージを入力するよう求められ、「COMMIT_EDITMSG」ファイルが開かれるので、ファイルの1行目にメッセージを入力して保存し、ファイルを閉じます。

  3. 設定後のフォルダ構成は以下のようになります。

        vite-project
    ├── node_modules
    ├── public
    │   └── favicon.ico
    ├── src
    │   ├── App.tsx
    │   ├── main.tsx
    │   └── vite-env.d.ts
    ├── .gitignore
    ├── eslint.config.js
    ├── index.html
    ├── package-lock.json
!   ├── package.json
    ├── README.md
    ├── tsconfig.app.json
    ├── tsconfig.json
    ├── tsconfig.node.json
!   └── vite.config.ts

6. Cloudflare Pagesの更新

  1. プロジェクトが正常に変更できたか確認するため、ローカルで起動します。
    ターミナル
    npm run dev
  2. ブラウザでhttp://localhost:5173/にアクセスし、空白のWebサイトが表示されたら成功です。（Ctrl + Cで停止できます。）
  3. GitHubにプッシュすると、自動でCloudflare Pagesのビルドとデプロイが実行されます。
    ターミナル
    npm run git
  4. Cloudflare Pagesのデプロイ ステータスが成功になったら、「訪問する」を押下し、空白のWebサイトが表示されることを確認します。

さいごに

React（Vite）でWebサイトを作成し、Cloudflare Pagesで公開することができました。
Reactプロジェクトをさらに編集し、オリジナルのWebサイトを作成してみてください。

次の記事

次回は、Cloudflare Pages Functionsを作成し、バックエンドでデータ処理する方法について説明します。
https://zenn.dev/kinakokyoryu/articles/0331fed1df7504

Discussion