【React】【TypeScript】GitHub Pagesデプロイの為、buildからdocsディレクトリへファイル移動自動化

はじめに

create-react-app,yarn run buildでbuildファイルを作成し、それをGitHub Pagesにデプロイする為、docsディレクトリに移動させ反映させるための設定。

create-react-appの依存関係に含まれるreact-scriptsというモジュール（builder）を使う場合、buildの出力先のディレクトリを指定できない為、追加設定を行った。

package.json

{
  "name": "app_name",
  "version": "0.1.0",
  "private": true,
  "homepage": "./",　※①
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1",
    "typescript": "~3.7.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "postbuild": "node copyFile.js", ※②
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

① "homepage": "./"

• [フロントエンド] create-react-appのビルド結果で、js/cssを相対パスで読み込みたい

こちらの記事を参考にさせて頂き、設定した。

これで、

<script src="./static/js/hogehoge.chunk.js"></script>
<script src="./static/js/main.fugafuga.chunk.js"></script>

といったように相対パスでbuildされたjsファイルが読み込まれる様になり、buildディレクトリ内をdocsディレクトリに移動させても問題なく読み込まれるようになる。

② "postbuild":"node copyFile.js"

こちらを設定することで、yarn run buildのbuildの後に指定したjsファイルが実行されるようになり、そのファイルにbuildディレクトリ内をdocsディレクトリに自動的に移動させる為のコードを追加する。

copyFile.js（例）

var path = require('path');
var fse = require('fs-extra');

const copyPath = path.join(__dirname, "./build/");
const pastePath = path.join(__dirname, "./docs/");
//指定したpathへディレクトリ内のファイル・ディレクトリをまとめてコピー
fse.copySync(copyPath , pastePath);

// buildディレクトリごと、内容を削除
const rmdir = './build';
fse.removeSync(rmdir);

終わりに。

最後まで読んで頂きありがとうございます
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。