Azure に ASP.NET Core Web アプリを作成するCreate an ASP.NET Core web app in Azure

注意

この記事では、Windows 上の App Service にアプリをデプロイします。This article deploys an app to App Service on Windows. Linux 上の App Service にデプロイするには、「App Service on Linux での .NET Core Web アプリの作成」をご覧ください。To deploy to App Service on Linux, see Create a .NET Core web app in App Service on Linux.

Azure App Service では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure App Service provides a highly scalable, self-patching web hosting service. このクイック スタートでは、Azure App Service に初めての ASP.NET Core Web アプリをデプロイする方法について説明します。This quickstart shows how to deploy your first ASP.NET Core web app to Azure App Service. 完了すると、デプロイされた Web アプリケーションを含む App Service アプリと App Service プランで構成されるリソース グループが完成します。When you're finished, you'll have a resource group that consists of an App Service plan and an App Service app with a deployed web application.

Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。If you don't have an Azure subscription, create a free account before you begin.

前提条件Prerequisites

このチュートリアルを完了するには、ASP.NET および Web 開発のワークロードと共に、Visual Studio 2017 をインストールします。To complete this tutorial, install Visual Studio 2017 with the ASP.NET and web development workload.

Visual Studio 2017 を既にインストールしている場合:If you've installed Visual Studio 2017 already:

  • [ヘルプ][更新プログラムの確認] の順にクリックし、Visual Studio に最新の更新プログラムをインストールします。Install the latest updates in Visual Studio by clicking Help > Check for Updates.
  • [ツール][ツールと機能を取得] の順にクリックし、ワークロードを追加します。Add the workload by clicking Tools > Get Tools and Features.

ASP.NET Core Web アプリケーションの作成Create an ASP.NET Core web app

Visual Studio で、[ファイル]、[新規作成]、[プロジェクト] の順にクリックして、プロジェクトを作成します。In Visual Studio, create a project by selecting File > New > Project.

