离子 PWA 部署答案

【问题标题】：Ionic PWA deploy离子 PWA 部署
【发布时间】：2019-06-20 13:29:31
【问题描述】：

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

【问题讨论】：

标签： heroku ionic-framework ionic2

【解决方案1】：

你应该采取的步骤：

Ionic build browser --prod - 创建要部署的 main.js 文件
转到 .gitignore 文件并删除提及 www/ 以便 git 选择它并添加这两行以便选择平台浏览器文件夹
```
platforms/*
!platforms/browser/
!platforms/browser/www
!platforms/browser/www/plugins
```
将这 2 个库添加到您的 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);
```
请注意，此代码仅适用于 ionic 应用，不适用于普通的 Angular 应用。此时你可以在你的cmd中写入npm start或node server.js，你可以测试看看它会如何运行。
使用git push heroku master 将您的代码提交到heroku git。请注意将 heroku git 放在您的远程列表中。你可以做git remote -v 来检查是否是这样。如果没有从网站获取 url 并添加它。
可选 - 将 www/ 文件夹放回 .gitignore 和 git rm --cached -r ./www 以从您的 git 中删除它们。这样你的同事就不会在你每次提交时在你的 main.js 上发生合并冲突。平台/浏览器也是如此。

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

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

【讨论】：

这些步骤是在\platforms\browser文件夹还是主项目文件夹中进行的？
主项目文件夹
Cordova 插件不适用于您所说的部署的 pwa。我可以解决它还是真的不能工作？此外，当更新 html 并将更改部署到 heroku 时，对应用程序所做的任何更改都不会出现。
好吧，我编辑了我的答案以包括平台/浏览器/www而不是www/main.js。我在我的应用上进行了测试，它加载了插件

【解决方案2】：

更新，因为我今天运行相同的任务：

最好避免

随应用一起添加和维护“服务器”代码。
将构建的应用程序 (www/) 推送到您的版本控制系统中。

您可以只依赖 heroku buildpacks。为此，您需要两个 buildpack：

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

首先，在 Heroku 上构建应用，不要在版本控制系统中添加 www：

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

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

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

并将 ionic 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/...' 目录，只是为了与上述文档保持一致而添加。

仅这两个更改以及 buildpack 就足以在 heroku / dokku 上运行 PWA

【讨论】：