【大学生限定 オンライン】新時代のモダンWebアプリ開発講座 - (Azure Static Web Apps × VS Codespaces × LINE) - / Azure VSCodeJP LINE_API for Students 20200911

とある九州の大学生コミュニティと共同開催したイベント。記念にアップロード♪
https://linedevkyushu.connpass.com/event/188922/

#Azure #VSCodeJP #LINE_API

Transcript

1. Sep 11th, 2020 【大学生限定 オンライン】 新時代のモダンWebアプリ開発セミナー - (Azure Static Web Apps × VS Codespaces × LINE) - 1
2. 自己紹介 2 名前：　　 　　　　　　もっちゃんと呼んでください。 　　　　　　　（本名がちょっと呼びにくいみたいなので...）　　 • とある機械学習エンジニア • ３大クラウド(Azure, AWS, GCP)の機械学習系の資格コンプリート • VS Code Conference Japan 2020 オーガナイザー • 趣味は子育てです...(趣味にでもしないとやってられまry • 旅行とか温泉が好きです Azure GCP AWS
3. • LINE ◦ LINE Loginチャネルの作成 ◦ LIFF の作成 • VS Codespaces ◦ APIをREST Clientでローカル動作確認 ◦ Jestを使ったユニットテスト ◦ アプリの変更をgitの別ブランチを作成してプルリク • Azure ◦ Static Web Apps拡張機能でStatic Web Appsを作成し、アプリをビルド・デプロイします ◦ Storage account拡張機能でストレージアカウントとコンテナ作成 3 本日行っていただく内容は下記です。
4. 4 本日のLIFFアプリ DEMO動画
5. 開発環境 • Chromeブラウザ • VS Codespaces • Azure ◦ Static Web Apps ◦ Storage account ◦ Functions ◦ Functions Core Tools • LIFF SDK ◦ LIFF v2 5
6. システム構成図ハンズオン概要 6 Push/PR LINE Platform
7. まず、LINE ログインチャネルを作成します。 7
8. LINE ログインのチャネル作成 https://developers.line.biz/ja/services/line-login/にアクセス。 「今すぐはじめよう」のボタンを押して進めていきましょう。 8
9. Messaging APIのチャネル作成 「LINEアカウントでログイン」を押してください。 9
10. LINE ログインのチャネル作成 LINEのログインを求められるのでログインしてください。 10
11. LINE ログインのチャネル作成 既にプロバイダーを作っている場合 → 利用するプロバイダーを選択しましょう。 11
12. LINE ログインのチャネル作成 初めて → 新規プロバイダー作成を選択しプロバイダー名を入力しましょう。 （LINEという文字は含められません。） 　　　　① 　　　　　② 12
13. LINE ログインのチャネル作成 チャネルアイコン画像を登録しましょう。（今回は必須ではありません） 13
14. チャネル名：「手書きメッセージカード」、 チャネル説明：「手書きのメッセージカードを送ります。」を入力しましょう。 LINE ログインのチャネル作成 14
15. LINE ログインのチャネル作成 アプリタイプは「ウェブアプリ」にチェックをつけましょう。 15
16. LINE ログインのチャネル作成 連絡可能なメールアドレスを入力しましょう。 16
17. LINE ログインのチャネル作成 下記 開発者契約に同意し、チェックをして「作成」ボタンを押しましょう。 17
18. LINE ログインのチャネルが作成できましたね。次 に、GitHub にリポジトリを作成します。 18
19. リポジトリをForkする https://github.com/mochan-tk/azure-static-web-apps-liffにアクセスして、 右上にある「Fork」ボタンをクリックしましょう。 19
20. GitHub にログインする まだログインをしていない方はログインをしましょう。 20
21. GitHub のリポジトリの確認 作られたリポジトリの情報をコピーしてメモしましょう。_φ(･_･ 21
22. 次にVisual Studio Codespacesを準備していきます。 22
23. Visual Studio Codespaces には、Git リポジトリ、拡張機能、および組み込みのコマンド ライン インターフェイスを備えたブラウザーベースのエディターがあり、どのデバイスから でもアプリケーションを編集、実行、デバッグできます。 参考URL：https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/ VS Codespaces 23
24. VS Codespaces 24 https://online.visualstudio.com/environmentsにアクセス。 「Sign in」をクリックしましょう。
25. VS Codespaces 25 Microsoft アカウントでログインします。
26. VS Codespaces 26 「Create Codespace」ボタンをクリックしましょう。まず、新規のプランを作成します。
27. VS Codespaces 27 初めて VS Codespacesを使う場合は右図の ように、利用する「Subscription」と「Location」 を選択して「Create」をクリックしましょう。
28. VS Codespaces 28 下記を入力し、「Create」ボタンをクリックします。 Codespace Name：liff-azure-handson Git Repository：先ほどメモしたGitHub のリポジトリ Instance Type：Basic
29. VS Codespaces 29 インストールが始まるので、少し待ちましょう。（2〜3分）
30. ここで10分の休憩をはさみます。 30
31. VS Codespaces 31 下記のように黄色になってしまったら、ブラウザを更新しましょう。 ファイルが展開できるようになります。
32. VS Codespaces 32 必要なものをインストール するので、メニューから Terminalを開きましょう。
33. 下記コマンドを実行します。 cd ~/workspace/azure-static-web-apps-liff/api nvm install v12.18.3 npm install VS Codespaces 33
34. 次に拡張機能から Azure Static Web Appsを作成します。 34
35. Azure Static Web Apps作成 メニューからAzureのアイコンをクリックします。 STATIC WEB APPSにある「＋」から作成していきます。 （使用するサブスクリプションが複数ある場合、使用する方を選択します。） 35
36. Azure Static Web Apps作成 sign in を求められるので、「Allow」をクリックします。 36
37. Azure Static Web Apps作成 「Continue」をクリックします。認証が終わったら画面を閉じましょう。 37
38. Azure Static Web Apps作成 nameに「liff-azure-handson」を入力し、branchは「master」を選択しましょう。 38
39. Azure Static Web Apps作成 アプリケーションコードの場所は「front」を選択しましょう。 39 ① ② ③
40. Azure Static Web Apps作成 ファンクションコードの場所は「api」を選択しましょう。 40 ① ② ③
41. Azure Static Web Apps作成 ビルドの出力先は「build」を設定しましょう。 41
42. Azure Static Web Apps作成 locationは「East Asia」を選択しましょう。 42
43. Azure Static Web Apps作成 新しく作成されました。 43
44. Azure Static Web Apps作成 Actionsを右クリックして、「Show Actions」をクリックすると、Actionsの状態を確認でき ます。（完了するまで３分ほどかかります） 44
45. Azure Static Web Apps作成 右クリックで「Browse Site」をクリックし、webサイトのURLをコピーしてメモしましょう。_φ (･_･ 45
46. Azure Static Web Apps作成 Actionsのワークフローが完了すると、ブラウザにメモしたWebサイトをアクセスすると下 記のように表示されます。 46
47. Azure Static Web Appsが作成され、 Web アプリのビルドとデプロイが 完了しましたね！ 次にLIFF を作成していきましょう。 47
48. LIFFの作成 LINEログイン設定画面に戻り(https://developers.line.biz/ja/services/line-login/)、 「LIFF」タブに移動して「追加」ボタンを押しましょう。 48
49. LIFFの作成 LIFFアプリ名に「手書きメッセージカードアプリ」、 サイズはFullを選択しましょう。 49
50. LIFFの作成 エンドポイントURLにAzure Static Web Appsの作成時にメモしたURLを入力します。 Scopeは「profile」とすべて表示をクリックし、「chat_message.write」にチェックをつけま しょう。 50
51. ボットリンク機能は「Off」にチェックをつけて、「追加」ボタンを押しましょう。 参考 URL：https://developers.line.biz/ja/docs/liff/registering-liff-apps/#registering-liff-app LIFFの作成 51
52. LIFFの公開 「非公開」をクリックし、公開にしましょう。 52
53. LIFFのシェアターゲットピッカー の有効 シェアターゲットピッカーを使用するので、有効にしましょう。 参考URL:https://developers.line.biz/ja/docs/liff/developing-liff-apps/#share-target-picker 53
54. LIFFの作成 作成したLIFFアプリ名をクリックし、「LIFF ID」と「LIFF URL」をメモしましょう。_φ(･_･ 54
55. LIFF の作成ができました！ 55
56. 動作確認①をしてみましょう。 56
57. 動作確認① こちらが用意したBotを友だち追加しましょう。メニューにある「カメラを起動」をタップしま す。 57
58. 動作確認① 先程メモしたLIFF URL を文字認識で撮影し、LIFF URLの部分を指でなぞり、シェアし ましょう。 58
59. 動作確認① 文字認識したURL（URLが間違ってたらそこは少し修正して）を送信して、メッセージを タップしましょう。認証画面は「許可する」をクリックしましょう。 59
60. 動作確認① 送信したメッセージをタップすると、 右記のようなLIFF画面が開き、 アラートが表示されます。 この時点ではLIFF IDが設定されていないエラー が起きますが、問題ありません。 次にLIFF IDを環境変数に設定していきましょう。 60
61. ローカルで動作確認を行うため、 LIFF ID を設定しましょう。 61
62. LIFF ID 設定 api/send-id/index.tsの6行目で環境変数のLIFF IDを取得しています。 まずはローカルでLIFF IDが取得できるか確認します。 62
63. LIFF ID 設定 local.settings.jsonにローカル用の環境変数を設定します。エクスプローラーアイコンか らapi/local.settings.jsonの「MY_LIFF_ID」にメモしたLIFF IDを入力します。 63 { "IsEncrypted": false, "Values": { "MY_LIFF_ID": "1234567890-xxxxxxxx", "AZURE_STORAGE_ACCOUNT_NAME": "xxx", "AZURE_STORAGE_ACCOUNT_ACCESS_KEY": "xxx" } }
64. ローカル動作確認 LIFF ID の取得ができているか、ローカルで動作確認します。 apiディレクトリで下記コマンドを入力し、動かす準備をしましょう。 64 cd ~/workspace/azure-static-web-apps-liff/api npm run build npm start
65. ローカル動作確認 実行が終わると下記のようにローカルで動作確認できるURLが発行されます。 65 Http Functions: send-id: [GET] http://localhost:7071/api/send-id save: [POST] http://localhost:7071/api/save
66. ローカル動作確認 エクスプローラーアイコンから、api/request.httpファイルを開いて、LIFF ID取得の 「Send Request」をクリックしましょう。右画面にレスポンスファイルが開き、LIFF ID の 取得ができるのを確認できます。 66
67. ローカルで動作確認ができたので、 サーバーにも設定していきましょう。 67
68. LIFF ID 設定 次に、Azureアイコンに移動し、Azure Static Web Apps の環境変数にLIFF ID を設定 します。Application Settingを右クリックし、「Add New Setting」をクリックしましょう。 68
69. LIFF ID 設定 nameは「MY_LIFF_ID」valueは「LIFF ID」を入力しましょう。 69
70. LIFF ID 設定 環境変数が追加されました。 70
71. 動作確認②をしてみましょう。 71
72. 動作確認② LIFFを開いたままの場合は 一度LIFF を閉じて、再度LIFFを開きます。 72
73. 動作確認② LINE ログインされ、自分の名前が表示されます。 パッドに何か入力して、「Share」か「Send」を タップします。 Shareは「liff.shareTargetPicker()」で ターゲットピッカーで選択した相手に、 開発者が作成したメッセージを送信します。 https://developers.line.biz/ja/reference/liff/#share-target-picker Sendは「liff.sendMessages()」で ユーザーの代わりに、LIFFアプリが開かれている トーク画面にメッセージを送信します。 https://developers.line.biz/ja/reference/liff/#send-messages 73
74. 動作確認② 送信エラーが出たと思います。 この時点では画像を保存するストレージが 設定されてないエラーが起きますが、 問題ありません。 次に送信時に画像を保存するストレージを 作成していきましょう。 74
75. 次に拡張機能から Storage Accountを作成します。 75
76. Storage Account作成 AzureアイコンのSTORAGEにある「＋」から作成していきます。 使用するサブスクリプションが複数ある場合は使用する方を選択します。 76
77. Storage Account作成 nameに「liffazurehandsonxxx」を入力しましょう。 xxxは一意になるよう名前等をいれてください。 77
78. Storage Account作成 Storage Account が作成されました。 78
79. Storage Account作成 コンテナーを作成します。Blob Containersを右クリックし、「Create Blob Container」をクリックしましょう。 79
80. Storage Account作成 コンテナー名に「images」を入力しましょう。 間違えると、画像が保存できません。 80
81. Storage Account作成 コンテナーが作成されました。 81
82. Storage Account作成 作成したStorage Accountを右クリックし、「Copy Connection String」をクリックしま しょう。 82
83. Storage Account作成 下記のようなものがコピーされるので、「AccountName」と「AccountKey」をメモしま しょう。_φ(･_･ 83 DefaultEndpointsProtocol=https;AccountName=liffazurehandsonxxx; AccountKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx==; EndpointSuffix=core.windows.net
84. Storage Account作成 azコマンドを使って、作成したコンテナのアクセスレベルを「コンテナ」（コンテナーと その BLOB に対するパブリック読み取りアクセス）に変更します。ctrl + c を２回押 し、下記を変更して実行しましょう。 account-name：先程メモした「AccountName」 account-key：先程メモした「AccountKey」 https://docs.microsoft.com/ja-jp/azure/storage/blobs/anonymous-read-access-configure?tabs=azure-cli#set-the-public-access-level-for-a-container 84 az storage container set-permission \ --name images \ --account-name liffazurehandsonxxx \ --public-access container \ --account-key xxxxxxxxxxxxxxxxxx== \ --auth-mode key
85. Storage Accountが作成できました。 ユニットテストも試してみましょう。 85
86. Jest ユニットテスト エクスプローラーに移動し、何もない場所で右クリックを押し、「Add Folder to Workspace」をクリックします。 86
87. Jest ユニットテスト 「/root/workspace/azure-static-web-apps-liff/api」になるように選択していきましょ う。できたら、「OK」をクリックします。 87
88. Jest ユニットテスト 右下に下記のようなエラーが出ますが、問題なく進められるので、気にしないで大丈 夫です。 88
89. Jest ユニットテスト apiフォルダのWorkspaceが追加されました。 api/test/unit.test.tsファイルを開きましょう。 89
90. Jest ユニットテスト 5行目にBreakpointを置いて、「Debug」をクリックします。 90
91. Jest ユニットテスト デバッグアイコンからVARIABLESでfilenameの値を確認できます。スタートをクリッ クします。 91
92. Jest ユニットテスト 下記のように、デバッグモードでユニットテストを実行した結果が表示されます。 92 /root/workspace/azure-static-web-apps-liff/api/test/unit.test.ts -t "check filename" --runInBand Debugger listening on ws://127.0.0.1:46353/876fc01a-8b85-4bdd-8a42-e195cd8e4be4 For help, see: https://nodejs.org/en/docs/inspector Debugger attached. PASS test/unit.test.ts (5.378 s) ✓ check filename (4122 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 6.754 s, estimated 13 s
93. ローカルで動作確認行うため、 ストレージアカウント名とキー を設定しましょう。 93
94. ストレージアカウント名とキー 設定 api/save/index.tsの12,13行目で環境変数のストレージアカウント名（AccountName）と キー（AccountKey）を取得しています。このAPIはストレージアカウントに画像を保存して います。ローカルで画像が保存できるか確認します。 94
95. ストレージアカウント名とキー 設定 ローカル用の環境変数を設定します。api/local.settings.jsonにメモしたストレージアカウ ント名（AccountName）とキー（AccountKey）を入力します。 95 { "IsEncrypted": false, "Values": { "MY_LIFF_ID": "1234567890-xxxxxxxx", "AZURE_STORAGE_ACCOUNT_NAME": "liffazurehandsonxxx", "AZURE_STORAGE_ACCOUNT_ACCESS_KEY": "xxxxx==" } }
96. ローカル動作確認 画像送信時に画像がAzure Storage Accountに保存できているか、ローカルで動作確 認します。apiディレクトリで下記コマンドを入力し、動かす準備をしましょう。 96 cd ~/workspace/azure-static-web-apps-liff/api npm start
97. ローカル動作確認 api/request.httpファイルを開いて、画像保存の「Send Request」をクリックしましょう。レ スポンスファイルが開き、画像ファイルが作成したコンテナ内にできるのを確認できま す。保存された画像はapi/test.jpgのデータを使用しています。 97
98. ローカル動作確認 Azureアイコンに移動し、imagesフォルダに保存されたファイルを右クリックし、「Copy URL」をクリックしましょう。ブラウザにコピーしたURLをアクセスすると、画像ファイルが ダウンロードされます。 98
99. ローカル動作確認 ダウンロードしたファイルが下記のようになっていればOKです。 99
100. ローカルで動作確認ができたので、 サーバーにも設定していきましょう。 100
101. ストレージアカウント名とキー 設定 次に、Azure Static Web Apps の環境変数にストレージアカウント名とキー を設定しま す。Application Settingを右クリックし、「Add New Setting」をクリックしましょう。 101
102. ストレージアカウント名とキー 設定 nameは「AZURE_STORAGE_ACCOUNT_NAME」 valueはメモしたストレージアカウント名（AccountName）を入力しましょう。 102
103. ストレージアカウント名とキー 設定 また、同じように下記を追加しましょう。 nameは「AZURE_STORAGE_ACCOUNT_ACCESS_KEY」 valueはメモしたキー（AccountKey）を入力しましょう。 103
104. ストレージアカウント名とキー 設定 環境変数が追加されました。 104
105. それではCI/CDを回していきます。 （CypressでE2Eテストも行います） 105
106. Cypress E2Eテスト 作成したSTATIC WEB APPSを右クリックし、「Edit Configuration」をクリックします。 106
107. Cypress E2Eテスト GitHubのazure-static-web-apps-xxx.ymlが開きます。下記URL先のコードを全てコ ピーして、一番下の行に追加します。 https://gist.github.com/mochan-tk/81a80767145465f50be7b926bc75d754 107 ←ここに追加
108. Cypress E2Eテスト 追加したコードに「baseUrl」が記載されている箇所が２つあります。 そこをAzure Static Web Apps作成時にメモしたURLに書き換えましょう。 (https://xxx-xxx-xxx.azurestaticapps.net） 108
109. Cypress E2Eテスト 右上にある「Start commit」、「Commit changes」の順にクリックをして、GitHubにpush します。 109
110. Cypress E2Eテスト Actionsのワークフローが動くので、少し待ちます。 終わったら、E2Eテストのログと結果のビデオをダウンロードして、確認します。 110
111. 結果の確認ができるまで、 アプリに変更を加えてみましょう！ 111
112. これから行う手順は本番にデプロイする前に、 ステージングで変更を確認する手順です。 112
113. エクスプローラーアイコンのfront/index.htmlに下記のように「LIFF × Azure」を追加して 変更しましょう。 アプリの変更 113
114. 別のブランチを作成します。Source Controlアイコンをクリックします。 次に「・・・」アイコンから「Checkout to」をクリックします。 アプリの変更 114
115. アプリの変更 「＋Create new branch」を選択し、ブランチ名「update-title」を入力しましょう。作成され ると、画面一番下のブランチ名が変更されます。 115
116. アプリの変更 対象のファイルを選びコミット対象にします。（git add）「＋」をクリックしましょう。次にコ ミットメッセージ「Update Title」を入力し、「レ」のアイコンをクリックし、コミットします。 116
117. アプリの変更 「・・・」アイコンから「Push」をクリックします。 publishするかの確認は、「OK」をクリックします。 117
118. GitHubの「Code」メニューを選び、「Compare & pull request」をクリックします。 アプリの変更 118
119. アプリの変更 Base Repositoryを自分のリポジトリのmasterに変更します。 119
120. アプリの変更 Create pull requestをクリックします。 120
121. ビルドとデプロイに時間がかかるので、 Cypress E2Eテストの確認をしましょう。 121
122. Cypress E2Eテストの確認 GitHubの「Actions」メニューを選びましょう Actionsのワークフローが完了しました。完了したフローをクリックしましょう。 122
123. Cypress E2Eテストの確認 Artifactsに「Cypress Videos」ができています。ダウンロードして結果を見てみましょう。 123
124. Cypress E2Eテストの確認 ワークフローがエラーになっている場合は「Cypress Screenshots」というエラーの箇所 のスックリーンショットもダウンロードできます。 右端の「Re-run all jobs」から ワークフローを再度動かすこと ができます。 124
125. Cypress E2Eテストの確認 下記のような結果になります。 ①Title確認 ②プロフィール確認（モック） ③Sendmessage確認（モック） 125
126. Cypress E2Eテストの確認 また、ログは下記から確認ができます。 126
127. 動作確認③をしてみましょう。 127
128. 動作確認③ 一度LIFF を閉じて、再度LIFFを開きます。 パッドに何か入力して、「Send」をタップすると、 画像とメッセージが送信されたのを確認できます。 128
129. 変更したアプリの プレビューを確認しましょう。 129
130. アプリ変更確認 Actionsのワークフローのビルドが完了したら、GitHubに紐付いているアカウントにメー ルが飛んできます。メールを確認しましょう。 130
131. アプリ変更確認 URL付きのメールが来ていると思います。これは「Static Web Apps」で発行されたURL に「-1.eastasia」が付与されています。ライブ Web サイトに発行する前に、ステージング サイトで変更を確認することができます。 131
132. アプリ変更確認 LIFFのエンドポイントにアプリ変更したURLに 変更すると、変更した内容を確認できます。 132
133. これでStatic Web Appを使った LIFFアプリが完成できました！ 最後にリソースの削除の手順を紹介します。 133
134. Azureアイコンに移動し、作成したStorage Accountを右クリックし、「Delete Storage Account」をクリックしましょう。続いて、「Delete」をクリックします。 リソースの削除 134
135. 作成したStatic Web Appsを右クリックし、「Delete」をクリックしましょう。 続いて、「Delete」をクリックします。 リソースの削除 135
136. menuアイコンから「Go Home」をクリックしましょう。 リソースの削除 136
137. 「・・・」をクリックして、「Delete」をクリックします。 リソースの削除 137
138. 「Delete」をクリックすると、VS Codespacesは削除されます。 リソースの削除 138
139. お疲れ様でした！！ 139