翻譯 | 《JavaScript Everywhere》第10章部署咱們的API（^_^）

時間 2020-12-01

標籤前端 git mongodb 數據庫 json 後端 api 數組安全 ruby 欄目 JavaScript 简体版

原文原文鏈接

翻譯 | 《JavaScript Everywhere》第10章部署咱們的API（^_^）前端

寫在最前面

你們好呀，我是毛小悠，是一位前端開發工程師。正在翻譯一本英文技術書籍。git

爲了提升你們的閱讀體驗，對語句的結構和內容略有調整。若是發現本文中有存在瑕疵的地方，或者你有任何意見或者建議，能夠在評論區留言，或者加個人微信：code_maomao，歡迎相互溝通交流學習。mongodb

(σﾟ∀ﾟ)σ..:*☆哎喲不錯哦數據庫

第10章部署咱們的API

想象一下，若是用戶每次想要經過咱們的API來建立、閱讀、更新或刪除一個筆記，必須只能經過我的電腦。目前，這就是咱們的API的工做方式，由於它僅在咱們的我的計算機上運行。咱們能夠經過將應用程序部署到Web服務器來解決此問題。json

在本章中，咱們將分兩個步驟：後端

首先，咱們將創建一個咱們的API能夠訪問的遠程數據庫。
其次，咱們將API代碼部署到服務器上並將其鏈接到數據庫。

完成這些步驟後，咱們可用於從任何聯網的計算機（包括將要開發的Web，桌面和移動界面）訪問API。api

託管咱們的數據庫

第一步，咱們將使用託管數據庫解決方案。對於咱們的Mongo數據庫，咱們將使用MongoDB Atlas。數組

這是由Mongo支持的組織支持的徹底託管的雲產品。此外，他們提供了免費體驗，能夠很好地實現咱們的初始部署。讓咱們逐步完成部署到MongoDB Atlas的步驟。安全

首先，瀏覽mongodb.com/cloud/atlas並建立一個賬戶。建立賬戶後，系統將提示你建立數據庫。在此屏幕上，你能夠管理沙箱數據庫的設置，可是我建議暫時使用默認值。ruby

這些是：

亞馬遜的AWS做爲數據庫主機，但也提供了谷歌的雲平臺和微軟的Azure。
具備「免費套餐」選項的最近區域。
集羣層，默認值爲「 M0沙箱（共享RAM，512MB存儲）」
其餘設置，咱們能夠將其保留爲默認設置。
集羣名稱，咱們能夠將其保留爲默認名稱。

今後處單擊「建立集羣」，此時，Mongo將須要幾分鐘來設置數據庫（圖10-1）。

圖10-1。MongoDB Atlas數據庫建立屏幕

接下來，你將看到Clusters頁面，在這裏你能夠管理你的單個數據庫集羣（圖10-2）。

圖10-2MongoDB Atlas集羣

在「羣集」屏幕上，單擊「鏈接」，系統將提示你設置鏈接安全性。第一步是將你的IP地址列入白名單。因爲咱們的應用程序將具備動態IP地址，所以你須要使用0.0.0.0/0將其打開爲任何IP地址。將全部IP地址列入白名單後，你將須要設置安全的用戶名和密碼來訪問數據（圖10-3）。

圖10-3.MongoDB Atlas IP白名單和用戶賬戶管理

將IP列入白名單並建立用戶賬戶後，你將選擇數據庫的鏈接方法。在這種狀況下，它將是「應用程序」鏈接（圖10-4）。

圖10-4。在MongoDB Atlas中選擇鏈接類型

從這裏，你能夠複製咱們將在生產中使用的鏈接字符串.env文件（圖10-5）。

圖10-5。MongoDB Atlas的數據庫鏈接字符串

Mongo密碼

MongoDB Atlas對密碼中的特殊字符進行十六進制編碼。這意味着，若是你使用（而且應該使用！）任何非字母或數字值，則在將密碼添加到鏈接字符串時，將須要使用該代碼的十六進制值。網站ascii.cl爲全部特殊字符提供相應的十六進制代碼。例如，若是你的密碼是Pizz@2!.你將須要編碼@和！字符。你可使用％，而後加上十六進制值。生成的密碼將爲 Pizz%402%21.

