8 free React hosting services for your app

Reading Time: 5 minutes

React アプリを構築しましたが、それをどこでどのようにホストするかがわかりません。この記事では、8 つの無料 React ホスティングサービスを紹介し、どのように導入したかを示します。このReactアプリそれぞれを使用して、その過程で学んだことを説明します。

を使用して Figma でアプリを構築しました。 Anima プラグインにより、機能、応答性の高い動作、リッチメディアを追加できるようになります。 UI全体の開発対応Reactコードをエクスポート。設計と導入には 1 日かかりました。

React アプリを無料でホストできる場所

React のようなコンポーネントベースのフレームワークの台頭により、サーバーレスホスティングソリューションの数が増えています。現在、Amazon AWS、Microsoft Azure、Google Cloud が主要なプラットフォームです。ただし、労力が少なく、すぐに稼働できる専用のフロントエンドホスティングサービスへの移行が進んでおり、そのほとんどには CI/CD が含まれています。私たちがテストした8つの無料Reactアプリホスティングサービスは次のとおりです。

2. Vercel

8. サージ

これらの無料の React アプリホスティングサービスをさらに詳しく説明し、それぞれのサービスを使用して React アプリをデプロイする方法を示しましょう。

ネットリファイ

背景

Netlify は 2014 年に設立され、当初から静的 Web サイトのホスティングに重点を置いていました。その寛大な無料枠により、多くの開発者を魅了しました。数年後、Netlify は最も人気のある JAMstack および静的 Web サイトのホストの 1 つに成長しました。

使用方法

理想的には、GitHub で登録またはサインインします。これにより、プロファイル上のリポジトリにアクセスし、迅速にデプロイできるようになります。
ログインしたら、「新しいサイトを追加」をクリックし、「既存のプロジェクトをインポート」を選択します。
次に、プロバイダーとして GitHub をクリックします。
「bank-website」または任意のプロジェクト名を選択します。
展開設定を微調整し (私たちの Web サイトの場合はデフォルトで完璧に機能します)、[サイトを展開] をクリックします。
展開すると、パブリック URL で表示でき、世界と共有できます。わーい！

こちらです Netlify にデプロイされたライブアプリ。

長所と短所

Netlify はセットアップと展開が簡単で、ここでテストしたサービスの中で最も高速なサービスの 1 つであることは言うまでもありません。 1 つの欠点は、コラボレーターやチームが必要な場合は、有料プランにアップグレードする必要があることです。

Vercel

背景

Vercel (当初は Zeit として知られていました) は 2015 年に設立され、すぐに名声を博しました。彼らは、Web サイトを構築するための人気のある React フレームワークである Next.js のメンテナです。非営利 Web サイトに無料枠を提供するだけでなく、エッジネットワークをサーバーレス機能に使用する方法も提供します。

使用方法

GitHub にサインインまたは登録します。
[新規追加…] ドロップダウンをクリックし、[プロジェクト] を選択します。
「銀行のウェブサイト」またはお気に入りの React プロジェクトを選択します。
デプロイメント設定はデフォルトのままにし、「デプロイ」をクリックしました。
しばらくして、Web サイトがデプロイされました。

こちらですライブURL。

長所と短所

Vercel は、展開プロセスのインストール部分をキャッシュするのに少し時間がかかりますが、その後は最も高速なサービスの 1 つです。プッシュしたすべてのブランチのプレビューデプロイが表示され、キャッシュにより迅速にデプロイされます。

AWS アンプリファイ

背景

AWS はクラウド製品の膨大なコレクションであり、Amplify はその一部を簡単に入手できる方法として宣伝されています。 AWS Amplify を使用すると、AWS 上でフルスタックアプリケーションを迅速に構築、出荷、ホストでき、ユースケースの進化に合わせて幅広い AWS サービスを柔軟に活用できます。

使用方法

AWS にサインアップまたはログインし、AWS Amplify を検索して、[開始する] をクリックします。
GitHub を選択して認証します (「bank-website」リポジトリに対してのみ許可しました)。
「最近更新されたリポジトリ」セクションでリポジトリを選択します。
1. ビルド設定で、ベースディレクトリ私たちのアプリがそうなるために距離そのように：その後、ビルド設定は次のようになります。
次のステップで、「保存して展開」をクリックします。
しばらくすると、Web サイトが展開され、使用できるようになります。

そしてライブです！こちらです URL。

長所と短所

