なんで？
いま、Production が SSL 通信でないことは、まずない。気にせず開発して、Production に Deploy したらエラーがでまくるとかダサい。そして Safari が、色々うるさい。PC Safari は無視できても、iOS Safari は無視できない。
という訳で？、ローカルも普段から SSL 通信するようにする。
私は Mac VSCode で、React.js, Next.js などを使うことが多いので、
- LiveServer
- React.js
- Next.js
を、https で立ち上げるようにする。
手順
- SSL 証明書を発行する
- SSL 証明書を登録する
- LiveServer/React.js/Next.js の設定をする
なるべく余計なものをインストールしたり立ち上げたりすることのないようにしたい。
クライアント証明書を発行し、登録する
このまんまやる。
Mac の場合、証明書の登録は、ブラウザごとではなく、KeyChain に登録する。
しかし、この方法では、Firefox では、信用ならんと言われてしまう。
Firefox まで対応したい場合は、お手軽度がグっと減るが、以下を参考にしてやると良い。
いまのところ、Firefox 独自の問題が起こることは稀であるため、今回はやらない。
VSCode: LiveServer の設定
settings.json を編集すれば良い。
{
"liveServer.settings.https": {
"enable": true,
"cert": "/{fullpath_to_your_cert}/server.crt",
"key": "/{fullpath_to_your_key}/server.key",
"passphrase": ""
},
}
プロジェクトごとでも良いが、LiveServer が https でない方が良いことは多分ないので、大元を編集した。直接編集でも良いし、Extensions > LiveServer の設定メニューで編集でも良い。
これで、GoLive すれば https で立ち上がるようになる。
React.js の設定
これも .env に以下を追加すれば良い。
ただし、Local 専用の設定なので、.env.development に設定する
HTTPS=true
SSL_CRT_FILE=/{fullpath_to_your_cert}/server.crt
SSL_KEY_FILE=/{fullpath_to_your_key}/server.key
これで yarn start すれば良い。
Compiled successfully!
You can now view react-ts-ssl in the browser.
Local: https://localhost:3000
On Your Network: https://192.168.1.4:3000
Note that the development build is not optimized.
To create a production build, use yarn build.
webpack compiled successfully
試したバージョン等の情報
- node: 18.14.2
- react: 18.2.0
$ yarn create react-app react-ts-ssl --template typescript
でインストールした。
Next.js の設定
Next.js は色々やり方があるようだが、今回は、見た中では一番お手軽そうで、問題が起こらなさそうな local-ssl-proxy を使うことにした。
なお、公式のドキュメントにある Custom Server を使うやり方は、公式的にもあんまりおすすめでないようなのでやらないが、そういうやり方もあるということは知っておいても良いかも知れない。
ではまず、local-ssl-proxy をインストールする
yarn add local-ssl-proxy --dev
次に、簡単に起動するために package.json を編集する
{
...
"scripts": {
"dev": "next dev",
"dev:proxy": "next dev -p 4000 & local-ssl-proxy --key ~/{path_to_your_cert}/server.key --cert ~/{path_to_your_cert}/server.crt --source 3000 --target 4000",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
...
}
dev:proxy というコマンドを追加した。
ここで注意点が2つある。
まず、package.json は、バージョン管理されるファイルなので、個人環境の fullpath を書きたくない。
/Users/kurab/xxx などと書きたくないので、このような書き方にした。
ホームディレクトリから辿れるところに証明書置いてねと README.md に書いておけば良いだろう。Windows は…分からないが、必要に応じて、dev:proxywin などを追加すれば良いかな。
~ に関して、tsconfig.json で、ドキュメントルートを参照するように設定することがあるかも知れず、一瞬気になるが関係ないので、大丈夫。
次に利用する Port であるが、3000番などを使う方が自然かなと思ったので、よく使う3000番台、8000番台を避け、4000番ポートを3000番ポートにリダイレクトするようにした。port を 2つ使うので、滅多に使わなそうな4000番とした。
これで、yarn dev:proxy すると無事立ち上がる。
yarn run v1.22.19
$ next dev -p 4000 & local-ssl-proxy --key ~/{path_to_your_cert}/server.key --cert ~/{path_to_your_cert}/server.crt --source 3000 --target 4000
Started proxy: https://localhost:3000 → http://localhost:4000
ready - started server on 0.0.0.0:4000, url: http://localhost:4000
event - compiled client and server successfully in 1005 ms (170 modules)
...
試したバージョン等の情報
- node: 18.14.2
- next: 13.2.3
- react: 18.2.0
$ yarn create next-app next-ts-ssl --typescript
でインストールした。
おしまい。