More than 1 year has passed since last update.

3分でお手軽にReactアプリをGithub Pagesにデプロイする方法🍞

Posted at 2023-05-15

Reactアプリを作成できたが、どうやってデプロイ（公開）すればいいのだろう。。。？

今回は、GitHubが提供するGitHub Pagesというサービスで
Reactで作成したアプリをGitHub Pagesにデプロイする手順をご紹介します。

必要なもの（前提条件）

まず最初に、Reactアプリを保存するためのGitHubリモートリポジトリを作成します。
このリポジトリは公開（Public）リポジトリにして下さい。

GitHub Pagesと連携するパッケージgh-pagesをインストールする必要があります。
以下のコマンドを実行してインストールしましょう。

npm install gh-pages --save-dev

次に、package.jsonファイルにhomepageフィールドを追加します。これが公開URLとなります。
ここで、
[your-github-username]はあなたのGitHubのユーザー名に、
[github-repo-name]はGitHubリポジトリの名前に、置き換えてください。

package.json

"homepage": "http://[your-github-username].github.io/[github-repo-name]"

package.json

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
    // 既存コード
}

npm run deployコマンドが実行すると、まずビルドが行われ、
その後ビルドされたファイルがgh-pagesブランチにプッシュされます。

以下のコマンドを実行してアプリケーションをデプロイします。

npm run deploy

最後に、GitHubリポジトリの設定を行います。GitHubリポジトリに移動し、設定(Settings)タブを開きます。
"GitHub Pages"セクションを下にスクロールし、Sourceブランチをgh-pagesに設定します。その後、保存します。

以上の手順でReactアプリをGitHub Pagesにデプロイできます。
これで設定したURLから、Reactアプリを閲覧することが可能です。

GitHub Pagesは静的サイトのホスティングに特化しています。そのため、サーバーサイドレンダリングやAPIとの連携など、サーバー側で動的な処理が必要なReactアプリについては、NetlifyやVercelなど他のホスティングプラットフォームを検討することをおすすめします。

この記事では、Reactで作成したアプリをGitHub Pagesにデプロイする手順を説明しました。手順自体は比較的シンプルで、あなたのReactアプリを公開するのに最適な方法の一つです。ぜひこの方法を試して、自分の作成したReactアプリを世界に公開してみてください。

公式ドキュメントをみれば、さらに理解が深まります。
https://create-react-app.dev/docs/deployment/