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

📋 目次（クリックで展開）

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

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

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

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

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

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

FileZilla Portable を利用したロリポップ FTP 接続とファイルのアップロード方法

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

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

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

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

Terminal window
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 アプリケーションをビルドします。

Terminal window
npm run build

ビルドが終わると、次のようなメッセージが表示されます。

Terminal window
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.zip

まとめ

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

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

プラン名 データベース 速度 データ容量 料金
エコノミープラン ✕ ◯ △ 99 円～
ライトプラン ◯ ◯ ◯ 264 円～
スタンダードプラン ◯ ◯ ◯ 495 円～
ハイスピードプラン ◯ ◎ ◎ 550 円～
エンタープライズプラン ◯ ◎ ◎ 2200 円～
ロリポップ公式サイト

💬 コメント