Webアプリケーション概要 2021 / Web Application Overview 2021

Transcript

1. Webアプリケーション概要 2021 Yakumoチーム, Slash/CyDE-Cチーム ⾚井駿平

2. Introduction ▌Webアプリを作るのに必要な基礎知識を話します l 割りと雑多な知識 l 必要になった時にキーワードを思い出して⾃分で調べられ るように

3. whoami ▌⾚井 駿平 l 2013年⼊社 l Yakumoチーム, Slash/CyDE-Cチーム 所属 lAWSやミドルウェアからwebフロントエンドまで⾊々担当

4. Webアプリケーションとはなんぞや ▌Webブラウザをインターフェースとして⼊出⼒するアプリ ケーション l 通信はHTTP、表⽰はHTML, CSS ▌実際のアプリはサーバーにある ▌≠ネイティブアプリ、デスクトップアプリ l 内部的にはWebアプリが提供するAPIを叩いている場合も

   ▌サイボウズが作っている製品はほとんどがWebアプリ

5. Webサーバーは何をする?

6. Webサーバー ▌HTTPを処理するサーバー l クライアントからリクエ ストを受け付けて l 所望の結果を返す ▌Apache, IIS, nginx...

   request: index.htmlください response: index.html どうぞ!

7. Webサーバーがやること ▌リクエストを受け付ける ▌結果を(読み込む|計算する) ▌結果を送り返す ▌通信と計算のセット l ⼊⼒+計算+出⼒ = プログラムの本質 l

   通信をプログラムでどう⾏うか → Socket

8. Socket ▌サーバーとクライアントで通信するためのAPI l 主にTCP, UDP を使う l 同じマシン同⼠で通信しても、別のマシンと通信してもよ い

9. 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);

10. 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);

11. 複数のリクエストが来たら ▌サーバーが1つのリクエストを処理している時に別のリクエス トが来る l 前のページのコードだとどうなる?

12. 同時に複数のリクエストを捌く ▌リクエストの待受とリクエストの処理を同時に⾏えると良い l acceptが返ったら処理を開始 l 処理の結果を待たずに、すぐにacceptに戻る ▌プロセスやスレッドを使う while(1) { int

    fd = accept(sock, NULL, NULL); 処理開始(fd); //すぐに返ってくる }

13. プロセス ▌プログラムの実⾏の単位 l コマンドやアプリを起動するとプロセスが⽴ち上がる l 別のプロセスのメモリにはアクセスできない l 異なるプロセスは並列に動くことができる ▌Webサーバーでは l

    リクエストを受付 l 処理プロセスを起動してソケットを引き継ぐ

14. スレッド ▌1つのプロセスの中の処理の単位 l プロセスより軽い l 並列に実⾏可能 l 同じプロセスの別のスレッドのメモリにアクセスできる ▌Webサーバーでは l

    リクエストを受付 l 処理スレッドを起動して処理をする

15. ▌Socketとプロセス/スレッドを使えば、webサーバーのような ものを作れる l 接続数が⾮常に多くなると? (C10K問題) → ⾮同期I/Oなど を調べてみよう

16. Webアプリケーション

17. 動的なWebページ ▌Webは静的なページを返すだけじゃない l Input-Process-Output (= プログラム) l“Process” で任意のプログラムを実⾏して結果を返す l サイボウズOfficeもGaroonもkintoneもメールワイズもこの

    タイプ ▌処理の仕⽅はいろいろある

18. CGI: Common Gateway Interface ▌Webサーバーとプログラムがやりとりするためのインターフェース l リクエストが来るたびにアプリのプロセスを起動する l リクエストの内容は、環境変数や標準⼊⼒で渡される l

    結果は標準出⼒で返す ▌昔はこのやり⽅が主流 l Perlの時代 l 毎回プロセスを起動するので遅い l サイボウズ Office / メールワイズは今でもこれ request response program stdin/env stdout

19. Webアプリケーションサーバー ▌Webアプリケーションを実⾏するサーバー l CGIと異なり、通常起動しっぱなし l Webサーバーがアプリケーションサーバーにリクエストを 中継する l主にHTTPでやりとり l アプリケーションサーバーとアプリの間

    l特定のメソッドを呼んだりしてやりとり request response App server request response App

20. 永続化/データベース ▌Webアプリを作るとデータを保存したくなる l プログラムやマシンが終了してもデータが残る l cf. memcached ▌⾊々なやり⽅ l 素朴にファイルに保存

    l ⾃分で競合、不整合などを回避するのは⼤変 l ⼤規模だと⼤変になる l サイボウズOffice… l データベース管理システム(DBMS) l 難しいことの⾯倒を⾒てくれる

21. データベース管理システム(DBMS) ▌RDBMS / SQL l 「関係モデル」というものを扱うデータベース l SQLという⾔語で操作する l 後⽇詳しくやります

    ▌NoSQL l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り) l キーバリューストア(KVS) l キーとバリューのペアの形式だけ保存 l ドキュメント指向データベース l 柔軟な構造のデータを保存

