はじめに
こんにちは！Akira(彰)です！
今回はReactアプリのGithubPagesへのデプロイ手順を解説していきます。
今回の前提環境としては以下となります。
前提環境
- React: ver18.2.0
- Docker
FROM node:lts WORKDIR /usr/src/app
version: "3.9"
services:
app:
container_name: react-app
build:
context: .
dockerfile: Dockerfile
volumes:
- type: bind
source: ./
target: /usr/src/app
command: sh -c "cd react-app && yarn start"
ports:
- 3000:3000
stdin_open: true
docker-compose run --rm app sh -c 'npx create-react-app react-app'
以上の環境で構築しているものと考え、解説の方を行っていきます！
問題点
以上の環境で構築した場合、ディレクトリ構成は以下のようになっていると思います。
git_dir/ ├ react-app/ │ ├ node_module/ │ ├ public/ │ ├ src/ │ ├ .gitignore │ ├ package-lock.json │ ├ package.json │ └ README.md ├ Dockerfile └ docker-compose.yml
実はこのディレクトリ構成の問題として、ビルドしたファイルが下記のように作成されるためGithubPagesにデプロイした際、ビルドしたファイルを拾ってくれないという状態になります。
git_dir/ ├ ○ docs/ <= 本来ここにあってほしい ├ react-app/ │ ├ x docs/ <= 実際にビルドされるファイル │ ├ node_module/ │ ├ public/ │ ├ src/ │ ├ .gitignore │ ├ package-lock.json │ ├ package.json │ └ README.md ├ Dockerfile └ docker-compose.yml
この問題を解決するには git_dir 直下にビルドされたファイルを置く必要があります。
この問題と解決方針を前提に次に進みます。
ローカル側での設定
それでは実際にファイルに記述を追加してGithubPagesへデプロイできるようにしていきます。
まずは package.json を下記のように編集してください。
{
+ "homepage": "https://<GitHubアカウント名>.github.io/<リポジトリ名>/",
"name": "react-app",
"version": "0.1.0",
"private": true,
// 中略
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
+ "rm": "rm -rf ../docs",
+ "mv": "mv build ../docs",
+ "deploy": "npm run rm && npm run build && npm run mv"
},
// 後略
}
この記述でビルドしたファイルを docs にリネーム後、git_dir 直下に移動させることができます。
この記述が完了後、下記コマンドを実行しアプリをビルドすると方針通り下記のようなディレクトリ構成になると思います。
docker-compose run --rm app sh -c 'cd react-app && npm run deploy'
git_root_dir/ ├ docs/ ├ react-app/ │ ├ node_module/ │ ├ public/ │ ├ src/ │ ├ .gitignore │ ├ package-lock.json │ ├ package.json │ └ README.md ├ Dockerfile └ docker-compose.yml
この状態で変更をコミットし、プッシュすることでローカル側の手順は完了です。
Githubでの設定
次はGithubPagesの設定を行っていきます。
プッシュしたGithubリポジトリに移動後、Settings > Pages に移動し下記画像を参考にし設定します。
上記画像の Branch からビルドの変更が含まれるブランチを選択し、フォルダが /root となっているところを /docs に変更し Save をクリックします。
すると該当ブランチでデプロイが走り、完了後Pagesにデプロイ後のページにアクセスできるURLが表示されるので確認してください。(1~5分ぐらい待ちます)
以上の手順でデプロイ先URLで正しく動作確認できれば完了となります！お疲れ様でした！
おわりに
Docker環境でreactをセットアップした際のディレクトリ構成は少し面倒なので今回のような手順を踏む必要があります。
gh-pagesを使うなどの手段もあるとは思いますがDockerで扱う場合、コンテナ内でのGit連携が必要だったので今回のようにすることにしました。
長くなりましたが、ここまで読んでいただきありがとうございました！
