部署應用link

Deploying an applicationlink

部署應用是指編譯或建構程式碼並將產生的 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.

先決條件link

Prerequisiteslink

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

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:

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

在本地執行你的應用link

Running your application locallylink

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:

         
           content_copy
         
         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:

         
           content_copy
         
         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:

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

建構和託管你的應用link

Building and hosting your applicationlink

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

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

         
           content_copy
         
         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 或任何後端（例如Firebase，Google Cloud 或 App 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.

下一步是什麼link

What's nextlink

在本課程中，你奠定了在移動開發、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.

瞭解更多 Angularlink

Learning more Angularlink

一份更深入的課程可以指導你在本地建構應用並探索 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.

加入社群link

Joining the communitylink

去 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 的生態系統link

Exploring the Angular ecosystemlink

要支援你的 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.