nuxtでlocalhostをhttpからhttpsにする方法

こんにちは

最近、開発をしていたのですけれどもgoogleがhttpからhttpsへ移行させるために
段階的に規制をしているそうです

記事

その結果、iframeでURLを読み込む際、Mixed Content errorという
エラーを吐いて読み込まれないという不具合を最近起こしました

開発環境でわからなかったのかとツッコまれる方もいるとは思うのですが
localhostはhttpで読み込みをしていて、httpで読み込む分にはリンク先に
httpが混ざっていても動くので全く気づきませんでした

段階的な規制をしているというのも全く知りませんでしたので寝耳に水です

調べてみても上手く動かしている人の記事が見当たらなかったので
chatGPT製ではありますが
今回は自分が動かした方法を教えます

方法

1:コンソールで以下の呪文を打つ
openssl req -x509 -newkey rsa:2048 -keyout server.key -out server.crt -days 365 -nodes

2:打ち込むとwriting new praivate key to 'server.key'と出るので
以下の様な書き方をする

Country Name (2 letter code): JP
State or Province Name (full name): Tokyo
Locality Name (eg, city): Minato-ku
Organization Name (eg, company): Example Corp.
Organizational Unit Name (eg, section): IT Department
Common Name (e.g. server FQDN or YOUR name): localhost
Email Address: 適当なメールアドレス

3:nuxt.config.jsに以下の様な記述をする
　適時それぞれのconfigにあった書き方をするとよいかも

nuxt.config.js

// Node.jsのファイルシステムモジュール(fs)とパスモジュール(path)をインポート
import fs from 'fs'; //これを入れる
import path from 'path'; //これを入れる

export default {
  // Nuxt.jsサーバーの設定
  // serverから全部
  server: {
    // HTTPS設定
    https: {
      // SSL証明書の秘密鍵を読み込む
      key: fs.readFileSync(path.resolve(__dirname, 'server.key')),
      // SSL証明書を読み込む
      cert: fs.readFileSync(path.resolve(__dirname, 'server.crt'))
    }
  }
}

4 yarn devでnuxt起動。この時に3000で起動しているURLがhttpからhttpsになれば成功

で動く

動いた。うれしい