22. ログイン ▌Webアプリにはほぼ必須な機能 l ユーザー毎にデータを保存/ユーザーを特定 l ログインした後、別のページから戻ってきてもログインさ れたまま l どう実現する?

23. Cookie (RFC 6265) ▌サーバー側からクライアントにデータを保存される仕組み l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー を載せてレスポンスを返す lクライアントはそのペアを保存する

    l クライアントはリクエストに「Cookie: <キー>=<値>」 を載せる lSet-Cookieを返してきたドメインにだけ送る ▌HTTPが状態を持つことができる Set-Cookie: login=true Cookie: login=true

24. セッション ▌⼀連のアクセスでデータを保持する仕組み 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 …

25. パスワードの保存 ▌ログインできるWebアプリを作る場合ユーザー登録が必要 l 多くの場合、ユーザー名とパスワードを登録させる l パスワードをデータベースに保存していい? l 情報流出したら?

26. パスワードのハッシュ化 ▌パスワードはハッシュ関数を通したハッシュ値を保存する l ログイン時は⼊⼒されたパスワードのハッシュ値を取り、保存 されているハッシュ値と⽐較 l ⼀致すればOK ▌ハッシュ関数 l 任意の⻑さのバイト列から固定⻑のバイト列を出⼒

    l 出⼒から⼊⼒の値の推測が難しい l SHA-2, SHA-1, MD5 など l より安全に: salt, HMAC... SHA-1の例 'password' → 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8 '123456' → 7c4a8d09ca3762af61e59520943dc26494f8941b

27. HTTPS ▌HTTPは通信内容が丸⾒え l パスワードを送ったら?セッションID⾒られたら? ▌HTTPをTLSで暗号化して通信する→HTTPS l 内容を⾒られない。改ざんされない。なりすまされない。 l cybozu.comは必ずHTTPSを使う l

    現代では必須 (商⽤なら)

28. HTTPSは事実上必須 ▌公的/商業的なサイトで新しく作るならhttpのみはあり得ない l ブラウザに怒られる l 古いサイトではhttpがまだまだ残っている http://abehiroshi.la.coocan.jp

29. QUALYS SSL LABS cybozu.comはA+評価

30. Webアプリケーションフレームワーク ▌Webアプリを作るのに便利な機能が詰まったライブラリ l HTTPの処理、Cookie、データベースへのアクセス、テンプ レートエンジン などなど l 現代でWebアプリを新たに作るなら、何らかのフレーム ワークを使うことになる ▌Ruby

    on Rails, Spring Framework, Django などが有名所 l 死んでいったフレームワーク達も数知れず l 独⾃のフレームワークが⽣み出されることも…

31. フロントエンド

32. HTML ▌⽂書に構造や意味を与えるための⾔語 l ⾒出し、段落、他の⽂書へのリンク、… l <h1></h1>, <p></p>, <a href=”https://〜”></a>, …

    ▌それぞれのタグがどういう意味を持つからルールで決まっている l https://www.w3.org/TR/html5/ l 正しい使い⽅をする→機械が読める→スクリーンリーダが読め る→アクセシブル ▌講義では詳しくはやらないので、⾃分で調べてね

33. テンプレートエンジン ▌HTMLの中にデータを埋めたり、プログラム的に表⽰を変える 仕組み l JSP, Freemarker, PHP, Smarty, eRuby, …

    ▌動的にHTMLを組み⽴てるためのツール <div> こんにちは! ${user.name}さん。 <#if user.isAdmin > あなたは管理者です。 </#if> </div> + user.name = “⾚井” user.isAdmin = false <div> こんにちは! ⾚井さん。 </div>

34. CSS ▌HTMLの⽂書の⾒た⽬を決めるための仕組み l ⽂字の⼤きさ、⾊、背景、…。 ▌意味と⾒た⽬を分離する l HTMLには⾒た⽬を書かない ▌地道に調整しないといけないので、⼤変な世界…

35. JavaScript ▌現代のWebアプリはサーバー側だけでは完結しない l JavaScriptをブラウザで動かしてダイナミックな動作をする l DOM操作 lJavaScriptを使って、画⾯を書き換える。 l Ajax/XHR lJavaScriptからHTTP通信を⾏う。画⾯遷移せずに⾊々なアクションを⾏える。

    l フレームワーク: lJavaScriptにもフレームワークがたくさん lReact, Vue, Closure Libarary, etc.

36. Web API ▌Webアプリケーションの処理をネットワーク越しに呼び出す l HTMLではなくデータ(JSON, XML等)を返す l サーバー内のデータを更新する l JavaScriptから呼ぶ

    ▌例えば、kintoneはHTMLの⽣成は最低限 l ほとんどAPIを呼び出している ▌サーバーとクライアントの分離が出来てシンプルになる傾向

37. ▌Webアプリケーションはここで説明しなかったものも含め、 たくさんの要素が組み合わさって出来ている l この講義は取っ掛かり。 l 随時知っていきましょう

38. 使⽤した画像のライセンス

39. 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