Upgrade to Pro — share decks privately, control downloads, hide ads and more …

【大学生限定 オンライン】新時代のモダンWebアプリ開発講座 - (Azure Static ...

mochan-tk
September 11, 2020

【大学生限定 オンライン】新時代のモダン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

mochan-tk

September 11, 2020
Tweet

More Decks by mochan-tk

Other Decks in Education

Transcript

  1. 自己紹介 2 名前:         もっちゃんと呼んでください。        (本名がちょっと呼びにくいみたいなので...)   • とある機械学習エンジニア • 3大クラウド(Azure, AWS,

    GCP)の機械学習系の資格コンプリート • VS Code Conference Japan 2020 オーガナイザー • 趣味は子育てです...(趣味にでもしないとやってられまry • 旅行とか温泉が好きです Azure GCP AWS
  2. • LINE ◦ LINE Loginチャネルの作成 ◦ LIFF の作成 • VS

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

    Web Apps ◦ Storage account ◦ Functions ◦ Functions Core Tools • LIFF SDK ◦ LIFF v2 5
  4. LIFF ID 設定 次に、Azureアイコンに移動し、Azure Static Web Apps の環境変数にLIFF ID を設定

    します。Application Settingを右クリックし、「Add New Setting」をクリックしましょう。 68
  5. Storage Account作成 azコマンドを使って、作成したコンテナのアクセスレベルを「コンテナ」(コンテナーと その BLOB に対するパブリック読み取りアクセス)に変更します。ctrl + c を2回押 し、下記を変更して実行しましょう。

    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
  6. 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