Post on 20-May-2020
transcript
Room A
デモ使い方や基礎的な
知識をお伝えします
Cloud First で Mobile First で
Open な時代の最新統合開発環境を今日から使いこなせるようになる
DemoHello “Monaco”!!
ブラウザで動く軽量な開発環境 Visual Studio の使いやすさをブラウザ上で実現
Azure Websitesに統合されて提供 Websites の [構成] から機能をオンにすれば利用可能
現在はプレビュー版
モダンなフレームワークと言語をサポート HTML5, JavaScript, TypeScript, Node , PHP, ASP.NET などに対応
Why “Monaco” なぜ “Monaco” が出てきたのか
Erich GammaDistinguished Engineer
Microsoft
Design Pattern の GoFの一人Kent Beck とともに JUnitを開発
IBM 時代は Eclipse JDT の設計リーダー2011 年 6 月から Visual Studio チームに参画
Mobile First
時代の統合開発環境
Cloud First
What’s“Monaco”
“Monaco” はどういうものか
“Monaco” は Azure Websites の機能の一つとして提供
Web サイト構築に特化
仮想マシン上のWebアプリ
アプリ
Web サーバー
ゲスト OS
ホストOSAzure が管理
利用者が管理 仮想化
アプリ
Webサーバー
ゲスト OS
仮想化
ホストOS
Azure Websites
レベル 対応状況 言語
Basic
色付け、ブラケットの自動補完、自動インデント、テキストの一部補完など
C#, VB, Razor, Markdown,
Handlebars, HTML, XML, INI,
Batch, Jade, CoffeeScript
Good
IntelliSense (コード補完)、エラーチェック、定義への移動、アウトライン表示、シンボルの名前変更など
JavaScript, JSON, CSS,
LESS, SASS, PHP
Great 複数ファイルでの参照検索 TypeScript
今日触れる予定の言語
レベル 対応状況 言語
Basic
色付け、ブラケットの自動補完、自動インデント、テキストの一部補完など
C#, VB, Razor, Markdown,
Handlebars, HTML, XML, INI,
Batch, Jade, CoffeeScript
Good
IntelliSense (コード補完)、エラーチェック、定義への移動、アウトライン表示、シンボルの名前変更など
JavaScript, JSON, CSS,
LESS, SASS, PHP
Great 複数ファイルでの参照検索 TypeScript
Visual Studioを補完する軽量な開発環境
“Monaco”というパワフルな開発環境
二つの側面
“Monaco” とVSを組み合わせた開発
“Monaco” だけでここまでできる
Web 開発
JavaScript
JavaScript Node.js
Open
時代の開発環境
“Monaco”とGitによる Azure Websites 運用
1.
2.
3.
4.
5.
git
Dev git
開発用サイト
mysite-dev.azurewebsites.netMonaco: オン
git
Kudu
運用 or ステージングサイト
mysite.azurewebsites.netMonaco: オフソースコード管理からの展開:
VS Online, GitHubなどgit
clone
/ push
ブランチのリンク
ソース管理
(VS Online,
GitHub, etc)
クラウド上での継続的デプロイメント
git
git
Dev git
git
clone
push
運用 or ステージングサイト
mysite.azurewebsites.netソース管理: VS Online
開発サイト
mysite-dev.azurewebsites.netMonaco: オン
Visual Studio Onlineに Push されると、Visual Studio Online
が継続的インテグレーションを行い、通ればデプロイする
myproject.visualstudio.com
VS online build, test
Kudu
最後にSummary
時代の統合開発環境
OpenMobile First Cloud First
Azure Websites
IIS
Node, PHP..
wwwroot実行
Kudu
Write権限
Azure Websites
IIS
Node, PHP..
wwwroot実行
“Monaco” Kudu
Read/Write権限
Write権限
Azure Websites
IIS
Node, PHP..
wwwroot実行
“Monaco” Kudu
Read/Write権限
Write権限
https://***.scm.azurewebsites.net/devhttp://***.azurewebsites.net https://***.scm.azurewebsites.net