Nuxt.js × Netlify × MicroCMSでJamstackブログを公開しよう【完全図解】

こんにちは、まめぞうです。

本日はとても盛り沢山な内容でお届けします。

- Nuxt.js
- Netlify
- MicroCMS

これらを使ってJamstackにチャレンジしてみましょう！
手順をなぞって、カスタムドメインでブログサイトを公開するところがゴールです！しかも完全無料！
マイクロサービスへの応用も利くのでチャレンジして損はないと思います。

休日に何か取り組みたいあなた、是非この手順でチャレンジしてみませんか？
※クレジットカードは不要です。

# ここがポイント！

- 完全無料で自分のブログサイトが作れる。（ポートフォリオサイトやマイクロサービスでもOK！）
- GitHubが更新されると、自動でNetlifyがビルドし直すので、自動でサイトが更新される！
- 色々な技術を活用するので良い勉強になる！


# 対象読者

- Vue.js とか React.js などを勉強し始めてウェブ上にアプリをリリースしてみたい方。
- ちょっとしたポートフォリオやブログを作りたいかた。
- JamStackデビューしたい方。
- 自動ビルドとか少し憧れている方。

# 用意しておくもの

- GitHubのアカウント

# 手順

1. Netlify登録
2. ドメイン取得＆Netlifyにドメイン追加
3. GitHub連携＆テンプレートから新規作成＆ドメイン連携
4. MicroCMSアカウント作成
5. axiosでAPI連携

少々ボリュームのある記事となっておりますが、図解しつつなるべくわかりやすく手順を解説していますので是非チャレンジしてみてください。


