環境

React 19.1.0
macOS 15.3
Vite 6.3
devcontainer使用
React Router 7.5.3

現象

devcontainerで立ち上げたReactアプリにlocalhost:5173でChromeからアクセスするとERR_SSL_PROTOCOL_ERRORが表示される

設定ファイル

devcontainerの設定で5173ポートはポートフォワーディングしている

devcontainer.json

{
    ...
    "forwardPorts": [5173],
    ...
}

docker-compose.ymlでも同様

docker-compose.yml

services:
  react:
    # 省略
    ports:
      - 5173:5173

vite.config.jsは以下の通り

vite.config.js

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    plugins: [reactRouter(), tsconfigPaths()],
});

解決策１

vite.config.jsにhost: true を追記

vite.config.js

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';

export default defineConfig({
    server: {
        host: true,
    },
    plugins: [reactRouter(), tsconfigPaths()],
});

http://0.0.0.0:5173 でアクセスできるようになるが localhost:5173 ではアクセスできないため、ライブラリなどで問題が起こった

解決策２

httpsでアクセスできるようにする（@vitejs/plugin-basic-sslをインポートしてpluginとしてvite.config.jsに追加）
これでlocalhost:5173 でアクセスできる

vite.config.js

import { reactRouter } from '@react-router/dev/vite';
import { defineConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import basicSsl from '@vitejs/plugin-basic-ssl';

export default defineConfig({
    server: {
        host: true,
    },
    plugins: [reactRouter(), tsconfigPaths(), basicSsl()],
});