はじめに
おひさしぶりです！takimonです。
今回は ReactアプリをViteでGitHub Pagesにデプロイする方法 を紹介します。
1. ReactアプリケーションをViteで作成する
まずはViteでReactアプリケーションを作成します。
以下のコマンドをターミナルで入力してください。
npm create vite@latest アプリ名
今回はフレームワークは「React」を選択します。
構成は「JavaScript + React Compiler」を選択します。
ロールダウンは今回は「No」を選択します。
今回はインストールと同時には起動しないので、「No」を選択します。
作成したフォルダーに移動します。
cd アプリ名
必要なパッケージなどをインストールします。
npm install
起動したい場合は以下を実行してください。
npm run dev
2.Githubでリポジトリを作成する
右上の「+」ボタンをクリックし、「New repository」を選択します。
「Repository name」に好きなレポジトリ名を入力します。ここでは例として「test」とします。
「Public」を選択し、その他の設定はデフォルトのままにします。「Create repository」ボタンをクリックして、リポジトリを作成します。
以下で作成したReactアプリケーションとGithubリポジトリの繋ぎこみをします
git init
git add *
git commit -m "first commit"
git branch -M main
git remote add origin [リモートリポジトリのurl]
git push -u origin main
3.gh-pagesをインストール
gh-pagesを以下のコマンドでインストールします。
npm install gh-pages --save-dev
次に、package.json の "scripts" に以下を追加してください。
{
"scripts": {
"predeploy": "npm run build", // 追加
"deploy": "gh-pages -d dist" // 追加
}
}
続いて、vite.config.js に以下を追加します。
export default defineConfig({
plugins: [react()],
base: '/リポジトリ名/', //追加
});
4.Github Pagesでデプロイしたサイトを確認
以下のコマンドを実行することでデプロイできます。
npm run deploy
実行すると「Published」が出力されればデプロイ完了です
GitHubのリポジトリページから
「Settings → Pages」を開き、
「Visit site」でデプロイされたサイトを確認できます。
5.Reactアプリケーションを更新する
GitHub Pagesの内容を更新したい場合は、
コード修正後に以下のコマンドを実行するだけで再デプロイできます。
npm run deploy
おわりに
今回は、gh-pagesライブラリを使って
ReactアプリをViteでGitHub Pagesに簡単にデプロイする方法 を紹介しました。
他にも GitHub Actions を使って自動デプロイする方法もありますので、
気になる方はぜひ調べてみてください。
私も今後勉強していきたいと思います！