IntelliJ を使用して Azure App Service 用の Hello World Web アプリを作成するCreate a Hello World web app for Azure App Service using IntelliJ

この記事では、Azure Toolkit for IntelliJ を使用して、基本的な Hello World Web アプリを作成して Azure App Service に発行するために必要な手順について説明します。This article demonstrates the steps that are required to create a basic Hello World web app and publish your web app to Azure App Service by using the Azure Toolkit for IntelliJ.

注意

Eclipse を使用したい場合は、Eclipse 用の同様のチュートリアルをご覧ください。If you prefer using Eclipse, check out our similar tutorial for Eclipse.

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

このチュートリアルを完了したら、忘れずにリソースをクリーンアップしてください。Don't forget to clean up the resources after you complete this tutorial. その場合、このガイドの実行によって無料アカウントのクォータが超過することはありません。In that case, running this guide will not exceed your free account quota.

前提条件Prerequisites

この記事の手順を完了するには、Azure Toolkit for IntelliJ をインストールする必要があります。これには、次のソフトウェア コンポーネントが必要です。To complete the steps in this article, you will need to install the Azure Toolkit for IntelliJ, which requires the following software components:

注意

JetBrains Plugin Repository の Azure Toolkit for IntelliJ に関するページに、このツールキットと互換性のあるビルドが一覧表示されています。The Azure Toolkit for IntelliJ page at the JetBrains Plugin Repository lists the builds that are compatible with the toolkit.

インストールとサインインInstallation and sign-in

次の手順では、IntelliJ 開発環境での Azure サインイン プロセスについて説明します。The following steps walk you through the Azure sign in process in your IntelliJ development environment.

  1. プラグインをインストールしていない場合は、「Azure Toolkit for IntelliJ のインストール」を参照してください。If you haven't installed the plugin, see Installing the Azure Toolkit for IntelliJ.

  2. Azure アカウントにサインインするには、左側の [Azure Explorer] サイドバーに移動し、 [Azure サインイン] アイコンをクリックします。To sign in to your Azure account, navigate to the left-hand Azure Explorer sidebar, and then click the Azure Sign In icon. または、 [ツール] に移動し、 [Azure] を展開して、 [Azure サインイン] をクリックします。Alternatively, you can navigate to Tools , expand Azure , and click Azure Sign in..

    IntelliJ で Azure にサインインします。

  3. [Azure サインイン] ウィンドウで、 [Device Login](デバイスのログイン) を選択し、次に [サインイン] をクリックします ( 他のサインイン オプション)。In the Azure Sign In window, select Device Login , and then click Sign in (other sign in options).

  4. [Azure Device Login](Azure デバイスのログイン) ダイアログで [Copy&Open](コピーして開く) をクリックします。Click Copy&Open in the Azure Device Login dialog.

  5. ブラウザーで、該当のデバイス コード (前の手順で [Copy&Open](コピーして開く) をクリックしたときにコピーされたもの) を貼り付け、 [次へ] をクリックします。In the browser, paste your device code (which has been copied when you clicked Copy&Open in last step) and then click Next.

  6. Azure アカウントを選択し、サインインするために必要な認証手順を完了します。Select your Azure account and complete any authentication procedures necessary in order to sign in.

  7. サインインしたら、ブラウザーを閉じて IntelliJ IDE に戻ります。Once signed in, close your browser and switch back to your IntelliJ IDE. [Select Subscriptions](サブスクリプションの選択) ダイアログ ボックスで、使用するサブスクリプションを選択し、 [Select](選択) をクリックします。In the Select Subscriptions dialog box, select the subscriptions that you want to use, then click Select.

新しい Web アプリ プロジェクトの作成Creating a new web app project

  1. [File](ファイル) をクリックし、 [New](新規) を展開して、 [Project](プロジェクト) をクリックします。Click File , expand New , and then click Project.

  2. [New Project](新しいプロジェクト) ダイアログ ボックスで、 [Maven] を選択し、 [Create from Archetype](アーキタイプから作成) オプションがオンになっていることを確認します。In the New Project dialog box, select Maven , and make sure the Create from Archetype option is checked. 一覧から maven-archetype-webapp を選択し、 [Next](次へ) をクリックします。From the list, select maven-archetype-webapp , and then click Next.

    [maven-archetype-webapp] オプションを選択します。

  3. [Artifact Coordinates](成果物の調整) ドロップダウンを展開してすべての入力フィールドを表示し、新しい Web アプリに次の情報を指定して、 [Next](次へ) をクリックします。Expand the Artifact Coordinates dropdown to view all input fields and specify the following information for your new web app and click Next :

    • Name :Web アプリの名前です。Name : The name of your web app. これは、Web アプリの ArtifactId フィールドに自動的に入力されます。This will automatically fill in the web app's ArtifactId field.
    • GroupId :成果物グループの名前です (通常は会社のドメイン)。GroupId : The name of the artifact group, usually a company domain. (例: com.microsoft.azure )(e.g. com.microsoft.azure )
    • バージョン :既定のバージョン 1.0-SNAPSHOT のままにします。Version : We'll keep the default version 1.0-SNAPSHOT.
  4. Maven 設定をカスタマイズするか、既定の設定をそのまま使用し、 [Finish](完了) をクリックします。Customize any Maven settings or accept the defaults, and then click Finish.

  5. 左側の [Project](プロジェクト) タブでプロジェクトに移動し、ファイル src/main/webapp/index.jsp を開きます。Navigate to your project on the left-hand Project tab, and open the file src/main/webapp/index.jsp. コードを次の内容に置き換え、 変更を保存しますReplace the code with the following and save the changes :

    <html>
     <body>
       <b><% out.println("Hello World!"); %></b>
     </body>
    </html>
    

    index.jsp ファイルを開きます。

