How to expose vite js host to the outside docker

Question

I'm new in vite js when upgrade from Laravel version 8 to 9. I'm building docker for a Laravel 9 project use vite js. There is a problem: I can't expose host of resources out of docker containers. It's still working in the inside docker containers. Are there any advice ? Thanks.

This is my docker-compose file

version: "3.9"

services:
  nginx:
    image: nginx:1.23-alpine
    ports:
      - 80:80
    mem_limit: "512M"
    volumes:
      - type: bind
        source: ./api
        target: /usr/share/nginx/html/api
      - type: bind
        source: ./docker/nginx/dev/default.conf
        target: /etc/nginx/conf.d/default.conf

  php:
    platform: linux/amd64
    build:
      context: .
      dockerfile: ./docker/php/dev/Dockerfile
    mem_limit: "512M"
    volumes:
      - type: bind
        source: ./api
        target: /usr/share/nginx/html/api

  oracle:
    platform: linux/amd64
    image: container-registry.oracle.com/database/express:21.3.0-xe
    ports:
      - 1521:1521
      # - 5500:5500
    volumes:
      - type: volume
        source: oracle
        target: /opt/oracle/oradata

volumes:
  oracle:

Answer 1

I figured out issue. Caused vite does not expose host to network. My solution is:

1. edit file package.json

"scripts": {
  "dev": "vite --host",
  "build": "vite build"
}

2. expose 5173 port in docker-compose.yml file

php:
    platform: linux/amd64
    build:
      context: .
      dockerfile: ./docker/php/dev/Dockerfile
    mem_limit: "512M"
    ports:
      - 5173:5173
    volumes:
      - type: bind
        source: ./api
        target: /usr/share/nginx/html/api