編集する必要がありますベースディレクトリデプロイメント仕様では、そのままでは認識されません。 UIは少し不格好に感じますが、これは個人的な好みです。他の多くの AWS ウェブサービスが手の届く範囲にあるため、AWS Amplify には大きな可能性があります。

ファイアベース

背景

Firebase は、リアルタイムストレージプラットフォームとして最もよく知られている Google のサービスです。ただし、静的 Web サイトと Express.js マイクロサービスまたは API のホスティングオプションもあり、チームが取り組んでいるブランチのプレビュー URL もサポートしています。 Netlify、Vercel などと同様に、デプロイされたコンテンツを CDN ネットワーク経由で提供します。

使用方法

インストールファイアベースツールと npm install -g firebase-tools.
次のコマンドを使用して Firebase にログインしますファイアベースログイン。ログインすると、次のようなメッセージが表示されるはずです。
プロジェクトディレクトリに移動して実行しますファイアベースの初期化、次のようなものが表示されるはずです。オプションの GitHub アクションデプロイを使用して Firebase Hosting のファイルを構成するオプションを選択します。その後、CLI から直接プロジェクトを作成することも、Firebase UI を使用してプロジェクトを作成し、後で接続することもできます。コマンドラインからプロジェクトを作成しました。その結果得られた質問に対する答えは次のとおりです。その後、単純な `firebase.json` および `.firebaserc` ファイルが作成されます。
それから、走ってくださいファイアベースのデプロイ実際にファイルをデプロイするには距離ディレクトリ。ディレクトリが見つからない場合は、必ず実行してください npm ビルドを実行するまずファイルを生成します。のファイアベースのデプロイコマンドは、次の例のような出力を生成するはずです。

今ならできるウェブサイトを見る付属のURLで。わーい！

長所と短所

Firebase は非常にシンプルですが、プロジェクト内でセットアップする場合、答える必要がある質問は少しわかりにくいです。幸いなことに、上記のセクションでそれらの回答は得られましたが、続行する前に実際の Firebase 機能を理解する必要があります。それ以外では、Firebase はデプロイが迅速で、デプロイされたファイルをプレビューできる URL を生成できます。 CLI を使用した GitHub アクションのデプロイメントを使用して簡単に自動化することもできます。これは便利です。

GitHub ページ

背景

GitHub Pages はかなり前から存在しており、GitHub から直接ドキュメントや個人の Web サイトを公開する簡単な方法です。これは静的コンテンツに適しており、多くの人が最小限の投資でシンプルなサイトを展開するために使用しています。プロジェクトが公開されている場合は無料で使用でき、Web サイトを高速かつ安価にホストできます。

使用方法

編集する必要があることに注意してください App.jsx 私たちが電話する場所ルーターそして追加しますベース名リポジトリ名と一致するように変更します。それで、このようにして App.jsx 見る必要があります: 私たちはそれを変えなければなりませんベース名 GitHub ページは、「https://GITHUB_USERNAME.gitlab.io/REPO_NAME」という形式の URL に Web サイトをデプロイするためです。 Web サイトは、ベース名が設定されていないと正しく機能しません。反応ルーターダム.

コードを変更した後、インストールする必要があります gh ページパッケージ内容:
そして、追加します事前展開そして展開するスクリプトを実行するパッケージ.json:
次に、単に実行します npm 実行デプロイ。それはトリガーになります npm ビルドを実行するそしてそれは使用します gh ページの内容を公開する距離という名前の GitHub 上の別のブランチに追加します。 gh ページ.
最後に、 gh ページ以下のような GitHub ページに使用されます。

こちらですライブURL。

長所と短所

ユーザー名と異なるプロジェクトをデプロイする場合、そのプロジェクトは、GitHub 内の無料ドメインのサブディレクトリ内にデプロイされます。次に、サブディレクトリ内にあるロジックをサポートする追加のコードを作成する必要があります。

このユースケースでは、すぐに使用できる継続的デプロイメントはサポートされていませんが、セットアップすることはできます。セットアップが完了すると、変更はすぐに展開できます。

GitLab ページ

背景

GitHub と同様、GitLab には独自のホスティングソリューションがあり、それを GitLab Pages と呼んでいます。 GitLab Pages への継続的デプロイメントのセットアップは、GitHub Pages よりも簡単です。

使用方法

