离子PWA部署

Question

我正在尝试将我的离子2项目的渐进式Web应用程序版本部署到Heroku，但似乎不起作用。我正在尝试使用"离子构建浏览器-prod"，然后部署www文件夹，但我没有从Heroku获得任何响应(似乎没有部署任何内容(

Answer 1

您应该采取的步骤：

1. Ionic build browser --prod-创建要部署的main.js文件

2. 转到.gitignore文件，然后删除www/so git的提及，然后添加这两行，以便访问平台浏览器文件夹

   platforms/*
   !platforms/browser/
   !platforms/browser/www
   !platforms/browser/www/plugins
   

3. 将这两个库添加到您的软件包。

   "connect": "^3.5.0",
   "serve-static": "^1.11.1"
   

4. 在package.json

   中添加一个启动

   "start": "node server.js"
   

5. 使用以下代码添加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，并且可以测试以查看其运行方式。

6. 使用git push heroku master将您的代码提交给Heroku Git。请注意，将Heroku Git放在您的遥控列表上。您可以执行git remote -v检查是否情况。如果没有从网站上获取URL并添加。

7. 可选 - 将www/文件夹放回.gitignore和git rm --cached -r ./www中以将其从git中删除。因此，每次您提交时，您的同事工人都不会在您的主体上合并冲突。平台/浏览器相同。

您应该在推动其git

后在您的环境中看到Heroku安装并部署了一个节点应用程序

Note 如果您使用的是Heroku，则可以使用Heroku build进行此操作，而不是使用git。https://github.com/heroku/heroku-builds

Answer 2

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

最好避免

• 与您的应用一起添加和维护"服务器"代码。
• 在您的版本控制系统中推动构建的应用程序(www/(。

您可以仅依靠Heroku Buildpacks。为此，您需要两个构建包：

• https://github.com/heroku/heroku-buildpack-nodejs.git
• https://github.com/heroku/heroku-buildpack-static.git

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

首先，在Heroku上构建应用程序，请勿将www添加到您的版本控制系统：

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

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

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

并将离子CLI添加到您的DEV依赖性中，以便在构建过程中可用于Heroku

npm install ionic --save-dev

第二，服务生成的静态文件：

第二个BuildPack将服务于www中生成的静态文件。为此，您需要告诉buildpack如何使用 static.json文件将文件服务：(此文件与离子文档中的firebase的配置有点等同(

/static.json：

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

看起来新离子不再生成'www/build/app/...'目录，只是添加以与上述文档一致。

只有这两个更改，以及构建包足以在Heroku/dokku上运行PWA