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

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

alb.tf

terraform
1resource "aws_lb" "colonia-alb" {
2    name                        = "colonia-alb"
3    load_balancer_type          = "application"
4    internal                    = false
5    idle_timeout                = 60
6    enable_deletion_protection  = false
7
8    subnets = [
9        aws_subnet.colonia_public_0.id,
10        aws_subnet.colonia_public_1.id,
11    ]
12
13    access_logs {
14        bucket  = aws_s3_bucket.alb_log.id
15        enabled = true
16    }
17
18    security_groups = [
19        module.http_sg.security_group_id,
20        module.https_sg.security_group_id,
21        module.http_redirect_sg.security_group_id,
22        module.ssh-sg.security_group_id,
23    ]
24}
25output "alb_dns_name" {
26        value = aws_lb.colonia-alb.dns_name
27}
28
29module "http_sg" {
30    source          = "./security_group"
31    name            = "http-sg"
32    vpc_id          = aws_vpc.colonia-vpc.id
33    port            = 80
34    cidr_blocks     = ["0.0.0.0/0"]
35}
36
37module "https_sg" {
38    source          = "./security_group"
39    name            = "https-sg"
40    vpc_id          = aws_vpc.colonia-vpc.id
41    port            = 443
42    cidr_blocks     = ["0.0.0.0/0"]
43}
44
45module "http_redirect_sg" {
46    source            = "./security_group"
47    name              = "http-redirect-sg"
48    vpc_id            = aws_vpc.colonia-vpc.id
49    port              = 8080
50    cidr_blocks       = ["0.0.0.0/0"]
51}
52
53# module "ssh-sg" {
54#     source            =  "./security_group"
55#     name              = "ssh-sg"
56#     vpc_id            = aws_vpc.colonia-vpc.id
57#     port              = 10022
58#     cidr_blocks       = ["0.0.0.0/0"]
59# }
60
61resource "aws_lb_listener" "http" {
62    load_balancer_arn   = aws_lb.colonia-alb.arn
63    port                = "80"
64    protocol            = "HTTP"
65
66    default_action {
67        type = "fixed-response"
68
69        fixed_response {
70            content_type = "text/plain"
71            message_body = "これは[HTTP]です"
72            status_code  = "200"
73        }
74    }
75}
76
77data "aws_route53_zone" "wwwcolonia" {
78    name = "wwwcolonia.com"
79}
80
81resource "aws_route53_record" "wwwcolonia" {
82    zone_id = data.aws_route53_zone.wwwcolonia.zone_id
83    name    = data.aws_route53_zone.wwwcolonia.name
84    type    = "A"
85
86    alias {
87        name                    = aws_lb.colonia-alb.dns_name
88        zone_id                 = aws_lb.colonia-alb.zone_id
89        evaluate_target_health  = true
90    }
91}
92
93output "domain_name" {
94    value = aws_route53_record.wwwcolonia.name
95}
96
97resource "aws_acm_certificate" "wwwcolonia" {
98    domain_name                 = aws_route53_record.wwwcolonia.name
99    subject_alternative_names   = []
100    validation_method           = "DNS"
101
102    lifecycle {
103        create_before_destroy = true
104    }
105}
106resource "aws_route53_record" "wwwcolonia_certificate" {
107    name    = aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_name
108    type    = aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_type
109    records = [aws_acm_certificate.wwwcolonia.domain_validation_options[0].resource_record_value]
110    zone_id = data.aws_route53_zone.wwwcolonia.id
111    ttl     = 60
112}
113resource "aws_acm_certificate_validation" "wwwcolonia" {
114    certificate_arn         = aws_acm_certificate.wwwcolonia.arn
115    validation_record_fqdns = [aws_route53_record.wwwcolonia_certificate.fqdn]
116}
117
118resource "aws_lb_listener" "https" {
119    load_balancer_arn   = aws_lb.colonia-alb.arn
120    port                = "443"
121    protocol            = "HTTPS"
122    certificate_arn     = aws_acm_certificate.wwwcolonia.arn
123    ssl_policy          = "ELBSecurityPolicy-2016-08"
124
125    default_action {
126        target_group_arn = aws_lb_target_group.colonia-target.arn
127        type = "forward"
128    }
129}
130
131resource "aws_lb_listener" "redirect_http_to_https" {
132    load_balancer_arn = aws_lb.colonia-alb.arn
133    port              = "8080"
134    protocol          = "HTTP"
135
136    default_action {
137        type = "redirect"
138        
139        redirect {
140            port        = "443"
141            protocol    = "HTTPS"
142            status_code = "HTTP_301"
143        }
144    }
145}
146# resource "aws_lb_listener" "elb-ssh" {
147#     load_balancer_arn = aws_lb.colonia-alb.arn
148#     port                = "10022"
149#     protocol            = "HTTP"
150
151#     default_action {
152#         target_group_arn = aws_lb_target_group.colonia-target.arn
153#         type = "forward"
154#     }
155# }
156resource "aws_lb_target_group" "colonia-target" {
157    name                 = "colonia-target-group${substr(uuid(),0, 3)}"
158    vpc_id               = aws_vpc.colonia-vpc.id
159    target_type          = "instance"
160    port                 = 80
161    protocol             = "HTTP"
162    deregistration_delay = 300
163
164    health_check {
165        path                = "/"
166        healthy_threshold   = 5
167        unhealthy_threshold = 2
168        timeout             = 5
169        interval            = 30
170        matcher             = 200
171        port                = "traffic-port"
172        protocol            = "HTTP"
173    }
174
175    lifecycle {
176        create_before_destroy = true
177        ignore_changes        = [name]
178    }
179
180    depends_on = [aws_lb.colonia-alb]
181}
182
183# resource "aws_alb_target_group_attachment" "alb" {
184#     target_group_arn = aws_lb_target_group.colonia-target.arn
185#     target_id        = aws_instance.colonia.id
186#     port             = 80
187# }
188
189
190resource "aws_lb_listener_rule" "colonia" {
191    listener_arn            = aws_lb_listener.https.arn
192    priority                = 100
193
194    action {
195        type                = "forward"
196        target_group_arn    = aws_lb_target_group.colonia-target.arn
197    }
198
199    condition {
200        field  = "path-pattern"
201        values = ["/*"]
202    }
203}

