※ Contentful と Nuxt.js の説明は省きます。
www.contentful.com
ja.nuxtjs.org
ContentfulとNuxt.jsをつかってウェブサイトを使う場合、こちらの公式のドキュメントを参考にしていました。
が。Nuxt.jsの2.13からdotenvの扱いがより便利になったみたいなので、そちらの書き方で書き直してみます。
dotenvを導入する
yarn add -D dotenv
.envをつくる
CTF_SPACE_ID=HOGEHOGE CTF_CDA_ACCESS_TOKEN=FUGAFUGA
nuxt.config.jsを編集する
require('dotenv').config(); const { CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN } = process.env; export default { privateRuntimeConfig: { CTF_SPACE_ID, CTF_CDA_ACCESS_TOKEN }, publicRuntimeConfig: { CTF_SPACE_ID: process.env.NODE_ENV !== 'production' ? CTF_SPACE_ID : undefined, CTF_CDA_ACCESS_TOKEN: process.env.NODE_ENV !== 'production' ? CTF_CDA_ACCESS_TOKEN : undefined } };
Contentfulを読み込むvueファイルを編集(TypeScript)
<script lang="ts"> import * as contentful from 'contentful'; import { Component, Vue } from 'nuxt-property-decorator'; @Component({ async asyncData({ $config }) { const contents = await contentful.createClient({ space: $config.CTF_SPACE_ID, accessToken: $config.CTF_CDA_ACCESS_TOKEN }).getEntries(); return { contents }; } }) export default class IndexPage extends Vue {} </script>
ざっくり書くとこんな感じです。
ポイントとしては、
❶ process.envやnuxt.config.jsの値は正確には隠蔽できてない(フロントからも読み取れてしまう)
❷ privateRuntimeConfigはフロントから読み取れないのでそちらを使う
❸ 開発時に困るので、開発時はpublicRuntimeConfigを使う(本番ではundefinedにする)
という感じです。