モケラ

Tech Sheets

mokelab

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

一覧に戻る