Laravel+Vite+Docker构建后静态资源404问题求助

环境版本 #

基于Laravel 8.74.0、Vue.js（TypeScript）+Vite的项目，相关包版本：

* "vite": "3.0.4",
* "laravel-vite": "^0.0.19", 
* "@vitejs/plugin-vue": "^2.2.2",
* "laravel-vite-plugin": "^0.6.0",
* "vue": "^3.2.6",

问题现象 #

Docker构建项目后，app容器内已生成public/build目录及相关文件，但浏览器访问时返回404错误：

GET http://foo.localhost:8000/build/assets/main.80098a01.js net::ERR_ABORTED 404 (Not Found)
GET http://foo.localhost:8000/build/assets/main.b7cb1660.css net::ERR_ABORTED 404 (Not Found)

注：域名中的"foo"前缀是因为使用了Tenancy for Laravel多租户扩展。

Docker相关配置文件 #

docker-compose.yml #

version: '3.9'

networks:
  laravel:

services:
  nginx:
    build: 
      context: .
      dockerfile: docker/nginx.dockerfile
    ports:
      - 8000:80
    volumes:
      - ./:/var/www/html
    links:
      - app
    networks:
      - laravel
  
  app:
    build:
      context: .
      dockerfile: app.dockerfile
    links:
      - db
    networks:
      - laravel
    ports:
      - 3000:3000
    expose:
      - 3000:3000

  db:
    image: mysql:8.0
    ports:
      - 3306:3306
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_USER=user
      - MYSQL_PASSWORD=password
      - MYSQL_DATABASE=fresh_final
    networks:
      - laravel
    volumes:
      - db:/var/lib/mysql
  
  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: fresh-pma
    restart: always
    ports:
        - 49152:80
    environment:
        PMA_HOST: db
    networks:
        - laravel
volumes:
    db:
        driver: local

注：项目同时包含Laravel后端与Vue前端，二者放在同一个容器中。

app.dockerfile #

FROM php:8.0.21-fpm

# Copy composer.lock and composer.json
COPY composer.lock composer.json /var/www/html/

# Set working directory
WORKDIR /var/www/html

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    libjpeg62-turbo-dev \
    libfreetype6-dev \
    locales \
    zip \
    jpegoptim optipng pngquant gifsicle \
    vim \
    unzip \
    git \
    curl \
    sudo

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*


# Install extensions
# RUN docker-php-ext-install pdo_mysql mbstring zip exif pcntl
RUN docker-php-ext-install pdo_mysql exif pcntl bcmath gd
# RUN docker-php-ext-install pdo_mysql
RUN docker-php-ext-configure gd --with-freetype --with-jpeg
# RUN docker-php-ext-install gd

# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Add user for laravel application
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www
# RUN sudo passwd www
# # Install nodejs
RUN sudo curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
RUN apt-get install -y nodejs

RUN npm install --global yarn
# RUN rm -rf node_modules
# Change current user to www
USER www

# Copy existing application directory contents
# COPY . /var/www/html

# Copy existing application directory permissions
COPY --chown=www:www . /var/www/html


# RUN whoami
RUN yarn install
# RUN sudo chown -R www: /var/www/html/node_modules
# RUN node node_modules/esbuild/install.js


# Expose port 9000 and start php-fpm server
EXPOSE 9000
# EXPOSE 3000

# COPY --from=vuejs /app /var/www/html

CMD ["php-fpm"]

nginx.dockerfile #

FROM nginx

ADD docker/conf/vhost.conf /etc/nginx/conf.d/default.conf

WORKDIR /var/www/html 

vhost.conf #

upstream app {
  server app:9000;
}

server {
    listen 80;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
    location ~ \.php$ {
        # fastcgi_pass app:9000;
        # fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        # include fastcgi_params;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
} 

vite.config.ts #

import { defineConfig } from "laravel-vite";
import laravel from 'laravel-vite-plugin'
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    define: {
        'process.env': process.env
    },
    server: {
        host: true,
        port: 3000,
        watch: {
            usePolling: true
        }
          
    },
    plugins: [
        laravel({
            input: ['resources/scripts/main.ts'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directly as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/views/src',
        },
    },
});

排查发现 #

本地执行构建后，Docker镜像能正常运行；删除本地的build目录后，404错误再次出现，怀疑Docker容器引用了本地的构建文件，寻求解决方案。

内容的提问来源于stack exchange，提问作者firsttest