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

FlamelinkのクライアントをNuxtで作成してみる

■ 今回お話すること

  • ヘッドレスCMS「Flamelink」で書いたブログをFlamelinkSDKを利用してNuxtで表示させる

■ 前提

■ 今回の環境

> 開発端末

MacOS Mojave 10.14.1

> Nuxt

nuxt: 2.0

> Firebase

firebase: 5.7.3
firebase CLI: 6.1.2
firebase-admin: 6.5.0

> Flamelink

flamelink: 0.19.6

■ 環境構築

1. Nuxtのプロジェクトを作成する

  • npxコマンドでプロジェクト作成します
$ npx create-nuxt-app <project-name>
  • プロジェクト作成時に設定した内容です
    98.nuxt_初期設定.png

  • 一度起動して動くか確認してみます

$ npm run dev

2. 必要なライブラリ設定

  • package.jsonに以下のライブラリを追加します
package.json
  "dependencies": {
    "firebase": "^5.7.3",
    "firebase-admin": "^6.5.0",
    "flamelink": "^0.19.6"
  },
  • Installしておきましょう。
$ npm install

3. Flamelinkを使う設定

  • Nuxt.configに、以下の設定を追加してください。
  plugins: [
    '@/plugins/flamelink'
  ],

4. Firebaseの設定

  • サービスアカウント情報を含むJsonファイルをFirebase側で生成、ダウンロードし、Nuxtのプロジェクト配下に設置します。
    設定 > サービスアカウント > 新しい秘密鍵の生成 で作成できます。
    firebase_サービスアカウント.png

  • .envファイルの設定を行います。 『Firebase > Authentication > ウェブ設定』で表示される値を.envファイルに設定します。

.env
FLAMELINK_API_KEY="<firebase-api-key>"
FLAMELINK_AUTH_DOMAIN="<firebase-auth-domain>"
FLAMELINK_DB_URL="<firebase-db-url>"
FLAMELINK_PROJECT_ID="<firebase-project-id>"
FLAMELINK_STORAGE_BUCKET="<firebase-storage-bucket>"
FLAMELINK_PATH_TO_SERVICE_ACCOUNT="<firebase-path-to-service-account>"
  • Realtime Databaseの設定をします。私がセットアップしていた時点での公式では、以下のような設定をおこなうと書かれていましたが、ページ遷移を実施した時にPermissionエラーとなったので、少し変更しました。

公式

{
  "rules": {
    "flamelink": {
      ".read": "auth != null",
      ".write": "auth != null",
      "users": {
        ".indexOn": ["id", "email"]
      }
    }
  }
}

今回設定したRule

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null",
    "flamelink": {
      ".read": "auth != null",
      ".write": "auth != null",
      "environments": {
        ".read": true,
      },
      "users": {
        ".indexOn": ["id", "email"]
      }
    }
  }
}

5. ディレクトリ構成

  • 最終的なディレクトリ構成はこんな感じです。
    スクリーンショット 2019-01-13 18.41.34.png

6. Firebaseにホスティングする

  • generateを実行して、ホスティングするファイルを生成しましょう。
$ npm run generate
  • Firebaseへdeployします。
$ firebase deploy

■ 実装ファイルの説明

  • asyncDataでFlamelinkから取得しています。
    flamelink.content.getの部分ですね。
    'myblog'の部分は、FlamelinkのSchemesで設定したidになります。
index.vue
<script>
export default {
  async asyncData({ app }) {
    try {
      const myblog = await app.flamelink.content.get('myblog', {
        populate: ['image']
      })
      return { myblog }
    } catch (err) {
      console.log(err)
      return { myblog: [] }
    }
  }
}
</script>

ちなみに・・・Flamelinkから取得したデータ構造はこんな感じです。
スクリーンショット 2019-01-13 18.54.40のコピー.png

■ 今日の成果物

■ あとがき

  • Realtime DatabaseのRulesでPermissionエラーが出たときは一瞬戸惑ったんですが、Firebaseの癖がわかれば爆速かと思いました。
  • とりあえず、Flamelinkで書いたブログを画面に表示させたくてNuxtで作ってみましたが、今流行の(?)のJAMstackなブログ作成にとりかかります(笑)

■ 参考リンク

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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