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 に発行するために必要な手順について説明します。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 Eclipse.

注意

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

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

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

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

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

必要なソフトウェアのインストール " (省略可能) "Install required software (optional)

Web アプリ プロジェクトを操作するために必要なコンポーネントがあることを確認するには、次の手順に従います。To ensure you have required components to work with web app projects, follow these steps:

  1. [Help](ヘルプ) メニューを選択し、 [Install New Software](新しいソフトウェアのインストール) をクリックします。Click the Help menu, and then click Install New Software.

  2. [Available Software](使用可能なソフトウェア) ダイアログで、 [Manage](管理) をクリックし、最新の Eclipse バージョン ( [2020-06] など) が選択されていることを確認します。In the Available Software dialog, click Manage, and make sure the latest Eclipse version is selected (e.g. 2020-06).

  3. [Apply and Close](適用して閉じる) をクリックします。Click Apply and Close. [Work with:](連携:) ドロップダウン メニューを展開し て、推奨サイトを表示します。Expand the Work with: dropdown menu to show suggested sites. 最新の Eclipse バージョンのサイトを選択して、使用可能なソフトウェアを照会します。Select the latest Eclipse version site to query available software.

  4. 一覧を下にスクロールし、 [Web, XML, Java EE and OSGi Enterprise Development](Web、XML、Java EE、および OSGi Enterprise Development) 項目を選択します。Scroll down the list and select the Web, XML, Java EE and OSGi Enterprise Development item. [次へ] をクリックします。Click Next.

  5. [Install Details](インストールの詳細) ウィンドウで、 [Next](次へ) をクリックします。In the Install Details window, click Next.

  6. [Review Licenses] ダイアログ ボックスで、使用許諾契約の条項を確認します。In the Review Licenses dialog, review the terms of the license agreements. ライセンス契約の条項に同意する場合は、 [I accept the terms of the license agreements (ライセンス契約の条項に同意する)] をクリックし、 [Finish (完了)] をクリックします。If you accept the terms of the license agreements, click I accept the terms of the license agreements and then click Finish.

    注意

    Eclipse ワークスペースの右下隅でインストールの進行状況を確認できます。You can check the installation progress on the lower-right corner of your Eclipse workspace.

  7. インストールを完了するために Eclipse を再起動するよう求めるメッセージが表示されたら、[Restart Now] をクリックします。If prompted to restart Eclipse to complete installation, click Restart Now.

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

  1. [File](ファイル) をクリックし、 [New](新規) を展開して、 [...Project](...プロジェクト) をクリックします。Click File, expand New, and then click ...Project. [New Project](新しいプロジェクト) ダイアログ ウィンドウ内で、 [Web] を展開し、 [Dynamic Web Project](動的 Web プロジェクト) を選択し、 [Next](次へ) をクリックします。Inside the New Project dialog window, expand Web, select Dynamic Web Project, and click Next.

    ヒント

    使用可能なプロジェクトとして [Web] が表示されない場合は、こちらのセクションを参照して、必要な Eclipse ソフトウェアがあることを確認してください。If you don't see Web listed as an available project, see this section to make sure you have the required Eclipse software.

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

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

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

  4. 左側の [Package Explorer](パッケージ エクスプローラー) ペインで、 [MyWebApp] を展開します。On the left-hand Package Explorer pane, expand MyWebApp. [WebContent] を右クリックし、 [New](新規) にマウス ポインターを置いて、 [Other...](その他...) をクリックします。Right-click WebContent, hover over New, and then click Other....

  5. [Web] を展開して、 [JSP File](JSP ファイル) オプションを見つけます。Expand Web to find the JSP File option. [次へ] をクリックします。Click Next.

  6. [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 ファイル)] ダイアログ ボックス

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

  8. 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>
    
  9. index.jsp を保存します。Save index.jsp.

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

  1. 左側の [Package Explorer](パッケージ エクスプローラー) ペインでプロジェクトを右クリックし、 [Azure][Publish as Azure Web App](Azure Web アプリとして発行) の順に選択します。On the left-hand Package Explorer pane, 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.

    • 既存の Web アプリがない場合は、 [Create](作成) をクリックします。If you do not have an existing web app, click Create.

      ここで、ランタイム環境、アプリ サービス プラン リソース グループ、アプリ設定を構成できます。Here you can configure the runtime environment, app service plan resource group, and app settings. 必要に応じて、新しいリソースを作成してください。Create new resources if necessary.

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

  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 アプリの参照

リソースの後処理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.

    アプリ サービスの管理

[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, hover over Show View, and then click Other.

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

    [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.