Create React Appで作成したアプリをgithubで公開する【npm gh-pages】

React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。
まずReactチュートリアルをやってみました。
create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しました。
チュートリアルの内容もなんとか終え、この調子で自分の作りたいものは作れそうですが、関門となるのは公開。無料でサクッと公開する方法はないかと調べたところGitHub Pagesが良さそうなので試した履歴です。

1.create-react-appでアプリを作成する

reactチュートリアルの「オプション 2: ローカル開発環境」の手順通り進めました。
⬇以下のコマンドでreact環境を一発で構築。

npx create-react-app my-quiz

作成されたファイルの中のREADME.rbを見ると、必要なコマンドが書いてあります。

⬇ローカルサーバの起動

yarn start

reactチュートリアルにはnpm startと記載があります。npmでも同じですが私は普段yarnを使っていますので、以降yarnで統一します。

2.githubのリポジトリを作成しpushする

⬇githubにアクセスして新規リポジトリを作成します。リポジトリの名称は、ローカルのディレクトリと異なっていても大丈夫です。


⬇作成後、こちらの画面が表示されます。


ローカルの作業ディレクトリ(この例では/my-quiz)に移動して指示通りのコマンドを打ち、pushを完了させます。

3.ビルドする

こちらのコマンドを実行

yarn build

するとbuildというディレクトリが作成され、ビルド後の静的ファイルができました。このbuildディレクトリ配下のみをgithub pagesに公開していきます。

4.デプロイする

npm gh-pagesをインストール

github pagesにデプロイするためのパッケージであるgh-pagesをインストールします。

yarn add gh-pages

package.jsonを編集

"homepage""scripts"配下の"deploy"を追加します。

{
  "name": "my-quiz",
  "homepage": "https://ayukoyamashita.github.io/quiz",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "deploy": "yarn build && gh-pages -d build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

"homepage"は以下の形式で記述します。

"homepage": "https://[githubのアカウント名].github.io/[リポジトリ名]",

"deploy"は以下のように。gh-pagesコマンドの-dオプションで指定しているのはディレクトリ名です。ビルド後のファイルがある場所を指定します。

"deploy": "yarn build && gh-pages -d build",

デプロイ実行

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

yarn deploy

⬇以下のようなログが表示されていれば成功です。

The project was built assuming it is hosted at /quiz/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Published
✨  Done in 19.14s.

5.公開ページを確認

githubのsettingsページから「GitHub Pages」の「Check it out hire!」をクリックするとページが有効化されます。


⬇次のページでURLが表示されます。アクセスすると公開されたことが確認できると思います。


画面をよく見るとブランチが勝手にgh-pagesとなっています。buildディレクトリから自動的に作成されるブランチのようです。

⬇コマンドでリモートブランチを表示するとたしかに作成されていました。

$git branch -a
 main
 remotes/origin/gh-pages
 remotes/origin/main 
タイトルとURLをコピーしました