填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

部署應用

Deploying an application

部署應用是指編譯或建構程式碼並將產生的 JavaScript、CSS 和 HTML 託管到 Web 伺服器上的過程。

Deploying your application is the process of compiling, or building, your code and hosting the JavaScript, CSS, and HTML on a web server.

本節基於“入門”課程中的前序步驟,並向你展示如何部署應用。

This section builds on the previous steps in the Getting Started tutorial and shows you how to deploy your application.

先決條件

Prerequisites

這裡的最佳實踐是在部署專案之前先在本地執行專案。要在本地執行專案,你需要在計算機上安裝以下軟體:

A best practice is to run your project locally before you deploy it. To run your project locally, you need the following installed on your computer:

  • Node.js.

  • Angular CLI。在終端上,使用以下命令全域性安裝 Angular CLI:

    The Angular CLI. From the terminal, install the Angular CLI globally with:

          
          npm install -g @angular/cli
        

    藉助 Angular CLI,你可以使用 ng 命令建立新的工作區、新專案、在開發過程中啟動開發伺服器,或產生要共享或分發的建構成果。

    With the Angular CLI, you can use the command ng to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.

在本地執行你的應用

Running your application locally

  1. 在左邊的選單中點選 Project 後面的 Download Project 圖示,以下載你的 StackBlitz 專案的原始碼。

    Download the source code from your StackBlitz project by clicking the Download Project icon in the left menu, across from Project, to download your files.

  2. ng new命令建立一個新的 Angular CLI 工作區,其中的 my-project-name 就是你要產生的專案名:

    Create a new Angular CLI workspace using the ng newcommand, where my-project-name is what you would like to call your project:

          
          ng new my-project-name
        

    此命令會顯示一系列配置提示。對於本課程,請接受每個提示的預設設定。

    This command displays a series of configuration prompts. For this tutorial, accept the default settings for each prompt.

  3. 在新建 CLI 產生的應用中,用從 StackBlitz 中下載的 /src 資料夾替換原來的 /src 資料夾。

    In your newly CLI-generated application, replace the /src folder with the /src folder from your StackBlitz download.

  4. 使用以下 CLI 命令在本地執行你的應用:

    Use the following CLI command to run your application locally:

          
          ng serve
        
  5. 要在瀏覽器中檢視你的應用,請訪問 http://localhost:4200/。如果預設埠 4200 不可用,則可以使用埠標誌指定另一個埠,如下所示:

    To see your application in the browser, go to http://localhost:4200/. If the default port 4200 is not available, you can specify another port with the port flag as in the following example:

          
          ng serve --port 4201
        

    當啟動了應用的開發伺服器時,你可以編輯程式碼並在瀏覽器中檢視對此更改的自動更新。要停止此 ng serve 命令,請按 Ctrl + c 鍵。

    While serving your application, you can edit your code and see the changes update automatically in the browser. To stop the ng serve command, press Ctrl+c.

建構和託管你的應用

Building and hosting your application

  1. 要建構用於生產的應用,請使用 build 命令。預設情況下,此命令使用 production 建構配置。

    To build your application for production, use the build command. By default, this command uses the production build configuration.

          
          ng build
        

    此命令會建立一個 dist 資料夾,其中包含把你的應用部署到託管服務時所需的全部檔案。

    This command creates a dist folder in the application root directory with all the files that a hosting service needs for serving your application.

    如果上述 ng build 命令引發了“缺少軟體包”之類別的錯誤,請將缺失的依賴項附加到本地專案的 package.json 檔案中,以匹配從 StackBlitz 下載的專案中的依賴項。

    If the above ng build command throws an error about missing packages, append the missing dependencies in your local project's package.json file to match the one in the downloaded StackBlitz project.

  2. dist/my-project-name 資料夾的內容複製到 Web 伺服器。由於這些檔案是靜態的,因此你可以將它們託管在任何支援靜態檔案的 Web 伺服器上。(例如 Node.js、Java、.NET 或任何後端(例如FirebaseGoogle CloudApp Engine)。有關更多資訊,請參閱建構與服務以及部署部分。

    Copy the contents of the dist/my-project-name folder to your web server. Because these files are static, you can host them on any web server capable of serving files; such as Node.js, Java, .NET, or any backend such as Firebase, Google Cloud, or App Engine. For more information, see Building & Serving and Deployment.

下一步是什麼

What's next

在本課程中,你奠定了在移動開發、UX/UI 開發和伺服器端渲染等領域探索 Angular 世界的基礎。你可以透過研究 Angular 的更多特性、與充滿活力的社群互動,以及探索其健壯的生態系統,來更深入地瞭解 Angular。

In this tutorial, you've laid the foundation to explore the Angular world in areas such as mobile development, UX/UI development, and server-side rendering. You can go deeper by studying more of Angular's features, engaging with the vibrant community, and exploring the robust ecosystem.

瞭解更多 Angular

Learning more Angular

一份更深入的課程可以指導你在本地建構應用並探索 Angular 許多最受歡迎的功能,請參閱《英雄之旅》

For a more in-depth tutorial that leads you through building an application locally and exploring many of Angular's most popular features, see Tour of Heroes.

要探索 Angular 的基礎概念,請參閱“瞭解 Angular” 部分的指南,例如 Angular 元件概覽範本語法

To explore Angular's foundational concepts, see the guides in the Understanding Angular section such as Angular Components Overview or Template syntax.

加入社群

Joining the community

去 Tweet 表示你已經完成了本課程、告訴我們你的想法,或者為以後的版本提出建議。

Tweet that you've completed this tutorial, tell us what you think, or submit suggestions for future editions.

透過關注 Angular 部落格來保持更新。

Keep current by following the Angular blog.

探索 Angular 的生態系統

Exploring the Angular ecosystem

要支援你的 UX/UI 開發,請參閱 Angular Material

To support your UX/UI development, see Angular Material.

Angular 社群還擁有廣泛的第三方工具和函式庫網路

The Angular community also has an extensive network of third-party tools and libraries.