https://jazug.connpass.com/event/81865/

1. VS Code on Azure
2018/04/21 Microsoft
Global Azure Bootcamp 2018 Tokyo

2. Self Introduction
suzuki.sh
GitHub: @s2terminal
Twitter: @suzukiterminal (s2terminal)
https://www.s2terminal.com
Webエンジニア@名古屋→大阪
Lang: PHP/Ruby/JavaScript
Love: 世界樹の迷宮、ニンジャスレイヤー
魔法少女まどか☆マギカ and Microsoft Azure

3. VSCodeとは？
Visual Studio Code (以下 VSCode )
Microsoftが無償で提供している
史上最高のエディタ
色々あって現在はMITライセンスのOSS
GitHubにソースコードが公開されている
Visual Studio (IDE)と
Visual Studio Code (Editor)は別物

4. VSCodeとは？
VSCodeはクロスプラットフォームで動作
Chromebook？WindowsMobile？
iOS/Android？
画像:
https://code.visualstudio.com

5. VSCodeとは？
VSCodeは Electron 製
HTML/JS/CSSといった Webの技術 でできている
エディタエンジン部分は Monaco Editor として
独立してリリースされている (MITライセンス)
画像:
https://electronjs.org
Electronでできたアプリの例

6. 今回やること
このMonaco EditorをAzureにDeployする
Chromebookや、iOS/Androidなど
ブラウザさえあれば、どんな環境下でも
使えるようにしたい
画像:
http://trinity.jp/blog/2018/02/nuans_neo_windows_10_mobile.html
https://www.asus.com/jp/Laptops/ASUS_Chromebook_Flip_C100PA/

7. npm install Monaco Editor
$ npm install monaco-editor –save して
HTMLを書くだけで、Monaco Editorは動く
Code:
https://github.com/s2terminal/monaco-on-cloud/commit/ed4d045f1129b70cf98ea821ee167783313d4c10

8. Deploy Azure Web Apps
https://docs.microsoft.com/ja-jp/azure/app-
service/app-service-web-get-started-html
公式のドキュメント通りコマンドを打てば
静的なWebサイトを簡単にDeployできる
Deploy User の作成 → Resource Group の作成
→ App Service Plan の作成 → Web Apps の作成
→ git push で完成

9. Deploy Azure Web Apps
ドキュメント内の「使ってみる」を押すと
謎のシェル(Azure Cloud Shell)が立ち上がる
これを使えば、ドキュメント内からデプロイできる

10. Deploy Azure Web Apps
最終的に $ git push azure すると
Azure Web AppsにDeploy完了
package.jsonを読んで $ npm install とか
自動でやってDeployしてくれる

11. PWAにしてオフライン動作
Progressive Web Apps (PWA)
https://developers.google.com/web/fundamentals/co
delabs/your-first-pwapp/?hl=ja より引用
PWAにしてオフライン環境でも動作させたい
>プログレッシブ ウェブアプリはウェブとアプリの
両方の利点を兼ね備えたアプリです。ブラウザのタ
ブで表示してすぐに利用することができ、インス
トールの必要はありません。

12. PWA: Registers a Service Worker
https://developers.google.com/web/fundamen
tals/primers/service-workers/?hl=ja より引用
Service Workerを記述していく
>Service Worker はブラウザが Web ページとは別に
バックグラウンドで実行するスクリプトで、Web
ページやユーザのインタラクションを必要としない
機能を Web にもたらします。

13. PWA: Registers a Service Worker
fetchイベントをServiceWorkerに登録
HTTPリクエストに割り込み、
キャッシュがあればキャッシュから返す
→オフラインでも動作できる

14. PWA: manifest.json
PWAにはWeb App Manifestファイルが必須
{ “name”: “Monaco on Cloud” } のような
JSONファイルを作成して配置。
※Azure Web Appsの仕様で
web.configというXMLを作成、.jsonファイルに対して
mimeType=“application/json“ を指定しないと
JSONが配信できず403 Forbiddenとなる
Code:
https://github.com/s2terminal/monaco-on-cloud/commit/b3bc1688eb0faed05c92de71948c862793aaa105

15. PWA: Use HTTPS
PWAはHTTPSでしか使えない
Azure Web AppsのHTTPS redirectを有効化

16. PWA: Lighthouse (Chrome Audits)
ChromeのDevTools内にある
Auditsパネルで、PWAの対応状況を確認できる
本番環境はもちろん、localhostでも実行できる

17. 完成
ソースコード:
https://github.com/s2terminal/monaco-on-cloud
完成品:
https://monaco-on-cloud.azurewebsites.net

18. まとめ
• Azure Web Apps を使うと
静的サイトを簡単にDeployできる
• PWA も、 Azure Web Appsなら
簡単に作成できる
• Use VS Code ANYWHERE
to be happy.

19. 補足
• Service Workerの実装方法について
• このスライドで紹介したServiceWorkerの実装はGoogle公式の
ドキュメントからの引用だが、同ドキュメント内でも推奨されていない。
今回は、最終的にはGoogleのWorkboxライブラリを使って実装した。
https://developers.google.com/web/tools/workbox/
• PWAにはHTTPSが必須かどうか
• Chromeでは、Service Workerは基本的にHTTPSでなければ動作しないが
localhostでの動作は非HTTPSでも許可されているため、開発に支障は無い。
• Azure Cloud Shellでのデプロイについて
• 厳密にはCloud Shellからデプロイはしていない。
デプロイ先のWeb Appsの作成はCloud Shellでブラウザ上から実行できるが
gitリポジトリが無いため、最後はローカルからデプロイすることになる。

20. 参考リンク
はじめてのプログレッシブ ウェブアプリ
https://developers.google.com/web/fundamentals/codelabs/your-first-
pwapp/?hl=ja
Service Worker のデバッグ
https://developers.google.com/web/fundamentals/codelabs/debugging-service-
workers/?hl=ja
App Shell モデル
https://developers.google.com/web/fundamentals/architecture/app-shell?hl=ja
Monaco Editor API v0.12.0
https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html
画像の引用: Free stock photos · Pexels
https://www.pexels.com/
今回のソースコード
https://github.com/s2terminal/monaco-on-cloud
完成品
https://monaco-on-cloud.azurewebsites.net