如何部署 Firebase Angular 10 - Javascript

Firebase 是 Google 提供的一组云端服务，包括数据库、文件存储、身份认证等功能。Angular 是一个流行的前端框架，它提供了良好的开发体验和强大的功能。在这篇文章中，我们将介绍如何部署 Firebase 和 Angular 10，并在 Angular 应用中使用 Firebase 提供的服务。

准备工作

在开始部署之前，您需要先安装以下软件：

• Node.js 和 npm：https://nodejs.org/
• Angular CLI：在命令行中运行 npm install -g @angular/cli

还需要一个 Firebase 帐号，您可以在 https://firebase.google.com/ 注册并创建一个项目。

创建 Angular 应用

首先，我们需要创建一个 Angular 应用。在命令行中运行以下命令：

ng new my-app

这将创建一个名为 my-app 的新项目。进入项目目录并运行以下命令启动开发服务器：

cd my-app
ng serve

现在，您可以在浏览器中访问 http://localhost:4200/ 查看您的应用。

添加 Firebase 到 Angular 应用

接下来，我们需要将 Firebase 添加到 Angular 应用中。在命令行中运行以下命令安装 Firebase：

npm install firebase @angular/fire

然后，在 app.module.ts 文件中导入 AngularFireModule、AngularFireAuthModule 和 AngularFirestoreModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFirestoreModule } from '@angular/fire/firestore';

import { AppComponent } from './app.component';

const firebaseConfig = {
  // your Firebase config here
};

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule,
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

将 firebaseConfig 填充为您的 Firebase 项目信息。

现在，您可以在应用中使用 Firebase 提供的服务，例如身份认证和数据库。

部署 Angular 应用到 Firebase

最后，我们需要将 Angular 应用部署到 Firebase。在命令行中运行以下命令安装 Firebase CLI：

npm install -g firebase-tools

然后，使用以下命令登录 Firebase 帐号：

firebase login

接下来，初始化 Firebase 项目：

firebase init

按照提示选择要配置的功能，例如 Realtime Database、Firestore、Hosting 等。在选择部署 Firebase Hosting 时，请将 dist 设置为要部署的目录。

最后，使用以下命令部署 Angular 应用到 Firebase：

ng build --prod
firebase deploy

您的应用现在已经部署到 Firebase，并可以通过 Firebase Hosting 访问。

总结

通过本文，您学习了如何部署 Firebase 和 Angular 10，并在 Angular 应用中使用 Firebase 提供的服务。有了这些知识，您可以使用 Firebase 提供的强大功能为自己的应用增添更多云端服务。