如何通过 Heroku 在浏览器中实时部署 Ionic App

Question

我创建了一个 Ionic 应用程序，现在我想在我的作品集网站上展示它。我知道可以在浏览器的 iPhone 框架中运行应用程序，就像 https://ionic-stage.herokuapp.com/stage/?app=catalogue.

从 link 我了解到我必须将我的应用程序部署到 Heroku。但我的主要问题是如何在 iPhone 框架中获取它。

Answer 1

这其实很容易做到。您所要做的就是将 www 文件夹的内容复制到 heroku。然后你必须在同一个文件夹中创建一个文件（例如）mobile.html 到你复制 Ionic www 文件夹内容的位置，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
</head>
<body style="text-align:center;">
    <img src="img/iphone6.png" style="  position: absolute; top: 50px; left: 20px;" />
    <iframe src="index.html" style="  position: absolute; top: 150px; left: 48px; width: 341px; height: 606px; border: none;"></iframe>
</body>
</html>

当然，你可以随意设置样式，我只是复制了我在以下位置使用的示例：http://nikola-dev.com/IonicCalculator/mobile.html。

所以，这里有两件重要的事情：

img 标签，您将在其中放置 phone 图片
您加载应用程序的 iframe 标记（如果您没有更改 Ionic 应用程序中的任何内容，它将是 index.html）。

希望对您有所帮助。

如何通过 Heroku 在浏览器中实时部署 Ionic App

How to deploy Ionic App live in browser via Heroku

deployment

heroku

cordova

ionic-framework