webアプリ概要_2020 / web_application_overview_2020

Transcript

1. Webアプリケーション基礎知識 2020 Yakumoチーム, Slash/CyDE-Cチーム ⾚井駿平
2. Introduction ▌Webアプリを作るのに必要な基礎知識を話します l 割りと雑多な知識 l 必要になった時にキーワードを思い出して⾃分で調べられ るように
3. Webアプリケーションとはなんぞや ▌Webブラウザをインターフェースとして⼊出⼒するアプリ ケーション l 通信はHTTP、表⽰はHTML, CSS ▌実際のアプリはサーバーにある ▌≠ネイティブアプリ、デスクトップアプリ l 内部的にはWebアプリが提供するAPIを叩いている場合も ▌サイボウズが作っている製品はほとんどがWebアプリ
4. Webサーバーは何をする?
5. Webサーバー ▌HTTPを処理するサーバー l クライアントからリクエ ストを受け付けて l 所望の結果を返す ▌Apache, IIS, nginx... request: index.htmlください response: index.html どうぞ!
6. Webサーバーがやること ▌リクエストを受け付ける ▌結果を(読み込む|計算する) ▌結果を送り返す ▌つまり、Input-Process-Output l InputとOutputはネットワークの処理 l This is “Program”
7. Socket ▌サーバーとクライアントで通信するためのAPI l 主にTCP, UDP を使う l 同じマシン同⼠で通信しても、別のマシンと通信してもよ い
8. 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);
9. 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);
10. 複数のリクエストが来たら ▌サーバーが1つのリクエストを処理している時に別のリクエス トが来る l 前のページのコードだとどうなる?
11. 同時に複数のリクエストを捌く ▌リクエストの待受とリクエストの処理を同時に⾏えると良い l acceptが返ったら処理を開始 l 処理の結果を待たずに、すぐにacceptに戻る ▌プロセスやスレッドを使う while(1) { int fd = accept(sock, NULL, NULL); 処理開始(fd); //すぐに返ってくる }
12. プロセス ▌プログラムの実⾏の単位 l コマンドやアプリを起動するとプロセスが⽴ち上がる l 別のプロセスのメモリにはアクセスできない l 異なるプロセスは並列に動くことができる ▌Webサーバーでは l リクエストを受付 l 処理プロセスを起動してソケットを引き継ぐ
13. スレッド ▌1つのプロセスの中の処理の単位 l プロセスより軽い l 並列に実⾏可能 l 同じプロセスの別のスレッドのメモリにアクセスできる ▌Webサーバーでは l リクエストを受付 l 処理スレッドを起動して処理をする
14. Webアプリケーション
15. 動的なWebページ ▌Webは静的なページを返すだけじゃない l Input-Process-Output (= プログラム) l“Process” で任意のプログラムを実⾏して結果を返す l サイボウズOfficeもGaroonもkintoneもメールワイズもこの タイプ ▌処理の仕⽅はいろいろある
16. CGI: Common Gateway Interface ▌Webサーバーとプログラムがやりとりするためのインターフェース l リクエストが来るたびにアプリのプロセスを起動する l リクエストの内容は、環境変数や標準⼊⼒で渡される l 結果は標準出⼒で返す ▌昔はこのやり⽅が主流 l Perlの時代 l 毎回プロセスを起動するので遅い request response program stdin/env stdout
17. Webアプリケーションサーバー ▌Webアプリケーションを実⾏するサーバー l CGIと異なり、通常起動しっぱなし l Webサーバーがアプリケーションサーバーにリクエストを 中継する l主にHTTPでやりとり l アプリケーションサーバーとアプリの間 l特定のメソッドを呼んだりしてやりとり request response App server request response App
18. 永続化/データベース ▌Webアプリを作るとデータを保存したくなる l プログラムやマシンが終了してもデータが残る l cf. memcached ▌⾊々なやり⽅ l 素朴にファイルに保存 l ⾃分で競合、不整合などを回避するのは⼤変 l ⼤規模だと⼤変になる l サイボウズOffice… l データベース管理システム(DBMS) l 難しいことの⾯倒を⾒てくれる
19. データベース管理システム(DBMS) ▌RDBMS / SQL l 「関係モデル」というものを扱うデータベース l SQLという⾔語で操作する l 後⽇詳しくやります ▌NoSQL l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り) l キーバリューストア(KVS) l キーとバリューのペアの形式だけ保存 l ドキュメント指向データベース l 柔軟な構造のデータを保存
20. ログイン ▌Webアプリにはほぼ必須な機能 l ログインした後、別のページから戻ってきてもログインさ れたまま l どう実現する?
21. Cookie (RFC 6265) ▌サーバー側からクライアントにデータを保存される仕組み l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー を載せてレスポンスを返す lクライアントはそのペアを保存する l クライアントはリクエストに「Cookie: <キー>=<値>」 を載せる lSet-Cookieを返してきたドメインにだけ送る ▌HTTPが状態を持つことができる Set-Cookie: login=true Cookie: login=true
22. セッション ▌⼀連のアクセスでデータを保持する仕組み 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 …
23. パスワードの保存 ▌ログインできるWebアプリを作る場合ユーザー登録が必要 l 多くの場合、ユーザー名とパスワードを登録させる l パスワードをデータベースに保存していい? l 情報流出したら?
24. パスワードのハッシュ化 ▌パスワードはハッシュ関数を通したハッシュ値を保存する l ログイン時は⼊⼒されたパスワードのハッシュ値を取り、保存 されているハッシュ値と⽐較 l ⼀致すればOK ▌ハッシュ関数 l 任意の⻑さのバイト列から固定⻑のバイト列を出⼒ l 出⼒から⼊⼒の値の推測が難しい l SHA-2, SHA-1, MD5 など l より安全に: salt, HMAC... SHA-1の例 'password' → 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8 '123456' → 7c4a8d09ca3762af61e59520943dc26494f8941b
25. HTTPS ▌HTTPは通信内容が丸⾒え l パスワードを送ったら?セッションID⾒られたら? ▌HTTPをTLSで暗号化して通信する→HTTPS l 内容を⾒られない。改ざんされない。なりすまされない。 l cybozu.comは必ずHTTPSを使う l 現代では必須 (商⽤なら)
26. HTTPは事実上必須 http://abehiroshi.la.coocan.jp
27. QUALYS SSL LABS ▌cybozu.comは安全
28. Webアプリケーションフレームワーク ▌Webアプリを作るのに便利な機能が詰まったライブラリ l HTTPの処理、Cookie、データベースへのアクセス、テンプ レートエンジン などなど l 現代でWebアプリを新たに作るなら、何らかのフレーム ワークを使うことになる ▌Ruby on Rails, Spring Framework, Django などが有名所 l 死んでいったフレームワーク達も数知れず l 独⾃のフレームワークが⽣み出されることも…
29. フロントエンド
30. HTML ▌⽂書に構造や意味を与えるための⾔語 l ⾒出し、段落、他の⽂書へのリンク、… l <h1></h1>, <p></p>, <a href=”https://〜”></a>, … ▌それぞれのタグがどういう意味を持つからルールで決まっている l https://www.w3.org/TR/html5/ l 正しい使い⽅をする→機械が読める→スクリーンリーダが読め る→アクセシブル ▌講義では詳しくはやらないので、⾃分で調べてね
31. テンプレートエンジン ▌HTMLの中にデータを埋めたり、プログラム的に表⽰を変える 仕組み l JSP, Freemarker, PHP, Smarty, eRuby, … ▌動的にHTMLを組み⽴てるためのツール <div> こんにちは! ${user.name}さん。 <#if user.isAdmin > あなたは管理者です。 </#if> </div> + user.name = “⾚井” user.isAdmin = false <div> こんにちは! ⾚井さん。 </div>
32. CSS ▌HTMLの⽂書の⾒た⽬を決めるための仕組み l ⽂字の⼤きさ、⾊、背景、…。 ▌意味と⾒た⽬を分離する l HTMLには⾒た⽬を書かない ▌地道に調整しないといけないので、⼤変な世界…
33. JavaScript ▌現代のWebアプリはサーバー側だけでは完結しない l JavaScriptをブラウザで動かしてダイナミックな動作をする l DOM操作 lJavaScriptを使って、画⾯を書き換える。 l Ajax/XHR lJavaScriptからHTTP通信を⾏う。画⾯遷移せずに⾊々なアクションを⾏える。 l フレームワーク: lJavaScriptにもフレームワークがたくさん lReact, Vue, Closure Libarary, etc.
34. Web API ▌Webアプリケーションの処理をネットワーク越しに呼び出す l HTMLではなくデータ(JSON, XML等)を返す l サーバー内のデータを更新する l JavaScriptから呼ぶ ▌例えば、kintoneはHTMLの⽣成は最低限 l ほとんどAPIを呼び出している ▌サーバーとクライアントの分離が出来てシンプルになる傾向
35. ▌Webアプリケーションはここで説明しなかったものも含め、 たくさんの要素が組み合わさって出来ている l この講義は取っ掛かり。 l 随時知っていきましょう
36. 演習課題
37. 準備 ▌Python3.7のインストール l https://www.python.org/downloads/release/python-377/ l [macの⽅] macOS 64-bit installer を使⽤ l [windowsの⽅] Windows x86-64 web-based installer を使⽤ l Homebrew, WSL, LinuxのVM で⼊れてもOK ▌telnetのインストール l [windowsの⽅] https://www.atmarkit.co.jp/ait/articles/0207/06/news002.ht ml#installtelnet
38. 演習課題(1) ▌Socketを使ったプログラムを書いてみる l 雛形は⽤意してあるので、read/write を書く。 l Echoサーバーを作る。 l受信したものをそのまま送信するサーバー l 1⾏毎、1⽂字毎、等、出⼒の仕⽅はおまかせ l 単純なやり⽅では複数のリクエストを同時に扱えないことを確認し てみる
39. 演習課題(1) やり⽅ ▌./server.py で実⾏ ▌接続 l [Windows] telnet localhost 12345 l [macOS] nc localhost 12345 ▌別のシェルから同時に接続してみる
40. 演習課題(2) ▌CGIを書いてみる l CGIライブラリを使わずに l まずは現在時刻を表⽰する l HTMLを出⼒してブラウザから開いてみよう l そのた動的に結果が変わるものを⾃由に試す
41. 演習課題(2) ▌./cgiserver.py を実⾏してWebサーバーを起動 ▌./cgi-bin/test_cgi.py を編集 ▌http://localhost:8000/cgi-bin/test_cgi.py にアクセス
42. 演習課題(3) ▌時間があれば ▌演習課題(1)で作成したサーバーを複数のコネクションを同時 に扱えるようにする l スレッドを使うなど
43. 使⽤した画像のライセンス
44. 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