Firebaseで次のJSアプリをホスティングする。

2024年5月25日 11:20

クリエイター : Bishal Bhattarai , 株式会社readytowork ネパール支店長

Firebaseホスティングを使えば、シングルページのWebアプリケーション、モバイルアプリのランディングページ、またはプログレッシブWebアプリを、単一のデプロイコマンドでデプロイできます。この記事では、FirebaseホスティングサービスでのNext.jsアプリケーションのデプロイについて説明します。他のReactアプリケーションや静的サイトのデプロイは非常に簡単でわかりやすいのですが、Next.jsアプリケーションにはSSRが含まれるため、いくつかのカスタム変更が必要です。

さあ、始めよう。

NextJSアプリケーションのインストール

yarnまたはnpmを使ってNextJsアプリケーションを作成し、プロジェクト名を次のようにします。

yarn create next-app

以下は、インストールされたアプリのプロジェクト構造である。

プロジェクトをローカルで実行するには

yarn dev

次のプロジェクトをビルドしてエクスポートする

next build && next export

pages/index.jsでnext/imageを使用しており、next jsのデフォルトローダーがnext exportと互換性がないためです。next画像を通常のhtml画像タブに更新するか、サードパーティ製のローダーを使用してください。

とりあえず、次の画像をHTML画像タグに置き換えて、次のエクスポートを試してみる。これで静的HTMLページのエクスポートに成功する。

Firebaseプロジェクトのセットアップ

http://console.firebase.comから Firebase プロジェクトを作成し、Firebase ウェブアプリを登録します。セットアップの手順はこちらを参照してください。

また、ローカルマシンにFirebase CLIが必要です。Firebaseプロジェクトを初期化するために、CLIからFirebaseを起動することが非常に重要です。そのためには、node JSがインストールされている必要があります。

firebase CLIからfirebaseにログインします。

firebase login

CLIからそれぞれのプロジェクトでプロジェクトを初期化するために、プロジェクト名の作業ディレクトリを作成する必要がある。

firebase login

既存のプロジェクトで、firebaseをinitします。

firebase init

ホスティングを選択するには、矢印キーを押し、スペースを押してEnterキーを押します。
その後、リストから既存のプロジェクトを使用してプロジェクトfirebaseプロジェクトを選択する必要があり、リストが表示され、プロジェクトを選択します。

どのディレクトリをパブリック・ディレクトリにするかを聞いてくるので、Enterを押してください。

既存のプロジェクトのルートにfirebase.jsonと.firebasercファイルを書き込みます。以下はスクリーンショットです。

静的ファイルをデプロイするには、ホスティング・ディレクトリを変更する必要がある。
複数のターゲットとプロジェクトがある場合
.firebaserc : ターゲットをデプロイするための設定を保持します。

{
  "projects": {
    "default": "ready-to-work-d1465"
  },
  "targets": {
    "ready-to-work-d1465": {
      "hosting": {
        "static-site": [
          "static-site"
        ]
      }
    }
  }
}

firebase.json ホスティングに使用され、デプロイ用の設定があります。

{
  "hosting": [
      {
        "target": "static-site",
        "public": "out",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    ]
  }

デプロイするには、静的アプリかリアクト・アプリを使う。

firebase deploy --only hosting

しかし、SSRを実装したNextアプリケーションをFirebaseにデプロイすることは可能です。デプロイにはクラウド機能とホスティングを一緒に使います。
Firebaseのinitをもう一度現在のプロジェクトに入れ、functionsオプションを選択し、言語とnpmパッケージのインストールを同時に選択します。これで、functionsフォルダとコンフィギュレーション・インストールが生成される。

では、firebase.jsonファイルを修正してみよう。

{
  "hosting": [
      {
        "target": "t",
        "public": "out",
        "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
        "rewrites": [
          {
            "source": "functions",
            "function": "nextServer"
          }
        ]
      }
    ],
    "functions": {
      "source": "functions",
      "runtime": "nodejs10",
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run lint"
      ]
    }
  }

nextServerクラウド関数が応答を探すために使用されます。
クラウド関数関連の設定は、ソースとランタイムを示して追加されます。

indexファイルのfunctionsディレクトリの中に、SSRを扱うnextServerという名前の関数を作ります。

const functions = require("firebase-functions");
const { default: next } = require('next');
const isDev = process.env.NODE_ENV !== 'production';

const server = next({
  dev: isDev,
  //location of .next generated after running -> yarn build
  conf: { distDir: '.next' },
});

const nextjsHandle = server.getRequestHandler();
exports.nextServer = https.onRequest((req, res) => {
  return server.prepare().then(() => nextjsHandle(req, res));
});

パッケージをenvサポートにcross-envしてみよう。

yarn add cross-env

パッケージをenvサポートにcross-envしてみよう。

{
  "name": "static-app",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "deploy": "yarn build && cross-env NODE_ENV=production firebase deploy --only functions,hosting"
  },
  "dependencies": {
    "cross-env": "^7.0.2",
    "next": "12.0.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "eslint": "7",
    "eslint-config-next": "12.0.2"
  }
}

yarn deploy

次のjsアプリケーションをfirebaseホスティングにデプロイすることに成功しました。
ありがとうございました。Happy coding 🎉

協業開発及び開発パートナーをお探しのお客様へ

弊社は、ネパールに海外拠点を持ち、生成AI、モバイルアプリ、システム開発を中心に事業を展開する企業です。

自社サービスの開発経験を活かし、クライアント様と共に事業を創造することを重視し、創業以来、スタートアップから中小企業、大手企業、自治体まで、幅広い開発実績があります。プロダクトはユーザーが使いやすいように設計しており、企画から開発、保守運用まで対応しています。開発技術を厳選し限定することで、セキュリティ、プロダクトの品質向上に努めており、事業開発に関する課題を深く理解し、最適なご提案が可能です

お問い合わせはこちらから：
お問い合わせフォーム：https://readytowork.jp/

直通番号：080-8940-7169