WEBアプリケーションの基礎知識

今回はインフラ関係の技術的知識について紹介します。

Webアプリがブラウザに表示される仕組みとは？

Webアプリに関する用語の基本的な説明

Webアプリのブラウザ表示には
「IPアドレス」「ドメイン」「webブラウザ」「webサーバー」「DNS」の５要素が必要です！

①IPアドレス
インターネットなどのIPネットワークに接続する端末や機器に割り当てられる識別番号です。接続中の端末や機器の1台1台に一意の値が割り当てられます。
例） 192.0.2.1

②ドメイン
Webの世界ではWebサイトや、サーバーなどの機器を識別するためにつけられた住所や愛称のようなものです。
インターネットではIPアドレスによりデータの送受信先を指定しますが、数値だけで表現されるIPアドレスは人間にとって扱いにくいものです。
そのため、IPアドレスに紐づく名前として、人が認識したり覚えやすかったりするアルファベット表記の「ドメイン」が作られ、IPアドレスと併用されています。
例） https://www.hogehoge.jp

③Webブラウザ
Webブラウザとは、インターネット上に開設されたWebページを閲覧するためのアプリケーションです。
WebブラウザはWebサーバーにあるファイルデータを指定されたレイアウトで表示します。
ブラウザによって機能はさまざまで、第三者が開発したプラグインや拡張機能を追加して利用することもできます。
ですが実は注意が必要で、例えばみなさんが普段使用している「chrome」や「Microsoft Edge」ではうまく表示できているが、主要４ブラウザの残り二つ「Safari」「Fire Fox」ではうまく表示できない、または画面が崩れている、などの事象が発生したります！
そのため開発環境でもWebアプリの動作テストを行う際は上記４つのブラウザでテストを行うことが、品質担保をするために必要です！

原因は様々ありますが、
・ブラウザがjavaScriptに対応していない、または読み込まなくなっている
・ブラウザのバージョンが適切でない
・ブラウザキャッシュが残っていて、CSS、JSが更新しても過去のものが表示されてしまう
・開発環境でのHTML内で読み込んでいるCSS、JSのキャッシュクリアを対応していない
上記のようなことが起こった場合は開発者が修正することになります！

④Webサーバー
Webサーバーとは、WebサーバーソフトとWebサイトの構成ファイルを格納している通信機器のことです。
Webサーバーはインターネットに接続されており、ネットワークを通じてアクセスしてきた端末にデータや機能を提供します。
国内で著名なWebサーバーソフトに「Apache」「Nginx」「IIS」があります。

⑤DNS
DNS（Domain Name System）は、ドメインとそれに対応するIPアドレスの管理をするシステムのことです。
WebサイトのドメインをDNSシステムに照会し、アクセス先のIPアドレスを参照します。

では実際のところ、現場ではどのような対応をすることになるの？

上記でWebアプリに関する用語の基本的な説明を致しましたが、
では現場で何かあった時どう対応するの？というのが技術的意見かと思います！
下記で代表的なものを確認しておきましょう！

① トラブルの例
大量アクセスによりwebサーバーが落ちてしまった！！
->上記はDos、Ddos攻撃という大量アクセス攻撃
対応例）
・外部ツールを使い、静的ファイルのキャッシュ化を行う
→こちらが比較的対策手法として多く用いられている印象で、内部で完結することは困難であることも多いため。
・攻撃してきているIPアドレスを特定し、遮断する。
->アクセスログの確認を行い、特定する、CMDで対象の.logファイルが置いてあるディレクトリへ移動し、tail コマンドなどでログの確認、IPアドレスを特定し、.htaccessファイルに下記の様な設定を行う。

                
Require all granted
Require not ip 192.168.0.0
                


                
Require all granted
Require not ip 192.168.0.0

② トラブルの例
HTML、CSS、JSを更新したが、画面が崩れている
→原因はブラウザキャッシュが残っていることによるバグ対応例) ・ブラウザのキャッシュの全削除 ・HTML内に記載のコードでキャッシュクリア

                
<link rel="stylesheet" href="/static/css/form.css?t=20221110>
<script src="hoge/huga/js/test.js?t=20221224""</script>
                


                
<link rel="stylesheet" href="/static/css/form.css?t=20221110>
<script src="hoge/huga/js/test.js?t=20221224""</script>