iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 23
0
自我挑戰組

轉職道上的萌芽人生 − 自學程式開發ing系列 第 23

Day 23- 191009學習筆記 Express - Deploying to production(下)

  • 分享至 

  • xImage
  •  

提醒:由於看到這系列鐵人訂閱人數漸漸變多,標記一下這些內容是在「非常萌新時期」所寫,更多技術內容請參考我的 Github,歡迎跟我一起討論 ^ ^


做好發佈前的準備後,接著可以將產品託管在 主機供應商(hosting provider),此教材選擇了 Heroku,為一個有提供 資源受限的永久免費 選項的 雲端 PaaS 服務(Platform as a Service)。其已將大部分生產環境設置好,較易上手、成本低,但靈活性也較低。因此適合此處選來演示學習成果。


Git repository

Heroku 需通過 Git 添加一個名為 heroku 的 git remote,來指向在 Heroku雲端的 repository。並使用 Git 來上傳/同步所做的任何更改。

  • GitHub 建立新的 repository。
  • 在電腦上安裝 git
  • 輸入指令將 Git repository 複製到你的電腦(local repository):
    git clone https://...你的Git repository的 URL
    (URL 可在右邊的 Clone or download按鈕 上取得。)
  • 將你的產品(其中不包括 /node_modules - 因為將由 Heroku 提供)複製到該資料夾。
  • 因為 git 不會自動追蹤新建立的檔案,需以指令 git add -A 將所有檔案列入追蹤。
  • 以指令 git status 查看版本庫狀態,來檢查你將要 commit 的檔案是否正確。
  • 確認無誤後,以指令 git commit -m '你的註解',將檔案 commit 到 local repository。
  • 最後再以指令 git push origin master,將 local repository 同步到 Git repository 。

Update the app for Heroku

為了讓 app 能在 Heroku 上運行,需要做一些調整。

  • 設定 Node 版本:在 Heroku 上運行,Node 是由其配置,須告知使用哪個版本,因此需在 package.json 上新增該項目。
"version": "0.0.0",
"engines": {
  "node": "10.15.3"
},
"private": true,
  • 設定 Database 配置:一般建議在 開發 & 產品 使用不同的 Database,為了能彈性使用不同的 Database,改成使用 環境變數 來設定 Database 的配置。
const mongoDB = process.env.MONGODB_URI || process.env.MONGODB_DEV

(這裡原文教學將開發用的Database寫在code裏頭,後來隔天研究git時,想想不太對,應該不能把任何金鑰寫進code,因此我先暫時把兩個都寫在環境變數裏頭。參考

  • 安裝 dependencies 並測試:做任何改變後,都須測試是否一切符合預期。而此處沒有 dependencies ,因此需重新安裝來使用。
  • 更新上 Github:最後再將更新的部分保存進 Github,並註解這次更新的版本所做的操作(調整以配合在heroku上運行)。

Deploy on Heroku

  • 首先需要註冊帳號安裝client
  • 建立 Heroku repository:也就是在我們的 git 環境,建立了一個名為 heroku 的 git remote(指向 remote repository 的 pointer)。
    (以指令 heroku create 執行)
    (可以自訂名稱,或是隨機生成。名稱將會用來生成你的 URL。)
    第一次創建,會要求你導向登入頁面,並登入:
    (heroku: Press any key to open up the browser to login or q to exit:)
    https://ithelp.ithome.com.tw/upload/images/20191009/20120981bC9i1j7SuJ.png
  • 同步 app 到 Heroku repository:將上傳 app、獲取 dependencies,並打包到 dyno,並啟動站點。
    (以指令 git push heroku master 執行)
  • 打開網站:成功啟動站點後,可以指令打開瀏覽器進入網站,或是使用URL進入網站。
    (以指令 heroku open 執行)
  • 設置環境變數
    • NODE_ENV 設定為 production:
      heroku config:set NODE_ENV='production'
    • 前面所學的方法為 production 建立獨立的 database。並設定 MONGODB_URI
      heroku config:set MONGODB_URI='你新的 MongoDB 的 URL'
      (看起來建立第二個需要付費,因此我暫時先直接用原本的。)
    • 每次設定完 環境變數,heroku 都會重新啟動。可以用 heroku config 查詢已設定的 環境變數
  • Heroku也提供許多 addons 可加以利用。
  • Heroku也提供一些 debug 方法:
    • heroku logs:列出當下所有的 log。
    • heroku logs --tail :列出當下所有的 log,並持續更新。
    • heroku ps:列出 dyno 的狀態。(如:其剩餘使用時間)
    • heroku git:remote -a '你的專案名字':重新將 git 連接到 heroku 的專案

到目前為止,總算是完成了 The Local Library website 的教學啦,今天將我的圖書館網站成功發佈上線,並放上我的GitHub。接下來將繼續學習其他部分並以此圖書館網站來實踐,增加其完整度。


小插曲:最近發現,當 npm 有新版本時,在你使用後,會出現提示訊息告訴你。
https://ithelp.ithome.com.tw/upload/images/20191009/20120981vveHNjXc99.png


上一篇
Day 22- 191008學習筆記 Express - Deploying to production(上)
下一篇
Day 24- 191010學習筆記 Git 入門篇
系列文
轉職道上的萌芽人生 − 自學程式開發ing30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言