github-pageにReact appをデプロイしてみた

5415 ワード
GitHub github-pages React JavaScript JavaScript テキストリンク

はじめに

Reactを勉強する上でGithub pageでReactアプリを公開できるのか気になったのがきっかけです。

GitHub Pagesについて
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
[GitHub 公式ヘルプ]https://help.github.com/ja/github/working-with-github-pages/about-github-pages

参考にしたサイト

環境

以下は私が行った環境です.

name version
Node v10.14.2
npm 6.4.1

2019/12/19現在ではReact公式サイトに

あなたのマシンに Node >= 8.10 及び npm >= 5.6 の環境が必要です　　　　

と記載されていました.

手順

1.Reactアプリの作成

以下のコマンドを実行しました.

今回はreact-pagesという名前のReactアプリを作成しています.

$ npx create-react-app react-pages

2.gh-pagesのインストール

以下のコマンドでgh-pagesをインストールします。
以下のコマンドではcd react-pagesで作成したreact-pagesフォルダまで移動しgh-pagesをインストールしています。

$ cd react-pages
$ npm install gh-pages --save-dev
npm

Node.jsで利用するパッケージ管理ツール

gh-pages

GitHubのgh-pagesブランチ（または他の任意の場所）にファイルを公開するためのパッケージ

3.Reactアプリのpackage.jsonを修正

作成したReactアプリのpackage.jsonに以下の設定を追記してください.
ここで"homepage"に書いてあるURLの[GitHub username],[created repository name]はそれぞれ自分が作成した名前をつけてください

package.json

//...
"homepage": "https://[GitHub username].github.io/[created repository name]/",
"scripts": {
    "deploy": "npm run build && gh-pages -d build"
  },
//...

4.GitHubでRepositoryを作成

このときのリポジトリの名前は作成したReactアプリと異なっていても大丈夫です

また、GitHubがPROアカウントではない場合はPublicでRepositoryを作成してください。

6.作成したアプリをデプロイ

以下のコードでデプロイします。また,実行する場所は作成したReactアプリ内で行ってください.以下の前半部分はリポジトリを作成したときに出てくる任意のフォルダーとリポジトリを接続しREADME.mdをリポジトリへ追加しているものです.

$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin 
$ [email protected]:[GitHub username]/[Repository name].git
$ git push -u origin master
$ npm run deploy

5.GitHubPageの設定

作成したGigHubのリポジトリよりsettingへ移動,

その後下へスクロールしGitHub Pages のSourceをgh-pages branchへ変更する.

結果

GitHubPages設定後表示もう一度GitHubPagesの設定場所へ移動し表示されているURLをクリック.

以下のようなページが開かれていれば成功です.

最後に

デプロイの意味とか全然しらない初学者(私)でもちょっと調べたらできるもんだなぁと感激しました。
積極的にいろんなことにトライしてみようと思いました。
次はReactをつかって自分のポートフォリを作りたいと思います。