[新しいプロジェクト] ダイアログ ボックスで、[Visual C#]、[Web]、[ASP.NET Core Web アプリケーション] の順にクリックします。In the New Project dialog, select Visual C# > Web > ASP.NET Core Web Application.

アプリケーションに myFirstAzureWebApp という名前を付けて、[OK] をクリックします。Name the application myFirstAzureWebApp, and then select OK.

New Project dialog box

任意の種類の ASP.NET Core Web アプリを Azure にデプロイできます。You can deploy any type of ASP.NET Core web app to Azure. このクイックスタートでは、[Web アプリケーション] テンプレートを選択し、認証が [認証なし] に設定されていること、他のオプションは選択されていないことを確認してください。For this quickstart, select the Web Application template, and make sure authentication is set to No Authentication and no other option is selected.

[OK] を選択します。Select OK.

[新しい ASP.NET プロジェクト] ダイアログ ボックス

メニューから、[デバッグ]、[デバッグなしで開始] の順にクリックし、ローカルで Web アプリを実行します。From the menu, select Debug > Start without Debugging to run the web app locally.

アプリをローカルで実行する

発行ウィザードを起動するLaunch the publish wizard

ソリューション エクスプローラーmyFirstAzureWebApp プロジェクトを右クリックし、[発行] を選択します。In the Solution Explorer, right-click the myFirstAzureWebApp project and select Publish.

ソリューション エクスプローラーから発行する

発行ウィザードが自動的に起動します。The publish wizard is automatically launched. [App Service][発行] の順に選択し、[App Service の作成] ダイアログを開きます。Select App Service > Publish to open the Create App Service dialog.

プロジェクトの概要ページから発行する

Azure へのサインインSign in to Azure

[App Service の作成] ダイアログで、[アカウントの追加] をクリックし、Azure サブスクリプションにサインインします。In the Create App Service dialog, click Add an account, and sign in to your Azure subscription. 既にサインインしている場合、ドロップダウンからアカウントを選択します。If you're already signed in, select the account you want from the dropdown.

注意

既にサインインしている場合は、まだ [作成] を選択しないでください。If you're already signed in, don't select Create yet.

Azure へのサインイン

リソース グループの作成Create a resource group

リソース グループとは、Web アプリ、データベース、ストレージ アカウントなどの Azure リソースのデプロイと管理に使用する論理コンテナーです。A resource group is a logical container into which Azure resources like web apps, databases, and storage accounts are deployed and managed. たとえば、後から簡単な手順で一度にリソース グループ全体を削除することもできます。For example, you can choose to delete the entire resource group in one simple step later.

[リソース グループ] の横にある [新規] をクリックします。Next to Resource Group, select New.

リソース グループに myResourceGroup という名前を付けて、[OK] をクリックします。Name the resource group myResourceGroup and select OK.

App Service プランを作成するCreate an App Service plan

App Service プランは、アプリのホストとなる Web サーバー ファームの場所、サイズ、機能を規定します。An App Service plan specifies the location, size, and features of the web server farm that hosts your app. 1 つの App Service プランを共有するように Web アプリを構成することで、複数のアプリをホストするときのコストを抑えることができます。You can save money when hosting multiple apps by configuring the web apps to share a single App Service plan.

App Service プランには、次の定義があります。App Service plans define:

  • リージョン (例:北ヨーロッパ、米国東部、東南アジア)Region (for example: North Europe, East US, or Southeast Asia)
  • インスタンス サイズ (S、M、L)Instance size (small, medium, or large)
  • スケール カウント (1 ~ 20 インスタンス)Scale count (1 to 20 instances)
  • SKU (Free、Shared、Basic、Standard、Premium)SKU (Free, Shared, Basic, Standard, or Premium)

[ホスティング プラン] の隣にある [新規] を選択します。Next to Hosting Plan, select New.

[ホスティング プランの構成] ダイアログ ボックスで、スクリーン ショットの次の表に示した設定を使用します。In the Configure Hosting Plan dialog, use the settings in the table following the screenshot.

Create App Service plan

SettingSetting 推奨値Suggested Value 説明Description
App Service プランApp Service Plan myAppServicePlanmyAppServicePlan App Service プランの名前です。Name of the App Service plan.
場所Location 西ヨーロッパWest Europe Web アプリがホストされているデータ センターです。The datacenter where the web app is hosted.
サイズSize 無料Free 価格レベルによって、ホスティング機能が決まります。Pricing tier determines hosting features.

[OK] を選択します。Select OK.

Web アプリを作成して発行するCreate and publish the web app

[アプリ名] に一意のアプリ名 (有効な文字は a-z0-9-) を入力するか、自動的に生成された一意の名前をそのまま使用します。In App Name, type a unique app name (valid characters are a-z, 0-9, and -), or accept the automatically generated unique name. Web アプリの URL は http://<app_name>.azurewebsites.net です。<app_name> には自分のアプリの名前を指定します。The URL of the web app is http://<app_name>.azurewebsites.net, where <app_name> is your app name.

[作成] をクリックして、Azure リソースの作成を開始します。Select Create to start creating the Azure resources.

アプリ名を構成する

ウィザードの完了後に、Azure に ASP.NET Core Web アプリを発行してから、既定のブラウザーでアプリを起動します。Once the wizard completes, it publishes the ASP.NET Core web app to Azure, and then launches the app in the default browser.

Azure で発行された ASP.NET Web アプリ

アプリを作成して発行する手順で指定した名前が、http://<app_name>.azurewebsites.net 形式の URL プレフィックスとして使用されます。The app name specified in the create and publish step is used as the URL prefix in the format http://<app_name>.azurewebsites.net.

ASP.NET Core Web アプリを Azure App Service でライブ実行することができました。Congratulations, your ASP.NET Core web app is running live in Azure App Service.

アプリを更新して再デプロイするUpdate the app and redeploy

ソリューション エクスプローラーで、Pages\Index.cshtml を開きます。From the Solution Explorer, open Pages/Index.cshtml.

2 つの <div> タグを次のコードに置き換えます。Replace the two <div> tags with the following code:

<div class="jumbotron">
    <h1>ASP.NET in Azure!</h1>
    <p class="lead">This is a simple app that we’ve built that demonstrates how to deploy a .NET app to Azure App Service.</p>
</div>

Azure に再デプロイするには、ソリューション エクスプローラーmyFirstAzureWebApp プロジェクトを右クリックし、[発行] を選択します。To redeploy to Azure, right-click the myFirstAzureWebApp project in Solution Explorer and select Publish.

発行の概要ページで [発行] を選択します。In the publish summary page, select Publish. Visual Studio の発行の概要ページVisual Studio publish summary page

発行が完了すると、Visual Studio で Web アプリの URL のブラウザーが起動されます。When publishing completes, Visual Studio launches a browser to the URL of the web app.

Azure で更新された ASP.NET Web アプリ

Azure アプリの管理Manage the Azure app

Azure Portal に移動して、Web アプリを管理します。Go to the Azure portal to manage the web app.

左側のメニューで、[App Services] を選択し、お客様の Azure アプリの名前を選択します。From the left menu, select App Services, and then select the name of your Azure app.

Azure アプリへのポータル ナビゲーション

Web アプリの [概要] ページを確認します。You see your web app's Overview page. ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクを行うことができます。Here, you can perform basic management tasks like browse, stop, start, restart, and delete.

Azure Portal の App Service ブレード

左側のメニューは、アプリを構成するためのさまざまなページを示しています。The left menu provides different pages for configuring your app.

リソースのクリーンアップClean up resources

前の手順では、リソース グループ内に Azure リソースを作成しました。In the preceding steps, you created Azure resources in a resource group. これらのリソースが将来必要になると思わない場合は、リソース グループを削除してリソースを削除できます。If you don't expect to need these resources in the future, you can delete them by deleting the resource group.

Azure Portal の左側のメニューで、 [リソース グループ][myResourceGroup] の順に選択します。From the left menu in the Azure portal, select Resource groups and then select myResourceGroup.

リソース グループのページで、一覧表示されたリソースが、削除しようとするリソースであることを確認します。On the resource group page, make sure that the listed resources are the ones you want to delete.

[削除] を選択し、テキスト ボックスに「myResourceGroup」と入力してから、 [削除] を選択します。Select Delete, type myResourceGroup in the text box, and then select Delete.

次の手順Next steps