Docker IPアドレスで表示と動作するが、ドメインからだと表示されない。

Question

実現したいこと

Docker初学者です。皆様よろしくお願いします。
mp3を再生するオーディオプレーヤーをDockerで動かしています。
tarファイルをVPSにアップロードして、3000番で動かしました。
私のIPアドレス
http://11.111.111.111:3000/
では表示と再生ができます。

しかし、nginxでドメインを設定し、www.hogehoge.com/audio のURLに指定して表示をしようとするとCROSのエラーが出ます。

発生している問題・分からないこと

１つのドメインでcloudflareを使っています。nginxで以下のように書いたしました。

add_header Content-Security-Policy "default-src 'self' https://static.cloudflareinsights.com; script-src 'self' 'unsafe-inline' https://static.cloudflareinsights.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; img-src 'self' https: data:; font-src 'self' https://fonts.gstatic.com;";

もう１つのcloudflareを使っていないドメインでも試しましたが、エラーは若干違いますがCROSのエラーでした。

エラーメッセージ

Content-Security-Policy: The page’s settings blocked the loading of a resource at 
https://static.cloudflareinsights.com

該当のソースコード

location /audio/ {
	proxy_pass http://localhost:3000/;
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection 'keep-alive';
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header X-Forwarded-Proto $scheme;
	proxy_set_header X-Forwarded-Host $host;
	proxy_set_header X-Forwarded-Port $server_port;
}
	

version: '3'
services:
  web:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
    environment:
      - NODE_ENV=production

FROM node:14-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD [ "node", "server.js" ]

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

Content-Security-Policyの書き方をいろいろ試しますがCROSの問題が解消されませんでした。

補足

特になし

Comments

[y_waiwai]

お持ちのスマホで、Wifiを切った状態にしといて、そのIPアドレスでアクセスできるでしょうか
これでできないって話になると、そもそもドメインでアクセスするってのは不可能であるってことになります

[keykey]

ご回答ありがとうございます。
自身のAndroid携帯でIPアドレスを開いたところ表示と音楽の再生ができました。

[y_waiwai]

その携帯でWifiは切ってるでしょうか。
つまりは、携帯の回線経由でアクセスできてるでしょうか

[keykey]

はい。Wi-FiはOFFにしており、5G回線で表示を確認しました。
すみません。私の伝え方が間違っていたかもしれないのですが、このIPアドレスというのは、私が契約したVPSサーバーの固定IPアドレスになります。

[tabuu]

>Content-Security-Policy: The page’s settings blocked the loading of a resource at
>https://static.cloudflareinsights.com

static.cloudflareinsights.comから静的ファイル(オーディオファイル？)を配信しているのですか？
システム構成を詳しく書かないと伝わらないと思います。

[quickquip]

> CROSのエラーが出ます
CORSではなく? (筆が滑っただけならいいのですが、本当に読み違いがあるならそのせいで対処法の検索とかできなかったのでは? と思ったの一応)

[keykey]

ご回答ありがとうございます。対処方法として質問の際に投稿しました。NGINX内に
add_header Content-Security-Policy のものを書きました。エラーは変化しますが、やはりCROSのエラーが解消されませんでした。

[bsdfan]

ipアドレスかドメイン名かではなく、nginxを通していない(ポート3000直)か通しているかの差ではないでしょうか。
両者で、CORS周りのヘッダーが実際にどうなっているかを確認できますか？

[keykey]

ご回答ありがとうございます。一応、ドメイン名でページは表示はされますが、オーディオファイルの読み込みエラーとなって同時にブラウザのコンソールにCORSのエラーがでます。

[hqf00342]

サイトの構成が分からないですが
nginxの設定でproxy_set_headerのあとに次の3行を入れるとどうなりますか？
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"

[keykey]

ご回答ありがとうございます。コードありがとうございました。
少し変化がありました。CORSのメッセージは消えました。ありがとうございます。
しかしデバックバーにこのメッセージが表示されます。
Error fetching audio files: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
そして、オーディオプレーヤーは表示されませんでした。ただ他の部分は表示されます。

