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

hostsを編集

wslのipを確認。

$ 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をインストール。

$ sudo apt-get install nginx
$ nginx -v

確認。

$ 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/

設定ファイルにエラーがないか確認する。

$ sudo nginx -t

再起動。

$ sudo systemctl restart nginx

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

$ npm run dev

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

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

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

秘密鍵を作成。

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

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

$ 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 []:

サーバ証明書を作成。

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

作成した証明書をコピー

$ 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を再起動。

$ sudo nginx -t
$ sudo systemctl restart nginx

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

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

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

証明書を作成。ドメインを自分の環境に合わせて指定。

$ mkcert localhost

localhost.pemとlocalhost-key.pemが作成される。
viteの設定を変更。

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になっている。