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を例にしましたが、他のサブディレクトリで公開する場合も同様です。