JAMstack で初めてのホームページ制作の手順を紹介します（空のブログ構築まで）
目次
前回の記事に引き続き、JAMstack 構成でのサイト構築を試行錯誤してみたいと思います。前回の記事はこちら。
JAMstack で初めてのホームページ制作に挑戦！
試行錯誤する環境は、前回に引き続きこちらです。
- microCMS + netlify + Nuxt.js
- Windows11 + VS Code + github
主に参考にしたmicroCMSの記事をまとめておきます。いずれもmicroCMS社のブログ記事です。
前回の記事で、JAMstack 構成で記事の作成～ビルド・デプロイ～配信までの一通りの流れが実現できました。今回は、サイトのそのものをmicroCMS と Nuxt を使いながら作りこんでいきます。
JAMstack でWebメディアサイト（ブログ形式）を作ってみる
今回は、Webメディア形式のサイト作りを目指していきます。ちょうど弊社でも、経営者インタビューを行って記事を作成し、色々なチャレンジの様子をメディアにしていくことを計画していましたので、その眠っていたプロジェクトをたたき起こします。ただし、今回はmicroCMSの無料プランの範囲で試行錯誤するため、3APIという制限があることから簡素なメディアになってしまいます。
microCMSのAPIをトップページで利用できるようにする
Webメディアのトップページは、よくあるシンプルなデザインとして新着記事が表示されるようにしたいと思います。新着記事を表示するには、microCMS側で作成されたブログ記事から、APIを通じてデータを取得する必要があるので、まずはAPI連携部分を設定していきましょう。
よくあるサンプルコード上では、APIキーを直接vueファイルに記載しているケースもありますが、本記事ではキーの隠蔽から実施します。
microCMS のNuxt用SDKモジュールの利用と環境構築
microCMS が開発用SDKを提供してくれていますので、ありがたく利用させていただきます。こちらの記事も参考にしながら、準備を進めていきましょう。
まずはSDKをインストールします。
npm install nuxt-microcms-modulepackage.json に記載が追加されていればOKです。続いて、環境変数にキーの設定をします。まずは、.envファイルをプロジェクト直下に作成し、API_KEYとSERVICE_DOMAINの値を設定しましょう。
API_KEYとSERVICE_DOMAINは、microCMSの設定画面のAPIキーから確認できます。文字列の設定の癖で、ダブルクォーテーションでくくってしまってエラーが出てしまいちょっと苦戦しました。.envファイルはキー文字列をそのまま設定が可能です。
続いて、nuxt.config.jsに設定を追加します。buildModulesに”nuxt-microcms-module”を追加することと、microcmsセクションを追加しています。
buildModules: [
// ビルドモジュールに"nuxt-microcms-module"を追加
"nuxt-microcms-module",
],
// microcms セクションを追加
microcms: {
options: {
serviceDomain: process.env.SERVICE_DOMAIN,
apiKey: process.env.API_KEY,
},
mode: process.env.NODE_ENV === "production" ? "server" : "all",
},ここまで設定ができていれば、vueファイルでmicroCMSのSDKが利用できるはずです。実際に、index.vueを修正して動作することを確認してみましょう。
<template>
<div class="wrapper">
<div class="divider">
<div class="container">
<ul>
<li v-for="content in contents" :key="content.id">
<nuxt-link :to="`/${content.id}`">
<dl class="content">
<dt class="title">{{ content.title }}</dt>
</dl>
<br>
</nuxt-link>
<p> {{content.body}} </p>
</li>
</ul>
</div>
<aside class="aside">
</aside>
</div>
</div>
</template>
<script>
export default {
async asyncData({params, $microcms}) {
const page = params.id || '1';
const limit = 100;
const data = await $microcms.get({
endpoint: 'blog', // endpoint は実際の環境に合わせましょう
queries: {
limit,
offset: (page - 1) * limit,
},
});
return {
...data,
}
},
}
</script>$microcms.get メソッドでREST APIがコールされ、microCMS側から記事データを取得できます。cssは何も記載していないため、ただタイトルと本文が表示されるだけですが、下記の記事作成を行うことで、取得された記事内容が画面に出てくるようになるはずです。
Netlify に環境変数envを設定する
.envファイルはローカル環境に設定を行ったため、実際にDeployするホスティングサービスにも値を設定しましょう。Netlifyでは、サイトの設定における、Build & deploy の Environmentに設定箇所があります。
microCMS のブログ記事APIを作成する
呼び出し側は上記の設定で完成しましたので、microCMSのブログ記事用APIをカスタマイズしていきましょう。初期登録時に用意されるAPIでも利用できますが、今後の拡張を見据えてちょっとだけスキーマを修正しています。
続いて、記事もいくつか登録しておきます。
さて、これで準備は完了です。さっそく実行して、画面に記事内容が表示されることを確認しましょう。
npm run dev
記事個別ページを追加する
pagesフォルダの中に_slug/index.vue を追加し、詳細ページを定義します。内容はこちら。
<template>
<main class="main">
<h1 class="title">{{ title }}</h1>
<p class="publishedAt">{{ publishedAt }}</p>
<div class="post" v-html="body"></div>
</main>
</template>
<script>
export default {
async asyncData({ params, $microcms }) {
const data = await $microcms.get({
endpoint: 'blog',
contentId: params.slug,
queries: {
depth: 2,
}
});
return {
...data,
}
},
data() {
return {
publishedAt: '',
ogimage: null,
};
},
}
</script>トップページの各記事のタイトルをクリックして、個別ページが表示されればOKです。
eslint のエラーが表示される場合
環境によっては、下記のエラーが発生することがあります。
Component name "index" should always be multi-wordVueコンポーネントの名前には複数のワードを用いましょう、と怒られています。Nuxtプロジェクトを作成してすぐにrun dev するとこのエラーが発生することもあります。
NuxtLogoは、NuxtとLogoの複数ワードを用いているため OK ですが、Tutorialやindexは単体ワードなので怒られてしまう、ということです。NuxtJSの構成では、index.vueを各階層で作ることがスタンダードでもあり、このルールは無視しておくように設定を追加するのがいいでしょう。その場合は、.eslintrc.jsに以下の一文を追加します。
rules: {
'vue/multi-word-component-names': 'off'
},無事、エラーが発生しなくなればOKです。
次の記事では、Webメディアとしてサイトを機能実装していく予定です。
弊社ではホームページの制作について、ご要望に応じた最適な制作方式・運用管理方式をご提案いたします。お困りごとがありましたら、お気軽にお問い合わせください。
