Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Cybozu
April 26, 2021

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

Cybozu

April 26, 2021
Tweet

More Decks by Cybozu

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. Webサーバー
    ▌HTTPを処理するサーバー
    l クライアントからリクエ
    ストを受け付けて
    l 所望の結果を返す
    ▌Apache, IIS, nginx...
    request:
    index.htmlください
    response:
    index.html どうぞ!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. プロセス
    ▌プログラムの実⾏の単位
    l コマンドやアプリを起動するとプロセスが⽴ち上がる
    l 別のプロセスのメモリにはアクセスできない
    l 異なるプロセスは並列に動くことができる
    ▌Webサーバーでは
    l リクエストを受付
    l 処理プロセスを起動してソケットを引き継ぐ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Webアプリケーション

    View full-size slide

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

    View full-size slide

  18. CGI: Common Gateway Interface
    ▌Webサーバーとプログラムがやりとりするためのインターフェース
    l リクエストが来るたびにアプリのプロセスを起動する
    l リクエストの内容は、環境変数や標準⼊⼒で渡される
    l 結果は標準出⼒で返す
    ▌昔はこのやり⽅が主流
    l Perlの時代
    l 毎回プロセスを起動するので遅い
    l サイボウズ Office / メールワイズは今でもこれ
    request
    response
    program
    stdin/env
    stdout

    View full-size slide

  19. Webアプリケーションサーバー
    ▌Webアプリケーションを実⾏するサーバー
    l CGIと異なり、通常起動しっぱなし
    l Webサーバーがアプリケーションサーバーにリクエストを
    中継する
    l主にHTTPでやりとり
    l アプリケーションサーバーとアプリの間
    l特定のメソッドを呼んだりしてやりとり
    request
    response
    App
    server
    request
    response
    App

    View full-size slide

  20. 永続化/データベース
    ▌Webアプリを作るとデータを保存したくなる
    l プログラムやマシンが終了してもデータが残る
    l cf. memcached
    ▌⾊々なやり⽅
    l 素朴にファイルに保存
    l ⾃分で競合、不整合などを回避するのは⼤変
    l ⼤規模だと⼤変になる
    l サイボウズOffice…
    l データベース管理システム(DBMS)
    l 難しいことの⾯倒を⾒てくれる

    View full-size slide

  21. データベース管理システム(DBMS)
    ▌RDBMS / SQL
    l 「関係モデル」というものを扱うデータベース
    l SQLという⾔語で操作する
    l 後⽇詳しくやります
    ▌NoSQL
    l SQLへ対抗して出てきたデータベース(⼤抵速いがトレードオフ有り)
    l キーバリューストア(KVS)
    l キーとバリューのペアの形式だけ保存
    l ドキュメント指向データベース
    l 柔軟な構造のデータを保存

    View full-size slide

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

    View full-size slide

  23. Cookie (RFC 6265)
    ▌サーバー側からクライアントにデータを保存される仕組み
    l サーバー:「Set-Cookie: <キー>=<値> 」というヘッダー
    を載せてレスポンスを返す
    lクライアントはそのペアを保存する
    l クライアントはリクエストに「Cookie: <キー>=<値>」
    を載せる
    lSet-Cookieを返してきたドメインにだけ送る
    ▌HTTPが状態を持つことができる Set-Cookie: login=true
    Cookie: login=true

    View full-size slide

  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

    View full-size slide

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

    View full-size slide

  26. パスワードのハッシュ化
    ▌パスワードはハッシュ関数を通したハッシュ値を保存する
    l ログイン時は⼊⼒されたパスワードのハッシュ値を取り、保存
    されているハッシュ値と⽐較
    l ⼀致すればOK
    ▌ハッシュ関数
    l 任意の⻑さのバイト列から固定⻑のバイト列を出⼒
    l 出⼒から⼊⼒の値の推測が難しい
    l SHA-2, SHA-1, MD5 など
    l より安全に: salt, HMAC... SHA-1の例
    'password' → 5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8
    '123456' → 7c4a8d09ca3762af61e59520943dc26494f8941b

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Webアプリケーションフレームワーク
    ▌Webアプリを作るのに便利な機能が詰まったライブラリ
    l HTTPの処理、Cookie、データベースへのアクセス、テンプ
    レートエンジン などなど
    l 現代でWebアプリを新たに作るなら、何らかのフレーム
    ワークを使うことになる
    ▌Ruby on Rails, Spring Framework, Django などが有名所
    l 死んでいったフレームワーク達も数知れず
    l 独⾃のフレームワークが⽣み出されることも…

    View full-size slide

  31. フロントエンド

    View full-size slide

  32. HTML
    ▌⽂書に構造や意味を与えるための⾔語
    l ⾒出し、段落、他の⽂書へのリンク、…
    l , , , …
    ▌それぞれのタグがどういう意味を持つからルールで決まっている
    l https://www.w3.org/TR/html5/
    l 正しい使い⽅をする→機械が読める→スクリーンリーダが読め
    る→アクセシブル
    ▌講義では詳しくはやらないので、⾃分で調べてね

    View full-size slide

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

    こんにちは! ${user.name}さん。
    <#if user.isAdmin >
    あなたは管理者です。
    #if>

    + user.name = “⾚井”
    user.isAdmin = false

    こんにちは! ⾚井さん。

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. Web API
    ▌Webアプリケーションの処理をネットワーク越しに呼び出す
    l HTMLではなくデータ(JSON, XML等)を返す
    l サーバー内のデータを更新する
    l JavaScriptから呼ぶ
    ▌例えば、kintoneはHTMLの⽣成は最低限
    l ほとんどAPIを呼び出している
    ▌サーバーとクライアントの分離が出来てシンプルになる傾向

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  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

    View full-size slide