DockerでVite(React)のサーバーが立ち上がっているのにアクセスできない

はじめに

この記事は2022年8月にまとめていた「細かいつまずいたことをメモしておく(8月編)をそれぞれ投稿した内容になります
解決方法が最新でない可能性もありますのでご了承ください

問題

Dockerでviteプロジェクトのサーバーを起動して以下のログが出ているがアクセスできない

react  |   VITE v3.0.4  ready in 309 ms
react  | 
react  |   ➜  Local:   http://localhost:5173/

docker-compose.ymlでは以下の設定を行っている

docker-compose.yml

    ports:
      - "5173:5173"

解決方法

vite.config.jsを修正する

vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    host: true
  }
})

serverを追加したところアクセスできるようになった

react  |   VITE v3.0.4  ready in 288 ms
react  | 
react  |   ➜  Local:   http://localhost:5173/
react  |   ➜  Network: http://172.31.0.2:5173/

参考