記事内に広告が含まれています。

ロリポップに React アプリケーションを公開する（デプロイ用サンプルあり）

2022年8月13日

この記事では、ロリポップに React アプリケーションを公開する方法を紹介します！

React アプリケーションに対応するロリポップのプラン

React そのものは、HTML, CSS, JavaScript の集合体として動作しますので、ロリポップのどのプランでも大丈夫です。予算やサーバーのスペックをもとに、要件に合致するプランを選ぶことができます。これからポートフォリオサイトを作成して成果を公開したい方は、ロリポップのようなレンタルサーバー利用がおすすめです！

ポートフォリオサイトを作成予定の方は、データベースも使えるライトプラン以上がおすすめです。当サイトもライトプランを利用して動作検証しています。

プラン名データベース速度データ容量料金
エコノミープラン99 円～
ライトプラン264 円～
スタンダードプラン495 円～
ハイスピードプラン550 円～
エンタープライズプラン2200 円～

ロリポップ公式サイト

アップロード先ディレクトリの用意

FTP クライアントアプリケーションを起動し、ロリポップ FTP へ接続します。FileZilla のインストールやロリポップ FTP への接続方法の解説は、下記記事を参照下さい。

リモート サイトの「ディレクトリの作成」を押下し、デプロイ先のディレクトリを作成します。ディレクトリ名は任意のもので OK です。

ここでは、ルートディレクトリ直下に、"react-app"というディレクトリを作成しました。ブラウザでは、https://ロリポップ契約ドメイン/react-app/ で "react-app" ディレクトリにアクセスすることができます。

React アプリケーションの作成

cmd.exe などのターミナル画面で次のコマンドを実行し、React アプリケーションを作成します。

npx create-react-app@latest react-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 フォルダ配下のファイルとフォルダを、FileZilla などのクライアントアプリケーションで、リモート サイトの "/react-app" にアップロードします。 

React アプリケーションの実行

先ほどファイル・フォルダをアップロードしたディレクトリの URL（https://ロリポップ契約ドメイン/react-app/）をブラウザで開いてみましょう。React アプリケーションが動作していることが分かります！

デプロイ用サンプル

今回の解説で利用したデプロイ用サンプルをご利用いただけます。react-app > build フォルダも含まれていますので、ロリポップに直接アップロードできる状態です。

react-appダウンロード

本サイトでのデモ

デプロイ用サンプルアプリケーションを本サイトに公開しました。本サイトはロリポップのライトプランを利用しています。ロリポップで React アプリケーションが問題なく動作することが分かります。

https://watermargin.net/react-app

まとめ

ここまで、React アプリケーションをロリポップのファイルサーバーにアップロードして実行する方法を紹介しました。この手順に沿うことで、簡単にポートフォリオサイトが作成できます😀

再掲：React アプリケーションに対応するロリポップのプラン

プラン名データベース速度データ容量料金
エコノミープラン99 円～
ライトプラン264 円～
スタンダードプラン495 円～
ハイスピードプラン550 円～
エンタープライズプラン2200 円～

ロリポップ公式サイト

-React, ロリポップ