2019-06-08 17:59:28 +08:00

9.9 KiB

Raw Blame History

Deployment

部署

To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.

要部署应用，你必须先编译它，然后在 Web 服务器上托管 JavaScript、CSS 和 HTML。构建后的 Angular 应用程序非常容易移植，它可以在任何环境中运行，也可以用任何技术提供服务，比如 Node，Java，.NET，PHP 等等。

Whether you came here directly from Your First App, or completed the entire online store application through the Routing, Managing Data, and Forms sections, you have an application that you can deploy by following the instructions in this section.

无论你是从你的第一个应用直接来到这里，还是经过路由、管理数据和表单部分，完成了整个在线商店应用之后来到这里，都可以按照本节中的说明进行部署。

从 StackBlitz 开始部署

StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.

StackBlitz 项目默认是公开的，你可以通过项目的 URL 来共享你的应用。记住，虽然这是一种共享思路和原型的良好途径，但并不适合承载产品环境。

In your StackBlitz project, make sure you have forked or saved your project.

在你的 StackBlitz 项目中，请先确保你已经分支或保存了项目。
In the preview pane, you should see a URL that looks like https://<Project ID>.stackblitz.io.

在预览窗格，你会看到一个形如 https://<Project ID>.stackblitz.io 的 URL。
Share this URL with a friend or colleague.

把这个 URL 共享给朋友或同事。
Users that visit your URL will see a development server start up, and then your application will load.

访问你的 URL 的用户会看到启动了一个开发服务器，然后就会加载你的应用。

Building locally

本地构建

To build your application locally or for production, you will need to download the source code from your StackBlitz project. Click the Download Project icon in the left menu across from Project to download your files.

要在本地构建应用或未生产环境构建应用，你需要从 StackBlitz 项目中下载源代码。单击左侧菜单中的 Download Project 图标以下载文件。

Once you have the source code downloaded and unzipped, use the Angular Console to serve the application, or you install Node and have the Angular CLI installed.

下载并解压源代码后，就可以使用 Angular Console 来启动开发服务器了，也可以先安装 Node 再安装 Angular CLI。

From the terminal, install the Angular CLI globally with:

在终端上，全局安装 Angular CLI：

npm install -g @angular/cli

This will install the command ng into your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds that can be shared or distributed.

这会把命令 ng 安装到你的系统中，你可以用它的命令来创建新工作区或新项目、启动开发服务器、或构建那些可以共享或分发的版本。

Create a new Angular CLI workspace using the ng new command:

ng new 命令用来创建一个新的 Angular CLI 工作空间：

ng new my-project-name

From there you replace the /src folder with the one from your StackBlitz download, and then perform a build.

进入你从 StackBlitz 下载的 /src 文件夹，然后执行 build 命令。

ng build --prod

This will produce the files that you need to deploy.

这会产生你要部署的文件。

Hosting the built project

托管已构建的项目

The files in the dist/my-project-name folder are static and can be hosted on any web server capable of serving files (Node, Java, .NET) or any backend (Firebase, Google Cloud, App Engine, others).

dist/my-project-name 文件夹中的文件都是静态的，可以托管在任何能够提供文件服务的 Web 服务器上（Node，Java，.NET），也可以是任何后端（Firebase，Google Cloud，App Engine 等）。

Hosting an Angular app on Firebase

在 Firebase 上托管一个 Angular 应用

One of the easiest ways to get your site live is to host it using Firebase.

要想让你的网站上线，最简单的办法之一就是使用 Firebase 托管它。

Sign up for a firebase account on Firebase.

在 Firebase 上注册一个 firebase 账号。
Create a new project, giving it any name you like.

创建一个新项目，给它任意名字。
Install the firebase-tools CLI that will handle your deployment using npm install -g firebase-tools.

使用 npm install -g firebase-tools 安装 firebase-tools CLI 来处理你的部署。
Connect your CLI to your Firebase account and initialize the connection to your project using firebase login and firebase init.

把你的 CLI 和 Firebase 帐户联系起来，使用 firebase login 和 firebase init 来初始化这个联系。
Follow the prompts to select the Firebase project you creating for hosting.

按照提示选择你为托管它而创建的 Firebase 项目。
Deploy your application with firebase deploy because StackBlitz has created a firebase.json that tells Firebase how to serve your app.

用 firebase deploy 命令部署你的应用，这是因为 StackBlitz 已经创建好了一个 firebase.json，它会告诉 Firebase 如何用你的应用提供服务。
Once deployed, visit https://your-firebase-project-name.firebaseapp.com to see it live!

部署之后，访问 https://your-firebase-project-name.firebaseapp.com 进行实时查看！

Hosting an Angular app anywhere else

在其它地方托管 Angular 应用

To host an Angular app on another web host, you'll need to upload or send the files to the host. Because you are building a Single Page Application, you'll also need to make sure you redirect any invalid URLs to your index.html file. Learn more about development and distribution of your application in the Building & Serving and Deployment guides.

要在其它网络主机上托管 Angular 应用，你需要上传文件或把它们发送到那台主机。由于你正在构建一个单页面应用，所以你还要确保把所有无效的 URL 都重定向到 index.html 文件。在构建与服务和部署指南”中可以找到关于开发和部署应用的更多信息。

Join our community

加入我们的社区

You are now an Angular developer! Share this moment, tell us what you thought of this Getting Started, or submit suggestions for future editions.

你现在是一位 Angular 的开发者了！分享这一刻，告诉我们你对这份“入门文档”的看法，或者为今后的版本提交建议。

Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:

Angular 还提供了更多功能，不过你现在已经有了基础，可以让你构建一个应用并探索其它的能力：

Angular provides advanced capabilities for mobile apps, animation, internationalization, server-side rendering, and more.

Angular 为移动应用、动画、国际化、服务器端渲染等提供了先进的功能。
Angular Material offers an extensive library of Material Design components.

Angular Material 提供了丰富的 Material Design 组件库。
Angular Protractor offers an end-to-end testing framework for Angular apps.

Angular Protractor 为 Angular 应用提供了一个端到端的测试框架。
Angular also has an extensive network of 3rd-party tools and libraries.

Angular 还拥有广泛的第三方工具和库互助网。

Keep current by following the Angular blog.

敬请关注 Angular 官方博客。

9.9 KiB Raw Blame History Unescape Escape