ReactアプリをGitHubページで公開する

初めに

初めてGitHubページでReactアプリを公開しました。
そこで、React + Vite で作成したアプリをGitHub Pages にデプロイする手順をまとめました。
以下に概要記載しています。

• build → deploy まで実際に動いた手順
• 初心者がハマりやすいポイントも解説

用意する環境

• Node.js
• React
• Vite
• GitHub

今回のゴール

Reactアプリを build し、GitHub Pages のURLで表示できる状態にすることがゴールです。

手順① gh-pages をインストール

GitHub Pages にファイルをアップロードするために gh-pages パッケージを使用します。

npm install gh-pages --save-dev

手順② package.json を設定

deploy 用のコマンドを package.json に追加します。

  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "deploy": "gh-pages -d dist"
  },

手順③ vite.config.ts を修正

GitHub Pages では
https://ユーザー名.github.io/リポジトリ名/
というURLになるため、base の指定が必要なため修正します。

base: "/リポジトリ名/"

手順④ build & deploy

まず production 用のファイルを生成し、その後 GitHub Pages にアップロードします。

npm run build
npm run deploy

手順⑤ 公開URLの確認

GitHubのSettings → Pages にアクセスすると公開URLが表示されます。
開くとアプリが表示されて利用することができます。

まとめ

GitHub Pagesへのデプロイすると簡単にアプリを公開することができて便利です。

同じように困っている方の参考になれば嬉しいです！
今後も役に立つ情報をお届けしていきますのでお楽しみにお待ち下さい。