部署應用
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:
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
在左邊的選單中點選
Project
後面的Download Project
圖示,以下載你的 StackBlitz 專案的原始碼。Download the source code from your StackBlitz project by clicking the
Download Project
icon in the left menu, across fromProject
, to download your files.用
ng new
命令建立一個新的 Angular CLI 工作區,其中的my-project-name
就是你要產生的專案名:Create a new Angular CLI workspace using the
ng new
command, wheremy-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.
在新建 CLI 產生的應用中,用從
StackBlitz
中下載的/src
資料夾替換原來的/src
資料夾。In your newly CLI-generated application, replace the
/src
folder with the/src
folder from yourStackBlitz
download.使用以下 CLI 命令在本地執行你的應用:
Use the following CLI command to run your application locally:
ng serve
要在瀏覽器中檢視你的應用,請訪問 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, pressCtrl
+c
.
建構和託管你的應用
Building and hosting your application
要建構用於生產的應用,請使用
build
命令。預設情況下,此命令使用production
建構配置。To build your application for production, use the
build
command. By default, this command uses theproduction
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'spackage.json
file to match the one in the downloaded StackBlitz project.把
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 asNode.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.