Nuxt.js - Github & Heroku 部署

此篇介绍一下 Nuxt.js 部属到 Github 与 Heroku 上的流程，也算是顺便做一个笔记

Github Pages 科普

这边有两个 Github Pages 的小知识要先了解一下

分支

它共有两个分支可供我们使用 Github Pages，分别为 master 与 gh-pages

master: 通常会放打包前的原始码，用于档案控管gh-pages: 拿来放置打包后的程式码，以供浏览用

储存库

储存库也分为两种，分别为主帐号与其他帐号

主储存库(帐号.io): 每个人只有一个的储存库其他储存库: 可以有多个，但路径会在主帐号之下，所以部署路径会多一层

主储存库以外的部署方式官网有写到，须在 nuxt.config.js 加上设定

// nuxt.config.jsmodule.exports = {  router: {    base: '/<repository-name>/'    // 这边的 <repository-name> 填上自己专案名称  }}

Github Pages 部署

Github Pages 没办法部署 Node.js，所以无法使用 SSR，仅能部属静态页面，那就开始啰！

git 初始化与 commit

不管要上传 Github Pages 或是 Heroku，都必须先使用 Git 控管档案

$ git init// 初始化 git$ git add .// 将档案加入暂存区$ git commit -m 'init'// commit 档案

建立专案并上传

首先建立一个新的专案，并选择 Public ( 免钱啦 )

将刚刚的 commit 记录上传到 Github 的 master 分支

$ git remote add origin https://github.com/XXXXXXX/demo.git$ git push -u origin master

打包档案

前面说过，Github Pages 是没办法部属 Node.js 的，所以必须先打包成静态档案

$ npm run generate

运行之后在根目录会多一个 dist 资料夹，此为打包完成后的档案，我们的目的就是将此资料夹部署上去，这边分别介绍使用指令的作法与使用套件的作法

使用指令上传

依序输入指令即可上传档案

$ git checkout -b gh-pages// 建立 gh-pages 分支，并切换到 gh-pages$ git add -f dist// 强制将 dist 加入暂存区$ git commit -m 'commit dist'// commit 暂存区的档案$ git subtree push --prefix dist origin gh-pages// 将 dist 资料夹下的档案 push 到 gh-pages

使用套件上传

除了使用指令以外，也有套件帮我们把方法写好了

安装 gh-pages

$ npm install gh-pages --save-dev

在 package.json 内新增指令

// package.json"scripts": {  "deploy": "gh-pages -d dist"}

运行指令

$ npm run deploy

开启 Github Pages 服务

最后到 Settings 下方打开服务，过一段时间就可以看到哩～

Heroku 部署

Heroku 与 Github Pages 不同，Node.js 是可以部署在上面的，如果需要 SSR 部属在 Heroku 是不错的选择

注册与安装 CLI

首先到 Heroku 注册帐号并安装 CLI，直接下载或使用指令皆可

登入

安装完成后输入指令跟着步骤填入帐号密码即可登入

$ heroku login

设定打包指令

Heroku 再上传后会自动帮我们打包，预设会使用 heroku-postbuild 这个指令，于是必须先在 package.json 内将指令写入

// package.json"scripts": {  "heroku-postbuild": "npm run build"}

git 初始化与 commit

同 Github Pages，先使用 Git 控管档案

$ git init// 初始化 git$ git add .// 将档案加入暂存区$ git commit -m 'init'// commit 档案

建立专案并上传

$ heroku create// 建立专案，后方可加上专案名称，没有则是预设$ git push heroku master// 将 master 分支部署到 heroku

设定环境变数

官网有写到，部署至 Heroku 须加上几个环境变数，所以到 Settings 内加上变数

接着只要等他跑好后，按下右上角的 Open app 便可看到页面啰！

结语

其实部署到每个主机的流程概念都是一样的，操作也并不困难，只是每个不同的网站有不同的毛，只要了解其特性就可以轻轻鬆鬆的把做好的网站放上去啦～