モケラ

Tech Sheets

mokelab

Reactアプリをビルドする

最終更新日:2018-07-17

Reactアプリはリリース前にビルドが必要です。

ビルドするには、次のコマンドを実行します。

$ npm run build

ビルドが成功すると `build` フォルダにhtmlやjsができます。

$ ls build/
asset-manifest.json	index.html		service-worker.js
favicon.ico		manifest.json		static

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

一覧に戻る