expexp.jp

JavaScript , WordPress

Nuxt.jsでWordPressの記事をNetlifyにデプロイする（ざっくり版）

Nuxt.jsでWordPressの記事をNetlifyにデプロイする方法を紹介します。

WordPressの記事データはREST API（JSON形式）で取得し、phpファイルではなく、静的ファイルでジェネレートしてNetlifyにデプロイします。

NetlifyはGithubにpushするだけでデプロイを行ってくれるので便利です。もちろん記事投稿のフックもあります。

今回はアウトプット会用のため、ざっくり版になってしまいましたが、後日書き直します。

あとREST APIのサイトは見辛いので、英語ですけど公式Handbookの方が調べるのに良いです。

今回必要なもの

  1. コードを書ける環境
  2. 稼働中のWordPress
  3. GitHubのアカウント（じゃなくてもいいけど楽）
  4. Netlifyのアカウント（じゃなくてもいいけど楽）
  5. 諦めない心

今回の流れ

  1. Nuxt.jsで記事取得用のページを作る
  2. AxiosでWordPressの記事データを引っ張ってくる
  3. 静的ファイルの出力設定をする
  4. GitHubにリポジトリを作る
  5. NetlifyにGitHubのリポジトリを登録
  6. デプロイ（とりあえず見れる状態）

必要なパッケージ

Nuxt.js（nuxt）本体と、API通信に使うAxios（@nuxtjs/axios）が必要になります。他はお好きにどうぞ。

基本的にはこれだけです。メディアもちゃんと取れます。

Axiosの設定

Nuxt.jsでREST APIと通信するため、まずはnuxt.config.jsでAxiosを使えるように設定を記述します。

nuxt.config.js

const axios = require('axios')

// 下記はサンプルです。取得したいAPIのURLを入れてください
const = 'https://www.expexp.jp/wp-json/wp/v2/'

module.exports = {
  // generateの設定は後述

  head: {
    // 略
  },

  modules: [ '@nuxtjs/axios' ],

  axios: { baseURL: apiURL }
}

記事出力用ページの作成

Nuxt.jsでWordPressの記事を出力するページを用意します。WordPressであればindex.phpとかsingle.phpとかに当たるものです。

REST APIでpostsデータを取得し、いい感じに出力します。今回は記事一覧と詳細しかやらないけど、カテゴリーやタグページも作れます。

index.vue（例）

記事一覧ページ。WordPressで言うとArchiveとかの一覧系ページ。

<template>
<!-- Vueのコードは略！ 例：postsをv-forなどで展開 -->
</template>
export default {
  data () {
    return {
      // Axiosで取得したWPの記事データを入れる箱を用意
      posts: {}
    }
  },

  async asyncData ({ $axios }) {
    return await $axios.get(`${$axios.defaults.baseURL}posts?_embed`, {
      params: {
        // 取得したいページ、記事数
        // 必須ではないけど、明示しておくとわかりやすい。下記はデフォルト。詳しくはHandbook
        page: 1,
        per_page: 10
      }
    })
    .then(response => {
      return {
        posts: response.data
      }
    })
  }
}

_id.vue（例）

<template>
<!-- Vueのコードは略！ postに記事データを入れるので、それを出力 -->
</template>
export default {
  data () {
    return {
      // Axiosで取得したWPの記事データを入れる箱を用意
      post: {}
    }
  },
  async asyncData ({ $axios, params }) {
    return await $axios.get(`${$axios.defaults.baseURL}posts/${params.id}`)
    .then(response => {
      return {
        post: response.data
      }
    })
  }
}

記事詳細ページ。singleとかpageとか。記事IDでページを作成するが、WordPress側のパーマリンクが基本（?p=123）になってるとREST APIが使えないので要注意。

静的ファイル出力用設定

後回しにしていたgenerateの設定です。

なぜ設定が必要か？

Nuxt.jsのルーティングでは、WordPressの記事（_id.vue）をbuild出来ません。つまり静的ファイルが生成されません。

そこでconfigでgenerateの設定が必要になります。

nuxt.config.js

const axios = require('axios')

// 下記はサンプルです。取得したいAPIのURLを入れてください
const = 'https://www.expexp.jp/wp-json/wp/v2/'

module.exports = {
  // 取得する記事を静的ファイルにするための処理
  generate: {
    routes (callback) {
      axios.get(`${apiURL}posts`).then(response => {
        // WordPressの総記事数を取得
        const totalPosts = response.headers['x-wp-total']

        // 記事、カテゴリー、タグなどを取得
        Promise.all([
          axios.get(`${apiURL}posts?per_page=${totalPosts}`),

          // 下記はカテゴリーページも作る例
          axios.get(`${apiURL}categories`)
        ])
        .then (axios.spread(function (posts, categories) {
          let routes1 = posts.data.map((post) => {
            return {
              route: `/blog/${post.id}`,
              payload: post
            }
          })

          let routes2 = categories.data.map((category) => {
            return `/blog/category/${category.slug}`
          })

          callback (null, routes1.concat(routes2))
        }))
      })
    }
  },

  env: {
    // そのほかの設定は略
  }
}

これで記事の静的ファイルも作られる。

GitHubにリポジトリを作る

今回の内容でリポジトリを作ってください。

デプロイ設定

NetlifyにアクセスしてGitHubと連携してください。GitHubのアカウントでNetlifyにログインしていると楽。

「New site form Git」ボタンからGitHubのリポジトリとNetlifyを繋ぎます。接続するとデプロイ出来るようになるので、早速デプロイしましょう。エラーが無ければ、https://XXXXXXX.netlify.comみたいなURLが作成されます。あとWordPress側で海外IPを弾かない設定にしないとエラーになりますので要注意です。

以上です！