Nuxt.js + microCMS + NetrifyでJamstackを実装しつつAPIキーを隠す 🔑

micoCMSを使った実装

基本的には公式のブログの通りに実装すればOKです。

https://microcms.io/blog/nuxt-secure-api-key/microcms.io

.env

API_KEY=XXXXXXXXXXXX

nuxt.config.js

require('dotenv').config();

const { API_KEY } = process.env;
const isDevelop = process.env.NODE_ENV !== 'production';

export default {
  target: 'static',

  [isDevelop ? 'publicRuntimeConfig' : 'privateRuntimeConfig']: { apiKey: API_KEY }
};

pages/index.vue

import axios from 'axios';
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  components: {},
  async asyncData({ $config }) {
    const url = 'https://XXXX.microcms.io/api/v1/XXXX';
    const { data } = await axios.get(url, {
       headers: { 'X-API-KEY': $config.apiKey }
    });

    return data;
  }
})
export default class IndexPage extends Vue {
  contents: any[];
}