Reactアプリケーションを最小構成で静的ホスティング環境にデプロイしてみた
最近Reactをはじめたのですが、常時稼動するサーバを使わず立ててみたいと思い、アプリケーション生成→本番用にビルド→静的ホスティング環境にデプロイまでの流れをまとめてみました。
前提
Reactアプリケーションの最小構成を作成するために
- node: v12.18.3
- npm: 6.14.7
で開始します。
Reactの雛形を作成する
下記のコマンドでReactアプリケーションの雛形を作成します。
//npxが使用可能な場合(npxは、npm 5.2以降に付属するパッケージランナーツールのこと)
$ npx create-react-app my-app
//npmコマンドで作成する場合
$ npm init create-react-app my-app
//yarnコマンドで作成する場合
$ yarn create create-react-app my-app
いずれも同じものが作成されます。
今回はnpmで作成しすすめていきます。
作成が完了すると
$ cd my-app
$ npm run start
と案内されるので、上記の２コマンドを実行すると、ローカルホストでReactアプリケーションが起動します。
↓
パスの変更
そのままではcss、js、画像などがパス解決できないことがあるので、package.jsonを編集しておきます。
- package.json
{
"name": "react-app",
"version": "0.1.0",
"homepage": "./"
//(以下略)
この「homepage」プロパティは、「public/index.html」に埋め込まれている「%PUBLIC_URL%」のベースとなり、この例では相対パスとしてcssなどのファイルをパス解決することができます。
また、デプロイする場所がサブディレクトリ(例: example.com/subdir/)でなければならない場合でも
{
"name": "react-app",
"version": "0.1.0",
"homepage": "http://example.com/subdir"
//(以下略)
とすることで同様にパス解決が可能です。
アプリケーションの本番用ビルド
アプリケーションの起動、cssなどの相対パス化までうまくいったら、今度は本番稼動に向けてビルドしていきます。
下記のコマンドで「./build」ディレクトリに生成物が生成されます。
$ npm run build
これでデプロイするものの準備はできました。
ホスティング環境の準備
静的ホスティングする環境には
- Firebase Hosting
- AWS S3
- Google Cloud Storage(GCS)
- GitHub Pages
- Netlify
- その他index.htmlが表示できる環境
などがありますが、index.htmlが表示できるのであれば基本的にどこでもOKです。
お好みのホスティングサービスの公開ディレクトリに配置したら、アクセスできます。
最後に
今回は最小構成のReactアプリケーションを静的ホスティング環境にデプロイしました。
これで、SPAなどのクライアントをAPIとつなぐことで開発の幅が広がっていくので楽しみですね。
ではこのへんで！