フロントエンド（React.js）をCentOSにデプロイする方法

特定のディレクトリ（build）だけを同期する。

.env.production

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は、デバッグ用のソースマップを本番環境用のビルドでは出力しないための設定。

package.json抜粋

  "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する。

git --version

実行結果

git version 2.32.0

gitのバージョンを確認する。

sparse-checkoutが使えるのはgitバージョン2.25以降。

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の同期対象に設定。

git sparse-checkout list

実行結果

build

gitの同期対象になっているディレクトリ一覧を表示。

cat .git/info/sparse-checkout

実行結果

/*
!/*/
/build/

git pull

2回目以降の同期は、git pullコマンドを実行。

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest
• Tumblr
• Reddit
• Email