Azure への Web アプリのデプロイDeploying web app to Azure

  1. [Project Explorer] ビューでプロジェクトを右クリックし、 [Azure] を展開して、次に [Deploy to Azure Web Apps](Azure Web Apps へのデプロイ) をクリックします。Under the Project Explorer view, right-click your project, expand Azure , then click Deploy to Azure Web Apps.

  2. [Deploy to Azure](Azure へのデプロイ) ダイアログ ボックスでは、既存の Tomcat webapp にアプリケーションをデプロイすることも、新たに作成することもできます。In the Deploy to Azure dialog box, you can deploy the application to an existing Tomcat webapp or you can create a new one.

    a.a. [No available webapp, click to create a new one](使用可能な webapp がありません。クリックして新規作成します) をクリックし、新しい webapp を作成します。Click No available webapp, click to create a new one to create a new webapp. あるいは、サブスクリプションに既存の webapp がある場合は、WebApp ドロップダウンから [Create New WebApp](新しい WebApp を作成) を選択します。Otherwise, choose Create New WebApp from the WebApp dropdown if there are existing webapps in your subscription.

    [Deploy to Azure]\(Azure へのデプロイ\) ダイアログ ウィンドウ。

    ポップアップされる [Create WebApp](WebApp の作成) ダイアログ ボックスで、次の情報を指定し、 [OK] をクリックします。In the pop-up Create WebApp dialog box, specify the following information and click OK :

    • Name :WebApp のドメイン名の文字列です。Name : The WebApp's domain name string.
    • サブスクリプション :新しい WebApp に使用する Azure サブスクリプションを指定します。Subscription : Specifies the Azure subscription that you want to use for the new WebApp.
    • Platform : [Linux] を選択します。Platform : Select Linux.
    • Web Container (Web コンテナー) : TOMCAT 9.0-jre8 または適宜選択します。Web Container : Select TOMCAT 9.0-jre8 or as appropriate.
    • リソース グループ :自分の WebApp 用のリソース グループを指定します。Resource Group : Specifies the resource group for your WebApp. Azure アカウントに関連付けられている既存のリソース グループを選択することも、新規作成することもできます。You may select an existing resource group associated with your Azure account or create a new one.
    • [App Service プラン] :WebApp の App Service プランを指定します。App Service Plan : Specifies the App Service Plan for your WebApp. Azure アカウントに関連付けられている既存のプランを選択することも、新規作成することもできます。You may select an existing plan associated with your Azure account or create a new one.

    b.b. 既存の webapp にデプロイするには、WebApp ドロップ ダウンから Web アプリを選択し、 [Run](実行) をクリックします。To deploy to an existing webapp, choose the web app from WebApp drop down, and then click Run.

  3. ツールキットにより Web アプリが正常にデプロイされた場合、状態メッセージと、デプロイされた Web アプリの URL (成功した場合) が表示されます。The toolkit will display a status message when it has successfully deployed your web app, along with the URL of your deployed web app if succeed.

  4. ステータス メッセージに表示されたリンクを使用して、Web アプリを参照できます。You can browse to your web app using the link provided in the status message.

    Web アプリの参照。

デプロイ構成の管理Managing deploy configurations

ヒント

Web アプリを発行したら、ツール バーの緑色の矢印アイコンをクリックしてデプロイを実行できます。After you have published your web app, you can run the deployment by clicking the green arrow icon on the toolbar.

  1. WebApp のデプロイを実行する前に、Web アプリのドロップダウン メニューをクリックし、 [Edit Configurations](構成の編集) を選択して、既定の設定を変更でき ます。Before running your WebApp's deployment, you can modify the default settings by clicking the drop-down menu for your web app and selecting Edit Configurations.

    [Edit Configurations]\(構成の編集\) メニュー。

  2. [Run/Debug Configurations](構成の実行/デバッグ) ダイアログ ボックスで、既定の設定をどれでも変更できます。On the Run/Debug Configurations dialog box, you can modify any of the default settings. [OK] をクリックして設定を保存します。Click OK to save the settings.

リソースの後処理Cleaning up resources

  1. Web アプリを削除するには、左側の [Azure Explorer] サイドバーに移動し、 [Web Apps](Web アプリ) 項目を見つけます。To delete your web app, navigate to the left-hand Azure Explorer sidebar and locate the Web Apps item.

    注意

    Web Apps(Web アプリ) メニュー項目が展開されない場合は、Azure Explorer ツール バーの Refresh(更新) アイコンをクリックするか、Web Apps(Web アプリ) メニュー項目を右クリックして Refresh(更新) を選択して、一覧を手動で最新の情報に更新してください。If the Web Apps menu item does not expand, manually refresh the list by clicking the Refresh icon on the Azure Explorer toolbar, or by right-clicking the Web Apps menu item and selecting Refresh.

  2. 削除する Web アプリを右クリックし、 [Delete](削除) をクリックします。Right-click the web app you'd like to delete and click Delete.

  3. App Service プランまたはリソース グループを削除するには、 Azure portal にアクセスし、お使いのサブスクリプションのリソースを手動で削除してください。To delete your app service plan or resource group, visit the Azure portal and manually delete the resources under your subscription.

次のステップNext steps

バグを報告したり、新機能をリクエストしたりするには、当社の GitHub リポジトリで問題を作成してください。To report bugs or request new features, create issues on our GitHub repository. または、Stack Overflow でタグ azure-java-tools を使用して質問してください。Or, ask questions on Stack Overflow with tag azure-java-tools.

Azure での Java の使用方法の詳細については、以下のリンクを参照してください。For more information about using Java with Azure, see the following links:

Azure Web Apps の作成の詳細については、「 Web Apps の概要」を参照してください。For additional information about creating Azure Web Apps, see the Web Apps Overview.