本稿では、ロリポップに React アプリケーションを公開する方法をご紹介します！
React アプリケーションに対応するロリポップのプラン
React そのものは、HTML, CSS, JavaScript の集合体として動作しますので、ロリポップのどのプランでも大丈夫です。お好みのものを選びましょう。これからポートフォリオサイトを作成して成果を公開したい方は、ロリポップのようなレンタルサーバー利用がおすすめです！（ちなみに、当方はライトプランを利用して動作検証しています。）
アップロード先フォルダの用意
ロリポップのファイルサーバーにログインし、React アプリケーションを配備するフォルダを用意します。
ロリポップにログイン後、「サーバーの管理・設定」>「ロリポップ！FTP」をクリックします。
FTP 管理画面のフォルダアイコンをクリックします。
画面が切り替わるので、次のように「フォルダ名」に任意のフォルダ名を入力し、保存します。ここでは、"react"というフォルダ名にしています。
フォルダ作成後、フォルダを開き、「URL」にある URL をコピーしておきます。
FTP での準備はここまでとなります。
React アプリケーションの作成
次のコマンドを実行し、React アプリケーションを作成します。
npx create-react-app@latest my-app --template=typescript
React アプリケーションのビルド
package.json を開き、下記のように "homepage": "./" を追記します。
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
...
},
"scripts": {
...
},
"eslintConfig": {
...
},
"browserslist": {
...
},
"homepage": "./"
}
続いて、次のコマンドを実行して React アプリケーションをビルドします。
npm run build
ビルドが終わると、次のようなメッセージが表示されます。
The build folder is ready to be deployed. （訳：build フォルダは配備の準備ができました。）
また、Visual Studio Code のエクスプローラー上に、build フォルダが生成されることが分かります。build フォルダ内のファイルとフォルダをロリポップのファイルサーバーにアップロードして、React アプリケーションを公開します。
React アプリケーションの配備
React アプリケーションの build フォルダ配下のファイルとフォルダを FTP でサーバーにアップロードします。（※ ロリポップの FTP サイトでのフォルダのアップロード方法が分からず、static フォルダや、static フォルダ配下の css, js, media フォルダは手作業で作成し、ファイルをアップロードしました・・。）
React アプリケーションの実行
最後に、先ほどファイルとフォルダをアップロードした react フォルダの URL をブラウザで開いてみましょう。React アプリケーションが動作していることが分かります！
まとめ
ここまで、React アプリケーションをロリポップのファイルサーバーにアップロードして実行する方法を紹介しました。この手順に沿うことで、簡単にポートフォリオサイトが作成できます😀
