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

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

ただいまの
回答率

87.34%

AWSでドメインへのアクセスをSSL化したが、アプリ内のAPIへのアクセスがHTTPでMixed Contentになる

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 478

score 4

解決したいこと

以下の構成でアプリをSSL化してデプロイしたいです。

フロントエンド:react
バックエンド:rails
インフラ:AWS下記図

EC2にdockerをインストールして、docker-composeでreact、rails、nginxを起動しています。

イメージ説明

docker-compose.yml

version: "3"
services:
  app:
    build:
      context: ./api/
      dockerfile: Dockerfile
    env_file:
      - ./api/environments/db.env
    command: bundle exec puma -C config/puma.rb -e production

    volumes:
      - ./api:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
  web:
    build:
      context: ./api/containers/nginx
      dockerfile: Dockerfile
    volumes:
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 3001:80
    depends_on:
      - app
  front:
    build:
      context: ./front/
      dockerfile: Dockerfile
    volumes:
      - ./front:/usr/src/app
    command: sh -c "cd react_front && npm start "
    ports:
      - "80:3000"
volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:


nginx.conf

# プロキシ先の指定
# Nginxが受け取ったリクエストをバックエンドのpumaに送信
upstream webapp {
  # ソケット通信したいのでpuma.sockを指定
  server unix:///webapp/tmp/sockets/puma.sock;
}

server {
  listen 80;
  # ドメインもしくはIPを指定
  server_name 独自ドメイン;

  access_log /var/log/nginx/access.log;
  error_log  /var/log/nginx/error.log;

  # ドキュメントルートの指定
  root /webapp/public;

  client_max_body_size 100m;
  error_page 404             /404.html;
  error_page 505 502 503 504 /500.html;
  try_files  $uri/index.html $uri @webapp;
  keepalive_timeout 5;

  # リバースプロキシ関連の設定
  location @webapp {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_pass http://webapp;
  }
}

困っていること

独自ドメインへのアクセスはALBにSSLの証明書を適用することでSSL化できております。
しかし、ALBから先はSSL化していないので、フロントエンドのreactからrailsのAPIへリクエストをHTTPで投げるときに以下のようにMixed Contentのエラーが発生していまいます。

xhr.js:177 Mixed Content: The page at 'https://独自ドメイン/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://独自ドメイン:3001/login'. This request has been blocked; the content must be served over HTTPS.


reactとrails間の通信はAWSの管理下であり盗聴されることはないと考えているため、HTTPで通信を行っています。
イメージ説明

reactとrails間の通信をHTTPのまま、上記エラーを解消する方法はないでしょうか?

知見ございます方がいらっしゃいましたら、アドバイスいただけると幸いです。

よろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gozikyu

    2021/05/01 22:03

    yu_1985さん
    アドバイスありがとうございます。
    クライアントからAPIへのリクエストはALBを経由しています。

    EC2上でdocker-composeによってreactをポート80で、nginxをポート3001→rails-apiに転送 という設定でデプロイしています。
    この場合、クライアントからのリクエストをポート3001にあるnginx→railsに送るには、APIリクエスト用のALBをもう一つ立てなければ行けないのでしょうか?
    本文に追加しました、図のようなイメージです。reactファイルにアクセスするのALBとnginx、railsにアクセスする用のALBの2つが必要なのかとイメージしております。

    キャンセル

  • yu_1985

    2021/05/02 00:54

    > reactファイルにアクセスするのALBとnginx、railsにアクセスする用のALBの2つが必要なのかとイメージしております。

    必要ないと思います。
    リスナーとターゲットグループの設定や、フロントのサーバとAPIサーバの区別をどのようにしているのか記載されていないのでわかりませんが、ALBにルールを追加して振り分ければ十分では。
    リスナーとターゲットグループにどのような設定をしているのか記載してください。

    まず、ALBを立てているのであれば、おかしな作り方をしていない限りEC2へのリクエストはすべてALBを経由するのでクライアントからnginxに直接リクエストが飛ぶことはありません。

    また、そもそもhttpsで投げるべきリクエストをhttpで投げてしまっているのが問題だと思うので、見直すべきはクライアント側のリクエストの送り方か、もしくはhttpでのリクエストをALB側で強制的にhttpsにリダイレクトすることだと思います。

    キャンセル

  • gozikyu

    2021/05/02 07:29

    おっしゃる通り、ALBのルールを追加することで解決いたしました。
    詳細は図付きで回答欄に記載いたします。

    丁寧にアドバイスいただき誠にありがとうございました。

    キャンセル

回答 1

check解決した方法

0

reactからapiへのリクエストのルーティングをALBに設定できていないことが原因でした。
アドバイス頂いた皆様、本当にありがとうございました。

また、コードやAWSの設定を共有していないせいで、修正依頼を度々してもらう形となり申し訳ありませんでした。

以下解決した経緯を記載します。

【react】
起動している場所:ec2のport80
ブラウザから独自ドメインにhttps(port443)でアクセスした際、にec2のport80に転送されるようにターゲットのportfolio-ec2に設定。

【nginx→rails】
起動している場所:ec2のport3001
ブラウザ上で動いているreactから独自ドメインにhttps(port3001)でリクエストした際、にec2のport3001に転送されるようにターゲットのportfolio-apiに設定。

axiosで独自ドメインのport3001にリクエストを送っているため、これがec2に届くようにルールを設定しなければ行けなかったが、これができていなかったため、通信が行えなかった。

↓reactがapiにリクエストを送っているコードの例 4行目でaxiosを使ってリクエストを送っている。

  const signIn = () => {
    axios
      .post(
        独自ドメイン + ":3001" + "/login",
        {
          user: {
            email: email,
            password: password,
          },
        },
        { withCredentials: true }
      )
      .then((response) => {
        console.log("registration res", response);
        const createdId = response.data.user_id;
        console.log(createdId);
        props.login();
        history.push({ pathname: "/users/" + createdId });
      })
      .catch((error) => {
        console.log("registration error", error);
        alert("メールアドレスとパスワードの組み合わせが正しくありません。");
      });
  };

設定変更後のALBのルール
2行目のルールを追加した。
イメージ説明

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 87.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る