uiuifree.com

- サイト制作のノウハウと最適化を目指して-

2020.3.23Nuxt.jsで301/404リダイレクトする方法

Nuxt.jsで301/404リダイレクトする方法

Vue.jsを使っている開発者がSEO対策の選択肢のひとつとしてNuxt.jsを選ばれる方が多いです。事前レンダリングを行う上でNuxt.jsはVue.jsと遜色なく使え非常に良いことが選択されてる理由かと思います。

Nuxt.jsではhtmlを事前にレンダリングする手段として nuxt generate を使う場合と、nuxt を立ち上げる2つの手段があります。nuxt generateはhtmlファイルを生成するのみですのでサーバーがapacheならhtaccessなどでリダイレクトができます。 しかしnuxtの場合、Expressを立ち上げあげているのでapacheと連携するのも少し手間だったりします。そんな時どうすれば簡単に実装できるか紹介していきたいと思います。

  1. この記事の目次
    1. リダイレクト方法
      1. redirect メソッド(301/302リダイレクト)
      2. error メソッド(404/500リダイレクト)
      3. @nuxtjs/redirect-moduleモジュール
    2. SSL対応
      1. redirect-sslモジュール

リダイレクト方法

redirect メソッド(301/302リダイレクト)

ユーザーを別のルートにリダイレクトさせます。ステータスコードはサーバーサイドで使用され、デフォルトは 302 です。 redirect([status,] path [, query])。

https://localhost:3000/item/1https://localhost:3000/item/ に301リダイレクトさせた場合などに使用します。

実装はasyncData又はcreatedで記述すればOK

<script lang="ts">
export default{
  asyncData({ redirect }) {
    return redirect(301, '/item/)
  }
}
</script>

error メソッド(404/500リダイレクト)

NotFoundやエラーページを表示したい場合はerrorメソッドを呼び出します。 自動的にlayoutフォルダのerror.vueが表示されます。

<script lang="ts">
import Vue from 'Vue'
export default {
  asyncData({ error }) {
    return error({
      errorCode: 404
    })
  }
}
</script>

@nuxtjs/redirect-module

命名規則が決まってる場合は@nuxtjs/redirect-moduleも便利です。 nuxt.config.jsでリダイレクトの条件を正規表現で指定できます。

nuxt.config.js
export default {
  modules: [
     '@nuxtjs/redirect-module'
  ],
  redirect: [
    { from: '^/item/(.*), to: '/item/, statusCode: 301}
  ]
}

SSL対応

redirect-ssl

現在メジャーとなっているhttps対応 普段はELBでリダイレクト設定をしていますが、こちらもredirect-sslを使うことで簡単に実装できます。

nuxt.config.js
const redirectSSL = require('redirect-ssl')
export default {
  serverMiddleware: [
    redirectSSL.create({ redirectHost: uiuifree.com' })
  ]
}

nuxt.config.jsに記述することで簡単にhttpからhttpsにリダイレクトできましたね。

PROFILE

このサイトを運営してるuiuifreeです。
渋谷のベンチャー企業で2年ほど新規事業を担当した後にフリーランスエンジニアにキャリア転換。
求人サイトの開発が多くエンジニア/看護師/保育士などの分野でサイトを運営しています。

アウトプット中の技術

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)