Reactアプリのビルドプロダクションを作成する方法

Reactのプロジェクトを実行するには、開発モードと Production buildの2つのモードを使用できます。

開発段階では、Reactがアプリコードの問題を簡単に検出して修正し、バグを排除するための多くの役立つ警告とツールを提供する開発モードを使用して、コードをローカルで実行します。

ただし、これらの余分なコードによってバンドルサイズが大きくなるため、アプリの実行が遅くなります。

つまり、開発モードでは、バグが発生する前に問題を見つけるのに役立つ多くの警告がReactに含まれていまが、そうすることでバンドルのサイズが大きくなり、アプリの実行が遅くなります。

アプリをローカルで作業している間はスローダウンを受け入れることができますが、デプロイではこれを許容できません。

Reactアプリケーションの本番ビルドを行う方法を学んでいきましょう。

プロダクションモードとは？

プロダクション(本番)ビルドでは、縮小されたバンドル、軽量化されたソースマップ、および最適化されたアセットが作成されます。

また、デバッグ用に開発モードに存在する警告メッセージやその他の機能は抑制されます。

その結果、バンドルのサイズが大幅に縮小され、ページの読み込み時間が改善されます。

Reactは、Reactアプリのデプロイ中にプロダクションモードを利用することを推奨しています。

本番ビルドがパフォーマンスの最適化に役立つことがわかります。

プロダクションモードの主な利点は下記の通りです。

・ 開発モードと比較してパフォーマンスが向上します。

・ エンドユーザーのデバイスでのアプリのパフォーマンスを表します。

・ 本番環境でのみ発生するバグを発見するのに役立ちます。

開発モードの作成

それでは、React.jsにプロダクションモードでプロジェクトをビルドするように指示する方法を学びましょう。

つまり本番モードでReactアプリを作成する方法となります。

まず、新しいReactアプリを作成します。

npx create-react-app my-app

プロジェクトは、デフォルトのファイルと構成でセットアップされました。

プロジェクトフォルダに移動して下さい。

cd my-app

デフォルトのコードを編集してアプリをカスタマイズします。

src/App.jsファイルに移動し、既存のテキストに好きなようにいくつかの変更を加えていきます。

import logo from './logo.svg';
import './App.css';
  
function App() {
  return (
    <div className="App">
         <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          I love React
        </a>
      </header>
    </div>
  );
}
  
export default App;

私はデフォルト状態です。

ターミナルに移動し、開発モードでReactを起動します。

npm run start

アプリは開発モードで実行を開始し、http://localhost:3000/として提供されます。

Production buildの作成

それでは、アプリケーションのプロダクションビルドを作成します。

ターミナル内のルートフォルダにいることを確認し、下記のコマンドを実行します。

npm run build

// or

yarn build

数秒あるいは、もしかしたら数分かかるかもしれません。

しかし、しばらくすると新しいフォルダが生成されるのがわかるはずです。

buildコマンドは、デプロイされるビルドディレクトリを生成します。

プロダクションビルドを含むビルドディレクトリは、ルートプロジェクトフォルダ内に作成されます。

通常それはbuildまたはpublicと呼ばれます。

Create-React-App、Next、GatsbyなどのほとんどのReactプロジェクトマネージャーには、ビルドプロセスが事前に構成されています。

そのため、実行するコマンドはこの1つだけです。

そしてバックグラウンドで、彼らは私たちのためにすべての魔法をかけてくれます。

ビルドプロセスは、アプリケーションのすべてを最適化することを目的としております。

ユーザーのために本番環境を準備します。

このステップは、不要なものをすべて取り除くため、非常に重要です。

不要なものとは？

それは、たとえば開発モードでは、コンソールログ、ホットリロード、説明的なエラーメッセージなどです。

プロダクションではこれらは必要ありません。

ですが幸いなことに、ビルドプロセスでは通常これらの機能がすべて削除されます。

そして、React Buildをローカルでテストしデバッグしていくだけです。

バグはアプリごとに異なります。

全てのユースケースに適合するソリューションはございません。

それらを解決するには、テストとデバッグに時間を費やす必要があります。

アプリを本番モードで実行

アプリを本番モードで実行します。

Reactドキュメントでは、最も簡単な方法はserveパッケージを使用して残りを処理させることであると述べています。

この、serveパッケージを使用してローカルへのデプロイを行うことができます。

できれば、serveはグローバルにインストールしてください。

下記のコマンドを実行して、静的サーバーでビルド バージョンを提供します。

npm install -g serve

//or 

yarn global add serve

あとは、serveパッケージにどのフォルダを提供したいかを伝えるだけです。

プロジェクトディレクトリの中にいると仮定して、下記のコマンドを実行します。

serve -s build

自分のコンピューターで本番用ビルドをテストするには、このコマンドを使用しWebサーバーを起動します。

このプロダクションモードでは、Reactアプリはポート5000で実行されます。

ただし、ポート番号は構成可能です

serve -s build -l <port number>

このserveコマンドを機能させるにはポート3000で実行されている開発Webサーバーを1度停止する必要があることに注意してください。

本番ビルドが完了すると、ビルドサブディレクトリには、本番Webサーバーのルートにデプロイする必要があるファイルが含まれます。

そのディレクトリには、下記のようなファイルがあります。

index.html : アプリケーションのエントリポイント。

favicon.ico : ブラウザのタブに表示されるアプリケーション アイコン。

manifest.json : Webアプリケーションのマニフェスト。

本番環境でのデプロイ

build/staticフォルダのファイルを、本番アプリケーションのルートディレクトリにコピーすることで、簡単に本番環境に導入することができます。

これは、すべてのWebサーバーで動作します。

