toshiki-notebook/assets/development_aws_webserver.md.602a2670.js

import{_ as t,a as e}from"./chunks/rest_api.602a6e96.js";import{_ as o,c as d,o as r,R as a}from"./chunks/framework.ade46834.js";const I=JSON.parse('{"title":"Web サービスの作り方","description":"","frontmatter":{},"headers":[],"relativePath":"development/aws/webserver.md","filePath":"development/aws/webserver.md","lastUpdated":1694660529000}'),s={name:"development/aws/webserver.md"},c=a('<h1 id="web-サービスの作り方" tabindex="-1">Web サービスの作り方 <a class="header-anchor" href="#web-サービスの作り方" aria-label="Permalink to &quot;Web サービスの作り方&quot;">​</a></h1><p>ここからが，本書第三部の内容になる． これまでのセクションでは，仮想サーバーをクラウド上に起動し，そこで計算を走らせる方法について解説をしてきた． EC2, ECS, Fargate, Batch などを利用して，動的にスケールするクラスターを構成し，並列にタスクを実行するクラウドシステムを実装してきた． 振り返ると，これまで紹介してきた内容は，<strong>自分自身が行いたい計算をクラウドを駆使することで実現する</strong>，という用途にフォーカスしていたことに気がつくだろう． 一方で，<strong>広く一般の人々に使ってもらえるような計算サービス・データベース</strong>を提供する，というのもクラウドの重要な役割として挙げられる．</p><p>本章から始まる第三部では，前回までとは少し方向性を変え，どのようにしてクラウド上にアプリケーションを展開し，広く一般の人に使ってもらうか，という点を講義したいと思う． これを通じて，どのようにして世の中のウェブサービスができ上がっているのかを知り，さらにどうやって自分でそのようなアプリケーションをゼロから構築するのか，という点を学んでもらう． その過程で，サーバーレスアーキテクチャという最新のクラウド設計手法を解説する．</p><p>その前準備として，本章ではどのようにしてウェブサービスが出来上がっているのか，その背後にある技術の概要を解説する． 用語の解説が中心となるが，後のハンズオンを実装するために必須の知識であるので，理解して前に進むよう心がけよう．</p><h2 id="ウェブサービスの仕組み-—-twitter-を例に" tabindex="-1">ウェブサービスの仕組み  — Twitter を例に <a class="header-anchor" href="#ウェブサービスの仕組み-—-twitter-を例に" aria-label="Permalink to &quot;ウェブサービスの仕組み  — Twitter を例に&quot;">​</a></h2><p>あなたがパソコンやスマートフォンから Twitter, Facebook, YouTube などのウェブサービスにアクセスしたとき，実際にどのようなことが行われ，コンテンツが提示されているのだろうか？</p><p>HTTP を通じたサーバーとクライアントのデータのやり取りは，すでに知っている読者も多いだろうし，逆にすべて解説しようとすると紙面が足りないので，ここではエッセンスの説明のみにとどめる． 以降では <a href="https://twitter.com" target="_blank" rel="noreferrer">Twitter</a> を具体例として，背後にあるサーバーとクライアントの間の通信を概説しよう． 概念図としては <a href="#fig:web_server">figure_title</a> のような通信がクライアントとサーバーの間で行われていることになる．</p><p><img src="'+t+'" alt="クライアントと Web サーバーの通信の概念図"></p><p>前提として，クライアントとサーバーの通信は <strong>HTTP (Hypertext Transfer Protocol)</strong> を使って行われる． また，最近では，暗号化された HTTP である <strong>HTTPS (HTTPS (Hypertext Transfer Protocol Secure))</strong> を用いることがスタンダードになってきている． 第一のステップとして，クライアントは HTTP(S) 通信によってサーバーから静的なコンテンツを取得する． 静的なコンテンツとは， <strong>HTML (Hyptertext Markup Language)</strong> で記述されたウェブページの文書本体， <strong>CSS (Cascading Style Sheets)</strong> で記述されたページのデザインやレイアウトファイル，そして <strong>JavaScript (JS)</strong> で記述されたページの動的な挙動を定義したプログラム，が含まれる． Twitter を含む現代的なウェブアプリケーションの設計では，この静的なファイル群はページの”枠”を定義するだけで，中身となるコンテンツ (例: ツイートの一覧) は別途 <strong>API (Application Programming Interface)</strong> によって取得されなければならない． そこで，クライアントは先のステップで取得された JavaScript で定義されたプログラムに従って，サーバーに API を送信し，ツイートや画像データを取得する． この際，テキストデータのやり取りには <strong>JSON (JavaScript Object Notation)</strong> というフォーマットが用いられることが多い． 画像や動画などのコンテンツも同様に API により取得される． このようにして取得されたテキストや画像が，HTML の文書に埋め込まれることで，最終的にユーザーに提示されるページが完成するのである． また，新しいツイートを投稿するときにも，クライアントから API を通じてサーバーのデータベースにデータが書き込まれる．</p><h2 id="rest-api" tabindex="-1">REST API <a class="header-anchor" href="#rest-api" aria-label="Permalink to &quot;REST API&quot;">​</a></h2><p>API (Application Programming Interface) とはこれまで何度も出てきた言葉であるが，ここではよりフォーマルな定義付けを行う． API とはあるソフトウェア・アプリケーションが，外部のソフトウェアに対してコマンドやデータをやり取りするための媒介の一般的総称である． とくに，ウェブサービスの文脈では，サーバーが外界に対して提示しているコマンドの一覧のことを意味する． クライアントは，提示されている API から適切なコマンドを使うことによって，所望のデータを取得したり，あるいはサーバーにデータを送信したりする．</p><p>とくに，ウェブの文脈では <strong>REST (Representational State Transfer)</strong> とよばれる設計思想に基づいた API が現在では最も一般的に使われている． REST の設計指針に従った API のことを <strong>REST API</strong> あるいは <strong>RESTful API</strong> とよんだりする．</p><p>REST API は， <a href="#rest_api">figure_title</a> に示したような <strong>Method</strong> と <strong>URI (Universal Resource Identifier)</strong> の組からなる．</p><p><img src="'+e+'" alt="REST API"></p><p>Method (メソッド) とは，どのような操作を行いたいかを抽象的に表す，<strong>&quot;動詞&quot;</strong> として捉えることができる． メソッドには HTTP 規格で定義された 9 個の動詞 (verb) を使用することができる． この中でも， <code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>PATCH</code>, <code>DELETE</code> の 5 個が最も頻繁に使用される (<a href="#tab:rest_api_methods">table_title</a>)． この 5 つのメソッドによる操作を総称して <strong>CRUD</strong> (create, read, update, and delete) とよぶ．</p><table><caption>REST API Methods</caption><colgroup><col style="width:25%;"><col style="width:75%;"></colgroup><thead><tr class="header"><th>メソッド</th><th>意図される動作</th></tr></thead><tbody><tr class="odd"><td><p>GET</p></td><td><p>要素を取得する</p></td></tr><tr class="even"><td><p>POST</p></td><td><p>新しい要素を作成する</p></td></tr><tr class="odd"><td><p>PUT</p></td><td><p>既存の要素を新しい要素と置き換える</p></td></tr><tr class="even"><td><p>PATCH</p></td><td><p>既存の要素の一部を更新する</p></td></tr><tr class="odd"><td><p>DELETE</p></td><td><p>要素を削除する</p></td></tr></tbody></table><p>一方， URI は操作が行われる対象，すなわち <strong>&quot;目的語&quot;</strong> を表す． ウェブの文脈では操作が行われる対象のことをしばしば <strong>リソース</strong> とよぶ． URI は多くの場合 http または https から始まるウェブサーバーのアドレスから始まり， / (スラッシュ) 以降に所望のリソースのパスが指定される． <a href="#rest_api">figure_title</a> の例で言えば， <code>https://api.twitter.com</code> というアドレスの <code>/1.1/status/home_timeline</code> というリソースを取得 (GET) せよ，という意味になる (なお，ここで <code>1.1</code> という数字は API のバージョンを示している)． この API リクエストによって，ユーザーのホームのタイムラインのツイートの一覧が取得される．</p><p>REST API のメソッドには， <a href="#tab:rest_api_methods">table_title</a> で挙げたもの以外に， HTTP プロトコルで定義されているほかのメソッド (OPTIONS, TRACE など) を用いることもできるが，あまり一般的ではない．</p><p>また，これらのメソッドだけでは動詞として表現しきれないこともあるが， URI の名前でより意味を明確にすることもある． メソッドの使い方も，要素を削除する際は必ず <code>DELETE</code> を使わなければならない，という決まりもなく，たとえば， Twitter API でツイートを消す API は <code>POST statuses/destroy/:id</code> で定義されている． 最終的には，各ウェブサービスが公開している API ドキュメンテーションを読んで，それぞれの API がどんな操作をするのかを調べる必要がある．</p><p>REST の概念は 2000 年代初頭に確立され，今日の API 設計のスタンダードとなった． 一方で，ウェブのテクノロジーが進歩するにつれて，新たな API の設計アプローチの需要も高まっている． 近年とくに人気を集めているのが， <a href="https://graphql.org/" target="_blank" rel="noreferrer">GraphQL</a> と呼ばれる API の設計方法である． GraphQL は Facebook 社によって最初に作られ，現在は GraghQL Foundation によって維持と更新がされている． GraphQL を使用すると，クライアントは REST と比較してより柔軟性の高いデータのクエリを行うことができるなど，いくつかの利点がある． キーワードだけでも知っておくと，今後役に立つだろう．</p><h2 id="twitter-api" tabindex="-1">Twitter API <a class="header-anchor" href="#twitter-api" aria-label="Permalink to &quot;Twitter API&quot;">​</a></h2><p>もう少し具体的にウェブサービスの API を体験する目的で，ここでは Twitter の API を見てみよう． Twitter が提供している API の一覧は <a href="https://developer.twitter.com/en/docs/api-reference-index" target="_blank" rel="noreferrer">Twitter の Developer Documentation</a> で見ることができる． いくつかの代表的な API を <a href="#tab_twitter_api">table_title</a> にまとめた．</p><table><caption>Twitter API</caption><colgroup><col style="width:50%;"><col style="width:50%;"></colgroup><thead><tr class="header"><th>エンドポイント</th><th>動作</th></tr></thead><tbody><tr class="odd"><td><p><code>GET statuses/home_timeline</code></p></td><td><p>ホームのタイムラインのツイートの一覧を取得する．</p></td></tr><tr class="even"><td><p><code>GET statuses/show/:id</code></p></td><td><p><code>:id</code> で指定されたツイートの詳細情報を取得する．</p></td></tr><tr class="odd"><td><p><code>GET search</code></p></td><td><p>ツイートの検索を実行する．</p></td></tr><tr class="even"><td><p><code>POST statuses/update</code></p></td><td><p>新しいツイートを投稿する．</p></td></tr><tr class="odd"><td><p><code>POST media/upload</code></p></td><td><p>画像をアップロードする</p></td></tr><tr class="even"><td><p><code>POST statuses/destroy/:id</code></p></td><td><p><code>:id</code> で指定されたツイートを削除する．</p></td></tr><tr class="odd"><td><p><code>POST statuses/retweet/:id</code></p></td><td><p><code>:id</code> で指定されたツイートをリツイートする．</p></td></tr><tr class="even"><td><p><code>POST statuses/unretweet/:id</code></p></td><td><p><code>:id</code> で指定されたツイートのリツイートを取り消す．</p></td></tr><tr class="odd"><td><p><code>POST favorites/create</code></p></td><td><p>選択したツイートを&quot;いいね&quot;する．</p></td></tr><tr class="even"><td><p><code>POST favorites/destroy</code></p></td><td><p>選択したツイートを&quot;いいね&quot;を取り消す．</p></td></tr></tbody></table><p>この API リストをもとに， Twitter のアプリまたはウェブサイトを開いたときに起こるクライアントとサーバーの通信をシミュレートしてみよう．</p><p>ユーザーが Twitter を開くと，まず最初に <code>GET statuses/home_timeline</code> の API リクエストによって，ユーザーのホームのタイムラインのツイートのリストが取得される． 個々のツイートは JSON 形式のデータになっており， <code>id</code>, <code>text</code>, <code>user</code>, <code>coordinates</code>, <code>entities</code> などの属性を含む． <code>id</code> はツイートに固有な ID を表し， <code>text</code> はツイートの本文を含んでいる． <code>user</code> はツイートを投稿したユーザーの名前やプロフィール画像の URL などを含んだ JSON データになっている． <code>coordinates</code> にはツイートが発信された地理的な座標が記録されている． また， <code>entities</code> にはツイートに関連するメディアファイル (画像など) のリンクなどの情報が埋め込まれている． <code>GET statuses/home_timeline</code> からは直近のツイートのリスト (リストが長すぎる場合は途中で切られたもの) が取得される． もしツイートの ID を知っている場合は <code>GET statuses/show/:id</code> を呼ぶことによって， <code>:id</code> パラメータで指定された特定のツイートを取得することができる．</p><p>ツイートの検索を行うためには <code>GET search</code> API を使用する． この API には，ツイートに含まれる単語や，ハッシュタグ，ツイートの発信された日時や場所など，様々なクエリの条件を渡すことができる． API からは， <code>GET statuses/home_timeline</code> などと同様， JSON 形式のツイートのデータが返される．</p><p>ユーザーが新しいツイートを投稿するには <code>POST statuses/update</code> のエンドポイントを利用する． <code>POST statuses/update</code> には，ツイートの文章や，リプライの場合はリプライ先のツイートの ID などのデータを送信する． また，ツイートに画像データを添付したい場合は， <code>POST media/upload</code> を併せて使用する． ツイートの削除を行うには， <code>POST statuses/destroy/:id</code> を用いる．</p><p>そのほか，頻繁に行われる操作としては， <code>POST statuses/retweet/:id</code> と <code>POST statuses/unretweet/:id</code> がある． これらは， <code>:id</code> で指定されるツイートに対して，それぞれリツイートを実行あるいは取り消すための API である． また， <code>POST favorites/create</code>，<code>POST favorites/destroy</code> を使用することによって，選択されたツイートに&quot;いいね&quot;を追加したり，取り消したりする操作を行う．</p><p>このような一連の操作が， Twitter のアプリの背後では行われている． また，自分自身でボットを作成したい場合は，これらの API を適切に組み合わせ，カスタムのプログラムを書くことで実現される．</p><p>このように， API はあらゆるウェブサービスを作るうえで一番基礎となる要素である． 次からの章では本章で紹介した用語が何度も出てくるので，頭の片隅に置いたうえで読み進めていただきたい．</p>',30),p=[c];function i(n,l,T,P,h,u){return r(),d("div",null,p)}const S=o(s,[["render",i]]);export{I as __pageData,S as default};