部署文件
之前我们说到的服务器是指我们的后端,当我们的电脑运行node.js文件时,我们的后端服务器开始工作。部署网站到服务器,相当于运行我们的Node.js文件在另一台电脑上。这个电脑一直运行,随时等待别人响应。
可以把前端,后端,数据库文件都放上Heroku(云平台)。
代码回顾(前端)
主要看一遍前端,是否有可以优化的地方
清除图片缓存
先登录miek的账号,识别一张图片。
退出账号,登陆uu账号时,图片依旧存在
原因是因为我们在前端没有clear the state。在APP.js里面,user会保存miek的state。
我们需要创建一个初始态。
这样就可以清除图片缓存。再加上,onroutechange里面,signout时,issignedin = false。所以也可以替换成initialstate。
增加catch()
catch是用来捕获异常的,这里的catch(),是用来捕获clarifai是否发生错误,但是我们没办法监控fetch()
server.js优化
我们将register等所有页面都写在了server.js里面,显得有些杂乱。开启一个新的文件夹controllers,app.post(register)挪过去。
register.js中基本是复制粘贴过来的,除了req和res,我们还需要的数据库db和bcrypt不在该页面,于是要从app.js作为参数传递。
最后还要用module.export()输出这个const。
在server.js中直接召唤function,写法改成:
以及要在开头require register.js
sign in等其他页面和register 一样操作。
网站安全
注册验证(validation)
注册的时候如果有一项空着,依旧可以注册,存储在数据库中为空。前端应该有自己的验证。比如姓名不能有空,邮箱要有相应的格式,密码也是相应的格式。
在后端也需要有验证,检查邮箱,姓名,密码。
先是register.js,有了return,一旦出现不符合的情况,就不会执行下面的步骤了。
但实际是console会报错,但是依旧会跳转home界面,但是我们之前调整了前端验证我们有user的id才会跳转。
在signin 界面也做同样的验证。
隐藏API密钥(将clarifai从前端放到后端)
之前使用clarifai会包括一个秘钥
我们识别图片的时候,秘钥会显示在headers authorization里面
所以我们要把这部分从前端转移到后端。首先在后端文件npm install clarifai。
然后将api authorization挪到后端。同时,因为需要输入input,所以我们多了一个endpoint。在后端多加一个handleapi
前端就多了一个fetch(),把url传到后端,得到response后,再处理entries
这样在前端里面都看不到我们密钥了
环境变量
我们建立一个简单的服务器时,需要指定的端口。
但是如果我们希望端口是动态变化的变量。
不止是设置端口,其他的也可以。我们有时候需要一些动态的变量或者秘密的变量可以这么设置。
部署到Heroku
后端部署
注册登录Heroku后,点到documentation,然后deploying with Git开始。
需要安装Git和Heroku CLI
https://devcenter.heroku.com/articles/git#prerequisites-install-git-and-the-heroku-cli
计划将server和postgresql放在heroku。将前端放到github page。
先安装好win的heroku。
我们需要先建立了git仓库。
git init
报错:warning: LF will be replaced by CRLF
解决方式:git config --global core.autocrlf false
然后
再建立远程heroku
同时项目也可以类似git,push上heroku
当运行的时候
报错,原因是heroku会自动分配端口,而不是我们指定。因此要对server.js做出修改
当然要更新git内容
报错,package.json里面需要修改一下
现在这个app就成功放在网络上面了
现在我们服务器地址就不再是localhost了。所以前端fetch部分都要修改。
但是app.js这里需要保留port
尝试register,返回
说明后端成功连接上了,但是数据库没有,所以是400 bad request。因为目前数据库还是在localhost上面
数据库部署
https://data.heroku.com/
可以查看documentation
https://devcenter.heroku.com/articles/heroku-postgresql
进入数据库,这里用cmd,不适合用git bash
并且两个表重新建立一下
再检查一下数据库,这样就可以成功注册进去了
测试放入一张人脸图片,但是entry没有增加。原因是这里port需要删掉。
这样就能成功返回id,entries就能增加。
部署前端
到personal界面,点开create new app。
按照步骤开始
把前端也上传github
如果不显示image box要检查是不是以.jpg结尾的Link。
现在app就直接部署到网站上去了。
总结
相当于三台电脑,我们分别放上前端,后端,数据库,但是他们有互相的地址所以可以联系到彼此。
还有一个可以改进的是,我们甚至不需要将api-key放在后端,而是设置在heroku里面,然后再后端使用环境变量。 config vars