Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Webアプリケーション概要 2021 / Web Application Overview 2021
Cybozu
PRO
April 26, 2021
Technology
18
82k
Webアプリケーション概要 2021 / Web Application Overview 2021
Cybozu
PRO
April 26, 2021
Tweet
Share
More Decks by Cybozu
See All by Cybozu
GaroonUX リサーチャーお仕事紹介 / GaroonUX Researcher Job Introduction
cybozuinsideout
PRO
0
26
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
0
680
OSS分散ストレージの調査例 - 未知のエラーメッセージが出たときの対処 -/cnsm2-cybozu-oss-storage-survey-example
cybozuinsideout
PRO
0
56
アクセシビリティに興味のあるデザイナーに向けて
cybozuinsideout
PRO
1
10k
サイボウズ Garoon プロダクトマネージャー業務紹介/Garoon PM
cybozuinsideout
PRO
0
770
20211130-engineer-topseminar-teppeis
cybozuinsideout
PRO
0
340
20211130-engineer-topseminar-okady
cybozuinsideout
PRO
0
190
20211128-wafflefestival
cybozuinsideout
PRO
0
340
kintoneフロントエンド刷新におけるアクセシビリティの取り組み / Accessibility in kintone front-end revamp
cybozuinsideout
PRO
1
250
Other Decks in Technology
See All in Technology
Steps toward self-service operations in eureka
fukubaka0825
0
410
CADDi HCMC Technology Center
caddi_eng
0
230
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
2.8k
株式会社オプティム_採用会社紹介資料 / optim-recruit
optim
0
5.2k
Babylon.js で簡単 WebXR
yuhara0928
1
860
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
0
570
New Features in C# 10/11
chack411
0
650
AWS Control TowerとAWS Organizationsを活用した組織におけるセキュリティ設定
fu3ak1
2
610
インフラエンジニアBooks 30分でわかる「Dockerコンテナ開発・環境構築の基本」
cyberblack28
11
6.6k
ニフティでSRE推進活動を始めて取り組んできたこと
niftycorp
2
180
Devに力を授けたいSREのあゆみ / SRE that wants to empower developers
tocyuki
3
440
実験!カオスエンジニアリング / How to Chaos Engineering
oracle4engineer
PRO
0
130
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
404
21k
Happy Clients
brianwarren
89
5.5k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Docker and Python
trallard
27
1.5k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_i
21
14k
How To Stay Up To Date on Web Technology
chriscoyier
780
250k
What the flash - Photography Introduction
edds
61
9.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
KATA
mclloyd
7
8.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
11
4.6k
Transcript
Webアプリケーション概要 2021 Yakumoチーム, Slash/CyDE-Cチーム ⾚井駿平
Introduction ▌Webアプリを作るのに必要な基礎知識を話します l 割りと雑多な知識 l 必要になった時にキーワードを思い出して⾃分で調べられ るように
whoami ▌⾚井 駿平 l 2013年⼊社 l Yakumoチーム, Slash/CyDE-Cチーム 所属 lAWSやミドルウェアからwebフロントエンドまで⾊々担当
Webアプリケーションとはなんぞや ▌Webブラウザをインターフェースとして⼊出⼒するアプリ ケーション l 通信はHTTP、表⽰はHTML, CSS ▌実際のアプリはサーバーにある ▌≠ネイティブアプリ、デスクトップアプリ l 内部的にはWebアプリが提供するAPIを叩いている場合も
▌サイボウズが作っている製品はほとんどがWebアプリ
Webサーバーは何をする?
Webサーバー ▌HTTPを処理するサーバー l クライアントからリクエ ストを受け付けて l 所望の結果を返す ▌Apache, IIS, nginx...
request: index.htmlください response: index.html どうぞ!
Webサーバーがやること ▌リクエストを受け付ける ▌結果を(読み込む|計算する) ▌結果を送り返す ▌通信と計算のセット l ⼊⼒+計算+出⼒ = プログラムの本質 l
通信をプログラムでどう⾏うか → Socket
Socket ▌サーバーとクライアントで通信するためのAPI l 主にTCP, UDP を使う l 同じマシン同⼠で通信しても、別のマシンと通信してもよ い
Socket: クライアント側 ▌やること l 初期化 socket() l サーバーと接続 connect() l
送信 write() / 受信 read() l 終了 close() int sock = socket(AF_INET, SOCK_STREAM, 0); connect(sock, アドレス, len); write(sock, buf, buflen); read(sock, buf, buflen); close(sock);
Socket: サーバー側 ▌やること l socket() l アドレスを設定 bind() l リクエスト受付
listen() l リクエストを確⽴ accept() l read()/write() l close() int sock = socket(AF_INET, SOCK_STREAM, 0); bind(sock, アドレス, len); listen(sock, 128); while(1) { int fd = accept(sock, NULL, NULL); write(fd, buf, buflen); read(fd, buf, buflen); close(fd); } close(sock);
複数のリクエストが来たら ▌サーバーが1つのリクエストを処理している時に別のリクエス トが来る l 前のページのコードだとどうなる?
同時に複数のリクエストを捌く ▌リクエストの待受とリクエストの処理を同時に⾏えると良い l acceptが返ったら処理を開始 l 処理の結果を待たずに、すぐにacceptに戻る ▌プロセスやスレッドを使う while(1) { int
fd = accept(sock, NULL, NULL); 処理開始(fd); //すぐに返ってくる }
プロセス ▌プログラムの実⾏の単位 l コマンドやアプリを起動するとプロセスが⽴ち上がる l 別のプロセスのメモリにはアクセスできない l 異なるプロセスは並列に動くことができる ▌Webサーバーでは l
リクエストを受付 l 処理プロセスを起動してソケットを引き継ぐ
スレッド ▌1つのプロセスの中の処理の単位 l プロセスより軽い l 並列に実⾏可能 l 同じプロセスの別のスレッドのメモリにアクセスできる ▌Webサーバーでは l
リクエストを受付 l 処理スレッドを起動して処理をする
▌Socketとプロセス/スレッドを使えば、webサーバーのような ものを作れる l 接続数が⾮常に多くなると? (C10K問題) → ⾮同期I/Oなど を調べてみよう
Webアプリケーション
動的なWebページ ▌Webは静的なページを返すだけじゃない l Input-Process-Output (= プログラム) l“Process” で任意のプログラムを実⾏して結果を返す l サイボウズOfficeもGaroonもkintoneもメールワイズもこの
タイプ ▌処理の仕⽅はいろいろある
CGI: Common Gateway Interface ▌Webサーバーとプログラムがやりとりするためのインターフェース l リクエストが来るたびにアプリのプロセスを起動する l リクエストの内容は、環境変数や標準⼊⼒で渡される l
結果は標準出⼒で返す ▌昔はこのやり⽅が主流 l Perlの時代 l 毎回プロセスを起動するので遅い l サイボウズ Office / メールワイズは今でもこれ request response program stdin/env stdout
Webアプリケーションサーバー ▌Webアプリケーションを実⾏するサーバー l CGIと異なり、通常起動しっぱなし l Webサーバーがアプリケーションサーバーにリクエストを 中継する l主にHTTPでやりとり l アプリケーションサーバーとアプリの間
l特定のメソッドを呼んだりしてやりとり request response App server request response App
永続化/データベース ▌Webアプリを作るとデータを保存したくなる l プログラムやマシンが終了してもデータが残る l cf. memcached ▌⾊々なやり⽅ l 素朴にファイルに保存
l ⾃分で競合、不整合などを回避するのは⼤変 l ⼤規模だと⼤変になる l サイボウズOffice… l データベース管理システム(DBMS) l 難しいことの⾯倒を⾒てくれる
データベース管理システム(DBMS) ▌RDBMS / SQL l 「関係モデル」というものを扱うデータベース l SQLという⾔語で操作する l 後⽇詳しくやります
▌NoSQL l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り) l キーバリューストア(KVS) l キーとバリューのペアの形式だけ保存 l ドキュメント指向データベース l 柔軟な構造のデータを保存
ログイン ▌Webアプリにはほぼ必須な機能 l ユーザー毎にデータを保存/ユーザーを特定 l ログインした後、別のページから戻ってきてもログインさ れたまま l どう実現する?
Cookie (RFC 6265) ▌サーバー側からクライアントにデータを保存される仕組み l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー を載せてレスポンスを返す lクライアントはそのペアを保存する
l クライアントはリクエストに「Cookie: <キー>=<値>」 を載せる lSet-Cookieを返してきたドメインにだけ送る ▌HTTPが状態を持つことができる Set-Cookie: login=true Cookie: login=true
セッション ▌⼀連のアクセスでデータを保持する仕組み l Cookieじゃセキュリティ的に… l パスワードを毎回送る? 勝⼿に書き換えられたら? l データ量に限界 ▌セッション開始時(ログイン時に)ランダムな
IDを発⾏ l それをCookieに保持する l データはIDをキーにサーバー側に保存する Set-Cookie: lD=42 Cookie: ID=42 42, user = aono 42, loginTime= 10:12 104, user=akai …
パスワードの保存 ▌ログインできるWebアプリを作る場合ユーザー登録が必要 l 多くの場合、ユーザー名とパスワードを登録させる l パスワードをデータベースに保存していい? l 情報流出したら?
パスワードのハッシュ化 ▌パスワードはハッシュ関数を通したハッシュ値を保存する l ログイン時は⼊⼒されたパスワードのハッシュ値を取り、保存 されているハッシュ値と⽐較 l ⼀致すればOK ▌ハッシュ関数 l 任意の⻑さのバイト列から固定⻑のバイト列を出⼒
l 出⼒から⼊⼒の値の推測が難しい l SHA-2, SHA-1, MD5 など l より安全に: salt, HMAC... SHA-1の例 'password' → 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8 '123456' → 7c4a8d09ca3762af61e59520943dc26494f8941b
HTTPS ▌HTTPは通信内容が丸⾒え l パスワードを送ったら?セッションID⾒られたら? ▌HTTPをTLSで暗号化して通信する→HTTPS l 内容を⾒られない。改ざんされない。なりすまされない。 l cybozu.comは必ずHTTPSを使う l
現代では必須 (商⽤なら)
HTTPSは事実上必須 ▌公的/商業的なサイトで新しく作るならhttpのみはあり得ない l ブラウザに怒られる l 古いサイトではhttpがまだまだ残っている http://abehiroshi.la.coocan.jp
QUALYS SSL LABS cybozu.comはA+評価
Webアプリケーションフレームワーク ▌Webアプリを作るのに便利な機能が詰まったライブラリ l HTTPの処理、Cookie、データベースへのアクセス、テンプ レートエンジン などなど l 現代でWebアプリを新たに作るなら、何らかのフレーム ワークを使うことになる ▌Ruby
on Rails, Spring Framework, Django などが有名所 l 死んでいったフレームワーク達も数知れず l 独⾃のフレームワークが⽣み出されることも…
フロントエンド
HTML ▌⽂書に構造や意味を与えるための⾔語 l ⾒出し、段落、他の⽂書へのリンク、… l <h1></h1>, <p></p>, <a href=”https://〜”></a>, …
▌それぞれのタグがどういう意味を持つからルールで決まっている l https://www.w3.org/TR/html5/ l 正しい使い⽅をする→機械が読める→スクリーンリーダが読め る→アクセシブル ▌講義では詳しくはやらないので、⾃分で調べてね
テンプレートエンジン ▌HTMLの中にデータを埋めたり、プログラム的に表⽰を変える 仕組み l JSP, Freemarker, PHP, Smarty, eRuby, …
▌動的にHTMLを組み⽴てるためのツール <div> こんにちは! ${user.name}さん。 <#if user.isAdmin > あなたは管理者です。 </#if> </div> + user.name = “⾚井” user.isAdmin = false <div> こんにちは! ⾚井さん。 </div>
CSS ▌HTMLの⽂書の⾒た⽬を決めるための仕組み l ⽂字の⼤きさ、⾊、背景、…。 ▌意味と⾒た⽬を分離する l HTMLには⾒た⽬を書かない ▌地道に調整しないといけないので、⼤変な世界…
JavaScript ▌現代のWebアプリはサーバー側だけでは完結しない l JavaScriptをブラウザで動かしてダイナミックな動作をする l DOM操作 lJavaScriptを使って、画⾯を書き換える。 l Ajax/XHR lJavaScriptからHTTP通信を⾏う。画⾯遷移せずに⾊々なアクションを⾏える。
l フレームワーク: lJavaScriptにもフレームワークがたくさん lReact, Vue, Closure Libarary, etc.
Web API ▌Webアプリケーションの処理をネットワーク越しに呼び出す l HTMLではなくデータ(JSON, XML等)を返す l サーバー内のデータを更新する l JavaScriptから呼ぶ
▌例えば、kintoneはHTMLの⽣成は最低限 l ほとんどAPIを呼び出している ▌サーバーとクライアントの分離が出来てシンプルになる傾向
▌Webアプリケーションはここで説明しなかったものも含め、 たくさんの要素が組み合わさって出来ている l この講義は取っ掛かり。 l 随時知っていきましょう
使⽤した画像のライセンス
By RRZEicons [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons https://commons.wikimedia.org/wiki/File%3AServer-multiple.svg
By Sir Stig (Own work (Transfered by Mono)) [CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0) or GFDL (http://www.gnu.org/copyleft/fdl.html)], via Wikimedia Commons https://commons.wikimedia.org/wiki/File%3AAluminium_MacBook.png