1
/
5

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


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

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

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

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

①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」ではうまく表示できているが、主要4ブラウザの残り二つ「Safari」「Fire Fox」ではうまく表示できない、または画面が崩れている、などの事象が発生したります!
そのため開発環境でもWebアプリの動作テストを行う際は上記4つのブラウザでテストを行うことが、品質担保をするために必要です!

原因は様々ありますが、
・ブラウザが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>

上記コードの<?t=20221224>の部分がキャッシュクリアの設定となります!
代表的な更新ファイル
Apacheの設定など

httpd.conf

アクセス時のリダイレクト処理など

.htaccess

最後に

一部ですが、改めてWebアプリケーションの仕組みをトラブル対応について記載させて頂きました!
みなさんの引き出しに入れておいて頂き、いざという時に思い出して頂けると幸いです!




最後に

今回は弊社で活躍されているエンジニアに記事を執筆していただきました!

オータムでは未経験や異業種からでもエンジニアとして活躍できる機会を多く提供しています!

オータムでIT業界やWEB業界でエンジニアとして活躍したい!という方は是非とも一度お話しましょう!!

Webエンジニア/未経験OK
東京採用!オータムの温かいコミュニティで、エンジニアとしての成長を体験!
〇Visionの実現に向けた教育・事業開発 オータムでは『100、100、100の実現』というVisionを掲げ、100の事業の創出・100の起業家の輩出・100%の顧客・従業員満足を得る会社づくりを目指しています。 そのために自社教育カリキュラムおよび教育体制の構築、また積極的に自社事業の開発を実施しています。 自社教育カリキュラムにはエンジニアとしてのスキルアップだけでなく、経営・マーケティングといった事業経営目線のものも用意しており、将来的に事業を担い、起業家として活躍できる人材の教育を推進しています。 〇SES事業 ~System Engineering Service~ 当社が0から育成したエンジニアを大手企業やメガベンチャー等、様々な開発案件へアサインしています。 未経験からでもエンジニアになれる環境を整え、スキルアップ段階で受託開発や自社開発事業に携わることで、開発現場にも入りやすくなっています。 〇自社開発事業 世の中の困りごとを解決するべく、幅広いWebサービスの開発を進めています。 ・個人間の決め事や約束を具体的な契約として残し、小さな約束ごとを大切にするアプリ「キメゴト。」 ・メタバース事業 これからも人々の生活を様々な場面で豊かにするサービスをどんどん開発して行く予定です! 〇Web制作・運用 クライアント企業のホームページやランディングページの制作・運用、ECサイトの構築を行っています。 Webマーケティングの知見に基づいた企画・構成~制作・運用を一貫して行えるのがオータムの強みです。 ☆自己成長を望む人材にとって心地良い環境! オータムは教育に力を入れています。 エンジニアスキルを磨く教育はもちろん、事業開発・起業に必要なスキル・知識を習得することが可能です。 ※マーケティング、ロジカル・デザインシンキングなどの思考法、マネジメント、  商品開発について・顧客満足を高める方法・行動経済学 等々、体系的・網羅的に学習可能です。 エンジニア人材のニーズがどんどん高まっていくなかで、エンジニアの数自体も増えつつあります。 そうした世の中で、ただ目の前のコードに向き合うのではなく、事業・クライアント目線を持ったエンジニアが必要だと思っており、我々は「起業家思考のエンジニア」育成に力を入れています。 逆説的に言うと、プログラミングだけができるエンジニアは、近い将来淘汰されると予測しています。 ぜひオータムで共に成長し、希少価値の高いエンジニアを目指してください! 向上心のあるメンバーにはどんどん役割とポジションを与え、裁量のある仕事を得るチャンスがある環境です。 経営企画や教育管理責任者など、本人からの申し出によって創設されたポジションが実際にあり、これからもメンバーの声を吸い上げながらより良い組織を創っていきます。
株式会社オータム
Webエンジニア/未経験OK
大阪採用!オータムでゼロからエンジニアのキャリアを手に入れる!
〇Visionの実現に向けた教育・事業開発 オータムでは『100、100、100の実現』というVisionを掲げ、100の事業の創出・100の起業家の輩出・100%の顧客・従業員満足を得る会社づくりを目指しています。 そのために自社教育カリキュラムおよび教育体制の構築、また積極的に自社事業の開発を実施しています。 自社教育カリキュラムにはエンジニアとしてのスキルアップだけでなく、経営・マーケティングといった事業経営目線のものも用意しており、将来的に事業を担い、起業家として活躍できる人材の教育を推進しています。 〇SES事業 ~System Engineering Service~ 当社が0から育成したエンジニアを大手企業やメガベンチャー等、様々な開発案件へアサインしています。 未経験からでもエンジニアになれる環境を整え、スキルアップ段階で受託開発や自社開発事業に携わることで、開発現場にも入りやすくなっています。 〇自社開発事業 世の中の困りごとを解決するべく、幅広いWebサービスの開発を進めています。 ・個人間の決め事や約束を具体的な契約として残し、小さな約束ごとを大切にするアプリ「キメゴト。」 ・メタバース事業 これからも人々の生活を様々な場面で豊かにするサービスをどんどん開発して行く予定です! 〇Web制作・運用 クライアント企業のホームページやランディングページの制作・運用、ECサイトの構築を行っています。 Webマーケティングの知見に基づいた企画・構成~制作・運用を一貫して行えるのがオータムの強みです。 ☆自己成長を望む人材にとって心地良い環境! オータムは教育に力を入れています。 エンジニアスキルを磨く教育はもちろん、事業開発・起業に必要なスキル・知識を習得することが可能です。 ※マーケティング、ロジカル・デザインシンキングなどの思考法、マネジメント、  商品開発について・顧客満足を高める方法・行動経済学 等々、体系的・網羅的に学習可能です。 エンジニア人材のニーズがどんどん高まっていくなかで、エンジニアの数自体も増えつつあります。 そうした世の中で、ただ目の前のコードに向き合うのではなく、事業・クライアント目線を持ったエンジニアが必要だと思っており、我々は「起業家思考のエンジニア」育成に力を入れています。 逆説的に言うと、プログラミングだけができるエンジニアは、近い将来淘汰されると予測しています。 ぜひオータムで共に成長し、希少価値の高いエンジニアを目指してください! 向上心のあるメンバーにはどんどん役割とポジションを与え、裁量のある仕事を得るチャンスがある環境です。 経営企画や教育管理責任者など、本人からの申し出によって創設されたポジションが実際にあり、これからもメンバーの声を吸い上げながらより良い組織を創っていきます。
株式会社オータム


株式会社オータム's job postings

Weekly ranking

Show other rankings
Invitation from 株式会社オータム
If this story triggered your interest, have a chat with the team?