質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

Q&A

解決済

1回答

1132閲覧

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

hajsu00

総合スコア151

docker-compose

docker-composeとは、複数のコンテナで構成されるサービスを提供する手順を自動的し管理を簡単にするツール。composeファイルを使用しコマンド1回で設定した全サービスを作成・起動することが可能です。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Docker

Dockerは、Docker社が開発したオープンソースのコンテナー管理ソフトウェアの1つです

0グッド

0クリップ

投稿2022/05/18 01:41

編集2022/05/27 21:19

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のパージ設定がうまく機能していないと思ったのですが、未だ解決には至っていません。

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

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; } }

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

投稿2022/05/27 12:19

hajsu00

総合スコア151

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問