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

オープンソースの Azure Toolkit for Eclipse プラグインを使用すれば、数分で、基本的な Hello World アプリケーション作成して Web アプリとして Azure App Service にデプロイできます。Using open sourced Azure Toolkit for Eclipse plugin, creating and deploying a basic Hello World application to Azure App Service as a web app can be done in a few minutes.

注意

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

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 Eclipse をインストールする必要があります。これには、次のソフトウェア コンポーネントが必要です。To complete the steps in this article, you will need to install the Azure Toolkit for Eclipse, which requires the following software components:

注意

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

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

  1. 次のボタンを実行中の Eclipse ワークスペースにドラッグして、Azure Toolkit for Eclipse プラグインをインストールします (他のインストール オプション)。Drag the following button to your running Eclipse workspace to install the Azure Toolkit for Eclipse plugin (other installation options).

    実行中の Eclipse* ワークスペースにドラッグします。*Eclipse Marketplace Client が必要Drag to your running Eclipse* workspace. *Requires Eclipse Marketplace Client

  2. Azure アカウントにサインインするには、 [ツール][Azure][サインイン] の順にクリックします。To sign in to your Azure account, click Tools, then click Azure, and then click Sign In. Azure サインイン用の Eclipse メニューEclipse Menu for Azure Sign In

  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 clicked Copy&Open in last step) and then click Next.

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

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

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

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

  1. [ファイル][新規][Dynamic Web Project](動的 Web プロジェクト) の順にクリックしますClick File, click New, and then click Dynamic Web Project. ( [ファイル][新規] のクリック後、使用可能なプロジェクトとして [Dynamic Web Project (動的 Web プロジェクト)] が表示されない場合は、 [ファイル][新規][プロジェクト] の順にクリックし、 [Web] を展開して、 [Dynamic Web Project (動的 Web プロジェクト)][次へ] の順にクリックします)。(If you don't see Dynamic Web Project listed as an available project after clicking File and New, then do the following: click File, click New, click Project..., expand Web, click Dynamic Web Project, and click Next.)

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

  2. このチュートリアルでは、プロジェクトに MyWebAppという名前を付けます。For purposes of this tutorial, name the project MyWebApp. 画面は次のようになります。Your screen will appear similar to the following:

    新しい動的 Web プロジェクトのプロパティ

  3. [完了] をクリックします。Click Finish.

  4. Eclipse の Project Explorer ビューで、 [MyWebApp] を展開します。Within Eclipse's Project Explorer view, expand MyWebApp. WebContent を右クリックし、 [新規][JSP ファイル] の順にクリックします。Right-click WebContent, click New, and then click JSP File.

    新しい JSP ファイルの作成

  5. [New JSP File (新しい JSP ファイル)] ダイアログ ボックスで index.jsp ファイルに名前を付け、親フォルダーは MyWebApp/WebContent のままにして [次へ] をクリックします。In the New JSP File dialog box, name the file index.jsp, keep the parent folder as MyWebApp/WebContent, and then click Next.

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

  6. [Select JSP Template (JSP テンプレートの選択)] ダイアログ ボックスで、このチュートリアルのために [New JSP File (html) (新しい JSP ファイル (html))] を選択し、 [完了] をクリックします。In the Select JSP Template dialog box, for purposes of this tutorial select New JSP File (html), and then click Finish.

    JSP テンプレートの選択

  7. index.jsp ファイルが Eclipse で開いたら、"Hello World! " を動的に表示するためのテキストをWhen your index.jsp file opens in Eclipse, add in text to dynamically display Hello World! 既存の <body> 要素に追加します。within the existing <body> element. 更新された <body> コンテンツは、次のようになります。Your updated <body> content should resemble the following example:

    <body><b><% out.println("Hello World!"); %></b></body>
    
  8. index.jsp を保存します。Save index.jsp.

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

  1. Eclipse のプロジェクト エクスプローラー ビューでプロジェクトを右クリックし、 [Azure][Publish as Azure Web App](Azure Web アプリとして発行) の順に選択します。Within Eclipse's Project Explorer view, right-click your project, choose Azure, and then choose Publish as Azure Web App.

    [Publish as Azure Web App (Azure Web アプリとして発行)]

  2. [Deploy Web App](Web アプリのデプロイ) ダイアログ ボックスが表示されたら、次のいずれかのオプションを選択できます。When the Deploy Web App dialog box appears, you can choose one of the following options:

    • 既存の Web アプリを選択します (存在する場合)。Select an existing web app if one exists.

      アプリ サービスの選択

    • [Create New Web App](新しい Web アプリを作成する) をクリックする。Click Create New Web App.

      App Service を作成する

      [App Service の作成] ダイアログ ボックスで Web アプリに必要な情報を指定し、 [作成] をクリックします。Specify the requisite information for your web app in the Create App Service dialog box, and then click Create.

      ここで、ランタイム環境、アプリ設定、サービス プラン、およびリソース グループを構成できます。Here you can configure the runtime environment, app settings, service plan and resource group.

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

  3. Web アプリを選択し、 [デプロイ] をクリックします。Select your web app and then click Deploy.

    アプリ サービスのデプロイ

  4. ツールキットにより Web アプリが正常にデプロイされると、 [Azure の活動ログ] タブに [発行済み] 状態として表示され、デプロイされた Web アプリの URL へのハイパーリンクが設定されます。The toolkit will display a Published status under the Azure Activity Log tab when it has successfully deployed your web app, which is a hyperlink for the URL of your deployed web app.

    発行済み状態

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

    Web アプリの参照

[Azure Explorer] ビューの表示Displaying the Azure Explorer view

[Azure Explorer] ビューが Eclipse に表示されていない場合は、以下の手順に従って表示します。If the Azure Explorer view is not visible in Eclipse, display it by doing the following:

  1. [Window](ウィンドウ)[Show View](ビューの表示)[Other](その他) の順にクリックします。Click Window, click Show View, and then click Other.

    [Show View](ビューの表示) コマンド

  2. [Show View](ビューの表示) ダイアログ ボックスで [Azure Explorer] を選択して [OK] をクリックします。In the Show View dialog box, select Azure Explorer, and then click OK.

    [Show View](ビューの表示) ダイアログ ボックス

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

  1. Web アプリを Azure に発行した後、それを管理するには、Azure Explorer で右クリックし、コンテキスト メニューからオプションのいずれかを選択します。After you have published your web app to Azure, you can manage it by right-clicking in Azure Explorer and selecting one of the options in the context menu. たとえば、ここで Web アプリを [削除] して、このチュートリアルのリソースをクリーンアップできます。For example, you can Delete your web app here to clean up the resource for this tutorial.

    アプリ サービスの管理

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