Firebase にウェブサイトをデプロイして無料で使用する: ガイド

少し前に「」というタイトルの記事を書きました。 Web サイトのパフォーマンス スコアを 35 から 100 に改善する方法。 「 この投稿では、プロジェクトを Firebase にデプロイして無料で使用する方法を示すと約束しました。私は約束を守ります。

Firebaseとは何ですか?

Firebase についてまだよく知らない方もいらっしゃると思いますので、Firebase が何なのか簡単に説明させていただきます。

ファイアベースは、開発者がアプリケーションをより簡単に構築および拡張できるようにする一連のツールとサービスを提供する、モバイルおよび Web アプリケーション開発プラットフォームです。

リアルタイム データベース、認証、ホスティング、クラウド ストレージなどの機能を提供します。 Firebase はバックエンド機能とインフラストラクチャも提供するため、開発者はサーバー管理や複雑なインフラストラクチャ設定を気にせずにアプリの構築に集中できます。

全体として、Firebase は開発プロセスを簡素化し、開発者が高品質のアプリケーションを迅速に作成できるようにします。

今日は、その「ホスティング」機能を使用して Next.JS プロジェクトを保存します。この例では、プロジェクトの静的バージョンをホストする方法を示します。まず最初にアカウントを登録する必要があります。

Firebaseのアカウント登録方法

Firebase にアカウントを登録するには、次の手順を開きます。 https://firebase.google.com/ 、 「開始」をクリックします。

その後、Google アカウントを作成するか、既存のアカウントを使用する必要があります。最初のステップが完了すると、Firebase コントロール パネルが表示されます。次のステップはプロジェクトを作成することです。

Firebaseでプロジェクトを作成する方法

プロジェクトを作成するには、次の 3 つの簡単な手順を実行する必要があります。

1. 「プロジェクトを追加」をクリックし、新しいウィンドウで名前を付けます。

2. プロジェクトの Google Analytics 機能を有効または無効にし、[プロジェクトの作成] をクリックします。

数分後、プロジェクトが作成されます。

Firebaseを無料で使う方法

プロジェクトを作成したら、ダッシュボードにプロジェクトを表示できるようになります。デフォルトでは、 Spark プランを利用することになります。そうでない場合は、 Spark プランに変更する必要があります。

Spark プランは、月額費用がかからない無料プランです。いくつかの制限がありますが、特に静的 Web サイトのホスティング プラットフォームとして使用する予定の場合は、プロジェクトを開始するには十分です。

計画の詳細な説明については、こちらをご覧ください。 リンク。

Firebase ホスティングをセットアップします。

Firebase ホスティングを設定する方法

Firebase ホスティングのセットアップも非常に簡単です。アカウントにログインし、プロジェクトを選択します。次に、左側のメニューで「ビルド」をクリックし、ドロップダウンから「ホスティング」を選択します。

新しいウィンドウに、ようこそ画面が表示されます。 「始める」をクリックします。

プロジェクトをホストするには、まず Firebase CLI を設定する必要があります。

ターミナル ウィンドウを開き、次のコマンドを入力します。

 npm install -g firebase-tools

セットアップが完了したら、ターミナルに次のように入力します。

 firebase login

アクセスを承認するためのログイン画面が表示されます。

次のステップは、静的 Web サイトを保存したターミナル ウィンドウ内のプロジェクト フォルダーに移動することです。

次のコマンドを実行します。

 firebase init

すべてを正しく実行すると、ターミナル ウィンドウに次の内容が表示されるはずです。

オプションのリストで、「ホスティング: Firebase Hosting のファイルを構成し、(オプションで) GitHub アクションのデプロイを設定します。」を選択します。キーボードの矢印キーを使用して移動し、スペースを押して選択し、Enter キーを押します。

次に、リストからアカウントを選択し、Enter キーを押します。

すでにプロジェクトがあるため、リストから「既存のプロジェクトを使用」を選択し、前のステップで作成したプロジェクトを選択します。

デフォルトでは、パブリック ディレクトリは「public」に設定されています。別のディレクトリを指定する場合は、次の手順で指定できます。たとえば、私の Next.js プロジェクトは、「out」ディレクトリに Web サイトの静的バージョンを生成するため、このステップでそれを指定します。

最後の 2 つの構成に関する質問は、Web サイトの設定に関するものです。

• 「シングルページ アプリとして構成する (すべての URL を /index.html に書き換える)」 -はい

• 「GitHub を使用して自動ビルドとデプロイを設定しますか?」 -いいえ

これでセットアップは完了です。次に、プロジェクトを Firebase にデプロイします。

ウェブサイトを Firebase にデプロイする方法

すべての構成が完了したら、Web サイトを Firebase ホスティングにデプロイできます。

ターミナル ウィンドウのプロジェクト ディレクトリ内で、次のコマンドを入力します。

 firebase deploy --only hosting

すべてがうまくいけば、Web サイトへのアクセスに使用できる URL が表示されます。

この記事がお役に立てば幸いです。次回は、Firebase プロジェクトのカスタム ドメイン名を設定する方法を説明します。

乞うご期待！

ここでも公開されています