如何在Laravel Sail中集成npm install && npm run dev命令

我希望在Laravel Sail的docker-compose文件中集成npm install && npm run dev命令，让开发和测试人员无需在每次启动工作或切换分支时手动执行这些命令。目前我的服务架构为：

• webserver服务：通过localhost:80提供PHP服务
• frontend服务：通过5173端口使用Vite托管JS文件

以下是我尝试的docker-compose配置：

services:
    webserver:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            # - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - frontend
            - mailpit

    frontend:
        image: sail-8.2/app
        command: "npm install && npm run dev"
        ports:
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
        volumes:
            - '.:/var/www/html'

优化建议 #

• 精简环境变量：frontend服务不需要XDEBUG相关配置，可删除XDEBUG_MODE和XDEBUG_CONFIG环境变量，减少冗余
• 改用npm ci：团队协作场景下，建议将npm install替换为npm ci，确保所有人安装的依赖版本完全一致（需确保项目根目录有package-lock.json或yarn.lock）
• 加入网络配置：给frontend服务添加networks: - sail，保证webserver和frontend在同一网络下，避免服务间无法访问的问题
• 开启交互终端：添加stdin_open: true和tty: true到frontend服务，方便后续可能的调试或交互操作

优化后的frontend服务示例：

frontend:
    image: sail-8.2/app
    command: "npm ci && npm run dev"
    ports:
        - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
    environment:
        WWWUSER: '${WWWUSER}'
        LARAVEL_SAIL: 1
        IGNITION_LOCAL_SITES_PATH: '${PWD}'
    volumes:
        - '.:/var/www/html'
    networks:
        - sail
    stdin_open: true
    tty: true

内容的提问来源于stack exchange，提问作者Yogesh.galav