204 lines
No EOL
7.9 KiB
Markdown
204 lines
No EOL
7.9 KiB
Markdown
# Deploy your application on Firebase Hosting & Functions
|
|
|
|
In this guide, we'll look at how to use `@angular/fire` to automatically deploy an Angular application to Firebase hosting or functions by using the Angular CLI.
|
|
|
|
`@angular/fire` uses Firebase functions to deploy your Angular universal projects, with server-side rendering enabled.
|
|
|
|
**Angular Universal deployments work with `@nguniversal/*` version 9.0.0 and above**.
|
|
|
|
## Step 1: add `@angular/fire` to your project
|
|
|
|
First, you need to add the `@angular/fire` package to your project. In your Angular CLI project run:
|
|
|
|
```shell
|
|
ng add @angular/fire
|
|
```
|
|
|
|
*Note that the command above assumes you have global Angular CLI installed. To install Angular CLI globally run `npm i -g @angular/cli`.*
|
|
|
|
First, the command above will check if you have an Angular universal project. It'll do so by looking at your `angular.json` project, looking for a `server` target for the specified project. If it finds one, it'll ask you if you want to deploy the project in a firebase function.
|
|
|
|
After that it will trigger the `@angular/fire` `ng-add` schematics. The schematics will open a web browser and guide you through the Firebase authentication flow (if you're not signed in already). After you authenticate, you'll see a prompt to select a Firebase hosting project.
|
|
|
|
The schematics will do the following:
|
|
|
|
- Add `@angular/fire` to your list of dependencies
|
|
- Create `firebase.json`, `.firebaserc` files in the root of your workspace. You can use them to configure your firebase hosting deployment. Find more about them [here](https://firebase.google.com/docs/hosting/full-config)
|
|
- Update your workspace file (`angular.json`) by inserting the `deploy` builder
|
|
|
|
In the end, your `angular.json` project will look like below:
|
|
|
|
```json5
|
|
{
|
|
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
|
"version": 1,
|
|
"newProjectRoot": "projects",
|
|
"projects": {
|
|
"sample-app": {
|
|
// ...
|
|
"deploy": {
|
|
"builder": "@angular/fire:deploy",
|
|
"options": {} // Here you may find an "ssr": true option if you've
|
|
// selected that you want to deploy your Angular universal project
|
|
// as a firebase function.
|
|
}
|
|
}
|
|
},
|
|
// ...
|
|
"defaultProject": "sample-app"
|
|
|
|
}
|
|
```
|
|
|
|
If you want to add deployment capabilities to a different project in your workspace, you can run:
|
|
|
|
```
|
|
ng add @angular/fire --project=[PROJECT_NAME]
|
|
```
|
|
|
|
## Step 2: deploying the project
|
|
|
|
As the second step, to deploy your project run:
|
|
|
|
```
|
|
ng deploy --project=[PROJECT_NAME]
|
|
```
|
|
|
|
*The `--project` option is optional. Learn more [here](https://angular.io/cli/deploy).*
|
|
|
|
The command above will trigger:
|
|
|
|
1. Production build of your application
|
|
2. Deployment of the produced assets to the firebase hosting project you selected during `ng add`
|
|
|
|
If you've specified that you want a server-side rendering enabled deployment in a firebase function, the command will also:
|
|
|
|
1. Create a firebase function in `dist`, which directly consumes `main.js` from your server output directory.
|
|
2. Create `package.json` for the firebase function with the required dependencies.
|
|
3. Deploy the static assets to firebase hosting and your universal server as a Firebase function.
|
|
|
|
If you want to preview your Angular Universal project before we deploy it as a Firebase Function you can run:
|
|
|
|
```
|
|
ng deploy --preview
|
|
```
|
|
|
|
We'll create the function and a `package.json` in your project output directory. This way, you can later run `firebase serve` in your project root so you can test everything before deploying.
|
|
|
|
## Step 3: customization
|
|
|
|
To customize the deployment flow, you can use the configuration files you're already familiar with from `firebase-tools`. You can find more in the [firebase documentation](https://firebase.google.com/docs/hosting/full-config).
|
|
|
|
### Configuring Cloud Functions
|
|
|
|
Setting `functionsNodeVersion` and `functionsRuntimeOptions` in your `angular.json` allow you to custimze the version of Node.js Cloud Functions is running and run-time settings like timeout, VPC connectors, and memory.
|
|
|
|
```json
|
|
"deploy": {
|
|
"builder": "@angular/fire:deploy",
|
|
"options": {
|
|
"functionsNodeVersion": 12,
|
|
"functionsRuntimeOptions": {
|
|
"memory": "2GB",
|
|
"timeoutSeconds": 10,
|
|
"vpcConnector": "my-vpc-connector",
|
|
"vpcConnectorEgressSettings": "PRIVATE_RANGES_ONLY"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### Working with multiple Firebase Projects
|
|
|
|
If you have multiple build targets and deploy targets, it is possible to specify them in your `angular.json` or `workspace.json`.
|
|
|
|
It is possible to use either your project name or project alias in `firebaseProject`. The setting provided here is equivalent to passing a project name or alias to `firebase deploy --project projectNameOrAlias`.
|
|
|
|
The `buildTarget` simply points to an existing build configuration for your project. Most projects have a default configuration and a production configuration (commonly activated by using the `--prod` flag) but it is possible to specify as many build configurations as needed.
|
|
|
|
You may specify a `buildTarget` and `firebaseProject` in your `options` as follows:
|
|
|
|
```json
|
|
"deploy": {
|
|
"builder": "@angular/fire:deploy",
|
|
"options": {
|
|
"buildTarget": "projectName:build",
|
|
"firebaseProject": "developmentProject"
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"buildTarget": "projectName:build:production",
|
|
"firebaseProject": "productionProject"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
The above configuration specifies the following:
|
|
|
|
1. `ng deploy` will deploy the default project with default configuration.
|
|
2. `ng deploy projectName` will deploy the specified project with default configuration.
|
|
3. `ng deploy projectName --prod` or `ng deploy projectName --configuration='production'` will deploy `projectName` with production build settings to your production environment.
|
|
|
|
All of the options are optional. If you do not specify a `buildTarget`, it defaults to a production build (`projectName:build:production`). If you do not specify a `firebaseProject`, it defaults to the first matching deploy target found in your `.firebaserc` (where your projectName is the same as your Firebase deploy target name). The `configurations` section is also optional.
|
|
|
|
### Working with multiple project sites
|
|
|
|
For example, if you have muti sites config in firebase.json like this:
|
|
```
|
|
{
|
|
"hosting": [
|
|
{
|
|
"target": "custom-site",
|
|
"public": "public/my-custom-site",
|
|
"ignore": [
|
|
"firebase.json",
|
|
"**/.*",
|
|
"**/node_modules/**"
|
|
],
|
|
"rewrites": [
|
|
{
|
|
"source": "**",
|
|
"destination": "/index.html"
|
|
}
|
|
]
|
|
}
|
|
],
|
|
```
|
|
|
|
If you have multiple build targets and deploy targets, it is possible to specify them in your `angular.json` or `workspace.json`.
|
|
|
|
It is possible to use either your project name or project alias in `siteTarget`.
|
|
|
|
You may specify a `siteTarget` in your `options` as follows:
|
|
|
|
```json
|
|
"deploy": {
|
|
"builder": "@angular/fire:deploy",
|
|
"options": {
|
|
"buildTarget": "projectName:build",
|
|
"firebaseProject": "developmentProject",
|
|
"siteTarget": "yourDefaultSiteTarget"
|
|
},
|
|
"configurations": {
|
|
"production": {
|
|
"buildTarget": "projectName:build:production",
|
|
"firebaseProject": "productionProject",
|
|
"siteTarget": "yourProdSiteTarget"
|
|
},
|
|
"storybook": {
|
|
"buildTarget": "projectName:build-storybook",
|
|
"firebaseProject": "developmentProject",
|
|
"siteTarget": "yourStorybookSiteTarget"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
The above configuration specifies the following:
|
|
|
|
1. `ng deploy` will deploy the default project with default configuration.
|
|
2. `ng deploy projectName` will deploy the specified project with default configuration.
|
|
3. `ng deploy projectName --configuration=storybook --siteTarget=mySiteTarget` will deploy `projectName` to `mySiteTarget` with configuration`storybook`.
|
|
|
|
All of the options are optional |