SvelteKit(Vite)にてローカルサーバーへhttps接続をする
aonoSvelteKit プロジェクトは Vite で構築されているため vite.config の設定が適応される。
サーバーオプションにてホストやポートを指定可能。
server: {
host: "127.0.0.1",
port: 8000,
},
この設定だと、http://127.0.0.1:8000 でアプリにアクセスできる。
aono server: {
host: "127.0.0.1",
port: 443,
},
port: 443 を指定すると以下のエラーが発生。
local-https@0.0.1 dev /Users/tkhs/Desktop/local-https
vite dev
error when starting dev server:
Error: listen EACCES: permission denied 127.0.0.1:443
at Server.setupListenHandle [as _listen2] (node:net:1881:21)
at listenInCluster (node:net:1946:12)
at doListen (node:net:2116:7)
at process.processTicksAndRejections (node:internal/process/task_queues:83:21)
ELIFECYCLE Command failed with exit code 1.
80番や443番は予約ポートなのでNode.jsから起動できないらしい。。
上記の issue を読むと、host: "0.0.0.0" を指定すれば良いらしい！
http://127.0.0.1:443/ でアプリにアクセスできる。
aono/etc/hosts ファイルを編集して 127.0.0.1 を xxxxx.com に紐付ける
127.0.0.1 xxxxx.com
証明書が必要になるので mkcert を使って証明書を発行
% mkcert xxxxx.com
Created a new certificate valid for the following names 📜
- "xxxxx.com"
The certificate is at "./xxxxx.com.pem" and the key at "./xxxxx.com-key.pem" ✅
It will expire on 11 May 2027 🗓
サーバーオプションにて上記ファイルを指定
server: {
host: "0.0.0.0",
port: 443,
https: {
key: "./xxxxx.com-key.pem",
cert: "./xxxxx.com.pem",
},
},
https://xxxxx.com:443 でアプリにアクセスできる
aonoブラウザのコンソールを見ると以下のエラーが発生
[vite] failed to connect to websocket.
your current setup:
(browser) staging.jichitaiworks.com/ <--[HTTP]--> localhost:443/ (server)
(browser) staging.jichitaiworks.com:/ <--[WebSocket (failing)]--> localhost:443/ (server)
Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .
hmr が失敗しておりコードの変更が画面に反映されない。。
サーバーオプションで hmr も設定すると解消する。
server: {
host: "0.0.0.0",
port: 443,
https: {
key: "./xxxxx.com-key.pem",
cert: "./xxxxx.com.pem",
},
hmr: {
host: "xxxxx.com",
port: 443,
protocol: "wss",
},
},