iT邦幫忙

1

Nuxt.js - Github & Heroku 部署

此篇介紹一下 Nuxt.js 部屬到 Github 與 Heroku 上的流程,也算是順便做一個筆記

Github Pages 科普

這邊有兩個 Github Pages 的小知識要先了解一下

分支

它共有兩個分支可供我們使用 Github Pages,分別為 master 與 gh-pages

  1. master: 通常會放打包前的原始碼,用於檔案控管
  2. gh-pages: 拿來放置打包後的程式碼,以供瀏覽用

儲存庫

儲存庫也分為兩種,分別為主帳號其他帳號

  1. 主儲存庫(帳號.io): 每個人只有一個的儲存庫
  2. 其他儲存庫: 可以有多個,但路徑會在主帳號之下,所以部署路徑會多一層

主儲存庫以外的部署方式官網有寫到,須在 nuxt.config.js 加上設定

// nuxt.config.js

module.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 ( 免錢啦 )
Github Pages建立專案
將剛剛的 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

使用套件上傳

除了使用指令以外,也有套件幫我們把方法寫好了

  1. 安裝 gh-pages
$ npm install gh-pages --save-dev
  1. 在 package.json 內新增指令
// package.json

"scripts": {
  "deploy": "gh-pages -d dist"
}
  1. 運行指令
$ npm run deploy

開啟 Github Pages 服務

最後到 Settings 下方打開服務,過一段時間就可以看到哩~
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 內加上變數
heroku 環境變數
接著只要等他跑好後,按下右上角的 Open app 便可看到頁面囉!

結語

其實部署到每個主機的流程概念都是一樣的,操作也並不困難,只是每個不同的網站有不同的毛,只要了解其特性就可以輕輕鬆鬆的把做好的網站放上去啦~


尚未有邦友留言

立即登入留言