如何将 Nuxt 应用部署至 Heroku？

服务器端渲染(Server-Side Rendering)：Vue.js是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出Vue组件，进行生成DOM和操作DOM。然而，也可以将同一个组件渲染为服务器端的HTML字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。
服务器渲染的Vue.js应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。

注册

注意：注册不支持QQ邮箱

安装

set-up

Windows

macOS

$ brew install heroku/brew/heroku

Ubuntu 16+

$ sudo snap install heroku --classic

登录

$ heroku login
	Enter your Heroku credentials.
	Email: <user@example.com>
	Password: <Password>

查看版本

$ node -v
$ npm -v

配置package.json

"scripts": {
  "heroku-postbuild": "npm run build"
},
"engines": {
  "node": "8.9.0",
  "npm": "5.5.1"
},

部署应用程序

创建APP

$ heroku create
Creating sharp-rain-871... done, stack is cedar-14
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added

注意：默认会自动创建sharp-rain-开头的名称，也可以指定名称

$ heroku create <name>
Creating <name>... done, stack is cedar-14
http://<name>.herokuapp.com/ | https://git.heroku.com/<name>.git
Git remote heroku added

设置

$ heroku config:set NPM_CONFIG_PRODUCTION=false

主机IP

$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=production

部署代码

$ git push heroku master

打开部署页面

$ heroku open