kharuka2016のブログ

日々の出来事を書き留めておくブログ

Visual Studioでアプリケーション(on Microsoft Azure)開発 Part1

目次

Visual Studioでアプリケーション(on Microsoft Azure)開発 もくじ

1. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part1

2. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part2

3. Visual Studioでアプリケーション(on Microsoft Azure)開発 Part3

前提条件

Visual Studioでアプリケーション(on Microsoft Azure)開発 Part1

1. デバッグ実行

1.1. Visual Studioを起動します。
1.2. 新しいプロジェクトの作成をクリックします。
1.3. インストール済み、Visual C#、CloudのASP.NET WEBアプリケーションを選択します。
1.4. 名前(プロジェクト名)はTest01、場所はデフォルト、ソリューション名はTest01を指定してOKをクリックします。
1.5. Webフォームを選択して、認証の変更をクリックします。
1.6. 認証なしを選択し、OKをクリックします。
1.7. 新しいASP.NET WEBアプリケーション - Test01ダイアログでOKをクリックします。
1.8. プロジェクトが作成されたらデバッグ実行をします。
1.9. ブラウザー上にアプリケーションが表示されます。表示を確認出来たらブラウザーを閉じデバッグを終了します。

Edgeブラウザーを利用している場合は、ブラウザーを閉じただけではデバッグが終了しないため、デバッグの停止をクリックします。

2. Webアプリケーションの公開

2.1. ソリューションエクスプローラーのプロジェクトTest01を選択して右クリックをします。
2.2. 公開をクリックします。
2.3. Azureにサインインします。
2.4. Microsoft Azure App Service、新規作成を選択して、発行をクリックします。
2.5. App Serviceの作成のためのパラメーター入力画面が表示されます。

Azureにサインインしていない場合は、画面右上のアカウント、アカウントの追加をクリックし、Azureにサインインします。

2.6. パラメーターを入力して、作成をクリックします。
2.7. 発行プロファイルが表示されます。
2.8. サーバーエクスプローラーのAzure、App Services、リソースグループ名に発行サイト名があることを確認します。
2.9. 発行サイト名(WebApp)を選択し、右クリックします。
2.10. 管理ポータルで開くをクリックします。
2.11. Azure管理ポータルが表示されることを確認します。
2.12. Azure管理ポータルの概要、URLをクリックします。

手順1のデバッグ実行した時と同様にブラウザー上にアプリケーションが表示されることを確認します。

URLがhttp://localhost:xxxx/ではなくhttp://発行サイト名.azurewebsites.net/となっていることが分かります。

3. スクリーンショット

f:id:kharuka2016:20170907151259p:plainf:id:kharuka2016:20170907151304p:plainf:id:kharuka2016:20170907151310p:plainf:id:kharuka2016:20170907151315p:plainf:id:kharuka2016:20170907151322p:plainf:id:kharuka2016:20170907151327p:plainf:id:kharuka2016:20170907151334p:plainf:id:kharuka2016:20170907151341p:plainf:id:kharuka2016:20170907151348p:plainf:id:kharuka2016:20170907151354p:plainf:id:kharuka2016:20170907151359p:plainf:id:kharuka2016:20170907151406p:plainf:id:kharuka2016:20170907151411p:plainf:id:kharuka2016:20170907151417p:plainf:id:kharuka2016:20170907151424p:plainf:id:kharuka2016:20170907151433p:plainf:id:kharuka2016:20170907151441p:plainf:id:kharuka2016:20170907151448p:plainf:id:kharuka2016:20170907151457p:plainf:id:kharuka2016:20170907151503p:plainf:id:kharuka2016:20170907151508p:plain

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

参考

  • Microsoft Innovation Center Azure 実装の基礎を学ぶ 後編 ハンズオントレーニング

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ

できるVisual Studio 2015 Windows /Android/iOS アプリ対応 できるシリーズ