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

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

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

Terraformは、インフラ構築のためのツールです。AWS/DigitalOcean/GoogleCloudといった様々なインフラに対応。インフラ構成のコード管理や変更の作業などの手間を自動化し、インフラ構築の効率化を図ることができます。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

HTTPS

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AWS(Amazon Web Services)

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

解決済

aws https通信するとレイアウトが崩れる

kosuke_ikeura
kosuke_ikeura

総合スコア19

Terraform

Terraformは、インフラ構築のためのツールです。AWS/DigitalOcean/GoogleCloudといった様々なインフラに対応。インフラ構成のコード管理や変更の作業などの手間を自動化し、インフラ構築の効率化を図ることができます。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

HTTPS

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AWS(Amazon Web Services)

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

2回答

0リアクション

0クリップ

3493閲覧

投稿2020/05/29 09:30

https通信をすると、レイアウトが崩れます。
その原因は何が考えられるでしょうか?

まとめサイトのようなサイトを作っています。
フロントは、html css javascript jquery d3.js
バックエンドは何もないです。
環境構築をawsのサービスを使用しており、terraformを使ってインフラをコード化しています。

【問題点】
https://取得したドメインでurlで叩くと、cssのレイアウトが崩れます。
しかし、publicサブネットに置いてある、ec2インスタンスのipアドレスをベタがきしてアクセスするとcssが崩れずにうまく表示されます。
httpsとhttp通信によってソースコードに影響を与えるものがなんなのかわかりません。

【試したこと】
d3.js jqueryなどを読み込むためのcdn等がhttp通信になっていると、うまく表示されないという記事を見たので確認しましたが、全てhttps通信で呼び出していました。

【環境構成】
フロントにalbを設置して、エンドユーザーからのリスナーはhttps通信としています。
albとec2はprotocol=http port80で、nginxが入っているec2インスタンスに接続させています。
ec2インスタンスはprivateサブネットではなく、publicサブネットに置いているので、インスタンスのipアドレスを辿れば、albを介さずに現状はアクセスできます。この方法でブラウザに表示すると、うまく表示されることを確認しています。

【ソースコード】
問題がありそうなソースコードのみ記載しておきます。
より詳細に見てくださる方は下記のgithubにあげていますので、見ていただけると幸いです。
github

new.html(非常に長いので、headタグのみ記載します。)

html

<head> <meta charset="UTF-8"> <title>D3.js_demo</title> <link rel=”icon” href=“favicon.ico”> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.js"></script>--> </head>

alb.tf

terraform

