Skip to content

Instantly share code, notes, and snippets.

@nekoruri

nekoruri/seccamp2020_b3_handson.md Secret

Created October 29, 2020 04:17
Show Gist options
  • Save nekoruri/6b638b4ca551552480b9d3de3bb61151 to your computer and use it in GitHub Desktop.
Save nekoruri/6b638b4ca551552480b9d3de3bb61151 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
seccamp2020_b3_handson.md

B3 事前課題

  • この事前課題ではタイムラインアプリをサーバーレス設計で実装します。

#01 Azureアカウントの確認

Azure Portalに配布されたユーザでログインできることを確認します。

初回ログイン時にパスワードの変更を求められるので変更して下さい。

この後、アプリケーション名などに含まれる -nn の部分は、 Azure全体でユニークである必要があったりするため、 自分に割り当てられた番号を2桁に変えてください。

#02 開発環境の準備

PC上に直接準備しても良いし、WindowsであればWSL上とかでも良いです。

VS Code

この手順ではVS Codeを使います。

VS Codeを導入したら、さらに以下の拡張機能を入れて下さい。

Node.js

今回の講義ではNode.jsを使います。 LTSの最新版を導入して下さい。

Azure CLI

コマンドラインからAzureを操作するAzure CLIを導入します。

Azure CLIを導入したら、ログインしておきます。 az loginコマンドを実行するとブラウザが開くので、ログインして下さい。

$ az login

Azure Functions Core Tools

コマンドラインからAzure Functionsを操作するAzure Functions Core Toolsを導入します。 v3.xを入れて下さい。

.NET Core SDKは不要です。

#03 サンプルアプリのデプロイ

レポジトリのfork

サンプルアプリは、フロントエンドとサーバサイドの2つのレポジトリに別れています。 両方自分のユーザにforkし、PC上でgit cloneしてください。 プライベートレポジトリで構いません。

Static Web Appsのデプロイ

フロントエンドの静的コンテンツは、Static Web Appsを使ってサービスします。 このStatic Web AppsはGitHubレポジトリと連携し、pushされた内容を自動でウェブサーバに反映します。

  • Azure Portalを開きます。
  • [リソースの作成]からWebの中のStatic Web Appを選びます。
  • 以下のように入力します。
    • リソースグループ: seccamp2020b3-nn を選択
    • 名前: seccamp2020b3-nn
    • 地域: East Asia
  • GitHubアカウントでサインインをクリック
    • 別ウインドウが開くので、Authorizeをクリック
    • forkしたレポジトリを選択
  • ビルドのプリセット: Custom
  • アプリの場所: /
  • APIの場所: api
  • アプリの成果物の場所: 空欄
  • [確認及び作成]
  • [作成]

Static Web Appsの作成が完了したら、VS Codeの左側(アクティビティバー)のAzureのアイコンをクリックし、 Static Web AppsセクションのRefreshボタンを押します。

アプリケーション名を右クリックしてBrowse Siteを選ぶと、 ブラウザで今デプロイしたウェブサイトが開きます。

また、アプリケーション名を右クリックしてOpen in Pprtalを選ぶと、 Azure Portalの設定画面が開きます。

Azure Functions関数の作成

API部分はAzure FunctionsというFunction as a Service (FaaS)を利用します。

上記Static Web AppsにもAzure Functionsのミニセットが含まれていますが、 今回のハンズオンで必要な機能(入出力バインディング)が削られているため、別に用意します。

  • Azure Portalを開きます。
  • [リソースの作成]からComputeの中の関数アプリを選びます。
  • 以下のように入力します。
    • リソースグループ: seccamp2020b3-nn を選択
    • 関数アプリ名: seccamp2020b3-nn
    • 公開: コード
    • ランタイムスタック: Nodejs
    • バージョン: 12 LTS
    • 地域: Japan East
  • [確認及び作成]
  • [作成]

関数アプリの作成が完了したら、VS Codeの左側(アクティビティバー)のAzureのアイコンをクリックし、 FunctionsセクションのRefreshボタンを押します。

サーバサイドのレポジトリをcloneしたディレクトリをVS Codeで開きます([ファイル]→[フォルダーを開く])。 そのディレクトリを右クリックし、Deploy to Function Appをクリックします。 今作成した関数アプリ(seccamp2020b3-nn)を選択し、上書き確認ダイアログをOKするとデプロイを実行します。 この後ソースコードを変更した場合にもDeploy to Function Appを実行することでクラウド側に反映します。

Azure FunctionsにもGitHub連携機能があります。 そちらを使いたい場合は、デプロイメントのデプロイセンターからGitHubとの連携設定が可能です。

API認証の設定

