Q&A
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
directories
1myapp 2├── nginx 3├── src # Rails 4│ ├── app 5│ │ ├── assets 6│ │ │ ├── builds 7│ │ │ │ ├── tailwind.css 8│ │ │ └── ... 9│ │ └── ... 10│ ├── ... 11│ ├── Dockerfile 12│ ├── tailwind.config.js 13│ └── ... 14├── ... 15└── docker-compose.yml
コンテナ:/var/www/myapp
directories
1/var/www 2 └── myapp # Rails 3 ├── app 4 │ ├── assets 5 │ │ ├── builds 6 │ │ │ ├── tailwind.css 7 │ │ └── ... 8 │ └── ... 9 ├── ... 10 ├── Dockerfile 11 ├── tailwind.config.js 12 └── ...
Tailwind CSS設定
js
1# tailwind.config.js 2module.exports = { 3 purge: ["./app/**/*.{html,js}"], 4 theme: { 5 extend: {}, 6 }, 7 plugins: [], 8}
docker-compose.yml
yml
1version: '3' 2 3services: 4 nginx: 5 container_name: nginx 6 build: 7 context: . 8 dockerfile: ./nginx/Dockerfile 9 ports: 10 - 80:80 11 volumes: 12 - ./src:/var/www/myapp 13 - ./nginx/myapp.conf:/etc/nginx/conf.d/myapp.conf 14 - ./nginx/nginx.conf:/etc/nginx/nginx.conf 15 tty: true 16 17 app: 18 container_name: myapp_app 19 build: 20 context: . 21 dockerfile: ./src/Dockerfile 22 command: bundle exec puma -C config/puma.rb 23 volumes: 24 - ./src:/var/www/myapp 25 - ./src/vendor/bundle:/var/www/myapp/vendor/bundle 26 environment: 27 TZ: 'Asia/Tokyo' 28 RAILS_ENV: development 29 ports: 30 - 3000:3000 31 depends_on: 32 - db 33 - nginx 34 tty: true 35 36 db: 37 image: mysql:8.0.28 38 container_name: myapp_db 39 volumes: 40 - ./etc/my.cnf:/etc/mysql/conf.d/my.cnf 41 - myapp_data:/var/lib/mysql 42 environment: 43 MYSQL_ROOT_HOST: '%' 44 MYSQL_ROOT_PASSWORD: ${DATABASE_PASSWORD} 45 TZ: 'Asia/Tokyo' 46 command: --default-authentication-plugin=mysql_native_password 47 ports: 48 - 3306:3306 49 env_file: 50 - .env 51 tty: true 52 53volumes: 54 myapp_data: 55 external: true
Dockerfile
Nginx
dockerfile
1FROM nginx:1.21 2# インクルード用のディレクトリ内を削除 3RUN rm -f /etc/nginx/conf.d/* 4# Nginxの設定ファイルをコンテナにコピー 5ADD nginx/myapp.conf /etc/nginx/conf.d/myapp.conf 6ADD nginx/nginx.conf /etc/nginx/nginx.conf 7# ビルド完了後にNginxを起動 8CMD /usr/sbin/nginx -g 'daemon off;' -c /etc/nginx/nginx.conf
Rails
dockerfile
1FROM ruby:3.0.3 2 3RUN apt-get update -qq && apt-get install -y nodejs 4RUN mkdir -p /var/www/myapp 5WORKDIR /var/www/myapp 6COPY /src/Gemfile /var/www/myapp/Gemfile 7COPY /src/Gemfile.lock /var/www/myapp/Gemfile.lock 8RUN bundle install 9COPY . /var/www/myapp 10 11# Add a script to be executed every time the container starts. 12COPY /src/entrypoint.sh /usr/bin/ 13RUN chmod +x /usr/bin/entrypoint.sh 14ENTRYPOINT ["entrypoint.sh"] 15 16# Start the main process. 17CMD ["rails", "server", "-b", "0.0.0.0"] 18CMD ["tailwindcss", "build"]
ローカルとコンテナでディレクトリ構造が違うためtailwind.config.js
のパージ設定がうまく機能していないと思ったのですが、未だ解決には至っていません。
設定の間違い等、ご教示いただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。