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

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

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

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2679閲覧

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

gozikyu

総合スコア4

HTTPS

HTTPS(Hypertext Transfer Protocol Secure)はHypertext Transfer プロトコルとSSL/TLS プロトコルを組み合わせたものです。WebサーバとWebブラウザの間の通信を暗号化させて、通信経路上での盗聴や第三者によるなりすましを防止します。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/05/01 05:05

編集2021/05/01 12:45

解決したいこと

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

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

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

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

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

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

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

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

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のルールを追加することで解決いたしました。 詳細は図付きで回答欄に記載いたします。 丁寧にアドバイスいただき誠にありがとうございました。
guest

回答1

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行目のルールを追加した。
イメージ説明

投稿2021/05/01 22:51

gozikyu

総合スコア4

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問