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