0utputab1e

Reactアプリケーションを最小構成で静的ホスティング環境にデプロイしてみた

最近Reactをはじめたのですが、常時稼動するサーバを使わず立ててみたいと思い、アプリケーション生成→本番用にビルド→静的ホスティング環境にデプロイまでの流れをまとめてみました。

前提

Reactアプリケーションの最小構成を作成するために

  • node: v12.18.3
  • npm: 6.14.7

で開始します。node, npmの導入手順は、過去の記事「Ubuntu18.04環境に最新のnode、npmをインストールして動かしてみる(npmのn経由でやってみる)」で行ったのと同じでやっていきます。

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

と案内されるので、上記の2コマンドを実行すると、ローカルホストでReactアプリケーションが起動します。

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とつなぐことで開発の幅が広がっていくので楽しみですね。

 
ではこのへんで!

 

あわせて読みたい記事

>> Homeに戻る