Visual Studio Code で ASP.NET Core アプリを Azure に公開するPublish an ASP.NET Core app to Azure with Visual Studio Code

投稿者: Ricardo SerradasBy Ricardo Serradas

重要

Azure App Service と ASP.NET Core のプレビュー リリースASP.NET Core preview releases with Azure App Service

ASP.NET Core のプレビュー リリースは、既定では Azure App Service に展開されません。ASP.NET Core preview releases aren't deployed to Azure App Service by default. ASP.NET Core プレビュー リリースを使用するアプリをホストするには、「Azure App Service に ASP.NET Core プレビュー リリースを展開する」を参照してください。To host an app that uses an ASP.NET Core preview release, see Deploy ASP.NET Core preview release to Azure App Service.

App Service の配置に関する問題を解決するには、「Azure App Service および IIS での ASP.NET Core のトラブルシューティング」を参照してください。To troubleshoot an App Service deployment issue, see Azure App Service および IIS での ASP.NET Core のトラブルシューティング.

イントロIntro

このチュートリアルでは、ASP.Net Core MVC アプリケーションを作成し、Visual Studio Code 内にそれをデプロイする方法を学習します。With this tutorial, you'll learn how to create an ASP.Net Core MVC Application and deploy it within Visual Studio Code.

設定Set up

ASP.NET Core MVC プロジェクトを作成するCreate an ASP.Net Core MVC project

ターミナルを使用し、プロジェクトを作成するフォルダーに移動し、次のコマンドを使用します。Using a terminal, navigate to the folder you want the project to be created on and use the following command:

dotnet new mvc

フォルダーの構造は次のようになります。You'll have a folder structure similar to the following:

      appsettings.Development.json
      appsettings.json
<DIR> Controllers
<DIR> Models
      netcore-vscode.csproj
<DIR> obj
      Program.cs
<DIR> Properties
      Startup.cs
<DIR> Views
<DIR> wwwroot

Visual Studio Code でプロジェクトを開くOpen it with Visual Studio Code

プロジェクトが作成されたら、次のいずれかの方法を利用し、Visual Studio Code でプロジェクトを開きます。After your project is created, you can open it with Visual Studio Code by using one of the options below:

コマンド ラインからThrough the command line

プロジェクトを作成したフォルダー内で次のコマンドを使用します。Use the following command within the folder you created the project:

> code .

下のコマンドが機能しない場合、このリンクを参照し、インストールが正しく構成されていることを確認してください。If the command below does not work, check if your installation is configured properly by referencing this link.

Visual Studio Code インターフェイスからThrough Visual Studio Code interface

  • Visual Studio Code を開きますOpen Visual Studio Code
  • メニューで File > Open Folder を選択しますOn the menu, select File > Open Folder
  • MVC プロジェクトを作成したフォルダーのルートを選択しますSelect the root of the folder you created the MVC Project

プロジェクト フォルダーを開くと、ビルドやデバッグに必要なアセットが足りないというメッセージが表示されます。When you open the project folder, you'll receive a message saying that required assets to build and debug are missing. [はい] を選択し、アセットを追加します。Accept the help to add them.

プロジェクトが読み込まれた Visual Studio Code インターフェイス

.vscode フォルダーがプロジェクト構造の下に作成されます。A .vscode folder will be created under the project structure. これには次のファイルが含まれます。It will contain the following files:

launch.json
tasks.json

.NET Core Web アプリのビルドとデバッグに役立つユーティリティ ファイルがあります。These are utility files to help you build and debug your .NET Core Web App.

アプリを実行するRun the app

アプリを Azure にデプロイする前に、ローカル コンピューターでアプリが正しく実行されていることを確認してください。Before we deploy the app to Azure, make sure it is running properly on your local machine.

  • F5 を押し、プロジェクトを実行します。Press F5 to run the project

既定のブラウザーの新しいタブで Web アプリが実行を開始します。Your web app will start running on a new tab of your default browser. 起動の直後にプライバシーに関する警告が表示されます。You may notice a privacy warning as soon as it starts. これはアプリが HTTP と HTTPS のいずれかで起動するためです。既定では HTTPS エンドポイントに移動します。This is because your app will start either using HTTP and HTTPS, and it navigates to the HTTPS endpoint by default.

アプリをローカルでデバッグするときに表示されるプライバシーに関する警告

デバッグ セッションを維持するには、Advanced をクリックし、次に Continue to localhost (unsafe) をクリックします。To keep the debugging session, click Advanced and then Continue to localhost (unsafe).

デプロイ パッケージをローカルで生成するGenerate the deployment package locally

  • Visual Studio Code ターミナルを開きますOpen Visual Studio Code terminal
  • 次のコマンドを使用し、publish という名前のサブフォルダーに Release パッケージを生成します。Use the following command to generate a Release package to a sub folder called publish:
    • dotnet publish -c Release -o ./publish
  • 新しい publish フォルダーがプロジェクト構造の下に作成されますA new publish folder will be created under the project structure

発行フォルダーの構造

Azure App Service に発行するPublish to Azure App Service

Visual Studio Code 用の Azure App Service 拡張機能を活用し、下の手順で Azure App Service に直接、Web サイトを発行します。Leveraging the Azure App Service extension for Visual Studio Code, follow the steps below to publish the website directly to the Azure App Service.

新しい Web アプリを作成する場合If you're creating a new Web App

  • publish フォルダーを右クリックし、Deploy to Web App... を選択しますRight click the publish folder and select Deploy to Web App...
  • Web アプリを作成するサブスクリプションを選択しますSelect the subscription you want to create the Web App
  • Create New Web App を選択しますSelect Create New Web App
  • Web アプリの名前を入力しますEnter a name for the Web App

拡張機能により新しい Web アプリが作成され、それにパッケージが自動的にデプロイされます。The extension will create the new Web App and will automatically start deploying the package to it. デプロイが完了したら、Browse Website をクリックし、デプロイの有効性を検証します。Once the deployment is finished, click Browse Website to validate the deployment.

デプロイが成功したときのメッセージ

Browse Website をクリックすると、既定のブラウザーでそこに移動します。Once you click Browse Website, you'll navigate to it using your default browser:

新しい Web アプリが正常にデプロイされました

既存の Web アプリにデプロイする場合If you're deploying to an existing Web App

  • publish フォルダーを右クリックし、Deploy to Web App... を選択しますRight click the publish folder and select Deploy to Web App...
  • 既存の Web アプリが存在するサブスクリプションを選択しますSelect the subscription the existing Web App resides
  • 一覧から Web アプリを選択しますSelect the Web App from the list
  • Visual Studio Code から、既存のコンテンツを上書きするかどうかたずねられます。Visual Studio Code will ask you if you want to overwrite the existing content. Deploy をクリックして確定しますClick Deploy to confirm

拡張機能により、更新後のコンテンツが Web アプリにデプロイされます。The extension will deploy the updated content to the Web App. 完了したら、Browse Website をクリックし、デプロイの有効性を検証します。Once it's done, click Browse Website to validate the deployment.

既存の Web アプリが正常にデプロイされました

次の手順Next steps

その他の技術情報Additional resources