Firebase deploy hosting with Nextjs 13

Ai cũng phải cài đặt

Install firebase tools latest

    npm i -g firebase-tools@latest 

To get started, initialize Firebase for your framework project.

In the Firebase CLI, enable the web frameworks preview:

    firebase experiments:enable webframeworks

Run the initialization command from the CLI and then follow the prompts:

    firebase init hosting

1. Choose your hosting source directory. If this an existing Next.js app, the CLI process completes, and you can proceed to the next section.
2. Choose "Dynamic web hosting with web framework"
3. Choose Next.js.

Điều kiện cơ bản đó là:

• Enable billing
• Enable API Cloud functions (để firebase tự động deploy các request được tạo ở folder src/pages/api) Chi tiết:

Firebase CLI version 11.14.2 or later. Make sure to install the CLI using your preferred method.
Optional: Billing enabled on your Firebase project (required if you plan to use SSR)
Optional: use the experimental ReactFire library to benefit from its Firebase-friendly features

Đối với tạo Next app mới

Ví dụ firebase.json

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Thực hiện deploy

  firebase deploy //(sẽ install default hosting là firebase project_id)

Đối với migrate deploy multi target

Mình sẽ thay đổi field "public": "out" thành "source": "."

Ví dụ firebase.json

{
  "hosting": [
    {
      "target": "target_2",
      "source": ".", // Thay đổi từ "public": "out"
      "ignore": [
        "firebase.json",
        "*/.",
        "*/node_modules/*"
      ],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    },
    {
      "target": "target_1",
      "source": ".", // Thay đổi từ "public": "out"
      "ignore": [
        "firebase.json",
        "*/.",
        "*/node_modules/*"
      ],
      "cleanUrls": true,
      "rewrites": [
        {
          "source": "/",
          "destination": "/index.html"
        }
      ],
      "headers": [
        {
          "source": "index.html",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "max-age=0, no-cache"
            }
          ]
        },
        {
          "source": "**/*.@(jpg|jpeg|gif|png)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        },
        {
          "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
          "headers": [
            {
              "key": "Access-Control-Allow-Origin",
              "value": "*"
            },
            {
              "key": "Cache-Control",
              "value": "public,max-age=604800"
            }
          ]
        }
      ]
    }
  ]
}

Thực hiện deploy

		firebase deploy --only hosting:target_1 
		firebase deploy --only hosting:target_2

Links

https://firebase.google.com/docs/hosting/nextjs