Reactの初期ページをGitHub Pagesで公開(デプロイ)する方法

GitHub, React

本記事はcreate-react-appを使って作成したReactの初期段階のページをGitHub Pagesを使ってインターネットに公開(デプロイ)する方法を紹介します。

GitHub Pagesは静的ページをGitHubのリポジトリから直接ホスティングしてくれるGitHubのサービスです。無料でHTTPSにて公開できます。

GitHub Pagesのデフォルト公開元はgh-pagesブランチにあるリポジトリですが、masterブランチにあるdocsフォルダを公開元にすることもできます。masterブランチでソースコードと共にビルドファイル(docsフォルダに格納)を管理する方が個人的には扱いやすいと考えるため、本記事ではmasterブランチのdocsフォルダから公開する方法を紹介します。

なお本記事は以下を前提に書いています。

ローカルマシンはmacOS
GitHubアカウント取得済み
Node.js(npm 5.2.0以上)インストール済み

1 GitHubにリポジトリを作成する
2 ローカルマシンにReactプロジェクトを作成する
3 GitHubにデプロイする
4 GitHub Pagesを有効にする

GitHubにリポジトリを作成する

GitHubにログインした状態で右上にある「+」ボタンをクリックして「New repository」をクリックします。

「Repository name」にリポジトリ名を入力して「Create repository」ボタンをクリックします。これでリポジトリ作成完了です。
ちなみにリポジトリ名は公開するURLに使われるので単語の区切りはハイフン「-」がよいです。

ローカルマシンにReactプロジェクトを作成する

create-react-appコマンドを使ってReactプロジェクトを作成します。
実行した場所にプロジェクトディレクトリが作成されるのでコマンド実行前に適当な場所に移動しておいてください。

$ npx create-react-app <Reactプロジェクト名>

作成されたReactプロジェクトディレクトリの中にpackage.jsonが含まれているので、これを以下赤字のように追記して「npm run deploy」コマンドでGitHubにデプロイできるようにします。

“homepage”の所は各自のGitHubのアカウント名およびリポジトリ名にあわせて「https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/」としてください。カスタムドメインを設定している方は、カスタムドメインを入力してください。

scriptsの所に追加したコマンドはdeployを起点に以下の処理をします。

docsディレクトリの削除(docsディレクトリが存在していると手順3で想定と違う動きになるため)
ビルド
ビルドするとbuildという名前でビルドファイルがまとめられるのでこれをdocsに名前を変更
git処理(GitHubにpushまで)

{
  (省略)
  "homepage": "https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/",
  (省略)
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "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",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  (省略)
}

GitHubにデプロイする

次のコマンドをReactのプロジェクトディレクトリで実行してリモートリポジトリを登録します。例によってoriginという名前でリモートを登録しています。
ちなみにReactプロジェクトのディクレクリの中に最初から「.git」ディレクトリが存在するので「git init」コマンドを実行する必要はありません。

$ git remote add origin https://github.com/<GitHubアカウント名>/<GitHubリポジトリ名>.git

Reactのプロジェクトディレクトリで以下のコマンドを実行してGitHubにReactアプリをデプロイします。

$ npm run deploy

GitHub Pagesを有効にする

GitHubのリポジトリページにあるSettingsページを開きます。

下のほうにある「GitHub Pages」にあるSourceという項目で「master branch/docs folder」を選択してください。公開元を選択しています。

以上で「https://<GitHubアカウント名>.github.io/<GitHubリポジトリ名>/」にてReactアプリにアクセス可能となります(カスタムドメインの場合はカスタムドメインにてアクセス)。
まれに404エラーになりますが何かcommitしなおすと治る場合があります。

sponsor