React.jsを学習してそのアウトプットとして簡単なWEBアプリを作ってサクッと公開したい。
まずReactチュートリアルをやってみました。
create-react-appというコマンドを利用してとても簡単にローカル環境ができて感動しました。
チュートリアルの内容もなんとか終え、この調子で自分の作りたいものは作れそうですが、関門となるのは公開。無料でサクッと公開する方法はないかと調べたところGitHub Pagesが良さそうなので試した履歴です。
１．create-react-appでアプリを作成する
reactチュートリアルの「オプション 2: ローカル開発環境」の手順通り進めました。
⬇以下のコマンドでreact環境を一発で構築。
npx create-react-app my-quiz
作成されたファイルの中のREADME.rbを見ると、必要なコマンドが書いてあります。
⬇ローカルサーバの起動
yarn start
reactチュートリアルにはnpm startと記載があります。npmでも同じですが私は普段yarnを使っていますので、以降yarnで統一します。
２．githubのリポジトリを作成しpushする
⬇githubにアクセスして新規リポジトリを作成します。リポジトリの名称は、ローカルのディレクトリと異なっていても大丈夫です。
⬇作成後、こちらの画面が表示されます。
ローカルの作業ディレクトリ（この例では/my-quiz）に移動して指示通りのコマンドを打ち、pushを完了させます。
３．ビルドする
こちらのコマンドを実行
yarn build
するとbuildというディレクトリが作成され、ビルド後の静的ファイルができました。このbuildディレクトリ配下のみをgithub pagesに公開していきます。
４．デプロイする
npm gh-pagesをインストール
github pagesにデプロイするためのパッケージであるgh-pagesをインストールします。
yarn add gh-pages
package.jsonを編集
⬇"homepage"と"scripts"配下の"deploy"を追加します。
{
"name": "my-quiz",
"homepage": "https://[githubのアカウント名].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.
５．公開ページを確認
githubのsettingsページから「GitHub Pages」の「Check it out hire!」をクリックするとページが有効化されます。
⬇次のページでURLが表示されます。アクセスすると公開されたことが確認できると思います。
画面をよく見るとブランチが勝手にgh-pagesとなっています。buildディレクトリから自動的に作成されるブランチのようです。
⬇コマンドでリモートブランチを表示するとたしかに作成されていました。
$git branch -a main remotes/origin/gh-pages remotes/origin/main