隨着咱們的MongoDB Atlas託管數據庫的啓動和運行，咱們如今爲咱們的應用程序提供了一個託管數據存儲。在下一步中，咱們將託管咱們的應用程序代碼並將其鏈接到咱們的數據庫。

部署咱們的應用程序

咱們下一步的部署設置是部署咱們的應用程序代碼。就本書而言，咱們將使用雲應用程序平臺Heroku。我之因此選擇Heroku是由於其出色的用戶體驗和免費的免費套餐，可是其餘雲平臺（例如Amazon Web Services，Google Cloud Platform，Digital Ocean或Microsoft Azure）都爲Node.js應用程序提供了替代託管環境。

在咱們開始以前，你須要訪問Heroku的網站並建立一個賬戶。建立賬戶後，你須要爲你的操做系統安裝Heroku命令行工具。

對於在macOS中，你可使用Homebrew以下安裝Heroku命令行工具：

$ brew tap heroku/brew && brew install heroku

對於Windows用戶，請訪問Heroku命令行工具指南並下載相應的安裝程序。

項目設置

安裝了Heroku命令行工具後，咱們能夠在Heroku網站上設置項目。經過單擊「新建」→「建立新應用」（圖10-6）。

圖10-6。Heroku新應用對話框

在這裏，系統將提示你爲應用程序指定一個惟一的名稱，而後單擊「建立應用程序」按鈕（圖10-7）。繼續，在任何使用YOUR_APP_NAME，你都會看到合格名稱。

圖10-7。提供惟一的應用程序名稱

如今咱們能夠添加環境變量。相似於咱們使用咱們的.ENV本地文件，咱們能夠Heroku的網站界面中管理咱們的生產環境變量。爲此，請單擊「設置」，而後單擊「顯示配置變量」按鈕。在此屏幕中，添加如下配置變量（圖10-8）：

NODE_ENV production
JWT_SECRET A_UNIQUE_PASSPHRASE
DB_HOST YOUR_MONGO_ATLAS_URL

圖10-8。Heroku的環境變量配置

咱們已經準備好部署咱們的代碼。

部署方式

如今，咱們準備將代碼部署到Heroku的服務器上。爲此，咱們能夠在終端應用程序中使用簡單的Git命令。咱們將Heroku設置爲遠程端點，而後添加並提交更改，最後將代碼推送到Heroku。爲此，請在終端應用程序中運行如下命令：

$ heroku git:remote -a <YOUR_APP_NAME>
$ git add .
$ git commit -am "application ready for production"
$ git push heroku master

在Heroku構建和部署文件時，你應該在終端中看到輸出。完成後，Heroku將使用package.json文件中的運行腳本在其服務器上運行咱們的應用程序。

測驗

成功部署咱們的應用程序後，咱們將可以向咱們的遠程服務器發出GraphQL API請求。默認狀況下，GraphQL Playground UI在生產中處於禁用狀態，可是咱們可使用終端應用程序中的curl測試應用程序。要運行curl請求，請在終端應用程序中輸入如下內容：

$ curl 
-X POST 
-H "Content-Type: application/json" 
--data '{ "query": "{ notes { id } }" }' 
https://YOUR_APP_NAME.herokuapp.com/api

若是測試成功，咱們將收到一個包含空notes數組的響應，由於咱們的生產數據庫還沒有包含任何數據：

{"data":{"notes":[]}}

這樣，咱們就已經部署了應用程序！

結論

在本章中，咱們使用雲服務來部署數據庫和應用程序代碼。MongoDB Atlas和Heroku等服務使開發人員可以啓動小型應用程序，並將其擴展到從興趣項目到流量大的業務的任何地方。經過部署咱們的API，咱們已經成功開發了應用程序堆棧的後端服務。在如下各章中，咱們將重點介紹應用程序的UI。

若是有理解不到位的地方，歡迎你們糾錯。若是以爲還能夠，麻煩您點贊收藏或者分享一下，但願能夠幫到更多人。