特定のディレクトリ（build）だけを同期する。
PORT=10002 REACT_APP_BACKEND_URL=http://example.com/api GENERATE_SOURCEMAP=false
バックエンドのPORTを10001、フロントエンドのPORTを10002とする。
フロントエンド側の.env.productionというファイルに
PORT=10002を設定。
また、
REACT_APP_BACKEND_URL=http://example.com/api
のように環境変数を設定しておき、
nginxの.confで
http://example.com/api
へのアクセスを
http://localhost:10001
にプロキシーする。
（http://example.comはフロントエンド、
http://example.com/apiはバックエンド）
GENERATE_SOURCEMAP=falseは、デバッグ用のソースマップを本番環境用のビルドでは出力しないための設定。
"scripts": { "build": "dotenv -e .env.production react-scripts build", },
package.jsonで、scriptsのbuildに
dotenv -e .env.productionを追加することで
npm run buildコマンドを実行したときに.env.productionの中身が環境変数として読み込まれる。
npm run build
npm run buildを実行するとbuildというディレクトリが生成される。
このbuildディレクトリを本番環境にデプロイし、
build/index.htmlへブラウザからアクセスすることで
サイトとして機能する。
git add . git commit -m 'xxx' git push
コミットしてGitHubへpushする。
ここでは、buildディレクトリだけでなく、
srcやpublicなどのディレクトリもGitHubへpushする。
（開発環境のハードウェアが故障したときの保険としてソースコードを管理するため）
本番環境ではsparse-checkoutでbuildディレクトリだけpullする。
mkdir -p ~/Projects/xxx/frontend
ブラウザでGitHubへログイン。
プロジェクトのリポジトリを選択し、CodeボタンからリポジトリのURLを取得する。
cd ~/Projects/xxx/frontend git clone --filter=blob:none --sparse https://github.com/xxx/yyy.git .
–filter=blob:none –sparseオプションを付けてgit cloneを実行。
package.jsonなどの管理ファイルのみがコピーされ、
ソースコードなどはコピーされない。
git sparse-checkout init --cone
sparse-checkout機能を有効化する。
sparse-checkoutというのは、特定のディレクトリだけをgitで同期する機能。
cat .git/info/sparse-checkout
sparse-checkoutというファイルの中身を表示。
/* !/*/
デフォルトでは、sparse-checkoutの中身は上記のようになっている。
/*の効果により、プロジェクトディレクトリ直下のすべてのファイルは同期される。
!/*/の効果により、すべてのディレクトリは同期しない。
git sparse-checkout set build
buildディレクトリをgitの同期対象に設定。
cat .git/info/sparse-checkout
/* !/*/ /build/
git pull
2回目以降の同期は、git pullコマンドを実行。