More Related Content Similar to 2020/06/16 tsjp-azure-staticwebapps-vs_codespaces
Similar to 2020/06/16 tsjp-azure-staticwebapps-vs_codespaces (20) More from Issei Hiraoka (20) 2020/06/16 tsjp-azure-staticwebapps-vs_codespaces1. 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. 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. 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
詰め込みすぎました。美味しいところだけお持ち帰りいただければと!
5. speaker: @hoisjp, hashtag: #tsjp
app
api
REPO
PUSH/PR ACTION
STATIC WEB APPS
API
Azure Functions
STATIC CONTENT
HTML/JavaScript/CSS
7. speaker: @hoisjp, hashtag: #tsjp
速習のおすすめは、ずばりこれ
Microsoft Learn を “Static Web Apps” で検索
https://docs.microsoft.com/ja-jp/learn/browse/?term=static%20web%20apps
Azure をサンドボックス上で利用できるので、無料試用アカウントすら不要
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/
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. speaker: @hoisjp, hashtag: #tsjp
Azure Functions ってこんな感じ
Static Web Apps では現在 JavaScript に対応 (= TypeScript OK!)
このサーバーサイドロジックが、同一ドメインである、
https://***/api から Serve される
14. speaker: @hoisjp, hashtag: #tsjp
開発環境を即座に作成する
Microsoft Learn で行き届いていなかったもの
https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/
15. speaker: @hoisjp, hashtag: #tsjp
仕組みをざっくりと
ブラウザで使える点が注目されがちですが、Visual Studio Code からも接続可能
Azure
Visual Studio Codespaces
Browser
Local
devcontainer.json
Dockerfile
17. speaker: @hoisjp, hashtag: #tsjp
devcontainer.json & Dockerfile
Visual Studio Codespaces で環境ができあがるからくり
.devcontainer
devcontainer.json
Dockerfile
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. 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. 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. speaker: @hoisjp, hashtag: #tsjp
devcontainer & Dockerfile でリモート開発環境
ローカルの Docker コンテナで、同じ環境設定を使う(もともとこちらが先にリリースされていた)
Azure
Visual Studio Codespaces
Browser
Local
devcontainer.json
Dockerfile
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. speaker: @hoisjp, hashtag: #tsjp
Tips: dotfiles で各自のパーソナライズ
https://docs.microsoft.com/en-us/visualstudio/online/reference/personalizing
.devcontainer/* でチーム共通の環境を整えつつ、
dotfiles でそれぞれのお好み設定を。
e.g. bash などの設定
⇒共通の環境を汚さずに、各自のパーソナライズが可能
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. speaker: @hoisjp, hashtag: #tsjp
もっと詳しく知りたいかたへ ( 2 )
6/17 (水) から de:code 2020 というオンラインイベントがございまして
https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=A14
30. speaker: @hoisjp, hashtag: #tsjp
応募条件
- Visual Studio Code が大好きであること
(プログラマでなくてもOK!愛する気持ちが大事です)
- 発送先住所(オフィス or 自宅)をご連絡いただけるかた
- ブログまたはSNSなどでレビューをいただけるかた
応募締め切りと当選ご連絡について
配信完了の時間を目途に応募締め切りとさせていただきまして、
当選されたかた2名へ 6/23(火)までに、
別途ご連絡さしあげます。
プログラマーのための Visual Studio Code の教科書
プレゼント企画 from マイナビ出版様
https://bit.ly/vscodebook