resource "aws_lb" "colonia-alb" { name = "colonia-alb" load_balancer_type = "application" internal = false idle_timeout = 60 enable_deletion_protection = false subnets = [ aws_subnet.colonia_public_0.id, aws_subnet.colonia_public_1.id, ] access_logs { bucket = aws_s3_bucket.alb_log.id enabled = true } security_groups = [ module.http_sg.security_group_id, module.https_sg.security_group_id, module.http_redirect_sg.security_group_id, module.ssh-sg.security_group_id, ] } output "alb_dns_name" { value = aws_lb.colonia-alb.dns_name } module "http_sg" { source = "./security_group" name = "http-sg" vpc_id = aws_vpc.colonia-vpc.id port = 80 cidr_blocks = ["0.0.0.0/0"] } module "https_sg" { source = "./security_group" name = "https-sg" vpc_id = aws_vpc.colonia-vpc.id port = 443 cidr_blocks = ["0.0.0.0/0"] } module "http_redirect_sg" { source = "./security_group" name = "http-redirect-sg" vpc_id = aws_vpc.colonia-vpc.id port = 8080 cidr_blocks = ["0.0.0.0/0"] } # module "ssh-sg" { # source = "./security_group" # name = "ssh-sg" # vpc_id = aws_vpc.colonia-vpc.id # port = 10022 # cidr_blocks = ["0.0.0.0/0"] # } resource "aws_lb_listener" "http" { load_balancer_arn = aws_lb.colonia-alb.arn port = "80" protocol = "HTTP" default_action { type = "fixed-response" fixed_response { content_type = "text/plain" message_body = "これは[HTTP]です" status_code = "200" } } } data "aws_route53_zone" "wwwcolonia" { name = "wwwcolonia.com" } resource "aws_route53_record" "wwwcolonia" { zone_id = data.aws_route53_zone.wwwcolonia.zone_id name = data.aws_route53_zone.wwwcolonia.name type = "A" alias { name = aws_lb.colonia-alb.dns_name zone_id = aws_lb.colonia-alb.zone_id evaluate_target_health = true } } output "domain_name" { value = aws_route53_record.wwwcolonia.name } resource "aws_acm_certificate" "wwwcolonia" { domain_name = aws_route53_record.wwwcolonia.name subject_alternative_names = [] validation_method = "DNS" lifecycle { create_before_destroy = true } } resource "aws_route53_record" "wwwcolonia_certificate" { name = aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_name type = aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_type records = [aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_value] zone_id = data.aws_route53_zone.wwwcolonia.id ttl = 60 } resource "aws_acm_certificate_validation" "wwwcolonia" { certificate_arn = aws_acm_certificate.wwwcolonia.arn validation_record_fqdns = [aws_route53_record.wwwcolonia_certificate.fqdn] } resource "aws_lb_listener" "https" { load_balancer_arn = aws_lb.colonia-alb.arn port = "443" protocol = "HTTPS" certificate_arn = aws_acm_certificate.wwwcolonia.arn ssl_policy = "ELBSecurityPolicy-2016-08" default_action { target_group_arn = aws_lb_target_group.colonia-target.arn type = "forward" } } resource "aws_lb_listener" "redirect_http_to_https" { load_balancer_arn = aws_lb.colonia-alb.arn port = "8080" protocol = "HTTP" default_action { type = "redirect" redirect { port = "443" protocol = "HTTPS" status_code = "HTTP_301" } } } # resource "aws_lb_listener" "elb-ssh" { # load_balancer_arn = aws_lb.colonia-alb.arn # port = "10022" # protocol = "HTTP" # default_action { # target_group_arn = aws_lb_target_group.colonia-target.arn # type = "forward" # } # } resource "aws_lb_target_group" "colonia-target" { name = "colonia-target-group${substr(uuid(),0, 3)}" vpc_id = aws_vpc.colonia-vpc.id target_type = "instance" port = 80 protocol = "HTTP" deregistration_delay = 300 health_check { path = "/" healthy_threshold = 5 unhealthy_threshold = 2 timeout = 5 interval = 30 matcher = 200 port = "traffic-port" protocol = "HTTP" } lifecycle { create_before_destroy = true ignore_changes = [name] } depends_on = [aws_lb.colonia-alb] } # resource "aws_alb_target_group_attachment" "alb" { # target_group_arn = aws_lb_target_group.colonia-target.arn # target_id = aws_instance.colonia.id # port = 80 # } resource "aws_lb_listener_rule" "colonia" { listener_arn = aws_lb_listener.https.arn priority = 100 action { type = "forward" target_group_arn = aws_lb_target_group.colonia-target.arn } condition { field = "path-pattern" values = ["/*"] } }

ec2.tf

terraform

variable "aws_access_key" {} variable "aws_secret_key" {} variable "aws_region" { default = "ap-northeast-1" } provider "aws" { access_key = "${var.aws_access_key}" secret_key = "${var.aws_secret_key}" region = "${var.aws_region}" } resource "aws_key_pair" "auth" { key_name = "colonia_key" public_key = file("/home/vagrant/.ssh/colonia_key.pub") } resource "aws_instance" "colonia" { ami = "ami-f80e0596" instance_type = "t2.micro" monitoring = true tags = { Name = "colonia" } subnet_id = aws_subnet.colonia_public_0.id key_name = aws_key_pair.auth.id vpc_security_group_ids = [aws_security_group.colonia-sg.id] }

完璧な回答もできれば必要ですが、ヒントになりそうなことでもいいので教えてくださると嬉しいです。
http通信とhttps通信でソースコードに影響を及ぼす原因など、抽象的でも良いので、考えられるデバックの方法を教えてください。

何卒よろしくお願いします。

以下のような質問にはリアクションをつけましょう

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

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

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

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

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Terraform

Terraformは、インフラ構築のためのツールです。AWS/DigitalOcean/GoogleCloudといった様々なインフラに対応。インフラ構成のコード管理や変更の作業などの手間を自動化し、インフラ構築の効率化を図ることができます。

D3.js

D3.jsとは、データに基づいてHTMLやSVGドキュメントを編集するために作られた、小規模なオープンソースのJavaScript可視化ライブラリです。

HTTPS

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AWS(Amazon Web Services)

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