Bootstrap 无法在 Docker 中与 Laravel 一起工作

问题描述 投票:0回答:1

我正在尝试使用 Laravel 进行部署,我已经成功做到了,但是 Bootstrap 样式不起作用,我有一个名为 app.scss 的文件,它必须从其中获取 Bootstrap 导入和我应用的样式样式表,但我没有执行它。

   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:

我的 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 "]

如果我访问网络,则会出现以下错误: 无法加载资源:net::ERR_CONNECTION_REFUSED 127.0.0.1:5173/@vite/客户端: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

这是我正在采用的基本模板,以便我的所有模板都继承自该模板,并带有blade和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>
laravel docker docker-compose bootstrap-4 deployment
1个回答
0
投票
  1. 检查资产路径: 更新基本模板中的这些行以使用 Laravel 的 asset helper 函数生成正确的 URL:

    <link rel="stylesheet" href="{{ asset('path/to/bootstrap.min.css') }}" />
    

检查 Docker 容器端口: 确保您的 Docker 容器在正确的端口上运行。在 Docker Compose 文件中,您已将端口 8000 映射到主机和容器。确保您的 Laravel 应用程序配置为在端口 8000 上运行。

检查 Docker 网络配置: 错误

net::ERR_CONNECTION_REFUSED
表明存在网络问题。确保 Docker 容器内的 Laravel 应用程序配置为接受外部连接。检查
APP_URL
文件中 Laravel 应用程序的
.env
,并确保它对应于 Docker 容器的地址。

更新 npm 软件包: 在 Dockerfile 中,您将使用 npm 安装 Bootstrap。确保安装的 Bootstrap 版本与您的 Laravel 和其他依赖项兼容。您可能想尝试使用已知适合您的设置的特定版本。

更新 Dockerfile 中的相关行:

RUN npm install bootstrap@4

构建并清除缓存: 进行更改后,重建 Docker 容器并清除 Laravel 缓存:

docker-compose build
docker-compose up -d
docker-compose exec app php artisan config:cache
docker-compose exec app php artisan route:cache

调试: 如果问题仍然存在,您可以使用

docker-compose logs
检查容器日志中是否有任何错误消息。这可能会为您提供有关问题所在的更多信息。

© www.soinside.com 2019 - 2024. All rights reserved.