yuheijotaki.com

WordPress + Nuxt.js でポートフォリオサイトを作る その11

WordPressサイト（http://works.yuheijotaki.com/）の REST API と Nuxt.js でポートフォリオサイトを作成する。その11

f:id:jotaki:20190924093802p:plain

GitHub: https://github.com/yuheijotaki/works-nuxt
Netlify: https://works-yuheijotaki.netlify.com/

Google Analyticsの追加

Google アナリティクスを使うには？ によると公式 Google アナリティクスモジュール というものがあるらしいのでそちらを使う。

$ npm install --save-dev @nuxtjs/google-analytics

でモジュールインストールして nuxt.config.js の buildModules[] に

  // ...
  buildModules: [
    ['@nuxtjs/google-analytics', {
      id: 'UA-XXXXXXXX-XX'
    }]
  ],
  // ...

を追加すればOKみたい。

参考：
nuxt-community/analytics-module: Google Analytics Module

サイトマップの追加

サイトマップもモジュール使ってできるようなのでやってみる

npm install --save @nuxtjs/sitemap

nuxt.config.js には下記を追加

  // ...
  modules: [
    '@nuxtjs/sitemap'
  ],
  // ...

Axios で WordPressのエンドポイントを指定して下記のように指定

  // ...
  sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://works.yuheijotaki.com',
    routes(callback) {
      axios.get('https://works-wp.yuheijotaki.com/wp-json/wp/v2/posts?per_page=100&page=1&_embed=1')
        .then((res) => {
          var routes = res.data.map((post) => {
            return '/work/' + post.slug
          })
          callback(null, routes)
        })
        .catch(callback)
    }
  },
  // ...

$ npm run generate してみると /dist にsitemap.xmlが生成されているのが確認できる。

参考：

.env ファイルの作成

環境変数を使えるようにするには dotenv モジュールを使う

$ npm install -D @nuxtjs/dotenv

.env ファイルを作成して下記のようにみたく書く

API_URL = 'https://works-wp.yuheijotaki.com/wp-json/wp/v2/'
SITE_URL = 'https://works.yuheijotaki.com'

nuxt.config.js の export default { より前に

// .env読み込み
require('dotenv').config()
const { API_URL, SITE_URL } = process.env

を書いてあげて、 export default { の中には

export default {
  env: { API_URL, SITE_URL },
  modules: [
    '@nuxtjs/dotenv'
  ],
  // ...

とすると nuxt.config.js でも 各 .vueファイルでも.envで定義している環境変数が使えるようになる。

_slug.vue

  // ...
  async asyncData( { params } ) {
    const { data } = await axios.get(`${process.env.API_URL}posts?slug=${params.slug}`)
    // ...
  },
  // ...

のような感じで process.env.[変数名] という形で使う

このままだとNetlify側で.envの中は認識してくれないため、Netlify側で環境変数の指定を行う
Settings => Build & deploy => Environment にて添付のように .env と同じ値を指定する。

f:id:jotaki:20200225093012p:plain

参考：