不思議なのは、固定IPのアドレスであればこのコンテナは問題なく、オーディオプレーヤーは表示と動作しているので、なぜ今ここでシンタックスエラーなのと思っております。
<anonymous> https://red.hogehoge.com/audio/audioPlayer.js:59
(Async: promise callback)
<anonymous> https://red.hogehoge.com/audio/audioPlayer.js:59
(Async: EventListener.handleEvent)
<anonymous> https://red.hogehoge.com/audio/audioPlayer.js:1

[hqf00342]

少し進んだようでよかったです。次のエラーも理由がありますが、長くなるので回答欄に記載します。

Answer 1

CORSとJavaScriptエラーの2点、回避策を書きますがプログラムの情報が無いので推測も交じります。

CORS

回避策は

1. Dockerコンテナ内のプログラムでCORSの許可を付与
2. nginxで強制的にCORS付与

のどちらかです。1番が正当な方法ですが、nginxで強制挿入するにはproxy_set_headerのあとに次の3行を入れます。

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods "POST, GET, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, Authorization, Accept"

「*」で全許可としていますが、サイト構成が明確ならばドメイン名を入れたほうが安全です。

CORS解決後のJavaScriptエラー

コメントにあるエラー Error fetching audio files: SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data について。

プログラムが不明なため憶測も入りますが、

このエラーが出る時はたいていJSONダウンロードに失敗し「404 NotFound」のようなエラーメッセージが発生している場合です。プログラムのエラー処理が不十分なためエラー応答文字列をJSONと見立ててデコードしようとしてこのエラーになります。

ではなぜ、開発環境では成功するのに本番環境でダウンロードに失敗するのかですが、nginxで/audioディレクトリ下にあるように見せかけていることをDocker内のプログラムが認識できていないためと思います。

例えばJSONが/dir/aaa.jsonの場合、nginxのproxy_pass設定があるため、

/audio/dir/aaa.json

がブラウザから見た正しいリンクです。が、プログラム側はそんなことは知らないため

/dir/aaa.json

というリンクをHTMLやJavaScriptファイルに埋め込みます。ブラウザは/dir/aaa.jsonにアクセスしますがファイルを見つけられず404 NotFoundとなります。nginxのproxy_passはアクセスに来たURLに応じて動作するだけなので、ブラウザに送っているファイルの中身までは書き換えてくれません。

これを回避するには

1. プログラム側が/audio/というパス付きでHTMLやJavaScriptを生成できるようにする
2. nginxの書換機能を使ってプログラムが生成したHTML,JavaScriptファイル内のリンクを途中で書き換える
3. /audio/の下に置くのはあきらめる。

のいずれかが必要です。

1番がお薦めですがプログラム不明なので省略します。コンテキストパスを埋め込む方法が用意されていればそれが簡単です。すべて相対パスで書く案もあります。

2のコンテンツ書換は必要なURLを書き換えできるかがカギです。静的なHTMLだけならばhref= や src= を書き換えればいいので、以下を追加すればいけそうですが、

    set $context "/audio/";
    sub_filter_once off;
    proxy_set_header   Accept-Encoding "";
    sub_filter  'href="/' 'href="$context';
    sub_filter  'src="/' 'src="$context';
    sub_filter  'action="/' 'action="$context';

今回はJavaScript部と思われますので一概には書けないです。
他にも良い方法があるかもしれません。

Comments

[keykey]

ご回答ありがとうございます。詳細にわかりやすく説明していただき誠にありがとうございます。
早速試してみたいと思いますが、私の頭だとゆっくり理解しながらする必要があるので、申し訳ありません。少しお時間をください。結果をまた報告いたします。どうもありがとうございます。

Answer 2

このIPアドレスというのは、私が契約したVPSサーバーの固定IPアドレスになります。

ということなら、そのドメインでIPアドレスを引いてみましょう。
そのVPSサーバのIPが出てくるでしょうか。
出てこないって場合は、そのドメインのDNS設定でIPを設定してあげましょう

Comments

[keykey]

ご回答ありがとうございます。DNS設定は既に済んでいまして、２つのドメイン名の表示はできています。/audioのページも表示はされますがCROSのエラーが出るのでNginxの書き方なのか、docker関連のファイルの書き方なのかと悩んでいたところでした。