Monaco Editor on Cloud
Download as PPTX, PDF1 like3,875 views
https://jazug.connpass.com/event/81865/
Monaco Editor on Cloud
- 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)は別物
- 5. VSCodeとは？ VSCodeは Electron 製 HTML/JS/CSSといった Webの技術 でできている エディタエンジン部分は Monaco Editor として 独立してリリースされている (MITライセンス) 画像: https://electronjs.org Electronでできたアプリの例
- 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でも実行できる
- 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