【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": "./"
{
"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"
]
}
}
こちらの記事を参考にさせて頂き、設定した。
これで、
<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);
終わりに。
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を学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。
Author And Source
この問題について(【React】【TypeScript】GitHub Pagesデプロイの為、buildからdocsディレクトリへファイル移動自動化), 我々は、より多くの情報をここで見つけました https://qiita.com/waniwaninowani/items/3eb038504dab09f9b394著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .