Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
2020/06/16
Azure Static Web Apps と
Visual Studio Codespaces で
快適な TypeScript 環境を構築する
Issei Hiraoka / 平岡 一成 / @hoisjp
TypeS...
speaker: @hoisjp, hashtag: #tsjp
Issei Hiraoka / 平岡 一成
仕事は、クラウドの技術営業
日本マイクロソフト株式会社 クラウドソリューションアーキテクト
ex-楽天株式会社 サーバーサイドエンジニ...
speaker: @hoisjp, hashtag: #tsjp
1. Azure Static Web Apps
GitHub Actions + Static Web App + Azure Functions
試すならば、このコンテンツか...
Azure Static Web Apps (Preview)
Build 2020 (2020/05) で待望のサービスがプレビュー開始
speaker: @hoisjp, hashtag: #tsjp
app
api
REPO
PUSH/PR ACTION
STATIC WEB APPS
API
Azure Functions
STATIC CONTENT
HTML/JavaS...
speaker: @hoisjp, hashtag: #tsjp
プレビュー期間につき、料金は無料
https://azure.microsoft.com/ja-jp/pricing/details/app-service/static/
speaker: @hoisjp, hashtag: #tsjp
速習のおすすめは、ずばりこれ
Microsoft Learn を “Static Web Apps” で検索
https://docs.microsoft.com/ja-jp/l...
speaker: @hoisjp, hashtag: #tsjp
Microsoft Learn で Azure Static Web Apps
https://docs.microsoft.com/ja-jp/learn/modules/pu...
speaker: @hoisjp, hashtag: #tsjp
Azure Portal で Static Web App を作成
GitHub のリポジトリとブランチ
プライベートリポジトリでOK
Step 1 Step 2
speaker: @hoisjp, hashtag: #tsjp
デモ: GitHub Actions のパイプラインでデプロイされる様子
speaker: @hoisjp, hashtag: #tsjp
プルリクエストのプレビューも自動でステージング
PR を反映させたリンクを発行
https://gentle-wave-0f5ce5e00-2.eastasia.azuresta...
speaker: @hoisjp, hashtag: #tsjp
Azure Functions ってこんな感じ
Static Web Apps では現在 JavaScript に対応 (= TypeScript OK!)
このサーバーサイドロ...
Visual Studio Codespaces (Preview)
クラウドでホストされた Visual Studio Code 環境を提供
speaker: @hoisjp, hashtag: #tsjp
開発環境を即座に作成する
Microsoft Learn で行き届いていなかったもの
https://docs.microsoft.com/ja-jp/learn/modules...
speaker: @hoisjp, hashtag: #tsjp
仕組みをざっくりと
ブラウザで使える点が注目されがちですが、Visual Studio Code からも接続可能
Azure
Visual Studio Codespaces
B...
speaker: @hoisjp, hashtag: #tsjp
デモ: Codespaces を作成して起動する
speaker: @hoisjp, hashtag: #tsjp
devcontainer.json & Dockerfile
Visual Studio Codespaces で環境ができあがるからくり
.devcontainer
devco...
speaker: @hoisjp, hashtag: #tsjp
{
"name": "Node.js 12 & TypeScript",
"dockerFile": "Dockerfile",
"forwardPorts": [8080],
...
speaker: @hoisjp, hashtag: #tsjp
FROM mcr.microsoft.com/azure-functions/node:3.0-node12-core-tools
ARG USERNAME=node
ARG U...
speaker: @hoisjp, hashtag: #tsjp
devcontainer.json & Dockerfile
サンプルは豊富にあるので、これらをベースに味付けするのが楽
https://github.com/microsoft...
speaker: @hoisjp, hashtag: #tsjp
devcontainer & Dockerfile でリモート開発環境
ローカルの Docker コンテナで、同じ環境設定を使う(もともとこちらが先にリリースされていた)
Azu...
speaker: @hoisjp, hashtag: #tsjp
Remote-Containers でローカルの Docker 環境
devcontainer.json と Dockerfile はそのまま活用
speaker: @hoisjp, hashtag: #tsjp
インスタンスは現在3種類
https://azure.microsoft.com/en-us/pricing/details/visual-studio-online/
speaker: @hoisjp, hashtag: #tsjp
Basic (2 cores, 4GB RAM, 64 GB SSD)
• npm install: added 1430 packages from 911 contribut...
speaker: @hoisjp, hashtag: #tsjp
Tips: dotfiles で各自のパーソナライズ
https://docs.microsoft.com/en-us/visualstudio/online/reference...
speaker: @hoisjp, hashtag: #tsjp
GitHub Codespaces が Private Preview 中(期待!)
https://github.com/features/codespaces/
More…
speaker: @hoisjp, hashtag: #tsjp
Microsoft Docs 公式ドキュメント
https://aka.ms/swadocs
John Papa’s blog; more samples
https://joh...
speaker: @hoisjp, hashtag: #tsjp
もっと詳しく知りたいかたへ ( 2 )
6/17 (水) から de:code 2020 というオンラインイベントがございまして
https://www.microsoft.co...
speaker: @hoisjp, hashtag: #tsjp
応募条件
- Visual Studio Code が大好きであること
(プログラマでなくてもOK!愛する気持ちが大事です)
- 発送先住所(オフィス or 自宅)をご連絡いただ...
Thank you!
Upcoming SlideShare
Loading in …5
×

2020/06/16 tsjp-azure-staticwebapps-vs_codespaces

Azure Static Web Apps と Visual Studio Codespaces で 快適な TypeScript 環境を構築する

【オンライン】TypeScript Meetup #4 での発表内容です
https://typescript-jp.connpass.com/event/177175/

1. Azure Static Web Apps
GitHub Actions + Static Web App + Azure Functions
試すならば、このコンテンツから
2. Visual Studio Codespaces
VS Code の環境をクラウドでホスト
真骨頂は、devcontainer.json & Dockerfile

  • Be the first to comment

2020/06/16 tsjp-azure-staticwebapps-vs_codespaces

  1. 1. 2020/06/16 Azure Static Web Apps と Visual Studio Codespaces で 快適な TypeScript 環境を構築する Issei Hiraoka / 平岡 一成 / @hoisjp TypeScript Meetup #4; https://typescript-jp.connpass.com/event/177175/ Disclaimer: 本情報は 2020/06/16 時点の情報です。ご了承ください。
  2. 2. speaker: @hoisjp, hashtag: #tsjp Issei Hiraoka / 平岡 一成 仕事は、クラウドの技術営業 日本マイクロソフト株式会社 クラウドソリューションアーキテクト ex-楽天株式会社 サーバーサイドエンジニア 先日 6/3 に VS Code Meetup #5 で TypeScript x VS Codespaces ハンズオンをやりましたので、そちらもご参考まで。 共著で Visual Studio Code の書籍を執筆 最後に、書籍プレゼントのお知らせあります! About me 自己紹介 @hoisjp hoisjp
  3. 3. speaker: @hoisjp, hashtag: #tsjp 1. Azure Static Web Apps GitHub Actions + Static Web App + Azure Functions 試すならば、このコンテンツから 2. Visual Studio Codespaces VS Code の環境をクラウドでホスト 真骨頂は、devcontainer.json & Dockerfile More… より踏み込んだ情報のお知らせ 書籍プレゼントのご案内 Agenda in 20 minutes 詰め込みすぎました。美味しいところだけお持ち帰りいただければと!
  4. 4. Azure Static Web Apps (Preview) Build 2020 (2020/05) で待望のサービスがプレビュー開始
  5. 5. speaker: @hoisjp, hashtag: #tsjp app api REPO PUSH/PR ACTION STATIC WEB APPS API Azure Functions STATIC CONTENT HTML/JavaScript/CSS
  6. 6. speaker: @hoisjp, hashtag: #tsjp プレビュー期間につき、料金は無料 https://azure.microsoft.com/ja-jp/pricing/details/app-service/static/
  7. 7. speaker: @hoisjp, hashtag: #tsjp 速習のおすすめは、ずばりこれ Microsoft Learn を “Static Web Apps” で検索 https://docs.microsoft.com/ja-jp/learn/browse/?term=static%20web%20apps Azure をサンドボックス上で利用できるので、無料試用アカウントすら不要
  8. 8. speaker: @hoisjp, hashtag: #tsjp Microsoft Learn で Azure Static Web Apps https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/
  9. 9. speaker: @hoisjp, hashtag: #tsjp Azure Portal で Static Web App を作成 GitHub のリポジトリとブランチ プライベートリポジトリでOK Step 1 Step 2
  10. 10. speaker: @hoisjp, hashtag: #tsjp デモ: GitHub Actions のパイプラインでデプロイされる様子
  11. 11. speaker: @hoisjp, hashtag: #tsjp プルリクエストのプレビューも自動でステージング PR を反映させたリンクを発行 https://gentle-wave-0f5ce5e00-2.eastasia.azurestaticapps.net “-2” は PR 番号 Docs: https://docs.microsoft.com/ja-jp/azure/static- web-apps/review-publish-pull-requests
  12. 12. speaker: @hoisjp, hashtag: #tsjp Azure Functions ってこんな感じ Static Web Apps では現在 JavaScript に対応 (= TypeScript OK!) このサーバーサイドロジックが、同一ドメインである、 https://***/api から Serve される
  13. 13. Visual Studio Codespaces (Preview) クラウドでホストされた Visual Studio Code 環境を提供
  14. 14. speaker: @hoisjp, hashtag: #tsjp 開発環境を即座に作成する Microsoft Learn で行き届いていなかったもの https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/
  15. 15. speaker: @hoisjp, hashtag: #tsjp 仕組みをざっくりと ブラウザで使える点が注目されがちですが、Visual Studio Code からも接続可能 Azure Visual Studio Codespaces Browser Local devcontainer.json Dockerfile
  16. 16. speaker: @hoisjp, hashtag: #tsjp デモ: Codespaces を作成して起動する
  17. 17. speaker: @hoisjp, hashtag: #tsjp devcontainer.json & Dockerfile Visual Studio Codespaces で環境ができあがるからくり .devcontainer devcontainer.json Dockerfile
  18. 18. speaker: @hoisjp, hashtag: #tsjp { "name": "Node.js 12 & TypeScript", "dockerFile": "Dockerfile", "forwardPorts": [8080], "settings": { "terminal.integrated.shell.linux": "/bin/bash" }, "extensions": [ "dbaeumer.vscode-eslint", "ms-vscode.vscode-typescript-tslint-plugin", "eamodio.gitlens", "ms-azuretools.vscode-docker", "ms-azuretools.vscode-azurefunctions", "ms-azuretools.vscode-azurestaticwebapps" ], // "postCreateCommand": "yarn install", "remoteUser": "node" } .devcontainer/devcontainer.json forwardPorts ポートフォワーディングするポート番号 extensions インストールする拡張機能を指定 チームに半強制的に拡張を展開できる remoteUser 指定しない場合、root ユーザでログイン 指定しておくべき 詳細参考 https://code.visualstudio.com/docs/remo te/containers
  19. 19. speaker: @hoisjp, hashtag: #tsjp FROM mcr.microsoft.com/azure-functions/node:3.0-node12-core-tools ARG USERNAME=node ARG USER_UID=1000 ARG USER_GID=$USER_UID RUN if [ "$USER_GID" != "1000" ] || [ "$USER_UID" != "1000" ]; then ¥ groupmod --gid $USER_GID $USERNAME ¥ && usermod --uid $USER_UID --gid $USER_GID $USERNAME ¥ && chmod -R $USER_UID:$USER_GID /home/$USERNAME ¥ && chmod -R $USER_UID:root /usr/local/share/nvm /usr/local/share/npm-global; ¥ fi ¥ # Install eslint, typescript. eslint is installed by javascript image && sudo -u ${USERNAME} npm install -g eslint typescript .devcontainer/Dockerfile FROM ここでは、Azure Functions 用に Functions Core Tools がインストールされ たイメージをベースに、TypeScriptを追加 extensions インストールする拡張機能を指定 remoteUser 指定しない場合、root ユーザで 詳細参考 https://code.visualstudio.com/docs/remo te/containers
  20. 20. speaker: @hoisjp, hashtag: #tsjp devcontainer.json & Dockerfile サンプルは豊富にあるので、これらをベースに味付けするのが楽 https://github.com/microsoft/vscode-dev-containers https://github.com/microsoft/vscode-dev-containers/tree/master/containers から、下記は抜粋
  21. 21. speaker: @hoisjp, hashtag: #tsjp devcontainer & Dockerfile でリモート開発環境 ローカルの Docker コンテナで、同じ環境設定を使う(もともとこちらが先にリリースされていた) Azure Visual Studio Codespaces Browser Local devcontainer.json Dockerfile
  22. 22. speaker: @hoisjp, hashtag: #tsjp Remote-Containers でローカルの Docker 環境 devcontainer.json と Dockerfile はそのまま活用
  23. 23. speaker: @hoisjp, hashtag: #tsjp インスタンスは現在3種類 https://azure.microsoft.com/en-us/pricing/details/visual-studio-online/
  24. 24. speaker: @hoisjp, hashtag: #tsjp Basic (2 cores, 4GB RAM, 64 GB SSD) • npm install: added 1430 packages from 911 contributors and audited 1500 packages in 31.525s • npm run serve: Compiled successfully in 7385ms Standard (4 cores, 8 GB RAM, 64 GB SSD) • npm install: … in 23.444s • npm run serve: … in 5782ms Premium (8 cores, 16 GB RAM, 64 GB SSD) • npm install: … in 21.495s • npm run serve: ... in 5316ms Info: インスタンスタイプでどれほど違うものか Vue の npm install と npm run serve でベンチマーク ちなみに、いずれの CPU も、 $ cat /proc/cpuinfo … cpu family : 6 model : 85 model name : Intel(R) Xeon(R) Platinum 8168 CPU @ 2.70GHz … cpu MHz : 2693.762 cache size : 33792 KB
  25. 25. speaker: @hoisjp, hashtag: #tsjp Tips: dotfiles で各自のパーソナライズ https://docs.microsoft.com/en-us/visualstudio/online/reference/personalizing .devcontainer/* でチーム共通の環境を整えつつ、 dotfiles でそれぞれのお好み設定を。 e.g. bash などの設定 ⇒共通の環境を汚さずに、各自のパーソナライズが可能
  26. 26. speaker: @hoisjp, hashtag: #tsjp GitHub Codespaces が Private Preview 中(期待!) https://github.com/features/codespaces/
  27. 27. More…
  28. 28. speaker: @hoisjp, hashtag: #tsjp Microsoft Docs 公式ドキュメント https://aka.ms/swadocs John Papa’s blog; more samples https://johnpapa.net/static-web-apps-first-look/ Preview 中につき、フィードバック歓迎 https://github.com/Azure/static-web-apps GitHub Actions の実体 https://github.com/Azure/static-web-apps-deploy もっと詳しく知りたいかたへ ( 1 ) Subtitle (if needed)
  29. 29. speaker: @hoisjp, hashtag: #tsjp もっと詳しく知りたいかたへ ( 2 ) 6/17 (水) から de:code 2020 というオンラインイベントがございまして https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=A14
  30. 30. speaker: @hoisjp, hashtag: #tsjp 応募条件 - Visual Studio Code が大好きであること (プログラマでなくてもOK!愛する気持ちが大事です) - 発送先住所(オフィス or 自宅)をご連絡いただけるかた - ブログまたはSNSなどでレビューをいただけるかた 応募締め切りと当選ご連絡について 配信完了の時間を目途に応募締め切りとさせていただきまして、 当選されたかた2名へ 6/23(火)までに、 別途ご連絡さしあげます。 プログラマーのための Visual Studio Code の教科書 プレゼント企画 from マイナビ出版様 https://bit.ly/vscodebook
  31. 31. Thank you!

×