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

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

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

（ex: http://hogehoge.com → https://hogehoge.com にリダイレクト）

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

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

redirect-sslの導入

redirect-sslを導入します

$ yarn add redirect-ssl

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

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

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

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

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

statusCode Default: 307 Temporary Redirect

公式Github より

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

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

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