Reactで作ったWebアプリケーションをGitHub Pagesで公開する
リポジトリの作成からGitHub Pagesで公開するまで。
リポジトリ作成
※ GitHubのアカウントがない人は ここ から登録してください
https://github.com/[ユーザー名]?tab=repositories に遷移し、↓の右「New」のボタンを押下して好きなリポジトリ名で作成する(以降は repository-name)
※ GitHub Pagesの仕様上Publicで作ってあげると良い
※ READMEはご自由に
※ .gitignoreは追って作成されるのでこの場では不要
PCにcloneする
PCのGit設定
git --version
をしてGitがPCに入っているか確認、ない場合は ここ を参考にインストール
git config --list
をして設定が登録されているか確認、ない場合は以下のように設定
// 登録
git config --global user.name [GitHubのユーザー名]
git config --global user.email [GitHubのメールアドレス]
// 確認
git config --list
// ↑をして user.nameにGitHubのユーザー名が、user.emailにGitHubのメールアドレスがあればOK
clone
以下を実施
git clone https://github.com/[GitHubのユーザー名]/repository-name.git
※ リポジトリ内に何もないと↓みたいに書いてあるのでURL右のコピーボタンを押してgit cloneの続きに書けばOK
Reactのアプリケーションを作成
必要なコマンドラインツールのインストール
今回は npx や npm が出てくるのでそれが動くことを確認
npx --version // npxの確認
npm --version // npmの確認
なさそうであれば
node --version
を確認。
nodeもなさそうであれば ここ からインストールする。
※ すでにPCにhomebrewが入っている場合は ここ を参考に brew install node を実施
node --version
でnodeが入っていそうなのにnpxがない場合は npm install -g npx を実施、npm周りでエラーが出ているのであればnodeを再インストールしてみる
Reactのアプリケーションを作成
ターミナルでcloneしたリポジトリへ移動
cd ./repository-name // ←はcloneした場所によって変わるので注意
Reactアプリケーションを作成、アプリケーション名はご自由に。(以降は my-app)
npx create-react-app my-app
完了すると
We suggest that you begin by typing:
cd my-app
npm start
Happy hacking!
と言っているので指示通り以下をやってみる。
cd my-app
npm start
Local: http://localhost:3000
On Your Network: http://192.168.40.107:3000
のように表示されるので↓みたいな表示ができればOK
GitHubへのpush
GitHub Pagesで表示する用に
npm run build
を実施。
my-appの中にあるbuildディレクトリにHTMLやらCSSやらJSやらが追加されている。
GitHub Pagesで表示するときに /docs 配下のものを表示したいので
cp ./build ../docs
にして、my-appと同階層にbuildディレクトリと同じ内容のdocsディレクトリを作成する。
ディレクトリとしてはこんな感じ
repository-name
└ my-app
└ build
└ // その他色々
└ docs // 中身はbuildと同じ
で、gitコマンドでpush
cd ../ // ← my-appにいる前提、repository-nameに移動できればOK
git add .
git commit -m "GitHub Pagesに反映するものたちを追加"
git push origin master // 別ブランチでもOK
GitHub Pagesでの公開設定
https://github.com/[ユーザー名]/repository-name へ遷移して、それっぽいものが反映されていることを確認する。
https://github.com/[ユーザー名]/repository-name/settings/pages に遷移して
「Build and deployment」区画の「Branch」を確認、
Noneになっているところを選択して「master」に変更、横に出てきたフォルダ選択部分を「/docs」に変更して「save」ボタンを押下。
反映までにちょっと時間がかかるので数分待つ。
GitHub Pagesでの表示確認
待って https://github.com/[ユーザー名]/repository-name/settings/pages を更新すると Your site is live at (URL) が表示される部分があるので右の「Visit site」からURLへ遷移してみる。
http://localhost:3000 で表示されたものと同じものが表示されていればOK！
Discussion