ReactアプリをGitHub Pagesで公開【無料でWebページを公開】

Reactアプリを作成して”GitHub Pages”に公開するまでの手順をログでご紹介します。

GitHub Pagesは、サーバーを自前で準備しなくてもWebページを公開できる機能で、カスタムドメイン用のHTTPSも対応となり、ちょっとした静的ページの公開に便利です。

1. リモートリポジトリ作成【GitHub】

Create a new repositoryで新規にリモートリポジトリを作成します。
名前はなんでもいいのですが「react-sample」としておきました。

詳しいGitHubでのリモートリポジトリの作成方法はこちらをご参考ください。

【Git/GitHubとは？】ひとりでこっそり使い方を練習する方法

2. Reactアプリの作成【create-react-app】

ターミナルからcreate-react-appコマンドで、「react-sample」というプロジェクトを作ります。

$ npx create-react-app react-sample

作成したプロジェクトディレクトリ「react-sample」の中に移動します。

$ cd react-sample

こんなディレクトリ構成（簡略化）になっているので

$ tree
:
├── README.md
├── node_modules
│   ├── ...
├── package-lock.json
├── package.json
├── public
│   ├── index.html
└── src
    ├── index.css
    └── index.js
:

今回は見た目でわかりやすいようにsrc/index.jsとsrc/index.cssを下記のように編集します。これは必須の作業ではありません。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<p>Reactの、GitHub Page公開テストです。</p>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

src/index.css

p {
  margin: 40px;
  color: ##3374b5;
}

npm startコマンドで、ローカル環境で表示を確認します。

$ npm start

ブラウザで文言とCSSの装飾が反映されているのを確認します。

確認できたらControl + c で終了しておきます。

React.jsの導入についてはこちらの記事もご参考ください。

エンジニアじゃない人でもできるReact入門【導入編】

3. GitHub Pagesに公開【GitHub】

GitHub Pageseに公開する方法が2通りあります。

1. gh-pagesパッケージ利用
2. ビルド先のディレクトリ名を/docsに変更

今回は、かんたんな方「1.gh-pagesパッケージを利用」で公開します。

【用語】gh-pagesとは

GitHubのnpmパッケージ。特定のディレクトリを gh-pagesブランチにコミットとプッシュをする作業をCLIコマンドで実行。

gh-pagesパッケージの導入

gh-pgaseをインストールします。

$ npm install gh-pages --save-dev

package.jsonを編集し、scriptsとhomepageを追加します。

{
  ...,
  "scripts": {
    ...,
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  },
  ...,
  "homepage": "https://<ユーザー名>.github.io/<リポジトリ名>/"
}

homepageに入れるのは「1. リモートリポジトリ作成【GitHub】」で作成したリポジトリのURLです。

デプロイ（公開）

リモートリポジトリを追加します。

$ git remote add origin https://github.com/<ユーザー名>/<リポジトリ名>.git

npm run deployコマンドで公開します。

$ npm run deploy

こんなビルドとデプロイ結果が出てきます。

 :
To publish it at https://xxxxxx.github.io/xxxxx/ , run:
 :

package.jsonで設定したhomepageのURLでブラウザで確認してみます。

ローカルで確認したものと同じ表示なら成功です！

gh-pagesを導入すると、こんな感じでデプロイすると自動でGitHub Pagesに公開することができました！

まとめ

Reactアプリを作成して、GitHub Pagesに公開するまでの手順をログでご紹介しました。

1. リモートリポジトリ作成【GitHub】
2. Reactアプリの作成【create-react-app】
3. GitHub Pagesに公開【GitHub】
4. まとめ

今回は、gh-pagesパッケージを利用したので、試すのも運用も楽でした。

関連情報