Nuxt3 アプリを Firebase Hosting へ最速でデプロイ (2023/8/12 時点)

自分が最近よく作っている、

• Nuxt3 (SSR)
• Tailwind CSS
• Firebase Hosting

こんな構成のアプリを「新規作成～デプロイして公開する手順」をまとめました。自分は GCP 派なので Vercel ではなく Firebase Hosting を使っています。

(Mac か WSL なら) この手順だけでとりあえず大丈夫なはず。もっと楽な手順や漏れなどあればアドバイスぜひお願いします。

1. Nuxt3 アプリ新規作成

nuxt.com

// 新規作成 (例 "web" を作成)
npx nuxi@latest init web

// 起動 (localhost)
cd web
yarn install
yarn dev

2. Firebase 初期設定

firebase.google.com

Firebase コンソール

• プロジェクト作成
• 「Storage」を開く＞始める＞本番モード＞リージョン選択
  • 自分はいつも「asia-northeast1 (東京)」で作成してる
  • Functions のデプロイで内部的に Storage を使うのでこの操作は必須ぽい

Firebase CLI をインストール

npm install -g firebase-tools

Firebase 初期化

firebase login
firebase init // 作成したプロジェクトを選択

// 以下を選択 (SSR 前提なので Functions 必須)
 ◯ Functions: Configure a Cloud Functions directory and its files
 ◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

// 抜粋
=== Functions Setup
? What language would you like to use to write Cloud Functions? TypeScript
? Do you want to use ESLint to catch probable bugs and enforce style? Yes
? Do you want to install dependencies with npm now? Yes

=== Hosting Setup
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No

✔  Firebase initialization complete!

3. デプロイ準備

Nuxt3 リソース整理

• 「firebase.json」「public ディレクトリ内のファイルすべて」を削除
• .firebaserc は残し

firebase.json 自動生成

// nuxt.config.ts に以下を追加
export default defineNuxtConfig({
  nitro: {
    preset: "firebase",
  },
})

yarn add --dev firebase-admin firebase-functions firebase-functions-test
yarn build

firebase.json 書き換え

• プロジェクトID
  • Firebase コンソール＞プロジェクトの設定＞プロジェクトID

// firebase.json
<your_project_id> を書き換え

4. デプロイ実行

yarn build
npx firebase deploy

これでサイト公開まで完了。簡単に説明すると、

• /server 配下が Functions へ
• それ以外が Firebase Hosting へ

デプロイされる。

以下はおまけ。

5. Tailwind CSS 設定

tailwindcss.com

tailwind.config.js 自動生成

yarn add tailwindcss postcss autoprefixer --dev
npx tailwindcss init

tailwind.config.js

  // 以下を追加
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],

assets/css/main.css (新規作成)

// main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

nuxt.config.js

export default defineNuxtConfig({
  // 以下を追加
  css: ["~/assets/css/main.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  ...
});

6. 画面 新規作成

app.vue

• 以下のように修正

旧    <NuxtWelcome />
新    <NuxtPage />

pages/index.vue

• 新規作成 (pages フォルダ)
• 新規作成 (index.vue)

// pages/index.vue
<script setup>
</script>

<template>
  <p class="text-6xl">index</p>
</template>

Happy Coding🙃

つづき daichan4649.hatenablog.jp