# 1.Netlify登録
[Netlify](https://www.netlify.com/)は静的サイトを高速で提供できるWebサービスです。詳細は割愛させていただきます。
※NetlifyではGoogleChromeの自動翻訳でサービスを利用すると、エラーが発生する場合がありますのでご注意ください。
![netlify1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/b7d10332-fd66-d510-e086-351a8d1e2f00.png)
GitHubで登録すると、レポジトリの紐付けもカンタンにすることができます。
サインアップからGitHubを選択して
![netlify2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/750ac75c-fccb-b922-f0eb-de913c4dd96d.png)
アカウント連携しましょう！

![netlify3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/f3d1fb9d-1fa0-ee90-3e6d-f73663126fc7.png)


# 2. ドメイン取得
今回は無料というコンセプトなので [.tk]や[.ga]という無料ドメインを活用します。無料でドメインを取得できる海外のサービス**freenom**を利用します。
※もちろん有料ドメインでも代用可能です。
まずはGoogleアカウントなどで登録してください。

ドメイン管理サービス：[freenom](https://my.freenom.com/clientarea.php)
![domain1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/8f731475-d71e-94d7-de99-9fb72f1e9ae5.png)

### 2-1 ドメインの取得
**Service** → **Register a New Domain**をクリック。

![domain2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/e472651e-cdde-b030-38ca-b8d09f71e571.png)
取得したいドメイン名を入力します。
![domain3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/37d17249-d8eb-9aee-404c-ee78e099390d.png)

有効期限の設定をします。
**12 Months 0 FREE**を選択してチェックアウトに進みましょう。
![domain4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/56b5e924-cf71-969a-4f19-39c7783f6959.png)

利用規約に同意して**Complete Order**をクリック。
![domain5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/a28ba860-32f6-27a2-c0c8-38bbfd04708b.png)

取得できました！続いてNetlifyへの連携を行います。

### 2-2 Netlifyにドメインを追加
[Netlify管理画面](https://app.netlify.com/)からドメインを追加しましょう。
**Domains** → **Add or register domain** をクリック。
![domain6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/474fc328-fb1f-eb90-0760-ea44e98061ed.png)
先ほど取得したドメイン名を入力します。
![domain8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/68614ab5-ec24-6904-bc05-c8199cb3f6d8.png)
画面下の**Continue**をクリックします。
![ddd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/4affd362-46cb-a78d-e20b-63026774e10c.png)
すると以下の画面が表示されますので、**dns**から始まる4行をメモしておきます。ここからネームサーバーの登録という作業を行います。
![dddd.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/27a0c9a9-5bcf-a3e9-f3ff-f1220e21ad9b.png)
[freenom](https://my.freenom.com/clientarea.php?action=domains)にて取得したドメインの設定画面に先ほどの4行を入力します。
**Service** → **My Domains** へ移動し、 **ManageDomain** → **Management Tools** → **Namesesrvers** の順でクリック。
![domain12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/956915f5-871d-e901-9419-6812ace66152.png)
**Use custom nameservers** を選択して、1行ずつ順に入力します。![domain14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/92ef6137-34f4-a3d5-1d2b-37557db8b983.png)

※設定してから反映されるまで時間がかかる場合があります。最長24時間から72時間程度かかりますので気長に待ちましょう。

# 3. プロジェクトの作成
ドメインの取得が完了したところで、いよいよNetlify でのプロジェクト作成について進めていきます。
以下2通りの方法があります。
①GitHubにNuxt.jsなどのリポジトリを用意して紐付ける。
②[Netlify Template](https://www.netlifycms.org/docs/start-with-a-template/)からテンプレートを使って作成

ある程度詳しい人は②が爆速なので、おすすめです。
GatsbyやNext.jsのテンプレートが揃っていますのでReact推しの方も是非！

ただし、②の場合は色々なファイルがついてきてややこしいので、この記事では①の手順で解説します。

まず、前提としてNuxt.jsで「Hello World!」を表示できるGitHubのリポジトリが必要です。
[公式サイト](https://ja.nuxtjs.org/docs/2.x/get-started/installation#%E5%89%8D%E6%8F%90%E6%9D%A1%E4%BB%B6)を参考に作成して、GitHubにレポジトリを追加するところまで頑張ってください。

またはこちらの[記事](https://qiita.com/mamezou_yuki/items/8f3711eb64c4bb2c51f6)を参考に作成するか、一応今回の最終までのサンプルGitHubに置いておくので活用してみてください。
https://github.com/mamezou/nuxt_netlify_microcms_sample

### GitHubと連携してプロジェクトをNetlifyに反映する
以下手順でNetlifyとGitHubのプロジェクトを連携しましょう。
**New site from Git**をクリック
![build2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/c78e140c-af22-c2e5-e5b9-f377346df191.png)

**GitHub**をクリックして連携
![build1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/2afa1ba8-de53-ced1-4be0-e9dcdd0f7ee0.png)

以下のように入力（npmを利用している）してレッツビルド！
![build3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/9181c413-80ed-165a-f434-43b4e1beaf4b.png)

しばらくお待ちください・・。
![build4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/ce0cf757-d4d9-cf94-694e-910b0d60d210.png)

できたらプレビューを押してみましょう！
![build5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/1abc3421-c829-8211-8609-517b9eaed28a.png)

できました！

### ドメインを反映する
先ほどできたプロジェクトの管理画面で**Site settings** をクリックし、**Domain management**へ進みます。
![domain1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/65024771-ac2f-34ad-7874-25856d3a30e4.png)
**Add custom domain** をクリックします。
![domain2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/bab163a7-2d67-0cf2-391a-4713014f7313.png)
取得したドメイン名に変更しましょう。
![domain3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/af6ce7ad-6cb8-ed44-dc3f-22bb073df3e3.png)

ついでにプロジェクト名も変更しましょう。**General** → **Site details** → **Change site name**から変更できます。
![domain4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/f530b454-2aa1-5709-a943-e30589d1e2f8.png)

さらにHTTPSの設定もしておきましょう。


# 4. MicroCMS設定
今回は国産ヘッドレスCMSの[MicroCMS](https://microcms.io/)を活用します！
MicroCMSは無料で十分すぎるほどのデータが使用できます。

まずは、アカウント登録して組織を作成します。

続いて早速APIを作成していきましょう！
コンテンツ（API）の＋をクリックして
![スクリーンショット 2021-01-11 15.54.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/2b8e0785-ea77-4f42-0669-87bc9644240d.png)

API名とエンドポイント（スラッグ）を入力します![スクリーンショット 2021-01-11 15.56.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/064aedd9-96f1-4551-9467-1aa31e1c67b9.png)

次へに進み、リスト形式を選択して次へ。
![スクリーンショット 2021-01-11 15.57.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/728880a0-56b2-6607-266e-8ed56d1aa2f9.png)

以下の写真のようにAPIスキーマを定義してみましょう。
![スクリーンショット 2021-01-11 16.03.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/9419af7e-1ead-1e2a-ca46-9fc9a97f04a4.png)

完成しました！ここでテスト的に記事をいくつか作成しておきましょう。
![スクリーンショット 2021-01-11 16.05.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/b9cc0a99-beb9-61e4-ccff-659f22196898.png)

いよいよ大詰めです。コーヒーを飲んでひと休憩しましょう。



# 5. axiosでAPI連携
この章では、MicroCMSで作成したブログ情報をAPIによって取得して表示するところまでを目標にしたいと思います！

Nuxt.jsでは`asyncData`というPageテンプレートでのみ利用できる便利なフックがあり、今回は利用して作成します。[Nuxt.js公式ドキュメント](https://ja.nuxtjs.org/docs/2.x/features/data-fetching/#async-data)
※[おまけ記事](https://qiita.com/mamezou_yuki/items/6cf178592acdf95638bb)

まずはNuxt.jsのプロジェクトを開いてみましょう。
今回編集するのは**pagesディレクトリ**内のみです。


### 5-1 プラグインのインストール
`axios`とはブラウザ上などで別のWebサイトデータを取得することのできるJavaScriptライブラリです。ajax通信をします。
(PromiseベースのHTTPクライアントです。)

早速、以下コマンドでインストールしましょう。

```
npm install axios
```

すると、package-lock.jsonにも追記されます。


### 5-2 ディレクトリ準備
以下ディレクトリ図を参考に、pagesディレクトリにフォルダとファイルを作成してください。Nuxt.jsではフォルダやファイル名で自動的にページルーティングの設定をしてくれます。

```
pages/
.
├── blog　　　　　　　　　//追加
│   ├── _slug　　　　　　//追加
│   │   └── index.vue　//追加 | 記事詳細ページ
│   └── index.vue　    //追加 | 記事一覧ページ
└── index.vue

```

### 5-3 API確認
MicroCMSを開き、各種APIのエンドポイントなどを確認していきます。
![microcms_api.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/64c405d8-0132-1823-e81c-290e8f13e5eb.png)

以下のcurlコマンドのところは後で利用しますのでメモしておきます。
URLとAPIキーと言います。
また、取得ボタンを押してみましょう。
![microcms_api2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/100247c4-4cd0-9014-216b-3aba9641e12b.png)

レスポンスが成功すると以下のようにjson形式でデータが表示されます。
最終的に、こちらのキーからデータを読み込みます。メモしておきましょう。
![microcms_api3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/d86d11c8-0246-1cec-48a2-a7c08c36ad8e.png)

### ファイル編集
ここで編集するのは先ほど作成した二つのファイルです。

```
pages/
.
├── blog
│   ├── _slug
│   │   └── index.vue　| 記事詳細ページ
│   └── index.vue　    | 記事一覧ページ
└── index.vue

```

まずは記事一覧ページを作成しましょう。URLとAPIキーのみ変更して、あとはコピペでも大丈夫です。

```blog/index.vue
<template>
  <main>
    <h1>ブログ一覧</h1>
    <ul>
// 以下「contents」は5-2でレスポンスで登場した、jsonデータはじめの「contents」のことです。
      <li v-for="content in contents" :key="content.id">
        <nuxt-link :to="`/blog/${content.id}`">
          {{ content.title }}
        </nuxt-link>
      </li>
    </ul>
  </main>
</template>
<script>
import axios from "axios";
export default {
  async asyncData() {
    const { data } = await axios.get(
      // 5-2でメモしたURLを記載しましょう。
      "https://あなたのサービスID.microcms.io/api/v1/blog",
      {
        // 5-2でメモしたAPIキーを記載しましょう。
        headers: { "X-API-KEY": "あなたのAPIキー" }
      }
    );
    return data;
  }
};
</script>
<style></style>

```
続いて、記事詳細ページも作りましょう。

```/blog/_slug/index.vue
<template>
  <main>
// ここに5-2でメモしたキーを入れると、右側のバリューが出力されます。
    <h1>{{ title }}</h1>
    <p>{{ date }}</p>
    <div v-html="contents"></div>
  </main>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://あなたのサービスID.microcms.io/api/v1/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': 'あなたのAPIキー' }
      }
    )
    return data
  }
}
</script>
```

では、以下コマンドを入力して起動してみましょう！

```
npm run dev
```

そして以下リンクにアクセスすると・・・
http://localhost:3000/blog

ブログ一覧ページが表示されました！
![スクリーンショット 2021-01-16 20.18.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/3a73d134-62c6-8ce7-45ec-b9c83c276b16.png)

記事の詳細ページもアクセスしてみましょう。
![スクリーンショット 2021-01-16 20.20.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/351726/91050574-6156-d89d-c289-6dc650646046.png)


やった！できましたね！

あとはデザインをキレイにしたり、ページを増やしたりしてGitプッシュすれば、なんとNetlifyが自動でビルドしてくれて反映されるようになります！
なかなか良いポートフォリオではないでしょうか？

今回のサンプルをリポジトリでGitHubに置いておくので是非活用してみてください。
https://github.com/mamezou/nuxt_netlify_microcms_sample

ご意見や感想等あればお気軽にコメントをお願いします！
ご覧いただきありがとうございました。


# 詰まった時など参考になりそうな記事等

- [Nuxt.js + Netlifyで爆速構築するサーバーレス開発入門](https://qiita.com/isihigameKoudai/items/e3b136e9964f1d30d73d)
- [MicroCMS様の公式ブログ](https://microcms.io/blog/microcms-nuxt-jamstack-blog/)
- [Netlifyへデブロイするには？Nuxt.js公式](https://ja.nuxtjs.org/faq/netlify-deployment/)
- [Nuxt.js × axios の詳細ドキュメント](https://axios.nuxtjs.org/)