Hirologue

年齢を理由にエンジニアになることを諦めないミドルの成長記録

EP 47: Reactで作ったアプリをサクッとデプロイ

React Git & GitHub

はじめに

GitHub Pagesを使ってサイトを無料公開する方法について書いた記事から、気づけばもう1年以上経ちました。
当時はHTML/CSSの学習をしていましたが、今はReactに挑戦しています。

さて、本記事ではReactで作成したアプリをGitHub Pagesで無料公開するための手順を紹介します。

Djangoを学習していた際には、Herokuへのデプロイにはかなり苦労しました。
そんな過去もあって、「デプロイ」というワードを聞くとちょっと身構えてしまいます。
しかし、ここで紹介する方法は驚くほど簡単です！

その方法とは、公開用ブランチを作るためのツール「gh-pages」を使った方法です。
ぜひ試してみてください。

それでは、行きましょう！



前提条件

では、早速デプロイ手順に進みたいところですが、、そのためにはいくつかの前提条件をクリアする必要があります。

その前提条件は、次のものです。

  • GitHubアカウントを持っている。
  • GitHubにリポジトリ（public）が作成してある。
  • 使用しているPCで Node.js が使える。
  • Vite を使って作成したReact（TypeScript）アプリがある。

どれか一つでも欠けていると先に進めないので、あらかじめ準備しておきます。

デプロイ手順

1. gh-pagesのインストール

  1. ターミナルを開いて、プロジェクトのあるディレクトリに移動します。
  2. 以下のコマンドを入力して、gh-pagesをインストールします。
$ npm install gh-pages --save-dev

インストールが終了すると、このように表示されます。

2. package.jsonに追記

  1. エディタを開き、プロジェクト直下にある package.json を開きます。
  2. `"scripts" 内に以下の2行を追記します。
{
  ...
  "scripts": {
    ...

    "predeploy": "npm run build",
    "deploy": "gh-pages -d dist"
  },
    ...
}

記述位置について特に指定はなかったので、下図のようにscriptsの末尾に追記しました。

3. vite.config.tsに追記

  1. プロジェクト直下にある vite.config.ts を開きます。
  2. defineConfig内に base: "/<リポジトリ名>/" と追記します。
// 例）リポジトリ名が react_todo_list の場合
export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: "/react_todo_list/",  // 追記！
});

4. デプロイコマンドの実行

  1. ターミナルを開いて、プロジェクトのあるディレクトリにいることを確認します。
  2. 以下のコマンドを入力して、デプロイコマンドを実行します。
$ npm run deploy

デプロイが成功すると、下図のように Published と表示されます。

GitHubで公開設定

$ npm run deploy を実行すると、gh-pages という名前のブランチにプッシュされます。

ということは、EP 10: 作ったサイトを無料で公開してみよう - Hirologue の内容とほぼ同じ手順で公開できます。

ほぼ同じ手順と言っているのは、Branch で gh-pages を選択する点だけ違うためです。 この点だけ注意してください。

では、しっかり公開できているか確認してみましょう。

うん。良さそうだ！

いかがだったでしょうか。
gh-pagesを使えば、Reactアプリも驚くほど簡単に公開できます。
難しそうに感じていた「デプロイ」も、これなら怖くありませんね。

よかったら、この方法を参考に学習した証を公開してみませんか？

では！また✋