Dockerコンテナ上でのみ、RailsアプリにTailwind CSSが反映されない

Question

Nginx + Rails + MySQLをそれぞれ別コンテナに入れて環境構築を試みています。

nginxコンテナにブラウザから"localhost:80"でアクセスしたところ、Railsのrootページの表示に成功しました。しかし、Tailwind CSSが反映されずに長時間解決できずにいます。

ご助言をいただけると幸いです。

起きている問題

tailwind.config.jsのPurge設定が正しいこと(多分)およびrails tailwindcss:buildでビルドができていることを確認しているが、Tailwind CSSが反映されない。
また、ローカルで"localhost:3000"に直接アクセスすると正常にTailwind CSSが反映される（どちらもdevelopment環境）。

開発環境

・macOS Monterey v12.1
・ruby v3.0.3
・Rails v6.1.4.4
・MySQL 8.0.28
・puma 5.5.2
・nginx 1.21.6

ディレクトリ構成

ローカル：/Users/my_user/Documents/project/myapp/src

myapp
├── nginx
├── src  # Rails
│    ├── app
│    │   ├── assets
│    │   │   ├── builds
│    │   │   │  ├── tailwind.css
│    │   │   └── ...
│    │   └── ...
│    ├── ...
│    ├── Dockerfile
│    ├── tailwind.config.js
│    └── ...
├── ...
└── docker-compose.yml

コンテナ：/var/www/myapp

/var/www
     └──  myapp  # Rails
     ├── app
     │   ├── assets
     │   │   ├── builds
     │   │   │  ├── tailwind.css
     │   │   └── ...
     │   └── ...
     ├── ...
     ├── Dockerfile
     ├── tailwind.config.js
     └── ...

Tailwind CSS設定

# tailwind.config.js
module.exports = {
  purge: ["./app/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

docker-compose.yml

version: '3'

services:
  nginx:
    container_name: nginx
    build:
      context: .
      dockerfile: ./nginx/Dockerfile
    ports:
      - 80:80
    volumes:
      - ./src:/var/www/myapp
      - ./nginx/myapp.conf:/etc/nginx/conf.d/myapp.conf
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    tty: true
  
  app:
    container_name: myapp_app
    build: 
      context: .
      dockerfile: ./src/Dockerfile
    command: bundle exec puma -C config/puma.rb
    volumes:
      - ./src:/var/www/myapp
      - ./src/vendor/bundle:/var/www/myapp/vendor/bundle
    environment:
      TZ: 'Asia/Tokyo'
      RAILS_ENV: development
    ports:
      - 3000:3000
    depends_on:
      - db
      - nginx
    tty: true

  db:
    image: mysql:8.0.28
    container_name: myapp_db
    volumes:
      - ./etc/my.cnf:/etc/mysql/conf.d/my.cnf
      - myapp_data:/var/lib/mysql
    environment:
      MYSQL_ROOT_HOST: '%'
      MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD}
      TZ: 'Asia/Tokyo'
    command: --default-authentication-plugin=mysql_native_password
    ports:
      - 3306:3306
    env_file:
      - .env
    tty: true

volumes: 
  myapp_data:
    external: true

Dockerfile

Nginx

FROM nginx:1.21
# インクルード用のディレクトリ内を削除
RUN rm -f /etc/nginx/conf.d/*
# Nginxの設定ファイルをコンテナにコピー
ADD nginx/myapp.conf /etc/nginx/conf.d/myapp.conf
ADD nginx/nginx.conf /etc/nginx/nginx.conf
# ビルド完了後にNginxを起動
CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf

Rails

FROM ruby:3.0.3

RUN apt-get update -qq && apt-get install -y nodejs
RUN mkdir -p /var/www/myapp
WORKDIR /var/www/myapp
COPY /src/Gemfile /var/www/myapp/Gemfile
COPY /src/Gemfile.lock /var/www/myapp/Gemfile.lock
RUN bundle install
COPY . /var/www/myapp

# Add a script to be executed every time the container starts.
COPY /src/entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]
CMD ["tailwindcss", "build"]

---

ローカルとコンテナでディレクトリ構造が違うためtailwind.config.jsのパージ設定がうまく機能していないと思ったのですが、未だ解決には至っていません。

設定の間違い等、ご教示いただけると幸いです。

Answer 1

Nginxの設定が間違っていました。

誤

upstream puma {
  server unix:///var/www/myapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name localhost;

  keepalive_timeout 0;

  access_log  /var/log/nginx/access.log main;
  error_log  /var/log/nginx/error.log;
  client_max_body_size 4G;

  root /var/www/myapp/public;
  location ~ .*\.(swf|SWF|ico|ICO|jar|txt|gz|js) {
    root /var/www/myapp/public;
    expires 15m;
    break;
  }
  location ~ ^\/assets\/* {
    root /var/www/myapp/public;
    break;
  }
  location ~ ^/assets/|favicon.ico {
    root /var/www/myapp/app/assets/images;
    break;
  }
  location = /manifest.json {
    root /var/www/myapp/app/config;
    break;
  }
  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://puma;
  }
}

正

upstream puma {
  server unix:///var/www/myapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  server_name localhost;
  keepalive_timeout 0;

  access_log  /var/log/nginx/access.log main;
  error_log  /var/log/nginx/error.log;

  # ドキュメントルートの指定
  root /var/www/myapp/public;

  client_max_body_size 4G;
  location / {
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://puma;
  }
}

余計なパス指定を削除しました。