Reactアプリをビルドする
最終更新日:2024-08-25
    
    Reactアプリはリリース前にビルドが必要です。
ビルドするには、次のコマンドを実行します。
% npm run build
ビルドが成功すると build
 フォルダにhtmlやjsができます。
% ls build/
asset-manifest.json	logo192.png		robots.txt
favicon.ico		logo512.png		static
index.html		manifest.json
ローカルで動作確認するには、pythonでささっとサーバーを立ち上げるのが手っ取り早いでしょう。
% cd build/
% python -m http.server
Github Pagesで公開する
ビルドの成果物はjsなどがパスの情報を含むため、 build
 フォルダをルートとしたサーバーでしか動作しません。そのため、サブディレクトリで公開されてしまうGithub Pagesなどでは公開できません。
Github Pagesで公開するには、 package.json
 に homepage
 キーを追加します。例えばmokelabアカウントのreact_demoリポジトリの場合は次のように設定します。
{
  "name": "demo",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://mokelab.github.io/react_demo",
  "dependencies": {
...
}
この設定で npm run build
 でビルドすると、 build
 にはこのページで公開可能なファイルができます。この中身をGithubにpushすることで、Github Pagesでも動かすことができます。
ここではGithub Pagesを例にしましたが、他のサブディレクトリで公開する場合も同様です。

