Azure で初めての Java Web アプリを作成するCreate your first Java web app in Azure

Azure Web Apps では、高度にスケーラブルな自己適用型の Web ホスティング サービスを提供しています。Azure Web Apps provides a highly scalable, self-patching web hosting service. このクイックスタートでは、Eclipse IDE for Java EE Developers を使って、Java Web アプリを App Service にデプロイする方法を示します。This quickstart shows how to deploy a Java web app to App Service by using the Eclipse IDE for Java EE Developers.

注意

このクイック スタートの手順では、Eclipse IDE を使って Java Web アプリを App Service に発行する方法について説明していますが、IntelliJ IDEA Ultimate Edition または Community Edition を使用することもできます。The steps in this quickstart show how to use the Eclipse IDE to publish a Java web app to App Service, but you can use the IntelliJ IDEA Ultimate Edition or Community Edition. 詳細については、「IntelliJ を使用して Azure 用の Hello World Web アプリを作成する」を参照してください。For more information, see Create a Hello World web app for Azure using IntelliJ.

このクイックスタートを完了し、作成したアプリケーションを Web ブラウザーで開くと、次の図のようになります。When you have completed this quickstart, your application will look similar to the following illustration when you view it in a web browser:

"Hello Azure!"

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

前提条件Prerequisites

このクイック スタートを完了するには、以下をインストールします。To complete this quickstart, install:

注意

Azure Toolkit for Eclipse を使ってこのクイック スタートの手順を完了するためには、Azure アカウントにサインインする必要があります。You will need to sign into your Azure account using the Azure Toolkit for Eclipse to complete the steps in this quickstart. 具体的な手順については、「Azure Toolkit for Eclipse の Azure サインイン手順」を参照してください。To do so, see Azure Sign In Instructions for the Azure Toolkit for Eclipse.

Eclipse で動的 Web プロジェクトを作成するCreate a dynamic web project in Eclipse

Eclipse で、[ファイル] > [新規] > [Dynamic Web Project(動的 Web プロジェクト)] の順にクリックします。In Eclipse, select File > New > Dynamic Web Project.

[New Dynamic Web Project(新しい動的 Web プロジェクト)] ダイアログ ボックスで、プロジェクトに MyFirstJavaOnAzureWebApp という名前を付けて、[完了] をクリックします。In the New Dynamic Web Project dialog box, name the project MyFirstJavaOnAzureWebApp, and select Finish.

[New Dynamic Web Project(新しい動的 Web プロジェクト)] ダイアログ ボックス

JSP ページを追加するAdd a JSP page

プロジェクト エクスプローラーが表示されない場合は、復元します。If Project Explorer is not displayed, restore it.

Eclipse 用の Java EE ワークスペース

プロジェクト エクスプローラーで、[MyFirstJavaOnAzureWebApp] プロジェクトを展開します。In Project Explorer, expand the MyFirstJavaOnAzureWebApp project. [WebContent] を右クリックして、[新規] > [JSP ファイル] の順にクリックします。Right-click WebContent, and then select New > JSP File.

プロジェクト エクスプローラーの新しい JSP ファイルのメニュー

[New JSP File(新しい JSP ファイル)] ダイアログ ボックスIn the New JSP File dialog box:

  • ファイル名を index.jsp にします。Name the file index.jsp.
  • [完了] を選択します。Select Finish.

    [New JSP File(新しい JSP ファイル)] ダイアログ ボックス

Index.jsp ファイルで、<body></body> を次のマークアップに置き換えます。In the index.jsp file, replace the <body></body> element with the following markup:

<body>
<h1><% out.println("Hello Azure!"); %></h1>
</body>

変更を保存します。Save the changes.

注意

Java サーブレット クラスが見つからないという内容のエラーが 1 行目で発生した場合は無視してかまいません。If you see an error on line 1 that refers to a missing Java Servlet class, you can ignore it.

無害な Java サーブレット エラー

Web アプリを Azure に発行するPublish the web app to Azure

プロジェクト エクスプローラーで、プロジェクトを右クリックし、[Azure] > [Publish as Azure Web App](Azure Web アプリとして発行) の順にクリックします。In Project Explorer, right-click your project, and then select Azure > Publish as Azure Web App.

[Publish as Azure Web App(Azure Web アプリとして発行)] コンテキスト メニュー

[Azure Sign In](Azure サインイン) ダイアログ ボックスで入力を求められた場合は、「Azure Toolkit for Eclipse の Azure サインイン手順」の記事の手順に従って資格情報を入力する必要があります。If you are prompted with the Azure Sign In dialog box, you will need to follow the steps in the Azure Sign In Instructions for the Azure Toolkit for Eclipse article to enter your credentials.

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックスDeploy Web App dialog box

