如何使用Firebase托管部署Angular 2应用程序？

时间：2016-07-08 18:21:12

标签： angular firebase-hosting

我想了解使用Firebase托管部署简单的Angular 2应用程序所需的步骤。

5 个答案:

答案 0 :(得分：8)

以下是步骤：

1) npm install -g firebase-tools

这将安装我们将在以下步骤中使用的firebase CLI。

  

Firebase CLI要求Node.js版本0.10.0或更高版本。

2) firebase init

项目设置

这将触发Firebase项目设置并将所有设置存储在本地文件firebase.json中。

  • ？您要为此文件夹设置哪些Firebase CLI功能？确保选中[主机：配置和部署Firebase托管站点]并按INTRO。

  • ？您希望将哪个Firebase项目默认关联？选择[创建新项目]

托管设置

  • ？您想将什么用作公共目录？ 您需要为Angular 2应用程序选择（build）文件夹。默认为（公共）。
  • ？配置为单页应用（将所有网址重写为/index.html）？回答是。
  

注意：此文件夹下的任何内容都将作为静态资源提供。

4) You need to go to (https://console.firebase.google.com) to create a new Project.

  • 点击（创建新项目）。

  • 为您的项目选择一个很酷的名称，然后选择一个国家/地区。例如：英国。

您的项目名称类似于cool-f5b0d。

5) firebase use --add

选择刚刚创建的项目。

  • ？您要添加哪个项目？选择您创建的新项目。

  • ？您想为此项目使用哪些别名？您可以使用别名以便于参考

6) firebase deploy

这将部署在步骤2中设置的资产文件夹。确保这与Angular 2应用程序的（build）文件夹匹配。

答案 1 :(得分：3)

以下步骤显示了如何将Angular 2项目部署到firebase托管：

  1. 构建项目，例如在终端运行命令中的webstorm中：

    pub build

    2. 该命令将运行并创建一个 build / web 目录，其中包含已编译的项目

    1. 在命令行中，运行以下命令初始化firebase项目：

      firebase init

      2. 按照说明操作，直至找到以下问题：

      What do you want to use as your public directory?

      1. 您可以在此处提供项目目录的完整路径 从主目录开始构建/ Web。例如，在Windows中，主目录是：

        C：\用户\ YOU-USER-DIRECTORY

        2. 所以如果您的项目在 c：\ users \ YOU-USER-DIRECTORY \ projects \ MyProject 中可用，那么将以下目录提供给firebase：

        projects/MyProject/build/web

        确保使用正斜杠 / 而不是反斜杠\

        1. 完成休息firebase问题后，运行：

          firebase部署

          2. 上传所有项目文件需要一些时间，然后享受！

答案 2 :(得分：3)

首先使用Angular CLI创建项目。在此处获取更多信息https://cli.angular.io/

第1步：构建应用

运行以下cmd构建

ng build --prod

第2步：创建FireBase项目并安装Firebase CLI

在https://console.firebase.google.com/打开Firebase控制台，然后创建一个新的Firebase项目。

要安装Firebase命令行工具，请执行以下命令：

npm install -g firebase-tools

第3步：部署到FireBase

运行以下firebase cmd登录：

firebase login

它将打开浏览器并要求您进行身份验证。使用您的Firebase帐户登录。之后您可以关闭浏览器窗口。在命令行上，您将收到登录已成功执行的消息。

现在运行以下cmd：

firebase init

首先，您被问到要使用哪个Firebase客户端功能。您应该选择托管选项：配置和部署Firebase托管站点。接下来，Firebase客户端将询问用于部署的文件夹。输入 dist 。这很重要，因为这是我们的生产构建存储的位置。

接下来问题是询问此应用是否是单页应用，是否应重写所有URL到index.html。在我们的例子中，我们需要回答是。

最后一个问题是Firebase是否应该覆盖文件index.html。这个问题的答案是否定的。

现在，运行以下cmd进行部署：

firebase deploy

Firebase将提供网址，您可以使用该网址在线访问您的应用。

答案 3 :(得分：1)

以下是我遵循的完整步骤并成功托管了我的网站。 1.首先，您需要在firebase控制台（Firebase Console）中创建项目/应用程序。

创建app / project后，你会看到myfirstfbhosting-b0ae ...... 现在您已准备好安装工具来上传您网站的文件

  1. 安装Firebase CLI

    2. Firebase CLI（命令行界面）需要Node.js和npm，可以按照Node.js software上的说明安装。安装Node.js也会安装npm。

    Firebase CLI要求Node.js版本为0.10.0或更高版本。 一旦安装了Node.js和npm，就可以通过npm：

    安装Firebase CLI
    1. 使用npm
      2. 安装Firebase CLI后

      在cmd中运行命令 - “npm install -g firebase-tools” 这将安装全局可用的firebase命令。要更新到最新版本，只需重新运行相同的命令。

      1. 初始化您的应用 一旦您选择了要部署的Firebase应用程序，请进入项目目录，如D：/ pradeep / website / 并运行命令：cmd中的“firebase init”

        2. 运行firebase init命令，您将看到在项目的根目录中创建了“firebase.json”文件（D：/ pradeep / website /） 重要说明：在记事本中打开firebase.json，如果是{}则将其编辑为{   “托管”：{     “上市”： ”。”   } 并保存。

        index.html文件和其他文件还必须在同一目录中（D：/ pradeep / website /）

        1. 选择在firebase控制台中创建的应用。 如果您已经创建了多个应用程序，那么请选择任何一个应用程序 输入cmd - “firebase list” - 将显示所有应用列表。 然后 - “firebase使用” 然后

        2. 部署您的网站 要部署您的网站，只需运行： 用cmd写 - “firebase deploy”

          3. 最后，您的应用将部署到域.firebaseapp.com

答案 4 :(得分：0)

Angular通过使用ng add @ angular / fire添加@ angular / fire示意图来与Firebase集成，具有很酷的功能。

直接从Angular文档中获取。对于步骤5，在angular.json中使用build下的outputPath 在Firebase上托管Angular应用 启用网站最简单的方法之一就是使用Firebase托管它。

  1. 在Firebase上注册一个Firebase帐户。
  2. 创建一个新项目，在Firebase上给它一个您喜欢的名称。
  3. 使用ng add @ angular / fire添加可处理部署的@ angular / fire示意图。
  4. 将CLI连接到Firebase帐户，并使用firebase登录名和firebase初始化初始化与项目的连接。
  5. 按照提示选择要创建的用于托管的Firebase项目。 o在第一个提示上选择主机选项。 o选择您先前在Firebase上创建的项目。 o选择dist / my-project-name作为公共目录。 （这是用Angular.json编写的）
  6. 使用ng deploy部署应用程序。
  7. 部署后，请访问https://your-firebase-project-name.firebaseapp.com观看直播！

https://angular.io/start/start-deployment#hosting-an-angular-app-on-firebase

相关问题
最新问题