ロゴテキスト ロゴ

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

    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

    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。