---
# System prepended metadata

title: Line Bot+Express+Heroku
tags: [畢業專題]

---

# Line Bot+Express+Heroku
###### tags: `畢業專題`

## ▉ Line Developers
### 創建line帳號
先到LINE Develpers創建帳號，取得帳號的QRCode。（這裡跳過步驟）

## ▉ 專案環境建置
### 建立專案資料夾
創建一個專案資料夾，這裡用「pah-ni-lam-gu_LINE-Bot」作為資料夾命名。
```!
mkdir pah-ni-lam-gu_LINE-Bot
```
![](https://i.imgur.com/luwAU0c.png)

### 建立package.json
在「pah-ni-lam-gu_LINE-Bot」資料夾底下建立package.json。
```!
npm init -y
```
![](https://i.imgur.com/FX6sEEC.png)

### 安裝套件 express、linebot
在「pah-ni-lam-gu_LINE-Bot」資料夾底下安裝。
```!
npm install express linebot dotenv
```
![](https://i.imgur.com/Ew8jhl6.png)

到package.json中確認有安裝express、linebot成功

![](https://i.imgur.com/OV4kEAm.png)

### 建立app.js
在「pah-ni-lam-gu_LINE-Bot」資料夾底下建立一個js檔案，內容為line bot會做出甚麼反應，所有line bot邏輯會放在這個程式檔案中。

app.js程式碼
```javascript!
const express = require('express')
const app = express()
const linebot = require('linebot');
// 判別開發環境
if (process.env.NODE_ENV !== 'production') {      // 如果不是 production 模式
  require('dotenv').config()                      // 使用 dotenv 讀取 .env 檔案
}
const bot = linebot({
  channelId: process.env.CHANNEL_ID,
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});
const linebotParser = bot.parser();
bot.on('message', function (event) {
  console.log(event);
event.reply(event.message.text).then(function (data) {
    // success
  }).catch(function (error) {
    // error
  });
});
app.post('/', linebotParser);
app.listen(process.env.PORT || 3000, () => {
  console.log('Express server start')
});
```
## ▉ 佈署至Heroku
### 創建Heroku帳號&下載Heroku CLI
Heroku CLI [下載點](https://devcenter.heroku.com/articles/heroku-cli)
![](https://i.imgur.com/LzdC61s.png)

### 準備佈署Heroku
[LINE chatbot 聊天機器人怎麼做？帶你詳細步驟上手](https://medium.com/alpha-camp-%E5%8F%B0%E7%81%A3/%E5%81%9A%E4%B8%80%E5%80%8B-line-chatbot-628c7c3707c7)這裡面說在專案資料夾底下執行heroku的一些指令，但我這邊沒有成功QQ要在使用者那層執行才可以（不知道原因）

反正就先在專案資料夾新增名稱為 Procfile 的檔案，裡面打上
```
web: node app.js
```
![](https://i.imgur.com/innwoUU.png)

再來執行heroku login
```
heroku login
```
執行後會出現如下圖，接著就按下除了q之外的任何按鍵(q是離開)。

![](https://i.imgur.com/t5q8S3L.png)

按下會跳出heroku的網頁，點擊login

![](https://i.imgur.com/eLikOZo.png)

點擊login，頁面改變為下

![](https://i.imgur.com/QU0fTaN.png)

接著就可以為到命令提示字元的介面，出現下畫面，代表login成功

![](https://i.imgur.com/adVXtzQ.png)

接著不要關掉！執行底下程式碼
```
heroku create <app name>
```
`<app name>`部分可以自己命名，如果空著不寫也可以，Heroku會幫你命名。我這裡是自己命名為「pah-ni-lam-gu」

![](https://i.imgur.com/LglGWex.png)

### 推上Heroku
佈署好之後，因為Heroku 平台是使用 Git 進行部署，所以接著要利用git將專案推上Heroku。

在local資料夾新增 git remote 對應到 Heroku repository，所以現在要對專案資料夾開啟終端機，並執行指令。
```
git init
```
![](https://i.imgur.com/DWVBjOC.png)

```
heroku git:remote -a <app name> 
```
`<app name>`即Heroku 應用程式名稱，也就是看前面你自己寫的app name或者讓Heroku幫你命名的名稱。我前面是用「pah-ni-lam-gu」，所以要執行的程式碼如下
```
heroku git:remote -a pah-ni-lam-gu
```
![](https://i.imgur.com/nKoSF7B.png)

最後依照一般 push 到 GitHub 的指令就可以佈署到 Heroku 了
```
git add .
git commit -m"first commit"
git push heroku master
```

### 更改 package.json 設定
先來做些更改，在 scripts 中增加二個屬性 dev 及 start。開發時可以 npm run dev 來啟動 server ，佈署時至 heroku 後，heroku 會以 npm run start 來啟動 server。
```json!
"scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```
![](https://i.imgur.com/5rc6qil.png)

## ▉ 最後一些步驟
### 設定 heroku 的環境變數
server 啟動後，需要以下三個參數，server 才能與 LINE 對接。使用 heroku config:set 指令，設定 CHANNEL_ID、CHANNEL_SECRET、CHANNEL_ACCESS_TOKEN 三個參數
```
heroku config:set CHANNEL_ID= 打上你的CHANNEL ID
heroku config:set CHANNEL_SECRET= 打上你的CHANNEL SECRET
heroku config:set CHANNEL_ACCESS_TOKEN= 打上你的CHANNEL ACCESS TOKEN
```
上方CHANNEL ID、CHANNEL SECRET、CHANNEL ACCESS TOKEN都可以從Line developers中，我們前面設置好的帳號找到。(反紅處)

CHANNEL ID
![](https://i.imgur.com/tl8YEOn.png)

CHANNEL SECRET
![](https://i.imgur.com/w0FKdTv.png)

CHANNEL ACCESS TOKEN
要先按下issue才會產生CHANNEL ACCESS TOKEN
![](https://i.imgur.com/X7j9Hm9.png)

全部設置好
![](https://i.imgur.com/QhF5K5u.png)

這時候，打開 app 網頁
```
heroku open
```

會出現以下畫面
![](https://i.imgur.com/IiOwD6x.png)

注意他的網址
```
https://pah-ni-lam-gu.herokuapp.com/
```

回到 LINE developer ，將 webhook URL 填入，填入的內容即上方打開的網頁的網址

![](https://i.imgur.com/RaDFBDu.png)

成功了！
![](https://i.imgur.com/Qct7VGc.png)

接著就要來思考怎麼改寫程式碼QQ


## ▉ 參考資料
* [LINE chatbot 聊天機器人怎麼做？帶你詳細步驟上手](https://medium.com/alpha-camp-%E5%8F%B0%E7%81%A3/%E5%81%9A%E4%B8%80%E5%80%8B-line-chatbot-628c7c3707c7)
* [linebot 套件](https://www.npmjs.com/package/linebot)
* [第 29 章 - 網站部署(使用 Heroku)](https://ithelp.ithome.com.tw/articles/10189021)
* [[Heroku] 佈署網站或 App 到 Heroku](https://wshs0713.github.io/posts/351f69fe/)