共用方式為

使用 Eclipse 建立適用於 Azure App Service 的 Hello World Web 應用程式

  • 發行項

本文示範建立基本 Hello World Web 應用程式，並使用 Azure Toolkit for Eclipse 將 Web 應用程式發佈至 Azure App 服務 所需的步驟。

注意

如果您想要使用 IntelliJ IDEA，請參閱我們 類似的 IntelliJ 教學課程。

如果您沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。

完成本教學課程之後，別忘了清除資源。 在此情況下，執行本指南不會超過您的免費帳戶配額。

必要條件

若要完成本文中的步驟，您必須安裝 Azure Toolkit for Eclipse，這需要下列軟體元件：

注意

Eclipse Marketplace 上的 Azure Toolkit for Eclipse 頁面會列出與工具組相容的組建。

安裝和登入

下列步驟會逐步引導您在 Eclipse 開發環境中完成 Azure 登入程式。

  1. 如果您尚未安裝外掛程式，請參閱 安裝適用於 Eclipse 的 Azure 工具組。

  2. 若要登入您的 Azure 帳戶，請按兩下 [工具]，按兩下 [Azure]，然後按兩下 [登入]。

    在 Eclipse IDE 中登入 Azure。

  3. 在 [Azure 登入] 視窗中，選取 [裝置登入]，然後按兩下 [登入] （其他登入選項）。

  4. 按兩下 [Azure 裝置登入] 對話框中的 [複製與開啟]。

  5. 在瀏覽器中，貼上您的裝置程式代碼（當您在最後一個步驟中按兩下 [複製與開啟 ] 時複製的裝置程式代碼，然後按 [ 下一步]。

  6. 選取您的 Azure 帳戶，並完成登入所需的任何驗證程式。

  7. 登入之後，請關閉瀏覽器並切換回 Eclipse IDE。 在 [ 選取訂閱 ] 對話框中，選取您想要使用的訂用帳戶，然後按兩下 [ 選取]。

安裝必要的軟體 （選擇性）

若要確保您有使用 Web 應用程式專案的必要元件，請遵循下列步驟：

  1. 單擊 [ 說明] 功能表，然後按下 [ 安裝新軟體]。

  2. 在 [ 可用的軟體 ] 對話框中，按兩下 [管理]，並確定已選取最新的 Eclipse 版本（例如 2020-06）。

  3. 按兩下 [ 套用並關閉]。 展開 [ 使用： ] 下拉功能表以顯示建議的網站。 選取最新的 Eclipse 版本網站以查詢可用的軟體。

  4. 向下卷動清單，然後選取 [Web]、[XML]、[Java EE] 和 [OSGi 企業開發 ] 專案。 按一下 [下一步] 。

  5. 在 [安裝詳細數據] 視窗中，按 [ 下一步]。

  6. 在 [檢閱授權] 對話框中，檢閱許可協議的條款。 如果您接受許可協定的條款，請按兩下 [ 我接受許可協定 的條款]，然後按兩下 [ 完成]。

    注意

    您可以在 Eclipse 工作區右下角檢查安裝進度。

  7. 如果系統提示您重新啟動 Eclipse 以完成安裝，請按兩下 [ 立即重新啟動]。

建立 Web 應用程式專案

  1. 按兩下 [ 檔案]，展開 [ 新增]，然後按兩下 [ ...專案。 在 [新增專案] 對話框視窗中，展開 [Web]，選取 [動態 Web 專案]，然後按 [ 下一步]。

    提示

    如果您沒有看到 Web 列為可用的專案，請參閱 本節 以確定您擁有必要的 Eclipse 軟體。

  2. 針對本教學課程的目的，請將專案 命名為 MyWebApp。 您的畫面會顯示如下：

    新的動態 Web 項目屬性

  3. 按一下完成。

  4. 在左側的 [套件總管] 窗格中，展開 [MyWebApp]。 以滑鼠右鍵按兩下 [WebContent]，將滑鼠停留在 [新增]，然後按兩下 [ 其他...]。

  5. 展開 [Web ] 以尋找 [JSP 檔案 ] 選項。 按一下 [下一步] 。

  6. 在 [ 新增 JSP 檔案 ] 對話框中，將檔案 命名為 index.jsp，將父資料夾保留為 MyWebApp/WebContent，然後按 [下一步]。

    [新增 JSP 檔案] 對話框

  7. 在 [ 選取 JSP 範本 ] 對話方塊中，針對本教學課程的目的，選取 [新增 JSP 檔案] （html 5），然後按兩下 [ 完成]。

  8. 當您的index.jsp檔案在 Eclipse 中開啟時，請新增文字，以在現有<body>元素內動態顯示 Hello World！ 。 <body>更新的內容應該類似下列範例：

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

  9. 儲存index.jsp。

將 Web 應用程式部署至 Azure

  1. 在左側的 [套件總管] 窗格中，以滑鼠右鍵按下您的專案，選擇 [Azure]，然後選擇 [ 發佈為 Azure Web 應用程式]。

    發佈為 Azure Web 應用程式

  2. 當 [部署 Web 應用程式] 對話框出現時，您可以選擇下列其中一個選項：

    • 如果現有 Web 應用程式存在，請選取現有的 Web 應用程式。

    • 如果您沒有現有的 Web 應用程式，請按兩下 [ 建立]。

      您可以在這裏設定執行時間環境、App Service 方案資源群組和應用程式設定。 如有必要，請建立新的資源。

      在 [ 建立 App Service ] 對話框中指定 Web 應用程式的必要資訊，然後按兩下 [ 建立]。

  3. 選取您的 Web 應用程式，然後按下 [ 部署]。

  4. 當您成功部署 Web 應用程式時，工具組會在 [Azure 活動記錄] 索引標籤下顯示 [已發佈] 狀態，這是已部署 Web 應用程式的 URL 超連結。

  5. 您可以使用狀態訊息中提供的連結，瀏覽至您的 Web 應用程式。

    流覽 Web 應用程式

清除資源

  1. 將 Web 應用程式發佈至 Azure 之後，您可以在 Azure 檔案總管中按鍵，然後選取操作選單中的其中一個選項來管理它。 例如，您可以 在這裡刪除 Web 應用程式，以清除本教學課程的資源。

    管理應用程式服務

顯示 Azure Explorer 檢視

如果 Eclipse 中看不到 Azure Explorer 檢視，請執行下列動作來顯示它：

  1. 按兩下 [視窗]，將滑鼠停留在 [顯示檢視] 上方，然後按兩下 [其他]。

  2. 在 [顯示檢視] 對話框中，展開 [Azure]，選取 [Azure 總管]，然後按兩下 [開啟]。

    選取 [Azure Explorer] 選項。

下一步

若要回報 Bug 或要求新功能，請在 GitHub 存放庫上建立問題。 或者，使用標記 azure-java-tools 在 Stack Overflow 上提出問題。

如需搭配 Azure 使用 Java 的詳細資訊，請參閱下列連結：

如需建立 Azure Web Apps 的其他資訊，請參閱 Web Apps 概觀。