この記事を書いた理由
Railsなどで301リダイレクトをかける記事はかなり存在しましたが、Nuxtで301リダイレクトをかける記事はあまり見かけなかったので書くことにしました。
参考になればと思います。
リポジトリ
現状
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に以下のコードを追記します。
/*
** 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というファイルが作成されたかと思います。
このファイルに以下のコードを書いていきます。
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
良ければ御覧ください。
参考文献
この記事は以下の情報を参考にして執筆しました。