目次
質問内容
ソリューション
ホームページ バックエンド開発 Golang Docker の nginx によって提供されるスタイルと画像がページ上で機能しない

Docker の nginx によって提供されるスタイルと画像がページ上で機能しない

Feb 09, 2024 am 08:00 AM

docker 中 nginx 提供的样式和图像在页面上不起作用

php Xiaobian Youzi さんは、Docker で nginx を使用すると、ページ上にスタイルと画像が正しく表示されないという問題が発生する可能性があることを発見しました。これは、構成の問題または間違ったパスが原因である可能性があります。この問題を解決する前に、nginx 構成ファイルとファイル パスを注意深くチェックして、正しく設定および参照されていることを確認する必要があります。次に、この厄介な問題の解決に役立ついくつかの一般的な解決策を検討します。

質問内容

私は golang Web アプリケーションを持っており、その前に Nginx を使用して静的ファイルを提供し、それを Web アプリケーションのリバース プロキシとして使用することにしました。

Web アプリケーション用の Dockerfile:

リーリー

Docker 構成ファイル:

リーリー

および nginx 構成:

リーリー

Web ページ上に 2 つの画像があります。1 つは png、もう 1 つは svg です。css ファイルは非常に単純で、body タグとして background-color: lightblue と、js ファイルのみが含まれています。コンソールには「Loaded!」という文字列が記録されるだけです。 docker compose を使用してコンテナーを起動した後、次の問題が発生しました:

  1. 静的ファイルはランダムに提供されます。たとえば、png 画像は表示されるが svg は表示されない、CSS スタイルはページに適用されませんが、JavaScript コードは正常に実行されます。興味深いことに、ブラウザの開発ツールのネットワーク タブによれば、すべての静的ファイルが正常にフェッチされており、その内容を調べることができます。はい、キャッシュせずにページをリロードしようとしましたが、無駄でした。これはどんな魔法ですか?
  2. docker compose ファイルでわかるように、nginx と webapp のボリュームを設定しました。nginx の場合は正常に動作します。一部のアセットを削除してキャッシュせずにページをリロードすると、変更が適用されますが、変更するとテンプレート内のテキストはページには表示されませんが、Web アプリのコンテナーに移動してテンプレートのコンテンツを検査すると、変更されていますが、docker compose を使用してコンテナーを再起動するまでページには表示されません。ここで何か問題がありますか?

完全なコードはこちら - https://github.com/ivnku/tmp

ソリューション

  1. go Fiber の template は、Engine.Reload(true) を介してこの機能を提供します:
リーリー
  1. 静的ファイルは確かに Nginx によって提供されますが、正しい MIME タイプを持っていないだけです。 nginx.conf の http セクションに MIME タイプを含めると、この問題は解決されます:
リーリー

以上がDocker の nginx によって提供されるスタイルと画像がページ上で機能しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Go Language Packのインポート:アンダースコアとアンダースコアなしの違いは何ですか? Go Language Packのインポート:アンダースコアとアンダースコアなしの違いは何ですか? Mar 03, 2025 pm 05:17 PM

この記事では、Goのパッケージインポートメカニズム:名前付きインポート(例:インポート "fmt")および空白のインポート(例:_" fmt")について説明しています。 名前付きインポートはパッケージのコンテンツにアクセス可能になり、空白のインポートはtのみを実行します

Beegoフレームワークのページ間で短期情報転送を実装する方法は? Beegoフレームワークのページ間で短期情報転送を実装する方法は? Mar 03, 2025 pm 05:22 PM

この記事では、Webアプリケーションでのページ間データ転送のためのBeegoのnewflash()関数について説明します。 newflash()を使用して、コントローラー間で一時的なメッセージ(成功、エラー、警告)を表示し、セッションメカニズムを活用することに焦点を当てています。 リミア

MySQLクエリ結果リストをGO言語のカスタム構造スライスに変換する方法は? MySQLクエリ結果リストをGO言語のカスタム構造スライスに変換する方法は? Mar 03, 2025 pm 05:18 PM

この記事では、MySQLクエリの結果をGO structスライスに効率的に変換することを詳しく説明しています。 データベース/SQLのスキャン方法を使用して、手動で解析することを避けて強調しています。 DBタグとロブを使用した構造フィールドマッピングのベストプラクティス

GOでテスト用のモックオブジェクトとスタブを書くにはどうすればよいですか? GOでテスト用のモックオブジェクトとスタブを書くにはどうすればよいですか? Mar 10, 2025 pm 05:38 PM

この記事では、ユニットテストのためにGOのモックとスタブを作成することを示しています。 インターフェイスの使用を強調し、模擬実装の例を提供し、模擬フォーカスを維持し、アサーションライブラリを使用するなどのベストプラクティスについて説明します。 articl

GOのジェネリックのカスタムタイプ制約を定義するにはどうすればよいですか? GOのジェネリックのカスタムタイプ制約を定義するにはどうすればよいですか? Mar 10, 2025 pm 03:20 PM

この記事では、GENICSのGOのカスタムタイプの制約について説明します。 インターフェイスがジェネリック関数の最小タイプ要件をどのように定義するかを詳しく説明し、タイプの安全性とコードの再利用性を改善します。 この記事では、制限とベストプラクティスについても説明しています

Go言語でファイルを便利に書く方法は? Go言語でファイルを便利に書く方法は? Mar 03, 2025 pm 05:15 PM

この記事では、goで効率的なファイルの書き込みを詳しく説明し、os.writefile(小さなファイルに適している)とos.openfileおよびbuffered write(大規模ファイルに最適)と比較します。 延期エラー処理、Deferを使用し、特定のエラーをチェックすることを強調します。

Goでユニットテストをどのように書きますか? Goでユニットテストをどのように書きますか? Mar 21, 2025 pm 06:34 PM

この記事では、GOでユニットテストを書くことで、ベストプラクティス、モッキングテクニック、効率的なテスト管理のためのツールについて説明します。

トレースツールを使用して、GOアプリケーションの実行フローを理解するにはどうすればよいですか? トレースツールを使用して、GOアプリケーションの実行フローを理解するにはどうすればよいですか? Mar 10, 2025 pm 05:36 PM

この記事では、トレースツールを使用してGOアプリケーションの実行フローを分析します。 手動および自動計装技術について説明し、Jaeger、Zipkin、Opentelemetryなどのツールを比較し、効果的なデータの視覚化を強調しています

See all articles