【问题标题】:How to deploy an Angular 2 App using Firebase hosting?如何使用 Firebase 托管部署 Angular 2 应用程序?
【发布时间】:2016-07-08 18:21:12
【问题描述】:

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

【问题讨论】:

  • 您应该阅读文档。如果您有特定的错误或问题,请详细说明。 firebase.google.com/docs/hosting
  • 我确实阅读了文档,但没有发现任何特定于 Angular 2 的内容。
  • 这里有更详细的步骤说明:firebase.google.com/docs/hosting/quickstart
  • 在 Firebase 托管上部署 Angular 2 应用程序不需要特殊步骤。你遇到问题了吗?
  • 正在寻找更面向 Angular 2 的东西。现在正在执行这些步骤。

标签: angular firebase-hosting


【解决方案1】:

这些是步骤:

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 应用程序选择(构建)文件夹。默认为(公共)。
  • ?配置为单页应用(将所有 url 重写为 /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 应用程序的(构建)文件夹匹配。

【讨论】:

  • 为什么 Angular2 应用需要对“配置为单页应用(将所有 url 重写为 /index.html)”回答“是”?
  • 这样当你写一个随机的 url 时,它会被重定向到 index.html 并避免在很多情况下显示 404
【解决方案2】:

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

  1. 构建您的项目,例如在终端运行命令中的 webstorm 中:

    发布构建

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

  1. 在您的命令行中,通过运行初始化您的 firebase 项目:

    firebase 初始化

按照说明进行操作,直到遇到以下问题:

What do you want to use as your public directory?
  1. 这里你必须给出你的项目目录的完整路径 从主目录开始构建/web。例如,在 Windows 中,主目录是:

    c:\users\YOU-USER-DIRECTORY

所以如果您的项目在 c:\users\YOU-USER-DIRECTORY\projects\MyProject 中可用,则将以下目录提供给 firebase:

projects/MyProject/build/web

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

  1. 完成其余的firebase问题后,运行:

    firebase 部署

上传所有项目文件需要一些时间,然后尽情享受吧!

【讨论】:

    【解决方案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 帐户登录。在那里你可以关闭浏览器窗口。在命令行上,您将收到登录已成功执行的消息。

    现在运行以下命令:

    firebase init
    

    首先,系统会询问您要使用哪些 Firebase 客户端功能。您应该选择选项托管:配置和部署 Firebase 托管站点。接下来,Firebase 客户端将询问使用哪个文件夹进行部署。输入 dist。这很重要,因为这是存储我们的生产版本的位置。

    接下来的问题是询问此应用程序是否为单页应用程序,以及是否应将所有 URL 重写为 index.html。在我们的例子中,我们需要回答是。

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

    现在,运行以下 cmd 进行部署:

    firebase deploy
    

    Firebase 将提供一个 URL,您可以使用它来在线访问您的应用程序。

    【讨论】:

    • 我完全按照您的步骤操作,并且在 Firebase 提供的 URL 上,我只看到一条消息,说欢迎 Firebase 托管设置完成您看到这个是因为您已成功设置 Firebase 托管。现在是时候去建造一些非凡的东西了!打开主机文档你能帮忙吗??
    • 您的 Index.html 文件似乎已被替换。在firebase init的过程中,当出现“File dist/index.html already exists. Overwrite?”的问题时,输入N。
    【解决方案4】:

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

    创建应用程序/项目后你会看到像 myfirstfbhosting-b0ae...... 现在您可以安装工具来上传您网站的文件了

    1. 安装 Firebase CLI

    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 安装 Firebase CLI 后

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

    1. 初始化您的应用程序 选择要部署的 Firebase 应用后,cd 进入项目目录,例如 D:/pradeep/website/ 并在 cmd 中运行命令:“firebase init”

    运行 firebase init 命令,您会看到在项目的根目录中创建了一个“firebase.json”文件(D:/pradeep/website/) 重要提示:在记事本中打开firebase.json,如果是{}则编辑为{ “主办”:{ “上市”: ”。” } } 并保存。

    还有一点 index.html 文件和其他文件必须在同一目录中(D:/pradeep/website/)

    1. 选择在 Firebase 控制台中创建的应用程序。 如果您在那里创建了超过 1 个应用程序,请选择任何一个应用程序 输入 cmd - “firebase list” - 将显示所有应用程序列表。 然后 - “火力基地使用” 然后

    2. 部署您的网站 要部署您的网站,只需运行: 写在 cmd -"firebase deploy"

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

    【讨论】:

      【解决方案5】:

      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 login 和 firebase init 初始化与您的项目的连接。
      5. 按照提示选择您要创建的用于托管的 Firebase 项目。 o 在第一个提示中选择 Hosting 选项。 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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2021-05-09
        • 2018-10-03
        • 2020-10-20
        • 2019-10-10
        • 2020-06-09
        • 1970-01-01
        • 2016-10-13
        • 1970-01-01
        相关资源
        最近更新 更多