Nuxt.js+microCMS+Vercelで記事一覧と詳細ページを作成して公開して変更される度に（pushする度に）slackに通知させるまで

BLOG
知る。残す。伝える。

2020.05.09
JAMstack

Nuxt.js+microCMS+Vercelで記事一覧と詳細ページを作成して公開して変更される度に（pushする度に）slackに通知させるまで

とにかく公開までの流れをやりたかったので情報は超超最小限備忘録です。
CSSは省いています。
そしてワタシはどうしてもSlackに通知させたかった

※デモページは一応あるのですがCSSを全く設定してない故にデザイン的に雑すぎるので人様に見せれないと判断し、載せません

（1）microCMSにて任意のAPIスキーマを用意して記事を投稿
（2）Nuxt.jsをインストールして記事一覧を作成する
（3）記事詳細を作る
（4）Vercelのデプロイ用にnow.jsonを作成
（5）githubに任意のリポジトリを作成してpush
（6）Vercelにログイン（サインイン）してgithubのプッシュしたリポジトリと連携
（7）Vercelの管理画面のナビ「Integrations」からslack連携ができた

（1）microCMSにて任意のAPIスキーマを用意して記事を投稿

今回作成したスキーマ
title タイトル
disc コンテンツ（リッチエディタ）

作り方（公式）

（2）Nuxt.jsをインストールして記事一覧を作成する

とりあえずソース

/pages/index.vue

<template>
<div>
<div v-for="item in items">
<nuxt-link :to="'hogehogehoge/' + item.id">
<h2>
{{ item.title }}
</h2>
</nuxt-link>
</div>
</div>
</template>

<script>


import axios from 'axios'

export default {
data () {
return {
items: ''
}
},
head: {
script: [
],
}, 
async asyncData () {
const { data } = await axios.get('microCMSの管理画面で取得', {
headers: { 'X-API-kEY': 'microCMSの管理画面で取得' }
})
return {
items: data.contents
}
}
}

</script>

【メモ】

Nuxt.jsインストール（公式）

◎getのAPIリクエスト先URLにパラメータをつけることで任意の情報だけを取得したりも可能

パラメータ（公式）

◎nuxt-link は aタグよりもページ表示速度が早い

（3）記事詳細を作る

とりあえずソース

pages/hogehogehoge/_id.vue

<template>
<div>
<h2>{{ item.title }}</h2>
<div class="content" v-html="item.disc"></div>
</div>
</template>

<script>


import axios from "axios";

export default {
async asyncData({params}) {
const { data } = await axios.get(
`microCMSの管理画面で取得${params.id}`,
{
headers: { "X-API-KEY": 'microCMSの管理画面で取得' }
}
);
return {
item: data
};
}
};

</script>

【メモ】

◎パラメータを使って動的なルーティングを定義するには_idなどアンダースコアをつけたファイル名にする必要がある

ルーティング（公式）

◎asyncData()でAPIにリクエストするときにidを取得してその記事の詳細ページの情報を取得する

asyncData()（公式）

記事詳細取得（公式）

◎本来APIキーは本来はセキュリティ的に保護した方が良さそう

APIキー保護（公式）

◎${params.id}などを連結するときはバッククオートで囲う

（4）Vercelのデプロイ用にnow.jsonを作成

とりあえずソース
（正式な配置場所はわからなかったがnuxt.config.jsと同じ階層に配置したら無事動いた）

now.json

{
"version": 2,
"builds": [
{
"src": "nuxt.config.js",
"use": "@nuxtjs/now-builder",
"config": {}
}
]
}

【メモ】

◎now.jsonを配置することによりVercel画面上でデプロイコマンドを毎回設定しなくて良くなる

now.json（公式）

（5）githubに任意のリポジトリを作成してpush

git使い方は省略

（6）Vercelにログイン（サインイン）してgithubのプッシュしたリポジトリと連携

Vercel

【メモ】

連携方法はVercelの画面の案内に沿って進んでいけば簡単に連携できた。
「Import Project」ボタンで任意のリポジトリと連携しようとした時に、コマンドを設定する画面が出てくるがnow.jsonを設置したので何も入力せず「Import」をクリックするのみ。
勝手にデプロイされてSTATUSが「Ready」になったら公開成功！（Readyになるまで2分ぐらいかかった）