はじめに
こんにちは。
こちらの記事では、Nuxt.js用モジュールを使用したAPI通信の実装を行う方法を記しています。
以前にmicroCMSとの通信には、axiosを使った実装の記事を執筆しました。
ですが、2021年6月30日にmicroCMS公式から、Nuxt.js用モジュールを使用した方法が公開されていましたので、備忘録も兼ねて執筆いたします。
実装手順
公式の手順の通り設定を進めていきます。
1. モジュールのインストール
下記のコマンドを実行して、モジュールのインストールを行います。
npm install nuxt-microcms-module
package.json のdependenciesにモジュールが追加されます。
{
"dependencies": {
"nuxt-microcms-module": "^2.0.0"
},
}
2. nuxt.config.jsへの追記
nuxt.config.js へ以下のように追記します。
export default {
buildModules: [
'nuxt-microcms-module'
],
microcms: {
options: {
serviceDomain: process.env.SERVICE_DOMAIN,
apiKey: process.env.API_KEY,
},
mode: process.env.NODE_ENV === 'production' ? 'server' : 'all',
//mode: all でも可。
},
};
modeのデフォルト値はallで、SPA実装の場合はmode: allでも正常に動作します。ただし、SSR実装の場合は、本番環境でサーバーサイドのみの読み込みを行うため、process.env.NODE_ENV === 'production' ? 'server' : 'all'を指定する。
3. .envファイルの作成
.envファイルを作成して環境変数にてAPIキーを管理します。
API_KEYには、microCMSのX-MICROCMS-API-KEYを設定。
SERVICE_DOMAINには、'https://サービス名.microcms.io/api/v1/APIのエンドポイント'の中の「サービス名」に当たる部分を設定します。
API_KEY=0000000000000000000
SERVICE_DOMAIN=ooooooooooooo
.envファイルに記述する際は、=(イコール)の前後に空白は使用せず、文字列でも''(シングルクォート)や""(ダブルクォート)は不要。
これらをつけてしまうと、画面が描画されなくなってしまいます。
Nuxt.jsにおける、環境変数の管理は
@nuxtjs/dotenvを使用していましたが、Nuxt2.13以降はランタイム構成が推奨されているようです。
【参考記事】
@ nuxtjs / dotenvからランタイム構成への移行
dotenvはもう古い！最新Nuxtの環境変数管理方法
ただし、今回使用するモジュールで環境変数を管理する場合は、runtimeConfigを使用せずとも$microcms.get()で通信を行うことができます。
4. pages側の設定
設定したモジュールをクライアントサイドで呼び出します。
下記のように記述を行うことで、データを呼び出すことができます。
<template>
<div>
<pre>{{ data }}</pre>
</div>
</template>
<script>
export default {
async asyncData({ $microcms }) {
const data = await $microcms.get({
endpoint: 'APIのエンドポイント',
});
return { data };
}
}
</script>
上記のようにdataを返すことで、APIからデータを取得できると思います。
おわりに
ここまでNuxt.js用モジュールを使用したAPI通信の実装方法についてまとめました。
実装してみる中で、古い記事を参照していてエラーが発生してしまったので、公式リファレンスを参照する重要性を改めて感じました。Nuxt.jsでの環境変数管理についても復習することができたので、今後の開発でも活かしていきます！
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！