离子 PWA 部署 [英] Ionic PWA deploy

问题描述

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

I'm trying to deploy a Progressive Web App version of my Ionic 2 project to Heroku but it doesn't seem to work. What I'm trying is to use "Ionic build browser --prod" and then deploy the www folder, but I'm not getting any response from Heroku (Seems that nothing has being deployed)

推荐答案

你应该采取的步骤:

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

2. 转到 .gitignore 文件并删除提及 www/以便 git 选择它并添加这两行以便选择平台浏览器文件夹

1. Ionic build browser --prod - creates the main.js file to be deployed

2. Go to .gitignore file and remove the mentions of www/ so git picks it up and add these two lines so platforms browsers folder is picked up

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

将这 2 个库添加到你的 package.json 中(不要忘记运行 npm install)

Add these 2 libraries to your package.json (don't forget to run npm install)

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

在 package.json 中为你的 npm 脚本添加一个开始

Add a start to your npm scripts in package.json

"start": "node server.js"

使用以下代码将 server.js 添加到您的项目文件夹:

Add server.js to your project folder with the following code:

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，你可以测试看看它会如何运行.

Please note this code is only for ionic apps and not normal angular apps. At this point you can write npm start or node server.js in your cmd and you can test to see how it will run.

使用 git push heroku master 将您的代码提交到 heroku git.请注意将 heroku git 放在您的远程列表中.您可以执行 git remote -v 来检查是否是这种情况.如果没有从网站获取 url 并添加它.

Commit your code to heroku git using git push heroku master. Please note to have the heroku git on your remote list. You may do git remote -v to check if thats the case. If not get the url from the website and add it.

可选 - 将 www/文件夹放回 .gitignore 和 git rm --cached -r ./www 以从您的 git 中删除它们.这样你的同事就不会在你每次提交时在你的 main.js 上发生合并冲突.平台/浏览器也是如此.

Optional - Put the www/ folder back in .gitignore and git rm --cached -r ./www to delete them from your git. This is so your co workers wont have merge conflicts on your main.js everytime you commit. The same for platforms/browser.

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

You are supposed to see heroku installing and deployed a node application in your enviornment after pushing to their git

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

NOTE If you are using Heroku you could probably do this with Heroku builds rather than playing with your git. https://github.com/heroku/heroku-builds

这篇关于离子 PWA 部署的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！