# HeroKu Vue 部署 Deploy

###### tags: `Tag(我的筆記!)`

### 第一步驟

$vue create heroku-practice

### 第二步驟 (npm 跟 yarn 只能選一個，不然會無法上傳heroku)

$npm run build

$yarn build

### 第三步驟

將dist檔案從.gitignore檔案刪除或註解掉，繞dist檔可以加入git控管

### 第四步驟

於專案中新增 static.json 檔案，參考來源為 Vue [官方文件](https://cli.vuejs.org/zh/guide/deployment.html#%E9%80%9A%E7%94%A8%E6%8C%87%E5%8D%97)

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

### 第五步驟

更新git版控

$git add . 

$git commit -am "make it better"

### 第六步驟

用create指令創建Heroku專案

$heroku create MyExample-1111

> + MyExample-1111專案名稱可自行定義 [color=blue]

- 成功後會得到兩個URL
- - 第一個為專案部署成功後的網址
- - 第二個為 Heroku 幫我們建立的遠端 git repo 網址

$heroku buildpacks:add heroku/nodejs
$heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

### 第七步驟

將專案推送到HeroKu

$git push heroku master

### 第八步驟
利用Heroku open 開啟部屬好的網頁，結案

$heroku open

<br/>

### 補充

若長時間( 30 分鐘內)沒訪問Heroku將會進入睡眠狀態，會自動休眠，待下一次啟動，啟動時會延遲一些時間。