Node.js 建立 API 與發佈 Heroku

此為練習 Vuex 時所用咖啡api，用node.js佈屬時的筆記。

建立寫死的假API
假api有幾種產生方式，例如用本地端api server來處理，而其中一種是真的佈屬上雲端，本地端取用，建立api使用node.js來處理，這裡用到了express
(其實可以不用express，但我這裡就是用了啦)

首先建立專案，之後建立package json，在終端機輸入

npm init

專案名稱打好後，是需求填入資訊或Enter到底即可。

安裝express

sudo npm install express --save

安裝node的跨域模組

sudo npm install cors

接著編輯器或IDE打開專案，建立index.js或app.js，我這裡建立index.js（取何種名稱沒差）
檔案內容如下

//require載入express模組
var express = require('express');

//再用個變數app去(接)載入express模組的全部功能、函式
var app = express();

//載入node替跨域寫的cors跨域模組(要sudo install此模組後才能載入)
var cors = require('cors’);

//使用此跨域模組 預設是＊無限制
app.use(cors())

//根目錄的內容(根目錄的json)
app.get('/',function(req,res){
    res.json(JSON陣列物件放在這裡);
})

app.use(function(req,res,next){
res.status(404).send('<html><head></head><body><h1>404找不到！</h1></body></html>')
})


//監聽port
var port = process.env.PORT || 3000;
app.listen(port)

cors跨域是前端接資料常遇到的問題，node有提供一個處理跨域的模組cors
https://github.com/expressjs/cors
讓我們可以很簡單的設置跨域權限
所以要require和use它

主要的重點是路由對應顯示何種檔案，要讓首頁或特定路由的內容是json要用

res.json(JSON陣列物件放在這裡);

以上面範例來講就是這樣

res.json
(
[
  {
    name:"巴西精選深焙",
    price: 290,
    img: "https://cache2.allpostersimages.com/LRG//68/6826/Q67Y100Z.jpg",
    amount: 0,
    amountShow: 1
  },
  {
    name:"嚴選法式烘焙",
    price: 320,
    img: "https://esimg.eworldtrade.com/uploads/industry/thumb/cocoabeans.jpg",
    amount: 0,
    amountShow: 1
  },
  {
    name:"東非職人摩卡",
    price: 300,
    img: "http://www.deecafe.in/extra/b1.jpg",
    amount: 0,
    amountShow: 1
  },
  {
    name:"坦尚尼亞A級",
    price:280,
 img:"https://shoplineimg.com/566ee049e36c8e86ac000043/56b1b66069702d0c33460d00/400x.jpg",
    amount: 0,
    amountShow: 1
  },
  {
    name:"黃金曼特寧",
    price:340,
    img:"https://www.valpak.com/img/bpp/organic-coffee-organo-goldcolumbu_BPP_59087_2.jpg",
    amount: 0,
    amountShow: 1
  },
  {
    name:"肯亞耶加雪菲",
    price:430,
    img:"https://cache2.allpostersimages.com/LRG//26/2633/GLEMD00Z.jpg",
    amount: 0,
    amountShow: 1
  }
]
);

終端機輸入node index.js 再到對應的路由/
就會看到json囉！

如果不想json在根目錄出現，路由也可以自己修改，總之就app.get(‘/其他路由名稱',function(req,res){
res.json(JSON陣列物件放在這裡);
})
在app.get修改路由名稱就好

部署到Heroku上
首先到heroku辦帳號密碼

接著選程式語言node > 文檔 > 開始使用
（英文看不懂？右鍵翻譯啊！）

下載Heroku Cli並安裝
下載Heroku Cli並安裝這棟只需一次，如果安裝過的人就不用在下載安裝了

安裝好後打開終端機，輸入

heroku login

接著終端機輸入Heroku帳號密碼後即可

再來終端機cd到要推上去的專案目錄資料夾

因為需要用git把專案推到heroku，
先檢查有沒有git本地數據庫，有就略過此步驟，沒有就

git init

然後就

git add .
git commit -m '這裡放你的commit訊息'

接著是重要步驟(?)輸入

heroku create

heroku就會產生一個專案，專案名稱會隨機取名
規格為形容詞+名詞+數字，比如”desolate-refuge-11720”
此時自己在heroku官網的dashboard儀表板也會跟著產生該專案

我們當然可以改名字啦，進入官網該專案後台改完名字後，要記得同步更新本地端的git資訊，否則之後會push不上去

這裡我改名成fake-coffee-api，此時回到終端機，上個終端機指令是heroku create
這裡終端機要輸入

git remote rm heroku
heroku git:remote -a newname

newname是我們改過的名字，所以我是輸入

heroku git:remote -a fake-coffee-api

接著就可以推上去囉

git push heroku master

然後就可以去heroku的專案檢查囉，輸入該專案的網址後就會發現

?????

這是因為
heroku並不知道我們推上去的專案，它要啟用哪個檔案開始

所以回到專案package.json，新增

"engines":{
    "node":”8.10.0"
}

意思是heroku會用何種程式打開它

接著新增

"scripts": {
    "start":"node index.js”
}

意思是heroku開始要下什麼指令，我們進入點是index.js
之後執行heroku幫我們執行node index.js運行專案
如果進入點檔案名字是取app.js，那這裡就改成node app.js

接著一樣git add、commit、push推上去

這次就成功囉

Node.js 建立 API 與發佈 Heroku

Written by:

SimonAllen