【react】npm run buildでbuildフォルダの構造を変更する方法【reate-react-app】

npm run buildで生成物の構成を変える

準備

必要環境作成

コンソールにて
npx create-react-app my-app
cd my-app
—-ここまででテスト用のreactSPAの作成—-

コンソールにて
npm install react-router-dom
npm install env-cmd

—-ここまでで画面遷移用のルーターと環境変数用のライブラリをインストール—–

遷移用のページ作成(アクセス先urlが変わっても対応出来ることの確認用)

Page1.jsとPage2.jsを追加 内容はPage1とPage2がわかれば何でも良いです。

import React from 'react';

function Page1() {
  return (
    <div>
      PAGE1
    </div>
  );
}

export default Page1;
import React from 'react';
import ReactDom from 'react-dom'
import {
  BrowserRouter,
  Route,
  Switch
} from 'react-router-dom'
import Page1 from './Page1'
import Page2 from './Page2'
import './App.css';

function App() {
  return (
    <div>
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/'} exact component={Page1}/> 
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/page1'} exact component={Page1}/> 
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/page2'} exact component={Page2}/> 
    </div>
  );
}

export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import {
  BrowserRouter,
  Route,
  Switch
} from 'react-router-dom'
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

ここまででページのルーティングが完了しました。
npm run startでlocalhost:xxxx/page1と localhost:xxxx/page2にアクセス出来たらOKです
(不要なimportとかあるけど気にしないで・・・)

build 設定

コンソールで
npm run eject
を行います。(コミットしてないと実行出来ないかも)
これにより、詳細なnpmコマンドの設定が出来るようになります。
/my-app/config/paths.js でbuildのフォルダ構成を変更出来ます。画像ではnpm run buildコマンドで build/test/ビルド成果物が作成されるように
設定されています。
ただ、これだけだとurlに依存して画面遷移が出来ないのでほとんど意味がありません。なので環境変数を用いて設定を行っていきます。

環境変数の設定

env_configフォルダを作成し、その中に.env.devと.env.prodファイルを作成します。(フォルダ名は何でも良いです。ファイル名も多分.envがprefixとしてつけてあれば問題ないはず。)

REACT_APP_PUBLIC_URL = 
PUBLIC_URL = 
REACT_APP_PUBLIC_URL = /product
PUBLIC_URL = /product

.prodが本番用(S3とか)、.devがローカル用だと思ってください。
なぜ同じ値なのに別々の変数を定義しているかと言うと、
reactプロジェクトではREACT_APPのprefixがある変数しか読み取られず、PUBLIC_URLはREACT内部でデフォルトで利用されている環境変数名に対して上書きしています。

環境変数の利用

環境変数を設定しても利用しなければ意味がありません。
routerの設定とbuild構造の設定をしていきます。

まず、npmコマンドの設定です。
package.jsのscriptsを環境変数を使うように設定します。
startはlocal起動になりますが、ビルドパスがページ遷移にも影響してることを確認するため.prodファイルを適用しています。

次にビルド構造の修正を行います。
config/paths.jsのappBuildに
‘build’ + REACT_APP_PUBLIC_URLを引数に指定します。
これでproductでbuildするとbuild/product/build生成物となります。

最後にrouterの設定です。
App.jsのpath設定の部分を環境変数を利用するように修正します。

import React from 'react';
import ReactDom from 'react-dom'
import {
  BrowserRouter,
  Route,
  Switch
} from 'react-router-dom'
import Page1 from './Page1'
import Page2 from './Page2'
import './App.css';

function App() {
  return (
    <div>
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/'} exact component={Page1}/> 
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/page1'} exact component={Page1}/> 
        <Route path={process.env.REACT_APP_PUBLIC_URL + '/page2'} exact component={Page2}/> 
    </div>
  );
}

export default App;

動作確認

npm run startで実行してみましょう。
product/,product/page1ではpage1.jsが、
product/page2ではpage2.jsが表示されています。


npm run build:prodコマンドで
build構造も確認してみます。

build/product配下にbuild生成物が配置されていることがわかります。

感想

reactプロジェクトではREACT_APPのprefixがある変数しか読み取られない。
これに気づくのに3時間かかりました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です