WSL上でvite(react)サーバーを起動し、カスタムドメインを設定する


## hostsを編集

wslのipを確認。
```shell_session
$ ip addr
1: lo: <LoopBack,UP,LOWER_UP> ....
2: eth0: ...
    link/ether ...
    inet 172.xxx.xxx.xxx/xx ...
    inet6 ...
```

eth0のinetをhostsに設定する。

```:hosts
172.xxx.xxx.xxx dev.sample.com
```

## Nginxの設定

nginxをインストール。

```shell_session
$ sudo apt-get install nginx
$ nginx -v
```

確認。

```shell_session
$ sudo nginx # 起動。localhostにアクセスすると、「Welcome to nginx!」の画面が表示される。
$ sudo nginx -s stop # 停止。
```

カスタムドメイン用の設定ファイルを作成。
```
$ sudo vim /etc/nginx/sites-available/dev-sample
```

```:dev-sample
server {
    listen 80;
    server_name dev.sample.com;

    location / {
        proxy_pass http://127.0.0.1:5173; # Viteサーバーが動作しているポート
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```

設定ファイルを有効化。
設定ファイルのシンボリックリンクを sites-enabled ディレクトリに作成する。
```
sudo ln -s /etc/nginx/sites-available/dev-sample /etc/nginx/sites-enabled/
```

設定ファイルにエラーがないか確認する。
```shell_session
$ sudo nginx -t
```

再起動。

```shell_session
$ sudo systemctl restart nginx
```

## viteサーバーを起動してアクセス

```shell_session
$ npm run dev
```

`http://dev.sample.com`にアクセス。


## (補足１)httpsでアクセスできるようにする場合

※補足２に記載しているmkcertというライブラリを使えば簡単に証明書を作成できそう。

秘密鍵を作成。

```shell_session
$ mkdir ~/ssl # 証明書と秘密鍵を保存するディレクトリを作成
$ openssl genrsa 2048 > ~/ssl/self-signed.key # 秘密鍵を作成
```

証明書署名要求(CSR)を作成。

```shell_session
$ openssl req -new -key ~/ssl/self-signed.key -out ~/ssl/self-signed.csr
You are about to be asked to enter information that will be incorporated
into your certificate request.
What you are about to enter is what is called a Distinguished Name or a DN.
There are quite a few fields but you can leave some blank
For some fields there will be a default value,
If you enter '.', the field will be left blank.
-----
Country Name (2 letter code) [AU]:JP
State or Province Name (full name) [Some-State]:Tokyo
Locality Name (eg, city) []:
Organization Name (eg, company) [Internet Widgits Pty Ltd]:
Organizational Unit Name (eg, section) []:
Common Name (e.g. server FQDN or YOUR name) []:dev.sample.com
Email Address []:

Please enter the following 'extra' attributes
to be sent with your certificate request
A challenge password []:
An optional company name []:
```

サーバ証明書を作成。

```shell_session
$ sudo openssl x509 -req -days 365 -in ~/ssl/self-signed.csr -signkey ~/ssl/self-signed.key -out ~/ssl/self-signed.crt
```

作成した証明書をコピー

```shell_session
$ sudo mkdir /etc/nginx/ssl
$ sudo cp ~/ssl/self-signed.crt /etc/nginx/ssl
$ sudo cp ~/ssl/self-signed.key /etc/nginx/ssl
```

Nginxの設定を変更。

```:dev-sample
server {
    listen 80;
    server_name dev.sample.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name dev.sample.com;

    ssl_certificate /etc/nginx/ssl/self-signed.crt;
    ssl_certificate_key /etc/nginx/ssl/self-signed.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;

    location / {
        proxy_pass http://127.0.0.1:5173;  # Viteサーバーが動作しているポート
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}
```


設定を確認して、nginxを再起動。

```shell_session
$ sudo nginx -t
$ sudo systemctl restart nginx
```

## (補足２)viteサーバーをhttpsで起動する

mkcertというライブラリを使うと簡単に証明書を発行できる。

```shell_session
$ sudo apt install mkcert
$ mkcert -install # 自己認証局を作成。
```

証明書を作成。ドメインを自分の環境に合わせて指定。
```shell_session
$ mkcert localhost
```
localhost.pemとlocalhost-key.pemが作成される。
viteの設定を変更。

```ts:vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import fs from 'fs';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    https: {
      key: fs.readFileSync('./.cert/localhost-key.pem'),
      cert: fs.readFileSync('./.cert/localhost.pem'),
    },
  },
});
```

`npm run dev`すると、httpsになっている。