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 にデプロイできます。Using open sourced Azure Toolkit for IntelliJ plugin, creating and deploying a basic Hello World application to Azure App Service as a web app can be done in a few minutes.

注意

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 his 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

  1. IntelliJ IDEA の [設定/環境設定] ダイアログ (Ctrl+Alt+S) で、 [プラグイン] を選択します。In IntelliJ IDEA's Settings/Preferences dialog (Ctrl+Alt+S), select Plugins. 次に、MarketplaceAzure Toolkit for IntelliJ を見つけ、 [インストール] をクリックします。Then, find the Azure Toolkit for IntelliJ in the Marketplace and click Install. インストール後、 [再起動] をクリックしてプラグインをアクティブにします。After installed, click Restart to activate the plugin.

    Marketplace の Azure Toolkit for IntelliJ プラグイン

  2. Azure アカウントにサインインするには、サイドバーの Azure Explorer を開き、上部のバーにある [Azure サインイン] アイコンをクリックします (または [IDEA] メニューから [ツール]/[Azure]/ [Azure サインイン] をクリックします)。To sign in to your Azure account, open sidebar Azure Explorer, and then click the Azure Sign In icon in the bar on top (or from IDEA menu Tools/Azure/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).

    [デバイスのログイン] が選択されている [Azure サインイン] ウィンドウ

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

    [Azure ログイン] ダイアログ ウィンドウ

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

    デバイスのログイン ブラウザー

  6. [サブスクリプションの選択] ダイアログ ボックスで、使用するサブスクリプションを選択し、 [OK] をクリックします。In the Select Subscriptions dialog box, select the subscriptions that you want to use, and then click OK.

    [サブスクリプションの選択] ダイアログ ボックス

Web アプリ プロジェクトの作成Creating web app project

  1. IntelliJ で、 [ファイル] メニュー、 [新規作成][プロジェクト] の順にクリックします。In IntelliJ, click the File menu, then click New, and then click Project.

    新しいプロジェクトの作成

  2. [新しいプロジェクト] ダイアログ ボックスで、 [Maven]maven-archetype-webapp の順に選択し、 [次へ] をクリックします。In the New Project dialog box, select Maven, then maven-archetype-webapp, and then click Next.

    Maven アーキタイプ Web アプリの選択

  3. Web アプリの [GroupId][ArtifactId] を指定し、 [次へ] をクリックします。Specify the GroupId and ArtifactId for your web app, and then click Next.

    GroupId と ArtifactId の指定

  4. Maven 設定をカスタマイズするか、既定の設定をそのまま使用し、 [次へ] をクリックします。Customize any Maven settings or accept the defaults, and then click Next.

    Maven 設定の指定

  5. プロジェクト名と場所を指定し、 [完了] をクリックします。Specify your project name and location, and then click Finish.

    プロジェクト名の指定

  6. Project Explorer ビューで、src/main/webapp/index.jsp ファイルを開き、次のように編集して変更を保存しますUnder Project Explorer view, open and edit the file src/main/webapp/index.jsp as following and save the changes:

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

    インデックス ページの編集

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

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

    [Deploy to Azure](Azure へのデプロイ) メニュー

  2. [Deploy to Azure](Azure へのデプロイ) ダイアログ ボックスで、既存の Tomcat Web アプリがある場合はそれにアプリケーションを直接デプロイできますが、それ以外の場合は、最初に新しいものを作成する必要があります。In the Deploy to Azure dialog box, you can directly deploy the application to an existing Tomcat webapp if you already have one, otherwise you should create a new one first.

    1. [No Available webapp, click to create a new one](使用可能な Web アプリがありません。クリックして新しいものを作成してください) リンクをクリックし、新しい Web アプリを作成します。お使いのサブスクリプションに既存の Web アプリがある場合は、WebApp ドロップダウンから [新しい Web アプリを作成する] を選択できます。Click the link No Available webapp, click to create a new one to crete a new web app, you could choose Create New WebApp from WebApp dropdown if there are existing webapps in your subscription.

      [Deploy to Azure](Azure へのデプロイ) ダイアログ ボックス

    2. ポップアップ ダイアログ ボックスで、[Web コンテナー] として TOMCAT 8.5-jre8 を選択し、その他の必要な情報を指定し、 [OK] をクリックして Web アプリを作成します。In the pop-up dialog box, chose TOMCAT 8.5-jre8 as Web Container and specify other required information, then click OK to create the webapp.

      新しい Web アプリの作成

    3. WebApp ドロップダウンから Web アプリを選択し、 [実行] をクリックします。(既存の Web アプリにデプロイする場合は、ここから開始できます)Choose the web app from WebApp drop down, and then click Run.(You could start from here if you want deploy to an existing webapp)

      既存の Web アプリへのデプロイ

  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

  1. Web アプリを発行すると、使用した設定が既定値として保存され、ツール バーの緑色の矢印アイコンをクリックすることでデプロイを実行できます。After you have published your web app, your settings will be saved as the default, and you can run the deployment by clicking the green arrow icon on the toolbar. 設定を変更するには、Web アプリのドロップダウン メニューをクリックし、 [Edit Configurations](構成の編集) をクリックします。You can modify your settings by clicking the drop-down menu for your web app and click Edit Configurations.

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

  2. [Run/Debug Configurations](構成の実行/デバッグ) ダイアログ ボックスが表示されたら、既定の設定を変更し、 [OK] をクリックします。When the Run/Debug Configurations dialog box is displayed, you can modify any of the default settings, and then click OK.

    [構成の編集] ダイアログ ボックス

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

  1. Azure Explorer での Web アプリ の削除Deleting Web Apps in Azure Explorer

    リソースのクリーンアップ

次の手順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.