GitLab にサインアップまたはログインします
リポジトリがまだ GitLab にない場合は、リポジトリを GitLab に追加します。できますそこに追加したものをフォークします
GitHub ページと同様に、 App.jsx 私たちが電話する場所ルーターそして追加しますベース名リポジトリ名と一致するように変更します。これが最後の変更です。私たちはそれを変えなければなりませんベース名 GitLab ページは Web サイトを次の形式の URL にデプロイするためです。 https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME。 Web サイトは、ベース名が設定されていないと正しく機能しません。反応ルーターダム.
プロジェクトを編集して GitLab にプッシュしたら、[設定] > [ページ] に移動すると、リポジトリを GitLab Pages にデプロイするための 4 ステップのウィザードが表示されます。
ウィザードの最初のステップは、ビルドイメージを入力することです。 Node.js LTS を使用します。
次に、ビルド前のコマンドを入力します。の npmci ここで十分です。
次にビルドステップです。合格する必要があります — –dist-dir public なぜなら、GitLab Pages は Web サイトが公共のディレクトリ。他のディレクトリを使用することはできません。申し訳ありません。
新しく生成されたものをコミットします .gitlab-ci.yml GitLab に Web サイトのデプロイ方法を指示するファイル。
ここで、リポジトリの CI/CD -> Pipelines セクションに移動し、新しく追加されたパイプラインのパフォーマンスを観察します。
しばらくすると、パイプラインジョブが終了し、Web サイトが GitLab Pages にデプロイされます。

こちらです結果。

長所と短所

パッケージのインストールには時間がかかり、機能させるには追加のコードを追加する必要がありますが、ウィザードは非常に直感的で、展開には 4 つのステップしかありません。

レンダリング

背景

Render は、2019 年にローンチされた新参者です。人々がサービス (静的 Web サイトを含む) を展開する方法を破壊しようとしています。今のところ、彼らは順調に成長しており、数も増えています。

使用方法

Render にサインアップまたはログインします。
「新規」ボタンを押して「静的サイト」を選択して、新しい静的 Web サイトを作成します。
デプロイするリポジトリを選択します。
保管してください糸;糸の構築ビルド設定の build コマンド。残念ながら、それは機能しません npmci; npm ビルドを実行する他のサービスと同様に。「公開ディレクトリ」を次のように変更します。距離をクリックし、「静的サイトの作成」をクリックします。
しばらくすると、Render がコードをデプロイします。

こちらです Render のライブ URL。

長所と短所

これは非常に高速ですが、`npm ci` および `npm run build` コマンドを使用したプロジェクトではうまく機能しません。「yarn」だけが機能するようです。

サージ

背景

Surge はしばらく前から存在しています。まさに、そのサービスは使い方が簡単で、静的 Web サイトをデプロイするには 1 つまたは 2 つのコマンドだけが必要です。無料ですが、月額 30 ドルの有料プランもあります。ストイックな姿勢こそが道具を輝かせるのです。複雑な設定は必要ありません。「surge」をインストールし、「surge」で実行するだけです。

使用方法

準備するには、実行してください npm ビルドを実行する内部に静的ファイルを生成する距離ディレクトリ。の急上昇それらをデプロイメントに使用します。
走る npm install –グローバルサージ
それから、走ってください急上昇.

注意すべき点がいくつかあります:
初めて実行する場合は、Surge でアカウントを作成する必要があります。心配しないでください、それは簡単です。メールアドレスと希望のパスワードを入力するだけです。

次に、「プロジェクト」を入力するように求められます。これは、距離ディレクトリ。追加するだけです距離デプロイしているリポジトリ内でサージを実行した場合に指定されたパスに移動します。

次に、Web サイトの将来の URL を入力します。何かユニークなことを試してみましょう。急上昇提供されたものは私にとってはうまくいきませんでした。

URL 入力後、急上昇からコンテンツを展開します距離指定された URL に移行します。私が得たものは次のとおりです。

長所と短所

これは高速かつシンプルであり、別のインターフェイスを採用する必要はありませんが、アプリに利用可能な URL を提案することはできません。

各ホスティングサービスの導入にかかる時間

無料の React ホスティングサービストップ 3

ネットリファイ
Vercel
サージ

重要なポイント

これらの無料の React アプリホスティングサービスをそれぞれテストした結果、Netlify が最も優れていると考えられます。必要となる可能性のある多くの機能を備えた迅速な導入が可能です。その直後にある Vercel は、多くの機能を備えており、初期展開後はかなり高速です。次に、Surge があります。これは、アップグレードする場合にかなり安価にできる最小限の導入ツールです。

8つの無料Reactアプリホスティングサービス1 min read