翻译 | 《JavaScript Everywhere》第10章 部署我们的API(^_^)
写在最前面
大家好呀,我是毛小悠,是一位前端开发工程师。正在翻译一本英文技术书籍。
为了提高大家的阅读体验,对语句的结构和内容略有调整。如果发现本文中有存在瑕疵的地方,或者你有任何意见或者建议,可以在评论区留言,或者加我的微信:code_maomao,欢迎相互沟通交流学习。
(σ゚∀゚)σ..:*☆哎哟不错哦
第10章 部署我们的API
想象一下,如果用户每次想要通过我们的API
来创建、阅读、更新或删除一个笔记,必须只能通过个人电脑。目前,这就是我们的API
的工作方式,因为它仅在我们的个人计算机上运行。我们可以通过将应用程序部署到Web
服务器来解决此问题。
在本章中,我们将分两个步骤:
- 首先,我们将建立一个我们的
API
可以访问的远程数据库。 - 其次,我们将
API
代码部署到服务器上并将其连接到数据库。
完成这些步骤后,我们可用于从任何联网的计算机(包括将要开发的Web
,桌面和移动界面)访问API
。
托管我们的数据库
第一步,我们将使用托管数据库解决方案。对于我们的Mongo
数据库,我们将使用MongoDB Atlas
。
这是由Mongo
支持的组织支持的完全托管的云产品。此外,他们提供了免费体验,可以很好地实现我们的初始部署。让我们逐步完成部署到MongoDB Atlas
的步骤。
首先,浏览mongodb.com/cloud/atlas
并创建一个帐户。创建帐户后,系统将提示你创建数据库。在此屏幕上,你可以管理沙箱数据库的设置,但是我建议暂时使用默认值。
这些是:
- 亚马逊的
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
$ 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
。
如果有理解不到位的地方,欢迎大家纠错。如果觉得还可以,麻烦您点赞收藏或者分享一下,希望可以帮到更多人。