ec2.tf

terraform
1variable "aws_access_key" {}
2variable "aws_secret_key" {}
3variable "aws_region" {
4    default = "ap-northeast-1"
5}
6
7
8provider "aws" {
9    access_key = "${var.aws_access_key}"
10    secret_key = "${var.aws_secret_key}"
11    region     = "${var.aws_region}"
12}
13resource "aws_key_pair" "auth" {
14    key_name    = "colonia_key"
15    public_key  = file("/home/vagrant/.ssh/colonia_key.pub")
16}
17
18resource "aws_instance" "colonia" {
19    ami           = "ami-f80e0596"
20    instance_type = "t2.micro"
21    monitoring    = true
22    tags = {
23        Name = "colonia"
24    }
25    subnet_id     = aws_subnet.colonia_public_0.id
26    key_name      = aws_key_pair.auth.id
27    vpc_security_group_ids = [aws_security_group.colonia-sg.id]
28}
29

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

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

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

回答2件

ブラウザーのネットワークタブでスタイルシート style.css などを http で取りに行ってないか確認してみてください。

他に動的にスタイルを生成している部分はあったりしますか？

あと、Nginx の設定も考慮する必要があるかもしれません。

全く参考にならないかもしれませんが、Apache + Wordpress のトラブル例をリンクしておきます。

AWS 上の WordPress が HTTPS で正常に表示されない場合の対処 | deadwood

Webサーバ(Apache)の設定(httpd.conf)で環境変数をセットする。
SetEnvIf X-Forwarded-Proto https HTTPS=on

また、上記を参考に以下のようなページを見つけました。

ELB を使用して HTTP トラフィックを HTTPS にリダイレクトする

以下のサンプルの書き換えルールを追加します。設定に合わせて、書き換えルールを変更することを忘れないでください。

server {
    listen 80;
    server_name _;
    if ($http_x_forwarded_proto = 'http'){
    return 301 https://$host$request_uri;
    }
}

投稿2020/05/29 10:19

Yasumichi

総合スコア1773

ベストアンサー

まず、どのように崩れているのかをキャプチャがあると回答しやすいです。
ご存知かと思いますが、描画するのはブラウザの役割なので、httpsしたことでレイアウトが崩れるようなことはないと思います。

ブラウザの開発コンソールでjsエラーがないかをご確認してください。

投稿2020/05/29 09:46

編集2020/05/29 09:50

comefigo

総合スコア1045

kosuke_ikeura

2020/05/29 10:04

すみません。キャッシュを削除したらcssがちゃんと反映されました。おそらく、開発中に以前のバージョンでブラウザでこのサイトにアクセスしていたため、キャッシュが悪さしていたんだと思います。。。。回答ありがとうございます。

comefigo

2020/05/29 10:12 編集

解決されてよかったです。 chromeでしたら、開発コンソールの設定のキャッシュ無効にチェックすることをおすすめします。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

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

関連した質問