React.js, Next.js, LiveServer を https で立ち上げる

## なんで？
いま、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 の設定をする

なるべく余計なものをインストールしたり立ち上げたりすることのないようにしたい。

## クライアント証明書を発行し、登録する

> [Visual Studio Codeでhttpsでlive Serverを使う](https://qiita.com/niku-usagi-chan/items/5f0a62bad6459600eba9)

このまんまやる。
Mac の場合、証明書の登録は、ブラウザごとではなく、KeyChain に登録する。

> [クライアント証明書の登録方法-Safari, Google Chrome (Mac OS)](https://passlogic.jp/register_cert/safari-mac-os/)

しかし、この方法では、Firefox では、信用ならんと言われてしまう。
Firefox まで対応したい場合は、お手軽度がグっと減るが、以下を参考にしてやると良い。

> [OpenSSLで証明書を作成してMAMPのローカル環境にSSL設定。](https://memo.ag2works.tokyo/post-3192/)

いまのところ、Firefox 独自の問題が起こることは稀であるため、今回はやらない。

## VSCode: LiveServer の設定

```settings.json``` を編集すれば良い。

```json: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``` に設定する

```bash:.env.development
HTTPS=true
SSL_CRT_FILE=/{fullpath_to_your_cert}/server.crt
SSL_KEY_FILE=/{fullpath_to_your_key}/server.key
```

これで ```yarn start``` すれば良い。

```bash
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

```bash
$ yarn create react-app react-ts-ssl --template typescript
```

でインストールした。


## Next.js の設定

Next.js は色々やり方があるようだが、今回は、見た中では一番お手軽そうで、問題が起こらなさそうな ```local-ssl-proxy``` を使うことにした。

なお、公式のドキュメントにある [Custom Server](https://nextjs.org/docs/advanced-features/custom-server) を使うやり方は、公式的にもあんまりおすすめでないようなのでやらないが、そういうやり方もあるということは知っておいても良いかも知れない。

ではまず、```local-ssl-proxy``` をインストールする

```bash
yarn add local-ssl-proxy --dev
```

次に、簡単に起動するために ```package.json``` を編集する

```json: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``` すると無事立ち上がる。

```bash
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

```bash
$ yarn create next-app next-ts-ssl --typescript
```

でインストールした。


おしまい。