Help us understand the problem. What is going on with this article?

herokuapp.comから独自ドメインに301リダイレクト【Nuxt.js】

More than 1 year has passed since last update.

この記事を書いた理由

Railsなどで301リダイレクトをかける記事はかなり存在しましたが、Nuxtで301リダイレクトをかける記事はあまり見かけなかったので書くことにしました。
参考になればと思います。

リポジトリ

https://github.com/nyanko-kota/Portfolio

現状

herokuにnuxt.jsアプリをデプロイしてみました。

しかし

https://kota-portfolio.herokuapp.com
でも
https://portfolio.nyanko-kota.com

でも同じサイトにアクセスできるようになっています。

2つのドメインで1つのサイトにアクセスできる状況はSEO的によくありません。

https://kota-portfolio.herokuapp.com
にアクセスされた際
https://portfolio.nyanko-kota.com
リダイレクトをかけることで正規化を行います。

Herokuでは.htaccessが使えない!!

はい、使えませんでした......

serverMiddlewareを使って実装

今回はフレームワークを使わずserverMiddlewareを使って実装したいと思います。

まず、nuxt.config.jsに以下のコードを追記します。

nuxt.config.js
  /*
  ** 301redirect
  */
  serverMiddleware: [
    '~/redirect-to-nyanko-kota.com.js'
  ],

redirect-to-nyanko-kota.com.jsの部分は自分の好きなファイル名で大丈夫です。

次にルートに先ほど決めたファイル名のファイルを作成します

$ touch redirect-to-nyanko-kota.com.js

これでredirect-to-nyanko-kota.com.jsというファイルが作成されたかと思います。

このファイルに以下のコードを書いていきます。

redirect-to-nyanko-kota.com.js
module.exports = function (req, res, next) {
  const host = req.headers.host
  const url = req.url
  const env = process.env.NODE_ENV
  const canonicalDomain = 'portfolio.nyanko-kota.com'

  if (env === 'production' && host !== canonicalDomain) {
    res.writeHead(301, { Location: 'https://' + canonicalDomain + url })
    return res.end()
  }

  return next()
}

const canonicalDomain = 'portfolio.nyanko-kota.com'の部分には
リダイレクトさせたいURLを代入してください。

これでリダイレクトされるようになったかと思います。

ソースコードはこちらで公開しています。
https://github.com/nyanko-kota/Portfolio
良ければ御覧ください。

参考文献

この記事は以下の情報を参考にして執筆しました。

atma_inc
Change the common sense with algorithm を達成するためのスタートアップ
https://atma.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away