ReactアプリをGitHubPagesで公開してみた

はじめに

React の勉強がてらにシンプルなメモアプリを作成した。
作成したアプリを無料で公開したいと思い、GitHubPages を利用して公開してみた。
本記事では、React のアプリを GitHubPages で公開するまでの手順を紹介する。

GitHubPages とは

GitHubPages とは、GitHub が提供している静的サイトホスティングサービスである。
GitHubPages を利用することで、GitHub 上にあるリポジトリを公開することができる。

作成したアプリ

Simple Memo
リポジトリ

React のアプリを GitHubPages で公開するまでの手順

1. 公開したいアプリのpackage.jsonを編集する

公開したいアプリのpackage.jsonを下記のように編集する。

package.json

{
  ...
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
  ...
  "scripts": {
    ...
    "rm": "rm -rf docs",
    "mv": "mv build docs",
    "git": "git add . && git commit && git push origin master",
    "deploy": "npm run rm && npm run build && npm run mv && npm run git"
  },
}

※...は省略しています。

package.json の homepage に公開先の URL を設定する。

また、package.json の scripts に追加しているスクリプトは下記の通り

rm: docs ディレクトリを削除するスクリプト
mv: build ディレクトリを docs ディレクトリに移動するスクリプト
git: docs ディレクトリを GitHub に push するスクリプト
deploy: rm、build、mv、git を順番に実行するスクリプト

使用するスクリプトは、deployのみ。
deploy を実行することで、下記が実行される。

• docs ディレクトリを削除 (古いファイルを削除)
• アプリをビルド
• build ディレクトリを docs ディレクトリに移動
• docs ディレクトリを GitHub に push

2. 公開用のブランチを作成する

公開用のブランチを作成する。
公開用のブランチ名は、gh-pagesとする。

3. 公開用のブランチでデプロイする

公開用のブランチで、deploy を実行する。

npm run deploy

4. GitHubPages の設定を行う

GitHubPages を利用するためには、GitHubPages の設定を行う必要がある。
GitHubPages の設定は、GitHub 上のリポジトリの Settings から行うことができる。

1. Source を「Deploy from a branch」に変更
2. Branch を「gh-pages」に変更
3. 公開フォルダを「/docs」に変更
4. Save ボタンをクリック

5. 公開されているか確認する

公開されているか確認する。
公開されていない場合は、公開まで少し時間がかかる場合があるので、しばらく待ってから確認する。

まとめ

React のアプリを GitHubPages で公開するまでの手順を紹介した。
GitHubPages を利用することで、無料でアプリを公開することができる。