部署到Google Cloud Run的Docker化Laravel项目CSS不生效问题

CSS文件加载正常但样式不生效，本质是浏览器没有识别到文件为样式表，绝大多数情况是Nginx返回的Content-Type响应头错误，未返回标准的text/css类型。

1. 修正Nginx配置（最常见诱因） #

你当前Dockerfile中使用的自定义docker/nginx.conf缺失MIME类型映射声明，导致Nginx无法正确识别静态资源的返回类型。
修改nginx.conf，在http配置块中加入MIME类型引入：

http {
    # 新增这行，引入系统默认的MIME类型映射表
    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    # 其余原有配置保持不变
    server {
        listen 8080;
        root /app/public;
        index index.php;

        # 静态资源路由配置补充
        location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
            try_files $uri =404;
        }

        # 原有PHP路由配置保持不变
        location / {
            try_files $uri $uri/ /index.php?$query_string;
        }

        location ~ \.php$ {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
            include fastcgi_params;
        }
    }
}

2. 核对Laravel配置 #

确认项目.env文件中的APP_URL参数已修改为你的Cloud Run服务域名，静态资源生成统一使用Laravel提供的asset()辅助函数，避免路径硬编码导致的资源加载异常。

3. 补充前端构建步骤（可选排查项） #

如果你的项目使用Laravel Mix或Vite编译前端资源，当前Dockerfile缺少前端构建流程，需要在Dockerfile中加入Node.js环境和构建命令：

# 新增前端构建阶段
FROM node:16-alpine as frontend
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run production

# 原有PHP构建阶段修改，复制构建好的静态资源
FROM php:7.4-fpm-alpine
RUN apk add --no-cache nginx wget
RUN mkdir -p /run/nginx
COPY docker/nginx.conf /etc/nginx/nginx.conf
RUN mkdir -p /app
COPY . /app
# 新增：从前端构建阶段复制编译后的静态资源
COPY --from=frontend /app/public/css /app/public/css
COPY --from=frontend /app/public/js /app/public/js
COPY --from=frontend /app/public/mix-manifest.json /app/public/

# 其余原有命令保持不变
RUN sh -c "wget http://getcomposer.org/composer.phar && chmod a+x composer.phar && mv composer.phar /usr/local/bin/composer"
RUN cd /app && \
    /usr/local/bin/composer install --no-dev
RUN chown -R www-data: /app
CMD sh /app/docker/startup.sh

修改后重新部署，打开浏览器开发者工具的「网络」面板，查看CSS请求的响应头，确认Content-Type字段值为text/css; charset=utf-8即可。

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