Docker部署Rails+Nginx应用静态资源Content-Type为text/html加载失败问题

问题根因 #

你遇到的静态资源返回text/html的核心原因是：NGINX所在的web容器中不存在Rails编译后的静态资源文件，导致NGINX匹配到静态资源规则后找不到对应文件， fallback转发给Rails应用，Rails返回404错误页（内容为HTML格式），所以Content-Type为text/html。

具体配置错误点 #

1. 静态资源未在两个容器间同步
   Rails的assets:precompile命令是在app容器的构建阶段执行的，编译后的静态资源存放在app容器的/var/www/trainee_manager/public/assets路径下；但web容器构建时直接复制的是本地代码的public目录，本地并没有执行过预编译命令，所以web容器中不存在编译后的CSS、JS文件。
2. （次要问题）app容器启动脚本路径错误
   entrypoint.sh中删除旧pid文件的路径/app/tmp/pids/server.pid和你定义的RAILS_ROOT（/var/www/trainee_manager）不匹配，可能会导致后续puma启动异常。

修复方案 #

1. 新增共享卷同步静态资源 #

修改docker-compose.yml，新增共享卷用于同步app容器和web容器的静态资源：

version: '3'

services:
  app:
    container_name: trainee_manager_app
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    environment:
      - DB_USERNAME=postgres
      - DB_PASSWORD=postgres
      - DB_PORT=5432
    depends_on:
      - db
    # 新增挂载
    volumes:
      - assets:/var/www/trainee_manager/public/assets
  
  db:
    image: postgres:13
    container_name: trainee_manager_db
    volumes:
      - pg_data:/var/lib/postgresql/data
    environment:
      - POSTGRES_PASSWORD=admin

  server:
    container_name: trainee_manager_server
    build:
      context: .
      dockerfile: ./docker/web/Dockerfile
    depends_on:
      - app
    ports:
      - 86:80
    # 新增挂载
    volumes:
      - assets:/var/www/trainee_manager/public/assets

networks:
  default:
    external:
      name: trainee-manager-network

volumes:
  pg_data:
  # 新增静态资源共享卷
  assets:

2. 修复启动脚本路径 #

修改app/entrypoint.sh中的pid文件路径：

#!/bin/bash

# 修正路径
rm -f $RAILS_ROOT/tmp/pids/server.pid

bundle exec rake db:create RAILS_ENV=production
bundle exec rake db:migrate RAILS_ENV=production
bundle exec rake db:seed RAILS_ENV=production

exec "$@"

3. 验证修复效果 #

执行以下命令重启服务：

docker-compose down -v
docker-compose build && docker-compose up

启动后访问服务，静态资源即可正常加载。

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