Nuxtでhttpのアクセスをhttpsにリダイレクトする

2021.07.02
Nuxtでhttpのアクセスをhttpsにリダイレクトする

HerokuにデプロイしているNuxt.jsのアプリケーションで、

httpにアクセスされた場合httpsにリダイレクトし常時SSL化するという事を関わっている案件で行いました。

(ex: http://hogehoge.comhttps://hogehoge.com にリダイレクト)




redirect-ssl というパッケージを導入する事で、私の環境ではすんなり出来ました。


備考欄兼ねて残しておきます。

検証した環境

1 nuxt 2.14.7
2 redirect-ssl 3.0.0

redirect-sslの導入

redirect-sslを導入します

$ yarn add redirect-ssl



nuxt.config.jsにredirect-sslの設定を追記します

nuxt.config.js
import redirectSSL from 'redirect-ssl'

export default {
  ・・・
  serverMiddleware: [
    redirectSSL.create({
      enabled: process.env.NODE_ENV === 'production'
     }),
  ]
}

これでデプロイすると http → https にリダイレクトされるようになります。簡単!



serverMiddleware: ['redirect-ssl']と書くと

ローカルホストでssl化していない場合正常に動作しなくなるので注意



リダイレクト時のステータスコードの変更

redirect-sslは初期設定だと307のステータスコードでリダイレクトされます。

statusCode
Default: 307 Temporary Redirect


公式Github より


私が関わったプロジェクトは「常に 301 でリダイレクトする」という要件があったため、

以下のように設定する事で301でリダイレクトするようにしました。

nuxt.config.js
export default {
  ・・・
  serverMiddleware: [
    redirectSSL.create({
      enabled: process.env.NODE_ENV === 'production',
      statusCode: 301
    })
  ],
}




HTTPieが便利!

リダイレクト時のステータスコードの確認は HTTPie というcurlに変わるコマンドが便利でした。

HTTPie – command-line HTTP client for the API era



curlと同じように $ http <url> とすれば結果が見えるのですが、

以下のようにHTTPieの場合ステータスコードも表示されます

$ http http://hogehoge.com
HTTP/1.1 301 Moved Permanently #<= ステータスコードが分かる
Connection: keep-alive
Date: Thu, 01 Jul 2021 11:24:30 GMT



HTTPieの便利さは以下のQiitaの記事で伝わるかな、と思います!

curlに変わる便利コマンドHTTPieを使ってみた - Qiita

おすすめ