【问题标题】:how to host angular 2 website?如何托管 Angular 2 网站?
【发布时间】:2017-07-23 06:35:42
【问题描述】:

如何托管 Angular 2 网站?

我是 Angular 2 的新手,我做了一个没有后端的简单网站。

我想知道当我尝试直接打开 index.html 文件时,它打开时出错。

但是在命令"npm start" 之后它工作正常,它在计算机上运行本地服务器。

那么,如何在简单的托管网站上托管这个网站(不是专用服务器..!)?

我认为托管网站会自动找到 index.html 文件,但问题是,如果没有"npm start" 命令,index.html 将无法启动。

我可以在服务器上启动一个进程吗?

请指导我。

【问题讨论】:

标签: angular server hosting frontend


【解决方案1】:

使用以下简单步骤在 Firebase 上托管您的 Angular 2 应用: 首先使用 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,您可以使用它来在线访问您的应用程序。

[更新]

现在,在您成功部署应用后,如果您想进行一些更改并将代码部署在同一 URL 上。遵循相同的程序。但请确保您指向您的项目。

要列出所有项目,请使用以下命令:

firebase list

要将项目设为当前项目,请使用:

firebase use <project_id>

【讨论】:

  • 您好,我已按照此说明进行操作,并且可以上传我的应用程序! .. 但是现在我在尝试更新我的应用程序时遇到了一个问题,因为我做了一些更改……我该如何更新?
  • 嗨@IxamDeirf 这很简单,您必须遵循相同的步骤,但在此之前确保您指向您正在处理的当前项目。我已经更新了我的答案。请看答案的结尾。
  • 感谢@amanDeepSharma,它就像魅力一样工作!!。为 Angular 新手分享非常有趣且有价值的信息。
【解决方案2】:

你可以使用 http-server

http-server 是一个简单的、零配置的命令行 http 服务器。它对于生产使用来说足够强大,但它足够简单和可破解,可以用于测试、本地开发和学习。

npm install http-server -g

通过以下方式构建项目:

ng build -app

然后在项目目录上使用:

http-server dist/ -p 3000 // -p is port 

在浏览器上http://localhost:3000http://your-ip:3000

【讨论】:

    【解决方案3】:

    您可以使用 heroku 来部署您的解决方案:

    https://www.heroku.com

    【讨论】:

      【解决方案4】:

      如果你有一个简单的主机包,答案是你不能

      普通主机提供商的主机包不提供此功能。

      您需要像 Google Firebase 这样的“特殊提供商”,或者您需要拥有自己的(虚拟)机器(在托管服务提供商处)。

      【讨论】:

        猜你喜欢
        • 2019-03-21
        • 2017-10-09
        • 1970-01-01
        • 1970-01-01
        • 2010-12-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多