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

Slide 1

Slide 1 text

Sep 11th, 2020 【大学生限定オンライン】新時代のモダンWebアプリ開発セミナー - (Azure Static Web Apps × VS Codespaces × LINE) - 1

Slide 2

Slide 2 text

自己紹介 2 名前：　　　　　　　　もっちゃんと呼んでください。　　　　　　　（本名がちょっと呼びにくいみたいなので...）　　 ● とある機械学習エンジニア ● ３大クラウド(Azure, AWS, GCP)の機械学習系の資格コンプリート ● VS Code Conference Japan 2020 オーガナイザー ● 趣味は子育てです...(趣味にでもしないとやってられまry ● 旅行とか温泉が好きです Azure GCP AWS

Slide 3

Slide 3 text

● LINE ○ LINE Loginチャネルの作成 ○ LIFF の作成 ● VS Codespaces ○ APIをREST Clientでローカル動作確認 ○ Jestを使ったユニットテスト ○ アプリの変更をgitの別ブランチを作成してプルリク ● Azure ○ Static Web Apps拡張機能でStatic Web Appsを作成し、アプリをビルド・デプロイします ○ Storage account拡張機能でストレージアカウントとコンテナ作成 3 本日行っていただく内容は下記です。

Slide 4

Slide 4 text

4 本日のLIFFアプリ DEMO動画

Slide 5

Slide 5 text

開発環境 ● Chromeブラウザ ● VS Codespaces ● Azure ○ Static Web Apps ○ Storage account ○ Functions ○ Functions Core Tools ● LIFF SDK ○ LIFF v2 5

Slide 6

Slide 6 text

システム構成図ハンズオン概要 6 Push/PR LINE Platform

Slide 7

Slide 7 text

まず、LINE ログインチャネルを作成します。 7

Slide 8

Slide 8 text

LINE ログインのチャネル作成 https://developers.line.biz/ja/services/line-login/にアクセス。「今すぐはじめよう」のボタンを押して進めていきましょう。 8

Slide 9

Slide 9 text

Messaging APIのチャネル作成「LINEアカウントでログイン」を押してください。 9

Slide 10

Slide 10 text

LINE ログインのチャネル作成 LINEのログインを求められるのでログインしてください。 10

Slide 11

Slide 11 text

LINE ログインのチャネル作成既にプロバイダーを作っている場合 → 利用するプロバイダーを選択しましょう。 11

Slide 12

Slide 12 text

LINE ログインのチャネル作成初めて → 新規プロバイダー作成を選択しプロバイダー名を入力しましょう。（LINEという文字は含められません。）　　　　① 　　　　　② 12

Slide 13

Slide 13 text

LINE ログインのチャネル作成チャネルアイコン画像を登録しましょう。（今回は必須ではありません） 13

Slide 14

Slide 14 text

チャネル名：「手書きメッセージカード」、チャネル説明：「手書きのメッセージカードを送ります。」を入力しましょう。 LINE ログインのチャネル作成 14

Slide 15

Slide 15 text

LINE ログインのチャネル作成アプリタイプは「ウェブアプリ」にチェックをつけましょう。 15

Slide 16

Slide 16 text

LINE ログインのチャネル作成連絡可能なメールアドレスを入力しましょう。 16

Slide 17

Slide 17 text

LINE ログインのチャネル作成下記開発者契約に同意し、チェックをして「作成」ボタンを押しましょう。 17

Slide 18

Slide 18 text

LINE ログインのチャネルが作成できましたね。次に、GitHub にリポジトリを作成します。 18

Slide 19

Slide 19 text

リポジトリをForkする https://github.com/mochan-tk/azure-static-web-apps-liffにアクセスして、右上にある「Fork」ボタンをクリックしましょう。 19

Slide 20

Slide 20 text

GitHub にログインするまだログインをしていない方はログインをしましょう。 20

Slide 21

Slide 21 text

GitHub のリポジトリの確認作られたリポジトリの情報をコピーしてメモしましょう。_φ(･_･ 21

Slide 22

Slide 22 text

次にVisual Studio Codespacesを準備していきます。 22

Slide 23

Slide 23 text

Visual Studio Codespaces には、Git リポジトリ、拡張機能、および組み込みのコマンドラインインターフェイスを備えたブラウザーベースのエディターがあり、どのデバイスからでもアプリケーションを編集、実行、デバッグできます。参考URL：https://visualstudio.microsoft.com/ja/services/visual-studio-codespaces/ VS Codespaces 23

Slide 24

Slide 24 text

VS Codespaces 24 https://online.visualstudio.com/environmentsにアクセス。「Sign in」をクリックしましょう。

Slide 25

Slide 25 text

VS Codespaces 25 Microsoft アカウントでログインします。

Slide 26

Slide 26 text

VS Codespaces 26 「Create Codespace」ボタンをクリックしましょう。まず、新規のプランを作成します。

Slide 27

Slide 27 text

VS Codespaces 27 初めて VS Codespacesを使う場合は右図のように、利用する「Subscription」と「Location」を選択して「Create」をクリックしましょう。

Slide 28

Slide 28 text

VS Codespaces 28 下記を入力し、「Create」ボタンをクリックします。 Codespace Name：liff-azure-handson Git Repository：先ほどメモしたGitHub のリポジトリ Instance Type：Basic

Slide 29

Slide 29 text

VS Codespaces 29 インストールが始まるので、少し待ちましょう。（2〜3分）

Slide 30

Slide 30 text

ここで10分の休憩をはさみます。 30

Slide 31

Slide 31 text

VS Codespaces 31 下記のように黄色になってしまったら、ブラウザを更新しましょう。ファイルが展開できるようになります。

Slide 32

Slide 32 text

VS Codespaces 32 必要なものをインストールするので、メニューから Terminalを開きましょう。

Slide 33

Slide 33 text

下記コマンドを実行します。 cd ~/workspace/azure-static-web-apps-liff/api nvm install v12.18.3 npm install VS Codespaces 33

Slide 34

Slide 34 text

次に拡張機能から Azure Static Web Appsを作成します。 34

Slide 35

Slide 35 text

Azure Static Web Apps作成メニューからAzureのアイコンをクリックします。 STATIC WEB APPSにある「＋」から作成していきます。（使用するサブスクリプションが複数ある場合、使用する方を選択します。） 35

Slide 36

Slide 36 text

Azure Static Web Apps作成 sign in を求められるので、「Allow」をクリックします。 36

Slide 37

Slide 37 text

Azure Static Web Apps作成「Continue」をクリックします。認証が終わったら画面を閉じましょう。 37

Slide 38

Slide 38 text

Azure Static Web Apps作成 nameに「liff-azure-handson」を入力し、branchは「master」を選択しましょう。 38

Slide 39

Slide 39 text

Azure Static Web Apps作成アプリケーションコードの場所は「front」を選択しましょう。 39 ① ② ③

Slide 40

Slide 40 text

Azure Static Web Apps作成ファンクションコードの場所は「api」を選択しましょう。 40 ① ② ③

Slide 41

Slide 41 text

Azure Static Web Apps作成ビルドの出力先は「build」を設定しましょう。 41

Slide 42

Slide 42 text

Azure Static Web Apps作成 locationは「East Asia」を選択しましょう。 42

Slide 43

Slide 43 text

Azure Static Web Apps作成新しく作成されました。 43

Slide 44

Slide 44 text

Azure Static Web Apps作成 Actionsを右クリックして、「Show Actions」をクリックすると、Actionsの状態を確認できます。（完了するまで３分ほどかかります） 44

Slide 45

Slide 45 text

Azure Static Web Apps作成右クリックで「Browse Site」をクリックし、webサイトのURLをコピーしてメモしましょう。_φ (･_･ 45

Slide 46

Slide 46 text

Azure Static Web Apps作成 Actionsのワークフローが完了すると、ブラウザにメモしたWebサイトをアクセスすると下記のように表示されます。 46

Slide 47

Slide 47 text

Azure Static Web Appsが作成され、 Web アプリのビルドとデプロイが完了しましたね！次にLIFF を作成していきましょう。 47

Slide 48

Slide 48 text

LIFFの作成 LINEログイン設定画面に戻り(https://developers.line.biz/ja/services/line-login/)、「LIFF」タブに移動して「追加」ボタンを押しましょう。 48

Slide 49

Slide 49 text

LIFFの作成 LIFFアプリ名に「手書きメッセージカードアプリ」、サイズはFullを選択しましょう。 49

Slide 50

Slide 50 text

LIFFの作成エンドポイントURLにAzure Static Web Appsの作成時にメモしたURLを入力します。 Scopeは「profile」とすべて表示をクリックし、「chat_message.write」にチェックをつけましょう。 50

Slide 51

Slide 51 text

ボットリンク機能は「Off」にチェックをつけて、「追加」ボタンを押しましょう。参考 URL：https://developers.line.biz/ja/docs/liff/registering-liff-apps/#registering-liff-app LIFFの作成 51

Slide 52

Slide 52 text

LIFFの公開「非公開」をクリックし、公開にしましょう。 52

Slide 53

Slide 53 text

LIFFのシェアターゲットピッカーの有効シェアターゲットピッカーを使用するので、有効にしましょう。参考URL:https://developers.line.biz/ja/docs/liff/developing-liff-apps/#share-target-picker 53

Slide 54

Slide 54 text

LIFFの作成作成したLIFFアプリ名をクリックし、「LIFF ID」と「LIFF URL」をメモしましょう。_φ(･_･ 54

Slide 55

Slide 55 text

LIFF の作成ができました！ 55

Slide 56

Slide 56 text

動作確認①をしてみましょう。 56

Slide 57

Slide 57 text

動作確認① こちらが用意したBotを友だち追加しましょう。メニューにある「カメラを起動」をタップします。 57

Slide 58

Slide 58 text

動作確認① 先程メモしたLIFF URL を文字認識で撮影し、LIFF URLの部分を指でなぞり、シェアしましょう。 58

Slide 59

Slide 59 text

動作確認① 文字認識したURL（URLが間違ってたらそこは少し修正して）を送信して、メッセージをタップしましょう。認証画面は「許可する」をクリックしましょう。 59

Slide 60

Slide 60 text

動作確認① 送信したメッセージをタップすると、右記のようなLIFF画面が開き、アラートが表示されます。この時点ではLIFF IDが設定されていないエラーが起きますが、問題ありません。次にLIFF IDを環境変数に設定していきましょう。 60

Slide 61

Slide 61 text

ローカルで動作確認を行うため、 LIFF ID を設定しましょう。 61

Slide 62

Slide 62 text

LIFF ID 設定 api/send-id/index.tsの6行目で環境変数のLIFF IDを取得しています。まずはローカルでLIFF IDが取得できるか確認します。 62

Slide 63

Slide 63 text

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" } }

Slide 64

Slide 64 text

ローカル動作確認 LIFF ID の取得ができているか、ローカルで動作確認します。 apiディレクトリで下記コマンドを入力し、動かす準備をしましょう。 64 cd ~/workspace/azure-static-web-apps-liff/api npm run build npm start

Slide 65

Slide 65 text

ローカル動作確認実行が終わると下記のようにローカルで動作確認できるURLが発行されます。 65 Http Functions: send-id: [GET] http://localhost:7071/api/send-id save: [POST] http://localhost:7071/api/save

Slide 66

Slide 66 text

ローカル動作確認エクスプローラーアイコンから、api/request.httpファイルを開いて、LIFF ID取得の「Send Request」をクリックしましょう。右画面にレスポンスファイルが開き、LIFF ID の取得ができるのを確認できます。 66

Slide 67

Slide 67 text

ローカルで動作確認ができたので、サーバーにも設定していきましょう。 67

Slide 68

Slide 68 text

LIFF ID 設定次に、Azureアイコンに移動し、Azure Static Web Apps の環境変数にLIFF ID を設定します。Application Settingを右クリックし、「Add New Setting」をクリックしましょう。 68

Slide 69

Slide 69 text

LIFF ID 設定 nameは「MY_LIFF_ID」valueは「LIFF ID」を入力しましょう。 69

Slide 70

Slide 70 text

LIFF ID 設定環境変数が追加されました。 70

Slide 71

Slide 71 text

動作確認②をしてみましょう。 71

Slide 72

Slide 72 text

動作確認② LIFFを開いたままの場合は一度LIFF を閉じて、再度LIFFを開きます。 72

Slide 73

Slide 73 text

動作確認② 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

Slide 74

Slide 74 text

動作確認② 送信エラーが出たと思います。この時点では画像を保存するストレージが設定されてないエラーが起きますが、問題ありません。次に送信時に画像を保存するストレージを作成していきましょう。 74

Slide 75

Slide 75 text

次に拡張機能から Storage Accountを作成します。 75

Slide 76

Slide 76 text

Storage Account作成 AzureアイコンのSTORAGEにある「＋」から作成していきます。使用するサブスクリプションが複数ある場合は使用する方を選択します。 76

Slide 77

Slide 77 text

Storage Account作成 nameに「liffazurehandsonxxx」を入力しましょう。 xxxは一意になるよう名前等をいれてください。 77

Slide 78

Slide 78 text

Storage Account作成 Storage Account が作成されました。 78

Slide 79

Slide 79 text

Storage Account作成コンテナーを作成します。Blob Containersを右クリックし、「Create Blob Container」をクリックしましょう。 79

Slide 80

Slide 80 text

Storage Account作成コンテナー名に「images」を入力しましょう。間違えると、画像が保存できません。 80

Slide 81

Slide 81 text

Storage Account作成コンテナーが作成されました。 81

Slide 82

Slide 82 text

Storage Account作成作成したStorage Accountを右クリックし、「Copy Connection String」をクリックしましょう。 82

Slide 83

Slide 83 text

Storage Account作成下記のようなものがコピーされるので、「AccountName」と「AccountKey」をメモしましょう。_φ(･_･ 83 DefaultEndpointsProtocol=https;AccountName=liffazurehandsonxxx; AccountKey=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx==; EndpointSuffix=core.windows.net

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

Storage Accountが作成できました。ユニットテストも試してみましょう。 85

Slide 86

Slide 86 text

Jest ユニットテストエクスプローラーに移動し、何もない場所で右クリックを押し、「Add Folder to Workspace」をクリックします。 86

Slide 87

Slide 87 text

Jest ユニットテスト「/root/workspace/azure-static-web-apps-liff/api」になるように選択していきましょう。できたら、「OK」をクリックします。 87

Slide 88

Slide 88 text

Jest ユニットテスト右下に下記のようなエラーが出ますが、問題なく進められるので、気にしないで大丈夫です。 88

Slide 89

Slide 89 text

Jest ユニットテスト apiフォルダのWorkspaceが追加されました。 api/test/unit.test.tsファイルを開きましょう。 89

Slide 90

Slide 90 text

Jest ユニットテスト 5行目にBreakpointを置いて、「Debug」をクリックします。 90

Slide 91

Slide 91 text

Jest ユニットテストデバッグアイコンからVARIABLESでfilenameの値を確認できます。スタートをクリックします。 91

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

ローカルで動作確認行うため、ストレージアカウント名とキーを設定しましょう。 93

Slide 94

Slide 94 text

ストレージアカウント名とキー設定 api/save/index.tsの12,13行目で環境変数のストレージアカウント名（AccountName）とキー（AccountKey）を取得しています。このAPIはストレージアカウントに画像を保存しています。ローカルで画像が保存できるか確認します。 94

Slide 95

Slide 95 text

ストレージアカウント名とキー設定ローカル用の環境変数を設定します。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==" } }

Slide 96

Slide 96 text

ローカル動作確認画像送信時に画像がAzure Storage Accountに保存できているか、ローカルで動作確認します。apiディレクトリで下記コマンドを入力し、動かす準備をしましょう。 96 cd ~/workspace/azure-static-web-apps-liff/api npm start

Slide 97

Slide 97 text

ローカル動作確認 api/request.httpファイルを開いて、画像保存の「Send Request」をクリックしましょう。レスポンスファイルが開き、画像ファイルが作成したコンテナ内にできるのを確認できます。保存された画像はapi/test.jpgのデータを使用しています。 97

Slide 98

Slide 98 text

ローカル動作確認 Azureアイコンに移動し、imagesフォルダに保存されたファイルを右クリックし、「Copy URL」をクリックしましょう。ブラウザにコピーしたURLをアクセスすると、画像ファイルがダウンロードされます。 98

Slide 99

Slide 99 text

ローカル動作確認ダウンロードしたファイルが下記のようになっていればOKです。 99

Slide 100

Slide 100 text

ローカルで動作確認ができたので、サーバーにも設定していきましょう。 100

Slide 101

Slide 101 text

ストレージアカウント名とキー設定次に、Azure Static Web Apps の環境変数にストレージアカウント名とキーを設定します。Application Settingを右クリックし、「Add New Setting」をクリックしましょう。 101

Slide 102

Slide 102 text

ストレージアカウント名とキー設定 nameは「AZURE_STORAGE_ACCOUNT_NAME」 valueはメモしたストレージアカウント名（AccountName）を入力しましょう。 102

Slide 103

Slide 103 text

ストレージアカウント名とキー設定また、同じように下記を追加しましょう。 nameは「AZURE_STORAGE_ACCOUNT_ACCESS_KEY」 valueはメモしたキー（AccountKey）を入力しましょう。 103

Slide 104

Slide 104 text

ストレージアカウント名とキー設定環境変数が追加されました。 104

Slide 105

Slide 105 text

それではCI/CDを回していきます。（CypressでE2Eテストも行います） 105

Slide 106

Slide 106 text

Cypress E2Eテスト作成したSTATIC WEB APPSを右クリックし、「Edit Configuration」をクリックします。 106

Slide 107

Slide 107 text

Cypress E2Eテスト GitHubのazure-static-web-apps-xxx.ymlが開きます。下記URL先のコードを全てコピーして、一番下の行に追加します。 https://gist.github.com/mochan-tk/81a80767145465f50be7b926bc75d754 107 ←ここに追加

Slide 108

Slide 108 text

Cypress E2Eテスト追加したコードに「baseUrl」が記載されている箇所が２つあります。そこをAzure Static Web Apps作成時にメモしたURLに書き換えましょう。 (https://xxx-xxx-xxx.azurestaticapps.net） 108

Slide 109

Slide 109 text

Cypress E2Eテスト右上にある「Start commit」、「Commit changes」の順にクリックをして、GitHubにpush します。 109

Slide 110

Slide 110 text

Cypress E2Eテスト Actionsのワークフローが動くので、少し待ちます。終わったら、E2Eテストのログと結果のビデオをダウンロードして、確認します。 110

Slide 111

Slide 111 text

結果の確認ができるまで、アプリに変更を加えてみましょう！ 111

Slide 112

Slide 112 text

これから行う手順は本番にデプロイする前に、ステージングで変更を確認する手順です。 112

Slide 113

Slide 113 text

エクスプローラーアイコンのfront/index.htmlに下記のように「LIFF × Azure」を追加して変更しましょう。アプリの変更 113

Slide 114

Slide 114 text

別のブランチを作成します。Source Controlアイコンをクリックします。次に「・・・」アイコンから「Checkout to」をクリックします。アプリの変更 114

Slide 115

Slide 115 text

アプリの変更「＋Create new branch」を選択し、ブランチ名「update-title」を入力しましょう。作成されると、画面一番下のブランチ名が変更されます。 115

Slide 116

Slide 116 text

アプリの変更対象のファイルを選びコミット対象にします。（git add）「＋」をクリックしましょう。次にコミットメッセージ「Update Title」を入力し、「レ」のアイコンをクリックし、コミットします。 116

Slide 117

Slide 117 text

アプリの変更「・・・」アイコンから「Push」をクリックします。 publishするかの確認は、「OK」をクリックします。 117

Slide 118

Slide 118 text

GitHubの「Code」メニューを選び、「Compare & pull request」をクリックします。アプリの変更 118

Slide 119

Slide 119 text

アプリの変更 Base Repositoryを自分のリポジトリのmasterに変更します。 119

Slide 120

Slide 120 text

アプリの変更 Create pull requestをクリックします。 120

Slide 121

Slide 121 text

ビルドとデプロイに時間がかかるので、 Cypress E2Eテストの確認をしましょう。 121

Slide 122

Slide 122 text

Cypress E2Eテストの確認 GitHubの「Actions」メニューを選びましょう Actionsのワークフローが完了しました。完了したフローをクリックしましょう。 122

Slide 123

Slide 123 text

Cypress E2Eテストの確認 Artifactsに「Cypress Videos」ができています。ダウンロードして結果を見てみましょう。 123

Slide 124

Slide 124 text

Cypress E2Eテストの確認ワークフローがエラーになっている場合は「Cypress Screenshots」というエラーの箇所のスックリーンショットもダウンロードできます。右端の「Re-run all jobs」からワークフローを再度動かすことができます。 124

Slide 125

Slide 125 text

Cypress E2Eテストの確認下記のような結果になります。 ①Title確認 ②プロフィール確認（モック） ③Sendmessage確認（モック） 125

Slide 126

Slide 126 text

Cypress E2Eテストの確認また、ログは下記から確認ができます。 126

Slide 127

Slide 127 text

動作確認③をしてみましょう。 127

Slide 128

Slide 128 text

動作確認③ 一度LIFF を閉じて、再度LIFFを開きます。パッドに何か入力して、「Send」をタップすると、画像とメッセージが送信されたのを確認できます。 128

Slide 129

Slide 129 text

変更したアプリのプレビューを確認しましょう。 129

Slide 130

Slide 130 text

アプリ変更確認 Actionsのワークフローのビルドが完了したら、GitHubに紐付いているアカウントにメールが飛んできます。メールを確認しましょう。 130

Slide 131

Slide 131 text

アプリ変更確認 URL付きのメールが来ていると思います。これは「Static Web Apps」で発行されたURL に「-1.eastasia」が付与されています。ライブ Web サイトに発行する前に、ステージングサイトで変更を確認することができます。 131

Slide 132

Slide 132 text

アプリ変更確認 LIFFのエンドポイントにアプリ変更したURLに変更すると、変更した内容を確認できます。 132

Slide 133

Slide 133 text

これでStatic Web Appを使った LIFFアプリが完成できました！最後にリソースの削除の手順を紹介します。 133

Slide 134

Slide 134 text

Azureアイコンに移動し、作成したStorage Accountを右クリックし、「Delete Storage Account」をクリックしましょう。続いて、「Delete」をクリックします。リソースの削除 134

Slide 135

Slide 135 text

作成したStatic Web Appsを右クリックし、「Delete」をクリックしましょう。続いて、「Delete」をクリックします。リソースの削除 135

Slide 136

Slide 136 text

menuアイコンから「Go Home」をクリックしましょう。リソースの削除 136

Slide 137

Slide 137 text

「・・・」をクリックして、「Delete」をクリックします。リソースの削除 137

Slide 138

Slide 138 text

「Delete」をクリックすると、VS Codespacesは削除されます。リソースの削除 138

Slide 139

Slide 139 text

お疲れ様でした！！ 139