目次

1.はじめに
 2.前提
 3.事象
 4.調査内容_アセットプリコンパイル
 5.調査内容_検証ツールでの確認
 6.原因
 7.対応内容
 8.まとめ

はじめに

先日、個人開発したWebアプリをAWSのEC2上にデプロイしたところ、想定外の場所で画面のレイアウト崩れが発生しました。原因を調査し、解消することができましたので、同様の事象が発生した方へのちょっとした手助けになればと思い、記録として残しておきます。

前提

<開発環境>

Mac Catalina(10.15.4)
Visual Studio Code

<フロントエンド>

HTML/CSS

<バックエンド>

Rails：6.0.3
Ruby：2.6.5

<インフラ>

AWSのEC2上にデプロイしており、独自ドメイン名「www.memory-tank.tk」でHTTPS接続できます。

事象

【事象】デプロイをすると、画面の縦方向に対して間延びが発生する。

中でも顕著に現れたのが以下の画面。
ユーザ名の下にあるアイコンとボタンがヘッダーに収まりきれなくなっている。
その他についても画面が全体的に縦方向に間延びしている。

ローカルでは以下の通り、間延びは発生していない。

【ローカルでの画面】

勿論、ローカルのコードとデプロイしたコードは同一です。では、何故上記のような差異が発生したのか？
2種類の方法で調査してみましたので、以降に記載します。

#調査内容_アセットプリコンパイル

本番環境でのレイアウト崩れについて、インターネットで調べてみると、大量にヒットしたのが「アセットプリコンパイルがきちんとできているか」についてでした。

これはRailsの「development(開発)」環境と「production(本番)」環境でassetsのfile構成が変わるため、デプロイ時にきちんと設定をしていないとレイアウト崩れが発生するというものです。

「development(開発)」環境では、CSSファイルは「/app/assets/stylesheets」配下に作成していくかと思います。その際、用途に合わせてファイルを複数作成することもあるでしょう。また、javascriptを使用する場合は、「/app/assets/javascripts」配下にもファイルを作成していくと思います。その際、アセットパイプラインという仕組みが自動で行われ、これらの複数ファイルは圧縮・結合されることにより、画面に反映されます。

しかし、「production(本番)」環境では、このアセットパイプラインという仕組みが自動で実行されません。そのため、デプロイ後は、手動でアセットプリコンパイルという作業を実施し、「/app/assets」配下のファイルを圧縮・結合する必要があります。

ただ、今回のケースにおいて、デプロイ時の作業を振り返ったところ、きちんと「アセットプリコンパイル」は実施済でした。
※「/public/assets」配下にアセットプリコンパイル後のファイルが作成されていることを確認

そもそも、アセットプリコンパイルができていなければ、軒並みCSSが反映されずに、レイアウト崩れはこんなものではないか！ということにも気づき、別の調査をすることにしました。

調査内容_検証ツールでの確認

次に行ったのが検証ツールでの確認です。ローカルの画面とデプロイ後の画面、各々を並べた状態で、該当部分の状態を比較してみました。そこで、分かったことがひとつ。。

デプロイ後の画面のみ、謎の上下方向のmarginが発生していました！
※ ユーザ名だけでなく、様々なところの要素で発生しています。

【デプロイ後の画面】

【ローカルでの画面】

ここで「ブラウザがデフォルトで持っているCSS」の仕業だと判明。しかし、ここで疑問がひとつ。たしか、対策として「リセットCSS」は適用していたような。。

/app/assets/views/layouts/application.html.erb

 <head>
    <title >MemoryTank</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet"  href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
  </head>

Yahoo!のリセットCSSを読み込む記述をしています。うーん。。

他にも何かないか検証ツールで探していると、気になるエラーが出ていることを発見しました。

原因

どうやら、HTTPS接続を前提としている今回のアプリにおいて、リセットCSSを「HTTP」で読み込もうとしているため、安全ではないよということでブロックされているみたいです。
【結論】リセットCSSが反映されていない！

対応内容

ということで、以下の通り、リセットCSSをうまく反映させることで今回の事象は解決できました。

リセットCSSをHTTP経由で反映させようとせず、「/app/assets/stylesheets」配下に作成しておく。

上記実施後の画面です。検証ツールで再度確認してしてみると、上下のmarginは無くなっていました。

まとめ

今回の事象は、それなりに解消まで時間がかかったため、同様の事が発生した方への参考になればと思い、記録として残してみました。「検証ツール」で確認することにより解消できたようなものなので、今後、画面関連で不具合が発生した際は、真っ先に活用していきたいと思いました。

以上、最後まで読んで頂きありがとうございました！