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

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

新規登録して質問してみよう
ただいま回答率
85.48%
nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

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

Q&A

解決済

1回答

2004閲覧

Docker-Nginx CSS,JSファイルが正常に機能しない

anninsan

総合スコア14

nginx

nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

Docker

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

0グッド

0クリップ

投稿2022/03/20 12:51

現在の環境

Dockerを使ってPhpベースのNginxサーバーを立てて開発中です。

利用しているコンテナ
Nginx:1.21.1
Php:7.4.9

Mysql:8.0.26
PhpMyAdmin:latest
(今回お聞きしたいことと関係ないコンテナ)
こちらの記事を参考に構築しました。

起こった問題 & 行った対処

・CSS,Javascriptなどに記述したプログラムが正常に機能しない
しっかりとPHPファイルにLinkRelでCSSファイルを指定してスタイルを変えるコードを書いたのですが、全く適用されてませんでした。
JavascriptもCSSと同じような状態で機能していませんでした。

そこで、こちらの記事を見てサーバーから送信されたファイルの形式が違うと予想して、ネットワークコンソールからファイル形式を確認しましたが、すべて正常な形式だとわかり、この予想は違いました。
イメージ説明
次に、ファイルのパスが問題だと考えましたが、ファイルが送信されているのでこの予想も違いました。

・CSS,Javascriptなどのファイルの内容がHTMLと同じ
次に、送信されたファイルのサイズがすべて同じという事に気づき、ソースを見てみたところ、なんとCSS,JSファイルもHTMLと同じコードが書かれている状態でした。
イメージ説明
イメージ説明
イメージ説明
そこで、Nginxのconfigファイルを確認してみました。

conf

1server{ 2 listen 80; 3 index index.php index.html; 4 server_name localhost; 5 6 root /var/www; 7 8 location / { 9 try_files $uri $uri/ /index.php$is_args$args; 10 } 11 12 location ~ \.php$ { 13 fastcgi_split_path_info ^(.+\.php)(/.+)$; 14 fastcgi_pass php:9000; 15 fastcgi_index index.php; 16 include fastcgi_params; 17 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; 18 fastcgi_param PATH_INFO $fastcgi_path_info; 19 } 20}

このコードはこちらの記事に記述されてるコードと同じなのですが、基本的なレスポンスとPHPへの接続処理ぐらいしか書いてなくて、PHPファイルのコードをCSSやJSとして返す記述などはされてないと思うし、しっかりとrootフォルダもPHPファイルがある場所を指定しているので、初心者の私には考えられる原因が見つからず、この問題の原因が特定できませんでした。

起こった問題を簡単にすると

CSS,JSファイルなどがPHPファイルのコードと同じ (CSS,JSファイルが機能しない)

お聞きしたいこと

・この問題の解決方法
・この問題が発生した考えられる理由
の二点です。
実はNginxやPHPは始めたばかりで、特にNginxの仕組みがわからなくて、根本的な所が間違っているかもしれないので、ぜひ助言していただけると助かります。

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

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

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

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

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

guest

回答1

0

自己解決

解決しました。
イメージ説明
こちらの記事によると今の状況は図のような感じになっていて、DockerファイルでPHP側のVolumeの指定が出来ていなくてパスが不明の状態で引きされた問題でした。
ということでDockerファイルにPHPにもNigixと同じVolumeも設定したことで問題が解決されました。

投稿2022/03/25 10:14

anninsan

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問