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

解決したいこと

以下の構成でアプリを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のまま、上記エラーを解消する方法はないでしょうか？

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

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

hoshi-takanori

2021/05/01 05:11

API も HTTPS にすべきだと思いますけど。

gozikyu

2021/05/01 05:21

hoshi-takanoriさんご指摘ありがとうございます。 APIもHTTPSにする方向で修正しようと思います。 APIのHTTPS化について、今調べておりますが、もし参考になるサイト等ご存知でしたら教えていただけないでしょうか？度々のご質問で恐縮ですがどうぞよろしくお願いいたします。

hoshi-takanori

2021/05/01 05:33

https://独自ドメイン/login (または /api/login) を nginx の reverse proxy で http://localhost:3001/login で処理するとかだと思います。(AWS は詳しくないので、具体的な設定とかは分かりません。) ちなみに、react は通常ユーザーのブラウザ上で動くので、「reactとrails間の通信はAWSの管理下であり盗聴されることはない」という認識は間違ってると思います。

gozikyu

2021/05/01 05:42

アドバイスありがとうございます。 AWSなどどんなインフラを使っていても、結局reactが動くのはブラウザ上なので、そこからAPIを叩きに行く通信はSSL化している必要があるということですね。私の勉強不足でした。教えていただきありがとうございます。 APIのSSL化については教えていただいた方法含め、やり方を調べてみます。解決しましたらこちらで共有させていただきます。

gozikyu

2021/05/01 07:13

何度もすみません。現在の通信の状況の簡略図を作成してみました。これを見るとブラウザ上で動くreactからAWSのALBへの通信はhttpsで行っておりこの間でも盗聴は防げており、ALBからインスタンスへの通信はhttpですが、AWSのVPC内での通信なのでこちらも盗聴は防げている、つまり、ALB以下の通信はhttpでも問題ないと思いました。認識間違っていたら教えていただけないでしょうか。お手数おかけしておりますが、どうぞよろしくお願いいたします。

yu_1985

2021/05/01 10:59

ALBの配下の通信をHTTPSにする必要はありません。クライアントからのリクエストをHTTPSで送るか、ALB側でHTTP→HTTPSのリダイレクトをすれば解決しないですか？クライアントからAPIへのリクエストはALBを経由してるんですよね？

gozikyu

2021/05/01 13: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/01 15:54

> reactファイルにアクセスするのALBとnginx、railsにアクセスする用のALBの2つが必要なのかとイメージしております。必要ないと思います。リスナーとターゲットグループの設定や、フロントのサーバとAPIサーバの区別をどのようにしているのか記載されていないのでわかりませんが、ALBにルールを追加して振り分ければ十分では。リスナーとターゲットグループにどのような設定をしているのか記載してください。まず、ALBを立てているのであれば、おかしな作り方をしていない限りEC2へのリクエストはすべてALBを経由するのでクライアントからnginxに直接リクエストが飛ぶことはありません。また、そもそもhttpsで投げるべきリクエストをhttpで投げてしまっているのが問題だと思うので、見直すべきはクライアント側のリクエストの送り方か、もしくはhttpでのリクエストをALB側で強制的にhttpsにリダイレクトすることだと思います。

gozikyu

2021/05/01 22:29

おっしゃる通り、ALBのルールを追加することで解決いたしました。詳細は図付きで回答欄に記載いたします。丁寧にアドバイスいただき誠にありがとうございました。

行動規範の内容に同意します

回答1件

自己解決

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行目のルールを追加した。