はじめに

前回の記事[1]でwsl2でreact環境を構築してみましたが、ポートフォリオを作るためには公開しなければいけません。
ポートフォリオの公開のためにサーバー関係をいろいろやっていると時間がとられるのでGitHub Pagesで公開することにしました。また、create-react-appコマンドで生成されたプロジェクトディレクトリの構成がよく分からないのでいらないものは削除して本当にhelloWorldのみを出力するディレクトリ構成にしました。
wslでやってますが、linux、macでも可能だと思います。

環境

windows10Home
wsl2 Ubuntu 20.04LTS
nodebrew
nodejs 14.17.0
yarn 1.22.5

デプロイ

とりあえずデプロイしてからいろいろ考えようと思います。
こちらのサイト[2][3][4]を参考にしました。
もともとGitHub Pagesのリポジトリは作っていたのでそれを使います。
分からない人は先ほどあげたサイトにも載っていますし、調べれば出てくるのでそちらを参照してください。
今回の記事でのGitHub Pagesのリポジトリの名前はreact_portfolioとします。
前回の記事で作成したプロジェクトディレクトリの中身をごっそりreact_portfolioに移動します。
とりあえずpushします。
今までの地獄のような環境構築の経験からyarnとnpmっていう2つのパッケージマネージャー混ぜない方がいいんじゃないかと思い調べたところ、一応混ぜない方が良さそうです[5]。
傾向としてもyarnを使っていこうみたいな流れがある気がするので本記事ではyarnを使っていきます。
なんかよく分からんけど必要らしいものをダウンロードします。

yarn add --dev gh-pages

参考サイトを参考にpackage.jsonにhomepageとdeploy、predeployを追加、ついでに名前も変更しておきました。
当然homepageのgithubのところは自分のに変えてください。
"devDependencies"の部分は上のコマンドしたら勝手に追加されたと思います。
正直このファイル自体よく分かっていないのですが依存関係なども管理しているっぽいです。
あんまり気にしすぎると本末転倒なのでポートフォリオ完成してから理解することにします。
あと参考サイトではnpmでビルドしているのをyarnでしています。
たぶん変えなくても大丈夫ですが個人的にこういうのめちゃくちゃ気になるので変えてます。

{
  "homepage": "https://it-tsumugi.github.io/react_portfolio",
  "name": "react_portfolio",
  "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": {
    "predeploy": "yarn build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "gh-pages": "^3.2.0"
  }
}

デプロイします
もしかしたらリモートリポジトリを追加する際の名前をorigin以外にしているとエラー出るかもしれないです。

yarn deploy

このコマンドだけで勝手にデプロイされます。
なんて便利！無宗教ですがyarn教に入信しそうです。
ただこのままだと反映されません。
githubのリポジトリのsettingのpagesでsourceをgh-pagesにしましょう。
ディレクトリはdocsにしてルートにindex.htmlが無くてもいいように出来るらしいですがrootでいいです。
これで反映されているはずなのでGitHub PagesにあるURLにアクセスしましょう。
GitHub Pagesは反映がかなり遅いのでもともと何か入れていた場合は数分かかるかもしれません。
数分待っても反映されない場合は何か間違っているかもしれません。
僕はhomepageのところの最後に間違えて「/」をいれていたせいで1時間くらいもがいてました。
とりあえずあのマークが表示されたらデプロイには成功しています。

余計なファイルを消す

とりあえずデプロイには成功しました。
しかし、余計なものが多すぎます。
なんでこのマークぐるぐるしてるのか意味が分かりません。
無駄なものがあると思考がぐちゃぐちゃして訳が分からなくなるのでいらないものは消しましょう。
このサイト[6]を参考にしました。
publicとsrcはこのサイト通りにしましたが、yarn.lockとREADME.mdは残しておきました。
yarn.lockは依存関係的なのに影響しそうなのとREADME.mdはあとでどうせ作ろうと思っていたので。
まあそこらへんは気分ですね。
App.jsとindex.jsも参考サイト通り変えましょう。
変更がすべて終わったらpushしてdeployします。
例によって更新に数分かかります。
数分後に確認したらhelloworldが出力されているはずです。
その後他の文字に変えて更新してみて遊んでみてもいいです。
数分かかるけど。

検証

pushしないと変わらないのかなあと思っていたのですが、一回した後はdeployだけでページは更新されるみたいです。
たぶん普通のことなんだと思うんですが個人的にはなんかワクワクしますね！
ローカルでプログラムしてデプロイして動作確認みたいな感じになるんでしょうか。

おわりに

今回はGitHub Pagesでreactのhelloworldをデプロイして、最小構成にしました。
本当はdocker、docker-compose、kubernetes、circleciとかで環境構築、デプロイとかも楽にするんでしょうね。
ちょっと首をつっこんでみたのですが沼りかけたのでおとなしくリリースするまではやめとくことにしました。
reactとデプロイ周りは前提知識、必要なツールが多すぎてリサーチと理解に割と時間かかりました。
デプロイ出来たのはちょっと感動です。
とりあえずこの最小構成からスタートしてどういう風にポートフォリオを作成するか考えていきたいと思います。
それではまた。

参考文献

[1]:【Mac難民】WSL2でのreactの環境構築

[2]:ReactのアプリをGithub pagesにデプロイしようとしたのにできなかった時の話と解決策

[3]:github pagesにreactアプリをデプロイして少しハマった話

[4]:Github PagesでReactアプリケーションをデプロイ

[5]:[npm & Bower] Yarn 入門: npm との違いを探る

[6]:Create React App で生成される React アプリを最小構成にする

GitHub Pages で最小構成のreactのhelloworldをデプロイしてみた

はじめに

環境

デプロイ

余計なファイルを消す

検証

おわりに

参考文献