honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

docs: fixup deployment guide (#26486) 

- remove sections that were not relevant (all the development stuff)
- fix incorrect info

PR Close #26486
This commit is contained in:
Igor Minar 2018-10-16 12:12:43 -07:00 committed by Matias Niemelä
parent 634e9e970a
commit 62b4ff5250
1 changed files with 19 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
aio/content/guide/deployment.md
View File

@ -1,19 +1,19 @@
# Deployment # Deployment
When you are ready to deploy your Angular application to a remote server, you have various options for When you are ready to deploy your Angular application to a remote server, you have various options for
deployment. deployment.
{@a dev-deploy} {@a dev-deploy}
{@a copy-files} {@a copy-files}
## Simplest deployment possible ## Simplest deployment possible
For the simplest deployment, build for development and copy the output directory to a web server. For the simplest deployment, create a production build and copy the output directory to a web server.
1. Start with the development build: 1. Start with the production build:
<code-example language="none" class="code-shell"> <code-example language="none" class="code-shell">
ng build ng build --prod
</code-example> </code-example>
@ -22,8 +22,7 @@ For the simplest deployment, build for development and copy the output directory
3. Configure the server to redirect requests for missing files to `index.html`. 3. Configure the server to redirect requests for missing files to `index.html`.
Learn more about server-side redirects [below](#fallback). Learn more about server-side redirects [below](#fallback).
This is _not_ a production deployment. It's not optimized, and it won't be fast for users. This is the simplest production-ready deployment of your application.
It might be good enough for sharing your progress and ideas internally with managers, teammates, and other stakeholders. For the next steps in deployment, see [Optimize for production](#optimize).
{@a deploy-to-github} {@a deploy-to-github}
@ -31,7 +30,7 @@ It might be good enough for sharing your progress and ideas internally with mana
Another simple way to deploy your Angular app is to use [GitHub Pages](https://help.github.com/articles/what-is-github-pages/). Another simple way to deploy your Angular app is to use [GitHub Pages](https://help.github.com/articles/what-is-github-pages/).
1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project. 1. You need to [create a GitHub account](https://github.com/join) if you don't have one, and then [create a repository](https://help.github.com/articles/create-a-repo/) for your project.
Make a note of the user name and project name in GitHub. Make a note of the user name and project name in GitHub.
1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here: 1. Build your project using Github project name, with the Angular CLI command [`ng build`](cli/build) and the options shown here:
@ -39,9 +38,9 @@ Make a note of the user name and project name in GitHub.
ng build --prod --output-path docs --base-href <project_name> ng build --prod --output-path docs --base-href <project_name>
</code-example> </code-example>
1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`. 1. When the build is complete, make a copy of `docs/index.html` and name it `docs/404.html`.
1. Commit your changes and push. 1. Commit your changes and push.
1. On the GitHub project page, configure it to [publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch). 1. On the GitHub project page, configure it to [publish from the docs folder](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch).
@ -97,51 +96,6 @@ There is no single configuration that works for every server.
The following sections describe configurations for some of the most popular servers. The following sections describe configurations for some of the most popular servers.
The list is by no means exhaustive, but should provide you with a good starting point. The list is by no means exhaustive, but should provide you with a good starting point.
#### Development servers
During development, the [`ng serve`](cli/serve) CLI command lets you run your app in a local browser.
The CLI recompiles the application each time you save a file,
and reloads the browser with the newly compiled application.
The app is hosted in local memory and served on `http://localhost:4200/`, using [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev-server).
{@a serve-from-disk}
Later in development, you might want a closer approximation of how your app will behave when deployed.
You can output your distribution folder (`dist`) to disk, but you need to install a different web server.
Try installing [lite-server](https://github.com/johnpapa/lite-server); like `webpack-dev-server`, it can automatically reload your browser when you write new files.
To get the live-reload experience, you will need to run two terminals.
The first runs the build in a watch mode and compiles the application to the `dist` folder.
The second runs the web server against the `dist` folder.
The combination of these two processes provides the same behavior as `ng serve`.
1. Start the build in terminal A:
<code-example language="none" class="code-shell">
ng build --watch
</code-example>
1. Start the web server in terminal B:
<code-example language="none" class="code-shell">
lite-server --baseDir="dist"
</code-example>
The default browser opens to the appropriate URL.
* [Lite-Server](https://github.com/johnpapa/lite-server): the default dev server installed with the
[Quickstart repo](https://github.com/angular/quickstart) is pre-configured to fallback to `index.html`.
* [Webpack-Dev-Server](https://github.com/webpack/webpack-dev-server): setup the
`historyApiFallback` entry in the dev server options as follows:
<code-example>
historyApiFallback: {
disableDotRule: true,
htmlAcceptHeaders: ['text/html', 'application/xhtml+xml']
}
</code-example>
#### Production servers
* [Apache](https://httpd.apache.org/): add a * [Apache](https://httpd.apache.org/): add a
[rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as shown [rewrite rule](http://httpd.apache.org/docs/current/mod/mod_rewrite.html) to the `.htaccess` file as shown
(https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/): (https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/):
@ -230,19 +184,9 @@ Read about how to enable CORS for specific servers at
{@a optimize} {@a optimize}
## Optimize for production ## Production optimizations
Although deploying directly from the development environment works, The `--prod` _meta-flag_ engages the following build optimization features.
you can generate an optimized build with additional CLI command line flags,
starting with `--prod`.
### Build with _--prod_
<code-example language="none" class="code-shell">
ng build --prod
</code-example>
The `--prod` _meta-flag_ engages the following optimization features.
* [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates. * [Ahead-of-Time (AOT) Compilation](guide/aot-compiler): pre-compiles Angular component templates.
* [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_. * [Production mode](#enable-prod-mode): deploys the production environment which enables _production mode_.
@ -251,25 +195,22 @@ The `--prod` _meta-flag_ engages the following optimization features.
* Uglification: rewrites code to use short, cryptic variable and function names. * Uglification: rewrites code to use short, cryptic variable and function names.
* Dead code elimination: removes unreferenced modules and much unused code. * Dead code elimination: removes unreferenced modules and much unused code.
The remaining [copy deployment steps](#copy-files) are the same as before.
See [`ng build`](cli/build) for more about CLI build options and what they do. See [`ng build`](cli/build) for more about CLI build options and what they do.
{@a enable-prod-mode} {@a enable-prod-mode}
### Enable production mode ### Enable runtime production mode
Angular apps run in development mode by default, as you can see by the following message on the browser In addition to build optimizations, Angular also has a runtime production mode. Angular apps run in development mode by default, as you can see by the following message on the browser console:
console:
<code-example format="nocode"> <code-example format="nocode">
Angular is running in the development mode. Call enableProdMode() to enable the production mode. Angular is running in the development mode. Call enableProdMode() to enable the production mode.
</code-example> </code-example>
Switching to _production mode_ can make it run faster by disabling development specific checks such as the dual change detection cycles. Switching to _production mode_ makes it run faster by disabling development specific checks such as the dual change detection cycles.
Building for production (or appending the `--environment=prod` flag) enables _production mode_ When you enable production builds via `--prod` command line flag, the runtime production mode is enabled as well.
Look at the CLI-generated `main.ts` to see how this works.
{@a lazy-loading} {@a lazy-loading}
@ -293,7 +234,7 @@ If you do that, the module will be loaded immediately.
The bundling configuration must take lazy loading into consideration. The bundling configuration must take lazy loading into consideration.
Because lazy-loaded modules aren't imported in JavaScript, bundlers exclude them by default. Because lazy-loaded modules aren't imported in JavaScript, bundlers exclude them by default.
Bundlers don't know about the router configuration and can't create separate bundles for lazy-loaded modules. Bundlers don't know about the router configuration and can't create separate bundles for lazy-loaded modules.
You would have to create these bundles manually. You would have to create these bundles manually.
The CLI runs the The CLI runs the
@ -388,7 +329,7 @@ for the missing files. Look at where it _tried_ to find those files and adjust t
## Building and serving for deployment ## Building and serving for deployment
When you are designing and developing applications, you typically use `ng serve` to build your app for fast, local, iterative development. When you are designing and developing applications, you typically use `ng serve` to build your app for fast, local, iterative development.
When you are ready to deploy, however, you must use the `ng build` command to build the app and deploy the build artifacts elsewhere. When you are ready to deploy, however, you must use the `ng build` command to build the app and deploy the build artifacts elsewhere.
Both `ng build` and `ng serve` clear the output folder before they build the project, but only the `ng build` command writes the generated build artifacts to the output folder. Both `ng build` and `ng serve` clear the output folder before they build the project, but only the `ng build` command writes the generated build artifacts to the output folder.
@ -401,12 +342,12 @@ To output to a different folder, change the `outputPath` in `angular.json`.
</div> </div>
The `ng serve` command builds, watches, and serves the application from local memory, using a local development server. The `ng serve` command builds, watches, and serves the application from local memory, using a local development server.
When you have deployed your app to another server, however, you might still want to serve the app so that you can continue to see changes that you make in it. When you have deployed your app to another server, however, you might still want to serve the app so that you can continue to see changes that you make in it.
You can do this by adding the `--watch` option to the `ng build` command. You can do this by adding the `--watch` option to the `ng build` command.
``` ```
ng build --watch ng build --watch
``` ```
Like the `ng serve` command, this regenerates output files when source files change. Like the `ng serve` command, this regenerates output files when source files change.
For complete details of the CLI commands, see the [CLI command reference](cli). For complete details of the CLI commands, see the [CLI command reference](cli).