I am trying to make a deployment with Laravel, I have managed to do it but the Bootstrap styles do not work, I have a file called app.scss from where it has to take the Bootstrap import and the styles that I have applied in the style sheet but not I carry it out.
version: '3'
services:
app:
build:
context: .
dockerfile: Dockerfile
volumes:
- ./:/var/www/html
working_dir: /var/www/html
ports:
- "8000:8000"
- "8080:80"
expose:
- "80" #Esto tambien
- "8000" #Esto lo he añadido ahora
# dns:
# - 8.8.8.8
# - 8.8.4.4
depends_on:
- db
db:
image: mysql:5.7
environment:
MYSQL_DATABASE: bdevent
MYSQL_USER: j
MYSQL_PASSWORD: ****
MYSQL_ROOT_PASSWORD: ****
ports:
- "3306:3306"
volumes:
- db_data:/var/lib/mysql
volumes:
db_data:
My DockerFile:
FROM php:8.2
# Instalar extensiones y bibliotecas necesarias
RUN apt-get update && apt-get install -y \
zlib1g-dev \
libzip-dev \
libpng-dev \
nodejs npm \
&& rm -rf /var/lib/apt/lists/*
RUN npm install bootstrap
# Instalar extensiones PHP necesarias
RUN docker-php-ext-install bcmath gd zip pdo_mysql
# Copiar los archivos de la aplicación
COPY . /var/www/html
# Establecer el directorio de trabajo
WORKDIR /var/www/html
# Instalar dependencias de Composer y compilar estilos
RUN npm install && npm run build
# Ejecutar migraciones y seeders
#CMD ["php", "artisan", "migrate:fresh", "--seed"]
# Ejecutar migraciones y seeders
CMD ["bash", "-c", "php artisan migrate:fresh --seed && php artisan serve --host=0.0.0.0 --port=8000 "]
If I go to the network I have this errors: Failed to load resource: net::ERR_CONNECTION_REFUSED 127.0.0.1:5173/@vite/client:1
Failed to load resource: net::ERR_CONNECTION_REFUSED
127.0.0.1:5173/resources/sass/app.scss:1
Failed to load resource: net::ERR_CONNECTION_REFUSED
127.0.0.1:5173/resources/js/bootstrap.js:1
This is the base template that I am taking so that all my templates inherit from this with blade and vite:
<html>
<head>
<link rel="icon" type="image/png" sizes="16x16"
href="img/favicon/favicon.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.3/css/all.min.css" />
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<title>@yield('titulo')</title>
@vite(['resources/sass/app.scss',
'resources/js/bootstrap.js'])
</head>
<body>
<div>
@include('p_base/nav')
</div>
<div class="container mt-3 margin-top-navbar">
@yield('contenido')
<style>
body{
background-color: #393E41;
color: #E7E5DF;
}
</style>
</div>
</body>
</html>
Check Asset Paths: Update these lines in your base template to use Laravel's asset helper function to generate correct URLs:
<link rel="stylesheet" href="{{ asset('path/to/bootstrap.min.css') }}" />
Check Docker Container Ports: Ensure that your Docker container is running on the correct port. In your Docker Compose file, you have mapped port 8000 to both host and container. Make sure your Laravel application is configured to run on port 8000.
Check Docker Network Configuration:
The error net::ERR_CONNECTION_REFUSED suggests a network issue. Ensure that your Laravel application inside the Docker container is configured to accept external connections. Check the Laravel application's APP_URL in your .env file and make sure it corresponds to the Docker container's address.
Update npm Packages: In your Dockerfile, you are installing Bootstrap using npm. Make sure the installed Bootstrap version is compatible with your Laravel and other dependencies. You might want to try using a specific version that is known to work with your setup.
Update the relevant lines in your Dockerfile:
RUN npm install bootstrap@4
Build and Clear Cache: After making changes, rebuild your Docker container and clear the Laravel cache:
docker-compose build
docker-compose up -d
docker-compose exec app php artisan config:cache
docker-compose exec app php artisan route:cache
Debugging:
If the issue persists, you can use docker-compose logs to check the logs of your containers for any error messages. This might give you more information about what is going wrong.