Azure アカウントにサインインしたら、[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックスが表示されます。After you have signed in to your Azure account, the Deploy Web App dialog box appears.

[作成] を選択します。Select Create.

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックス

[App Service の作成] ダイアログ ボックスCreate App Service dialog box

既定値が設定された状態で [App Service の作成] ダイアログ ボックスが表示されます。The Create App Service dialog box appears with default values. 次の画像に示された 170602185241 という数値は、実際のダイアログ ボックスでは異なります。The number 170602185241 shown in the following image is different in your dialog box.

[App Service の作成] ダイアログ ボックス

[App Service の作成] ダイアログ ボックスで、次の操作を行います。In the Create App Service dialog box:

  • Web アプリの一意の名前を入力するか、生成された名前をそのまま使用します。Enter a unique name for your web app, or keep the generated name. この名前は Azure 全体で一意である必要があります。This name must be unique across Azure. 名前は、Web アプリの URL アドレスの一部です。The name is part of the URL address for the web app. 例: Web アプリケーションの名前が MyJavaWebApp の場合、URL は myjavawebapp.azurewebsites.net です。For example: if the web app name is MyJavaWebApp, the URL is myjavawebapp.azurewebsites.net.
  • このクイック スタートでは、既定の Web コンテナーをそのまま使用します。For this quickstart, keep the default web container.
  • Azure サブスクリプションを選択します。Select an Azure subscription.
  • [App Service プラン] タブで、次の操作を行います。On the App service plan tab:

    • [新規作成]。既定値の App Service プラン名をそのまま使用します。Create new: Keep the default, which is the name of the App Service plan.
    • [場所][西ヨーロッパ] または現在地付近を選択します。Location: Select West Europe or a location near you.
    • [価格レベル]。無料オプションを選択します。Pricing tier: Select the free option. 機能については、「App Service の価格」をご覧ください。For features, see App Service pricing.

      [App Service の作成] ダイアログ ボックス

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)

[リソース グループ] タブResource group tab

[リソース グループ] タブを選択します。リソース グループのために生成された既定値をそのまま使用します。Select the Resource group tab. Keep the default generated value for the 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.

[作成] を選択します。Select Create.

Azure Toolkit によって Web アプリが作成され、進行状況を示すダイアログ ボックスが表示されます。The Azure Toolkit creates the web app and displays a progress dialog box.

[Create App Service Progress(App Service の作成の進行状況)] ダイアログ ボックス

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックスDeploy Web App dialog box

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックスで、[Deploy to root(ルートにデプロイする)] を選びます。In the Deploy Web App dialog box, select Deploy to root. App Service が wingtiptoys.azurewebsites.net に存在している場合に、ルートにデプロイしないことを選択すると、Web アプリ MyFirstJavaOnAzureWebAppwingtiptoys.azurewebsites.net/MyFirstJavaOnAzureWebApp にデプロイされます。If you have an app service at wingtiptoys.azurewebsites.net and you do not deploy to the root, the web app named MyFirstJavaOnAzureWebApp is deployed to wingtiptoys.azurewebsites.net/MyFirstJavaOnAzureWebApp.

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックス

ダイアログ ボックスに、Azure、JDK、および Web コンテナーの選択内容が表示されます。The dialog box shows the Azure, JDK, and web container selections.

[デプロイ] を選択して、Web アプリを Azure に発行します。Select Deploy to publish the web app to Azure.

発行が完了したら、[Azure の活動ログ] ダイアログ ボックスで [発行済み] リンクをクリックします。When the publishing finishes, select the Published link in the Azure Activity Log dialog box.

[Azure 活動ログ] ダイアログ ボックス

お疲れさまでした。Congratulations! Azure に Web アプリが正常にデプロイされました。You have successfully deployed your web app to Azure.

"Hello Azure!"

Web アプリを更新するUpdate the web app

サンプルの JSP コードを別のメッセージに変更します。Change the sample JSP code to a different message.

<body>
<h1><% out.println("Hello again Azure!"); %></h1>
</body>

変更を保存します。Save the changes.

プロジェクト エクスプローラーで、プロジェクトを右クリックし、[Azure][Publish as Azure Web App(Azure Web アプリとして発行)] の順にクリックします。In Project Explorer, right-click the project, and then select Azure > Publish as Azure Web App.

[Deploy Web App(Web アプリのデプロイ)] ダイアログ ボックスが表示されます。ボックスには、以前に作成したアプリ サービスが表示されています。The Deploy Web App dialog box appears and shows the app service that you previously created.

注意

発行するときは、毎回、[Deploy to root(ルートにデプロイする)] を選びます。Select Deploy to root each time you publish.

Web アプリを選択し、[デプロイ] をクリックして変更を発行します。Select the web app and select Deploy, which publishes the changes.

[発行中] リンクが表示されたら、リンクをクリックして Web アプリを参照し、変更を確認します。When the Publishing link appears, select it to browse to the web app and see the changes.

Web アプリを管理するManage the web app

Azure Portal に移動して、作成した Web アプリを確認します。Go to the Azure portal to see the web app that you created.

左のメニューから、[リソース グループ] を選びます。From the left menu, select Resource Groups.

リソース グループへのポータル ナビゲーション

リソース グループを選択します。Select the resource group. ページには、このクイック スタートで作成したリソースが表示されます。The page shows the resources that you created in this quickstart.

リソース グループ

Web アプリ (上の画像の webapp-170602193915) を選択します。Select the web app (webapp-170602193915 in the preceding image).

[概要] ページが表示されます。The Overview page appears. このページでは、アプリの動作状態を見ることができます。This page gives you a view of how the app is doing. ここでは、参照、停止、開始、再開、削除のような基本的な管理タスクを行うことができます。Here, you can perform basic management tasks like browse, stop, start, restart, and delete. ページの左側にあるタブは、開くことができるさまざまな構成ページを示しています。The tabs on the left side of the page show the different configurations that you can open.

Azure Portal の [App Service] ページ

リソースのクリーンアップ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.

  1. Azure Portal の Web アプリの [概要] ページで、[リソース グループ] の下の myResourceGroup リンクを選択します。From your web app's Overview page in the Azure portal, select the myResourceGroup link under Resource group.
  2. リソース グループのページで、一覧表示されたリソースが、削除しようとするリソースであることを確認します。On the resource group page, make sure that the listed resources are the ones you want to delete.
  3. [削除] を選択し、テキスト ボックスに「myResourceGroup」と入力してから、[削除] を選択します。Select Delete, type myResourceGroup in the text box, and then select Delete.

次の手順Next steps