🌱

NuxtとNextどっちがいいのか分からないのでNuxtを始めてみるお話。（ついでにfirebaseも）

2020/12/17に公開

Firebase

zenn.devはじめます。

知見と言うほどのものはまだ無いけれど、残していきたいと思っているので書き残す事にします。
作業ログでもあり、自分の理解を確かめる場にも使います。
間違ってる部分やより良い方法あればどんどん教えてほしいです:bow:

Nuxt? Next?

twitterや記事を見ていると賛否両論で、まずは使ってみなければ始まらないよねという事でどっちも始めてみます！
今回はNuxt編。

Firebaseのプロジェクトを作成

Nuxt使うならSSRしなきゃ！というイメージがあるのでそのための環境も用意。
今回はFirebase Functionsを選びました。

まずは https://console.firebase.google.com にて新規プロジェクトを作ります。

画面に従うだけなので省略！

名前を決めてプロジェクトを作成
プランをSparkからBlazeにアップグレード
Functionsを使えるようにしておく

Nuxtプロジェクトを作成

nuxtのプロジェクトを作るコマンドはこれ。

npx create-nuxt-app プロジェクト名

色々聞かれるので順番に答えていきます。

Project name: プロジェクト名
Programming language: JavaScript
Package manager: Npm
UI framework: Vuetify.js
Nuxt.js modules:
Linting tools: 
Testing framework: Jest
Rendering mode: Universal (SSR / SSG)
Deployment target: Server (Node.js hosting)
Development tools: 
Continuous integration: GitHub Actions
What is your GitHub username? yourname
Version control system Git

こんな感じ。

Firebaseをつなげる

プロジェクトが作れたらそこにfirebaseをつなげます。

## 移動
cd APP名

## 接続！
firebase init

ここでもいろいろ聞かれるので順番に答えていく。

SSR化

SSR（サーバーサイドレンダリング）という手法（？）にも挑戦したいので設定します。

サーバーにjsが動く環境を用意して、そこでNuxt.jsを起動。レンダリングまで終わらせた状態でクライアントに投げる。
こうすることで表示がかなり速くなる。

説明はこちらがとても分かりやすかったです。

/firebase.jsonを編集

{
 ## ③
 "functions": {
   "functions": {
     "source": "functions"
   }
 },
 ## ①
 "hosting": {
   "public": "static",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ],
   ## ②
   "rewrites": [
     {
       "source": "**",
       "function": "ssr"
     }
   ]
 }
}

まず ① hosting の設定が読まれて public に設定されているフォルダ（ここではstaticフォルダ）にindex.htmlが存在しない場合、 ② rewrites が読まれて ssr という名前の ③ functions が起動する。

という流れ。
"function": "ssr" の ssr については後述します。

functionsの設定

## 移動
cd functions

## 必要なパッケージをインストール
npm install --save nuxt

/package.jsonを編集

{
 "name": "functions",
 "description": "Cloud Functions for Firebase",
 "scripts": {
   "serve": "firebase serve --only functions",
   "shell": "firebase functions:shell",
   "start": "npm run shell",
   "deploy": "firebase deploy --only functions",
   "logs": "firebase functions:log"
 },
　## ①
  "engines": {
    "node": "10"
 },
 "dependencies": {
   "firebase-admin": "^8.6.0",
   "firebase-functions": "^3.3.0",
   "nuxt": "^2.12.2"
 },
 "devDependencies": {
   "firebase-functions-test": "^0.1.6"
 },
 "private": true
}

① nodejsのバージョンが古いとfirebaseに怒られるので10に設定します。

/index.jsを編集する

const functions = require('firebase-functions');
const { Nuxt } = require('nuxt');

## ①
const nuxt = new Nuxt({
   buildDir: 'ssr',
   dev: false
});

## ②
exports.ssr = functions.https.onRequest(async (req, res) => {
   await nuxt.ready()
   return nuxt.render(req, res)
})

① ssrディレクトリをもとにNuxtを起動
ここでいうssrディレクトリは functions/ssrを指します。

② ssr という名前でexport
出てきましたね ssr
/firebase.jsonを編集で書いた rewrites の "function": "ssr" はここに繋がります。

デプロイ

いよいよデプロイ！
これで完了ですね！

## webpackを利用してアプリケーションをビルド
npm run build

## 作成されたアプリケーションをfunction配下にコピー
cp -R .nuxt/dist functions/ssr/dist

## firebaseにアップロード
firebase deploy

おわり

今回はnuxt × firebaseの環境構築からデプロイまで行いました。
非常に簡単で、特に詰まる所もなかったのはいいですね。

個々のファイルについても HTML JS CSS が一つにまとめられているのはスコープも明確で素晴らしいと思いました。

次はNext × Vercelをやってみたいと思っています。
今のところNuxtに不満点はないので、どちらに落ち着くかはわかりませんね。
Nextが素晴らしいという声はたくさん聞くので楽しみにしながら、また次回書いていきます！