8tako8tako8’s blog

ソフトウェアエンジニア

【入門】ReactアプリをGitHub Pagesに公開してみる

はじめに

Reactに入門したばかりの初心者向け記事です。ReactアプリをGitHub Pagesに公開する方法を解説します。

前提

  • Reactアプリの開発環境が既にセットアップされていること
  • yarnがインストールされていること
  • GitHubアカウントがあり、公開したいアプリのリポジトリが作成されていること

GitHub Pagesとは

GitHub Pagesとは、GitHubが提供している静的なウェブサイトをホスティングするサービスです。

GitHubのリポジトリにHTML、CSS、JavaScript、画像などの静的ファイルをプッシュすることで、ウェブサイトとして公開することができます。

なお、GitHub Pagesは無料で利用することができますが、公開できるウェブサイトの数やトラフィックに制限があるので注意してください。

公開方法

1. 必要なパッケージのインストール

gh-pagesというパッケージをインストールします。以下のコマンドを実行してインストールします。

yarn add gh-pages -D

2. package.jsonの更新

package.jsonファイルにhomepageフィールドを追加します（username, my-appは適宜変えてください）。 また、scriptsセクションにpredeploy, deployを追加します。

例えば、こんな感じ

{
 "name": "my-app",
 "version": "0.1.0",
 "private": true,
 "homepage": "https://username.github.io/my-app/",
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject",
   "predeploy": "yarn run build",
   "deploy": "gh-pages -d build"
 },
 // 省略
}

3. アプリのデプロイ

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

yarn run deploy

ここまでで公開されているはずです。 https://username.github.io/my-app/を確認しましょう。

4. GitHubリポジトリの設定

3で公開が確認できなかった場合、GitHubリポジトリの設定を確認します。

GitHubのリポジトリに移動し、Settings > Pages > Build and deployment でgh-pagesブランチに変更します。 改めて、https://username.github.io/my-app/を確認しましょう。

まとめ

簡単な手順でReactアプリをGitHub Pagesに公開する方法を解説しました。 制限はありますが無料で公開できるので、ぜひ試してみてください。