npmパッケージのserveで立てたローカルサーバーでReact Appを確認する方法

1628 ワード
server React npm server テキストリンク

概要

npmパッケージのserveを使ってローカルに立ち上げたサーバーでReact Appを確認する方法です．
主に，ビルドしたファイル群をリモートのサーバーにデプロイする前にローカル環境で確認したい人向けです．

環境

Node.js >= 6
npm >= 5.2

React開発環境のセットアップ

npx create-react-app my-app
cd my-app
npm start

ブラウザで http://localhost:3000/ にアクセスしてこんな感じの画面が出てこれば無事にセットアップ完了です．
ctr+cで開発用サーバーを終了してください．

Reactのビルド

npm run build

ホスティングするファイル群がbuildディレククトリに生成されます．

serveのインストール

npm install serve -g

ローカルサーバー立ち上げ

serve -s ./build

デフォルトのポートが5000なので， http://localhost:5000 にアクセスすればビルドしたReact Appが確認できます．