GitとGitHubを基本からまとめてみた【6】【React 最初からデプロイまで / GitHub Pages】

デプロイとは

インターネット上に公開するということ。

GitHub Pagesとは

『GitHub Pages』とは、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスのこと。

reactのプロジェクトを作成する

terminal
$ create-react-app <プロジェクト名> 

GitHubPagesを使用してデプロイをする

(1) Githubでリポジトリを新規作成する。

(2) GitHubにログインし、Repositoriesタブを選択。『New』をクリックする。

(3)『Repository name』を記入し、『Create repository』をクリックする。

(4)terminalで『git init』を行う

$ git init

(5)terminalで『git remote add origin』を行う

$ git remote add origin『HTTPS』or『SSH』

(6)terminalで コードをaddする。

$ git add .

(7)terminalで コミットする。

$ git commit -m "コミットメッセージ"

(8)　master(もしくはmain)ブランチにプッシュする。
　（githubの仕様に変更があり、デフォルトで作成されるブランチの名前が「master」から「main」に
　　変更。githubのデフォルトで作成されているブランチ名を確認すること。）

// masterブランチにpushする場合
$ git push origin master

// mainブランチにpushする場合
$ git push origin main

(9) Github『Setting』を選択し、GitHub Pagesの『Check it out here!』を押す。

(10)SourceをBranch masterを選択し、『Save』を押すとマスターアドレスを表示される。

(11)terminalで、yarn add gh pagesをインストールする。

$ yarn add gh-pages

(12) インストールが終わったら、package.jsonに"gh-pages":があるか確認し、編集する。

package.json

//...
"homepage": "http://username.github.io/react-github-pages"
※ "dependencies": {　}の中には記載しない事!!

"scripts": {
  //...
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

(13)デプロイする

$ npm run deploy

参考サイト

[React 最初からデプロイまで① GitHub Pages編]
(https://www.youtube.com/watch?v=Zb-JaSyVnyk&t=600s)
[GitHub PagesにReactアプリをデプロイする方法]
(https://qiita.com/yuitnnn/items/11375ea29ec023d19fdf)