this week I've been struggling with an issue. I have a laravel/vuejs (using typescript) with vite project. I am using Laravel 8.74.0 Here is my packages versions :
* "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",
My issue is that when I try to build my project throught docker, the public/build files are created but the browser return me a 404 not found.
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)
Notice : the "foo" before localhost is present because I am using Tenancy for Laravel
I verified and the build directory exist in the app container.
I am using docker compose to build the image. 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
Because I only have one project with both laravel and vuejs, I decided to create one container for the frontend and the backend.
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;
}
}
Here is my 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',
},
},
});
Also, I noticed that the docker image run perfectly fine when I ran the build locally. So I am assuming that the docker image is referencing the local build files. (When the local build directory is deleted, the 404 not found error reappears).