Makefileを利用したfirebaseで本番環境にアプリをデプロイする

0

2024年12月05日 6:18

Firebaseは、モバイルおよびウェブアプリケーションの開発において非常に便利なプラットフォームです。本記事では、Firebaseを使用して本番環境にアプリケーションをデプロイする方法を解説します。特に、Makefilenext.config.jsなどを活用した効率的な設定方法に焦点を当てます。


必要な準備

デプロイを始める前に、以下の準備を済ませておく必要があります:

  1. Firebase CLIのインストール:
    Firebase CLIをインストールしていない場合は、以下のコマンドを使用してインストールします:

    npm install -g firebase-tools
  2. Firebaseプロジェクトの作成:
    Firebaseの管理コンソールでプロジェクトを作成し、projectIdを取得します。

  3. Node.jsとYarnのインストール:
    アプリケーションのビルドとデプロイに必要です。


Makefileの活用

プロジェクトにMakefileを追加することで、開発環境と本番環境のビルドやデプロイを簡単に管理できます。以下は、今回追加されたMakefileの例です:

Makefileの構造

img

主なターゲット

  1. clean-node:
    不要なnode_modulesを削除します。

  2. yarn:
    パッケージをインストールします。

  3. next-build:
    指定した環境でアプリをビルドします。

  4. deploy:
    Firebaseにアプリをデプロイし、ブラウザでアプリを開きます。


next.config.jsの設定

next.config.jsを使用して環境変数を管理します。以下は、その設定例です:

img

この設定により、環境に応じた環境変数を適用できます。


デプロイ手順

開発環境へのデプロイ

以下のコマンドで開発環境にデプロイします:

img

本番環境へのデプロイ

以下のコマンドで本番環境にデプロイします:

img


パッケージ設定

package.jsonに以下のスクリプトが追加されています:

img

これにより、環境に応じたビルドが可能になります。


Firebase設定ファイル

src/config/firebase.tsxでは、環境変数を使用してFirebaseの初期化が行われています。以下はその例です:

img

環境ごとに異なる設定を簡単に切り替えることができます。


ベストプラクティス

  1. 環境ごとの設定を明確化:
    開発環境と本番環境で異なる設定を簡単に切り替えられるようにする。

  2. 自動化ツールの活用:
    Makefileを使用して、ビルドとデプロイのプロセスを簡素化。

  3. セキュリティの確保:
    環境変数には機密情報が含まれるため、.envファイルを.gitignoreに追加する。


まとめ

Firebaseを使用して本番環境にアプリをデプロイする際、適切な設定と自動化ツールを活用することで効率的かつ安全に行うことができます。本記事で紹介した手法を参考に、デプロイプロセスを最適化し、スムーズな運用を実現してください。

# Firebase
# Next.js
# Makefile
0

診断を受けるとあなたの現在の業務委託単価を算出します。今後副業やフリーランスで単価を交渉する際の参考になります。また次の単価レンジに到達するためのヒントも確認できます。