Question

我正在尝试将我的Ionic 2项目的Progressive Web App版本部署到Heroku，但它似乎不起作用。我正在尝试使用“Ionic build browser --prod”然后部署www文件夹，但我没有得到Heroku的任何响应（似乎没有任何部署）

Answer 1

您应该采取的步骤：

Ionic build browser --prod - 创建要部署的main.js文件
转到.gitignore文件并删除www / so git的提及将其添加并添加这两行，以便拾取平台浏览器文件夹
```
platforms/*
!platforms/browser/
!platforms/browser/www
!platforms/browser/www/plugins
```
将这两个库添加到你的package.json中（不要忘记运行npm install）
```
"connect": "^3.5.0",
"serve-static": "^1.11.1"
```
在package.json
中为你的npm脚本添加一个开头
```
"start": "node server.js"
```
使用以下代码将server.js添加到项目文件夹中：
```
var connect = require('connect'),
serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic("platforms/browser/www"))
app.listen(process.env.PORT || 5000);
```
请注意，此代码仅适用于离子应用，而不适用于普通的角度应用。此时，您可以在cmd中编写npm start或node server.js，然后您可以测试它是如何运行的。
使用git push heroku master将代码提交给heroku git。请注意在远程列表中使用heroku git。您可以git remote -v检查是否属于这种情况。如果没有从网站上获取网址并添加它。
可选 - 将www /文件夹放回.gitignore和git rm --cached -r ./www以从git中删除它们。这样你的同事每次提交时都不会在你的main.js上发生合并冲突。平台/浏览器也一样。

你应该看到heroku安装并在推送到他们的git之后在你的环境中部署一个节点应用程序

注意如果您正在使用Heroku，您可以使用Heroku构建而不是使用您的git来完成此操作。 https://github.com/heroku/heroku-builds

Answer 2

一个更新，因为我今天执行了相同的任务：

最好避免

添加和维护“服务器”代码以及您的应用。
将内置的应用（www/）推送到版本控制系统中。

您可以仅依靠heroku buildpack。为此，您将需要两个buildpack：

您的应用将首先被检测为节点应用并进行构建，然后将其作为静态站点进行服务。

首先，在heroku上构建应用程序，不要将www添加到您的版本控制系统中：

第一个buildpack将把您的应用程序检测为节点应用程序，并在后构建脚本之后运行构建。

您需要将此行添加到您的package.json脚本中：

"heroku-postbuild": "ionic build --prod"

并将离子cli添加到您的开发依赖项中，以便在构建过程中可用于heroku

npm install ionic --save-dev

第二，提供生成的静态文件：

第二个buildpack将提供www中生成的静态文件。为此，您需要告诉buildpack如何使用static.json文件来提供文件：（这相当于ionic docs中firebase的配置）

/static.json：

{
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "ngsw-worker.js": {
      "Cache-Control": "no-cache"
    },
    "/build/app/**": {
      "Cache-Control": "public, max-age=31536000"
    }
  },
  "root": "www/"
}

看起来新的Ionic不再生成'www/build/app/...'目录，只是为了与上述文档保持一致而添加。

这两个更改以及构建包足以在heroku / dokku上运行PWA

Ionic PWA部署

2 个答案:

首先，在heroku上构建应用程序，不要将www添加到您的版本控制系统中：

第二，提供生成的静态文件：