Reactアプリをレンタルサーバーで公開する方法

create-react-appで開発したReactアプリをレンタルサーバーで公開する方法を説明します。

Reactアプリ作成

まず「create-react-app」でReactアプリを作成するので、ターミナルに以下のコマンドを入力して作成してください。

以下のように、作成されたフォルダに移動して、「npm start」とすると、Reactアプリを確認することができます。

ちゃんとReactアプリが作成されています。

初期のページのままでもいいのですが、今回はデプロイした際にちゃんと反映されているのか確認するという意味でも、少し内容を変えておきます。

レンタルサーバーで公開

Reactアプリはビルドして生成されたファイル一式をレンタルサーバーにアップすればいいのですが、その前にしなければいけないことがあります。

まず「package.json」を編集し、以下の赤文字部分を追記します。

次に「public」フォルダ内に「.htaccess」を作成し、以下を記述します。

そしてビルドします。

あとは生成された「build」フォルダの中身を丸々レンタルサーバーにアップすればOKです。