アプリがどのモードで実行されているか確認する方法

あなたは、アプリを開発モードと本番モードの両方で実行する方法を学びました。

ですが、ビルドプロセスが正しく設定されているかどうかを確認する方法も学ぶ必要があります。

多くの場合、アプリが現在実行されているモードを確認する必要があります。

この目的のために、Chromeブラウザ拡張機能のReact-Developer-Toolsを使用できます。

まずは、React Developer Tools拡張機能をブラウザにインストールしてください。

設定はありませんが、あなたのReactアプリが実行されていること、およびブラウザ拡張機能がアクティブ状態であることだけを確認してください。

使い方はいたってシンプルです、拡張機能アイコンの背景色を確認するだけです。

下記の画像のようにアイコンの背景色が赤の場合、アプリは開発モードです。

つまり、閲覧しているサイトが開発ビルドのReact アプリであることを示しています。

アイコンの背景色が黒の場合、アプリはプロダクション(本番)モードです。

これら2つのタブは、Reactを使用しているサイトでのみ表示されます。

React本番ビルドのその他の方法

ここまで解説した方法はCreate-React-App(CRA)によって提供されるnpm run buildコマンドを使用して、本番ビルドを作成しました。

ですが、本番ビルドを生成できる他のツールもあります。

それらのいくつかについて説明致します。

Brunch

Brunchは、本番ビルドを効率的に作成するのに役立つ、高速なフロントエンドWebアプリのビルドツールです。

下記でインストールします。

npm install -g brunch

React本番ビルドの場合は下記のコマンドを使用します。

brunch build --production

Webpack

Webpackは、本番ビルドの作成に関して最も一般的な選択肢の1つとなっています。

Webpackを直接設定する場合は、構成ファイルであるwebpack.config.jsファイルにTenserPluginを使用してください。

TerserPluginをrequire()で読み込み、newでインスタンスを作成し、追加のオプションがあれば設定していきます。

// webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');//読み込み
 
module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [new TerserPlugin({ 
/*オプション設定はこちら */ 
})],
  },
};

Webpackでのビルドには合計8.38秒かかり、結果のバンドルサイズは810.3KB程です。

Webpackはセットアップと使用が適度に簡単です、しかしインポートする必要のある依存関係が欠落しているため、途中でいくつかの小さなエラーが発生する可能性がございます。

多くのカスタマイズオプションが可能なので、この方法は大規模向けです。

Parcel

Parcelは、JSとCSSの構成を必要とせずに誰でも簡単に使用できるバンドラーとなります。

追加のものを必要としない場合、実際には構成を必要とせず、構成ファイルがなくても機能することです。

公式ドキュメントはこちらのParcelを参照してみて下さい。

下記コマンドでインストールします。

npm init -y

npm install react react-dom

npm install --save-dev parcel

// or


yarn init -y
yarn add react react-dom
yarn add --dev parcel

下記のように、package.json のスクリプトを変更します。

{
  "name": "my-app",
  "source": "src/index.html",
  "scripts": {
   "prebuild": "rm -rf dist",
    "start": "parcel",
    "build": "parcel build"
  },
  "devDependencies": {
    "parcel": "latest"
  }
}

sourceキーは、エントリポイントがどこにあるかを決定するためにParcelによって使用されます。

ビルドごとにParcelはデフォルトでdistフォルダをクリーンアップしないため、prebuildが挿入されます。

そのため、自分で作成する必要があります。

Reactアプリのデプロイ

本番ビルドの準備ができたら、次のステップはReact アプリケーションを本番用にデプロイすることです。

具体的には、Reactアプリケーションをホストするために、多数のホスティングプロバイダーが利用可能です。

下記にリストとして示します。

・ AWS

・ Azure

・ Digital Ocean

・ Github Pages

・ Heroku

・ Netlify

・ Firebase

・ Vercel

Reactアプリを最初から数分でインターネットにデプロイできると思いますか？

NetlifyおよびVercelでは可能です。

Netlifyは、最新のWebプロジェクトを自動化するためのプラットフォームです。

GitHub、Bitbucket、Gitlabを使用した継続的なデプロイを提供してくれます。

Reactアプリは3ステップでデプロイできます。

また、無料の自動HTTPSも提供しており、カスタム ドメインを追加することも可能です。

Netlify Edgeを使用すると、Reactアプリにクライアントが非常に高速にアクセスできます。

展開以外に、Netlifyはサーバーレス機能、フォーム、分析、CLI、APIなども提供しており、これらの機能のほとんどは、いくつかの制限付きで無料で提供されています。

Next.jsの作成者である Vercel は、最新のReactフレームワークです。

Vercelで設定ゼロのReact アプリをデプロイできます。

グローバルエッジネットワークでアプリのパフォーマンスを向上させ、デプロイ前に機能をテストするために、Bitbucket、Github、および GitLabでプルリクエストのプレビューリンクを提供します。

Vercelは、新しいアプリを作成してデプロイするためのテンプレートもいくつか提供しており、継続的な展開、サーバーレス機能、HTTPS なども提供しています。

下記では、Next.jsアプリをVercelでデプロイする記事となっております。

アプリをデプロイする流れを掴めると思います。

dev-k.hatenablog.com

最後に

プロダクションビルドはバンドルサイズを小さくすることで、アプリケーションのパフォーマンスを向上させるのに役立ちます。

エンドユーザーのデバイスでアプリがどのように動作するかをテストするのに役立ち、バグのあるエクスペリエンスを防ぎます。

本日は以上となります。

最後まで読んで頂きありがとうございます。

この記事が気に入ったらブックマークし、共有をお願い致します。