Jamstack Docker + Nuxt + Contentful + Vuetify + Netfliyでポートフォリオ作成②

前回の続きです。
https://qiita.com/knitbow/items/89478226da7bd365b9cd

やりたいこと

• Nuxtでフロントを作成
• Dockerで環境構築
• Contentfulでポートフォリオ情報の取得
• Vuetifyで見た目整形
• Netfliyで公開

NuxtとContentfulの連携部分

• Contentfulにて、SpaceIDとトークンの確認
  Setting - API kyes
  
  Add API Keyをクリック

Space IDとContent Delivery API - access tokenを確認

.envの作成

.env

CTF_SPACE_ID=ContentfulのspaceID
CTF_CDA_ACCESS_TOKEN=Contentfulのaccess token

環境ファイルはgit保存しないように、ignore設定

lib/config.js

require('dotenv').config()

function getValidConfig(configEnv, keys) {
  let { config, missingKeys } = keys.reduce(
    (acc, key) => {
      if (!configEnv[key]) {
        acc.missingKeys.push(key)
      } else {
        acc.config[key] = configEnv[key]
      }
      return acc
    },
    { config: {}, missingKeys: [] }
  )

  if (missingKeys.length) {
    throw new Error(`Contentful key is missing : ${missingKeys.join(', ')}`)
  }
  return config
}

module.exports = {
  getConfigForKeys(keys) {
    const configEnv = {
      CTF_SPACE_ID: process.env.CTF_SPACE_ID,
      CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN
    }
    return getValidConfig(configEnv, keys)
  }
}

キー管理のConfigを用意

plugins/contentful.js

const contentful = require('contentful')
const defaultConfig = {
  CTF_SPACE_ID: process.env.CTF_SPACE_ID,
  CTF_CDA_ACCESS_TOKEN: process.env.CTF_CDA_ACCESS_TOKEN
}

module.exports = {
  createClient(config = defaultConfig) {
    return contentful.createClient({
      space: config.CTF_SPACE_ID,
      accessToken: config.CTF_CDA_ACCESS_TOKEN
    })
  }
}

Contentfulを利用するためのjsを用意

nuxt.config.js

import colors from 'vuetify/es5/util/colors'
import {createClient} from './plugins/contentful.js'

const pkg = require('./package')
const {getConfigForKeys} = require('./lib/config.js')
const ctfConfig = getConfigForKeys([
  'CTF_SPACE_ID',
  'CTF_CDA_ACCESS_TOKEN'
])

const {createClient} = require('./plugins/contentful')
const cdaClient = createClient(ctfConfig)

export default {
  mode: 'universal',

略・・・
}

nuxt.config.jsを設定

参考にしたサイト

• https://qiita.com/isihigameKoudai/items/3e45ade7c438176a4cc9