部署网站到服务器(Heroku)

部署文件

之前我们说到的服务器是指我们的后端，当我们的电脑运行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