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

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 時点の情報です。ご了承ください。

speaker: @hoisjp, hashtag: #tsjp
Issei Hiraoka / 平岡一成
仕事は、クラウドの技術営業
日本マイクロソフト株式会社クラウドソリューションアーキテクト
ex-楽天株式会社サーバーサイドエンジニア
先日 6/3 に VS Code Meetup #5 で TypeScript x VS Codespaces
ハンズオンをやりましたので、そちらもご参考まで。
共著で Visual Studio Code の書籍を執筆
最後に、書籍プレゼントのお知らせあります！
About me
自己紹介
@hoisjp
hoisjp

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
詰め込みすぎました。美味しいところだけお持ち帰りいただければと！

Azure Static Web Apps (Preview)
Build 2020 (2020/05) で待望のサービスがプレビュー開始

app
api
REPO
PUSH/PR ACTION
STATIC WEB APPS
API
Azure Functions
STATIC CONTENT
HTML/JavaScript/CSS

プレビュー期間につき、料金は無料
https://azure.microsoft.com/ja-jp/pricing/details/app-service/static/

速習のおすすめは、ずばりこれ
Microsoft Learn を “Static Web Apps” で検索
https://docs.microsoft.com/ja-jp/learn/browse/?term=static%20web%20apps
Azure をサンドボックス上で利用できるので、無料試用アカウントすら不要

Microsoft Learn で Azure Static Web Apps
https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/

Azure Portal で Static Web App を作成
GitHub のリポジトリとブランチ
プライベートリポジトリでOK
Step 1 Step 2

デモ: GitHub Actions のパイプラインでデプロイされる様子

プルリクエストのプレビューも自動でステージング
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

Azure Functions ってこんな感じ
Static Web Apps では現在 JavaScript に対応 (= TypeScript OK!)
このサーバーサイドロジックが、同一ドメインである、
https://***/api から Serve される

Visual Studio Codespaces (Preview)
クラウドでホストされた Visual Studio Code 環境を提供

開発環境を即座に作成する
Microsoft Learn で行き届いていなかったもの
https://docs.microsoft.com/ja-jp/learn/modules/publish-app-service-static-web-app-api/

仕組みをざっくりと
ブラウザで使える点が注目されがちですが、Visual Studio Code からも接続可能
Azure
Visual Studio Codespaces
Browser
Local
devcontainer.json
Dockerfile

デモ: Codespaces を作成して起動する

devcontainer.json & Dockerfile
Visual Studio Codespaces で環境ができあがるからくり
.devcontainer
devcontainer.json
Dockerfile

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

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

devcontainer.json & Dockerfile
サンプルは豊富にあるので、これらをベースに味付けするのが楽
https://github.com/microsoft/vscode-dev-containers
https://github.com/microsoft/vscode-dev-containers/tree/master/containers から、下記は抜粋

devcontainer & Dockerfile でリモート開発環境
ローカルの Docker コンテナで、同じ環境設定を使う（もともとこちらが先にリリースされていた）
Azure
Visual Studio Codespaces
Browser
Local
devcontainer.json
Dockerfile

Remote-Containers でローカルの Docker 環境
devcontainer.json と Dockerfile はそのまま活用

インスタンスは現在3種類
https://azure.microsoft.com/en-us/pricing/details/visual-studio-online/

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

Tips: dotfiles で各自のパーソナライズ
https://docs.microsoft.com/en-us/visualstudio/online/reference/personalizing
.devcontainer/* でチーム共通の環境を整えつつ、
dotfiles でそれぞれのお好み設定を。
e.g. bash などの設定
⇒共通の環境を汚さずに、各自のパーソナライズが可能

GitHub Codespaces が Private Preview 中（期待！）
https://github.com/features/codespaces/

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)

もっと詳しく知りたいかたへ ( 2 )
6/17 (水) から de:code 2020 というオンラインイベントがございまして
https://www.microsoft.com/ja-jp/events/decode/2020session/detail.aspx?sid=A14

応募条件
- Visual Studio Code が大好きであること
（プログラマでなくてもOK！愛する気持ちが大事です）
- 発送先住所（オフィス or 自宅）をご連絡いただけるかた
- ブログまたはSNSなどでレビューをいただけるかた
応募締め切りと当選ご連絡について
配信完了の時間を目途に応募締め切りとさせていただきまして、
当選されたかた2名へ 6/23（火）までに、
別途ご連絡さしあげます。
プログラマーのための Visual Studio Code の教科書
プレゼント企画 from マイナビ出版様
https://bit.ly/vscodebook

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

More Related Content

What's hot

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

More from Issei Hiraoka

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