Help us understand the problem. What is going on with this article?

nuxt2 + firebaseでサーバサイドレンダリングする

More than 1 year has passed since last update.

フロントエンド素人ですが、Nuxt2がリリースされたのでfirebaseでSSRしてみました。
基本的にはほぼNuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現するの内容と変わりません…。

今回のサンプルコードはgithub上に公開しています。
https://github.com/polidog/nuxt2-firebase-ssr

まずはnuxtの環境を用意する

$ mkdir ssr-app
$ cd ssr-app
$ npx create-nuxt-app src

途中「Use a custom server framework」と聞かれますが迷わず「none」にしました。

Firebaseの環境を用意する

$ firebase init hosting
$ firebase init functions
$ cd functions
$ npm i -S nuxt express

Cloud Functions実装をする

SSRするためにfunctions/index.jsに実装していきます。

index.js
const functions = require('firebase-functions');
const express = require('express');
const { Nuxt } = require('nuxt');

const app = express();
const nuxt = new Nuxt({
    dev: false,
    buildDir: 'nuxt',
    build: {
        publicPath: '/assets/'
    }
});

function handleRequest(req, res) {
    res.set('Cache-Control', 'public, max-age=600, s-maxage=1200');
    return new Promise((resolve, reject) => {
        nuxt.render(req, res, (promise) => {
            promise.then(resolve).catch(reject);
        });
    });
}

app.use(handleRequest);

const runtimeOpts = {
    timeoutSeconds: 300,
    memory: '1GB'
}
exports.ssrapp = functions.runWith(runtimeOpts).https.onRequest(app);

ビルド設定を変更する

src/nuxt.conf.jsの設定を変更する

nuxt.conf.js
  /*
  ** Build configuration
  */
  buildDir: '../functions/nuxt',
  build: {
    publicPath: '/assets/',
    extractCSS: true,

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {

    }
  }

Hostingの設定を変える

firebase.jsonの設定を変更する

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

ローカルで動くか検証する

$ cd src
$ npm run build
$ cd ../
$ rm -rf public/*
$ cp -R functions/nuxt/dist/ public/assets
$ cp -R src/static/* public
$ firebase serve --only functions,hosting --project your-project-id

nuxtのbuildとかそのへんをnpmのscriptで実行出来るようにする。

package.json
{
  "name": "nuxt2-firebase-ssr",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "build": "rm -rf public/* && cd src && npm run build && cd ../ && cp -R functions/nuxt/dist/ public/assets && cp -R src/static/* public",
    "serve": "npm run build && cd firebase serve --only functions,hosting"
  },
  "author": "polidog"
}

デプロイ時にbuildしてからデプロイするようにする

firebase.jsonのfunctionsでデプロイ前に実行するコマンドを指定できるので、そこでnpm run buildを指定します

firebase.json
{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [{
      "source": "**",
      "function": "ssrapp"
    }]    
  },
  "functions": {
    "predeploy": [
      "npm run build"
    ]
  }
}

デプロイする

$ firebase deploy --proejct your-project-id

最後に

簡単にSSRな環境を作れるfirebaseはすごいなぁーと。
ただし「Sparkプラン」だとSSRできないので、他のプランに変更してください。

polidog
web系エンジニアです。
http://polidog.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away