Azure Portalの関数アプリ設定画面から、API認証を設定します。 今回はAzureへのログインに利用しているAzure ADでの認証を設定します。

以下の簡単設定を構成するの手順に従って、Azure ADでの認証を設定します。 手順5の[要求が認証されない場合に実行するアクション]は、匿名認証を許可するのままにしてください。

CosmosDB データベース作成

投稿されたデータを保存するデータベースを作成します。 今回は保存先としてCosmosDBを利用します。

  • Azure Portalを開きます。
  • [リソースの作成]からCosmosで検索し、Azure Cosmos DBを選びます。
  • 以下のように入力します。
    • リソースグループ: seccamp2020b3-nn を選択
    • アカウント名: seccamp2020b3-nn
    • API: コア(SQL)
    • Notebooks: オフ
    • 場所: (Asia Pacific) 西日本
    • 容量モード: サーバーレス
    • アカウントの種類: 非運用
  • [確認及び作成]
  • [作成]

少し待つとCosmos DBアカウントの作成が完了するので、作成したCosmos DBアカウントを開きます。

  • データエクスプローラーをクリックします。
  • New Containerをクリックします。
  • 以下のように入力してOKをクリックします。
    • Database id: handson
    • Container id: messages
    • Partition key: /user_id

#04 サンプルアプリを動かす

ここまでの手順では、まだそれぞれデプロイしたフロントエンド、サーバサイド、データベースが 個別にあるだけで連携できていません。 ここからそれらを接続していきます。

Cosmos DBの接続文字列

関数アプリからCosmos DBに接続するための接続文字列を設定します。

  • Azure Portalから作成したCosmos DBを開きます。
    • 最近のリソースに表示されていなければ、一番上の検索欄にCosmosまで入力するとAzure Cosmos DBが見つかるので、さらにそこから自分が作成したCosmos DBアカウントを開いて下さい。
  • 設定のキーを開きます。
  • プライマリ設定文字列欄の右にあるボタンを押して内容をコピーします。
  • 先ほど作成した関数アプリを開きます。
    • こちらも見つからなければ検索欄にfunctionまで入力すると見つかります。
  • 設定の構成を開きます。
  • アプリケーション設定の新しいアプリケーション設定をクリックします。
  • 以下のように入力してOKします。
    • 名前: seccamp2020b3_DOCUMENTDB
    • 値: 上でコピーした接続文字列
  • 忘れずに上の保存を押します。

フロントエンドとAPI

フロントエンド中のURLに、関数アプリのドメインを入れます。

  • index.html
  • app.js

変更したら忘れずにgitのcommitとpushを行います。 実際にウェブサイトを開いて、変更が反映されていることを確認してください。

APIが別ドメインにあるため、CORSの設定を入れて呼び出せるようにします。

  • 関数アプリのAPIのCORSを開きます。
  • 許可される元のドメインに、フロントエンドのURLを入れます。
  • Access-Control-Allow-Credentials を有効にする を有効にします。
  • 上の保存を押します。

動かしてみる

ここまでの手順がすべて上手くいっていれば、フロントエンドのウェブサイトを開くと以下が実行できるはずです。

  • Log inを押すとAzure ADのログイン画面が開き、ログインができます。
    • 手抜きしているのでログイン後にデフォルトのページになってしまいますが、そのまま閉じて大丈夫です。
  • Logoutを押すとログアウトする画面が開きます。アカウントを選択する画面に言ってしまった場合も既にログアウトはできているのでそのまま閉じて大丈夫です。
  • ログイン状態で、投稿の隣のテキストボックスに入力して投稿を押すと自分のタイムラインに投稿されます。
  • タイムライン表示を押すと、ログイン中のユーザのタイムラインを表示します。ログアウト状態だとエラーになります。
  • タイムライン表示の隣のテキストボックスにメールアドレスを入れると、そのユーザのタイムラインを表示します。こちらはログアウト状態でも可能です。

データを見てみる

投稿されたデータはCosmos DBに保存されています。 Azure PortalからCosmos DBを開き、データエクスプローラーから保存されたデータを確認することができます。

ログを見てみる

Azure Functionsのログは、様々な方法で見ることができます。

  • VS Codeから見る
    • Functionsセクションからアプリケーションを見つけ、右クリックのStart Streaming Logs
  • Azure Portalから見る
    • 関数アプリの関数から目的の関数を選びます。
    • コードとテストを開き、下にあるログを開いた状態でAPIを呼ぶとログが表示されます。
  • Application Insightsから見る
    • 上の検索欄にinsightを入力し、Application Insightsを開きます。
    • seccamp2020b3-nnを選びます。
    • Live Metricsを開いて10秒ほど待つと、右のサンプルテレメトリにログが表示されます。
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment