一. 前言
由于众所周知的原因,在墙内建立一个网站需要很多“流程”,买域名、域名备案、买服务器、做企业认证,常常需要客户配合提交各种证件,整个流程走下来一个月左右,还需要说服客户配合,其中“心累”,同为一个Freelancer的你也许能感受到吧。
如果每一个站都要这么做,其实是有一些沟通成本和信任成本在里面的,对于一些比较大的项目,值得为此付出,但对于普通的企业站或展示性的小网站而言,我们总是希望能够快速搞定收工(收钱) 😃 ,毕竟我们不想花太多时间和精力跟客户解释为什么要提交营业执照、为什么要法人拍照签名这些东西,还要接受客户质疑的眼光,甚至有时候因为这点事儿项目就黄了。
二. 解决方案
为了免备案,很多人会选择国外服务器比如HK或者米国的,但问题大家也都知道:速度慢,前台访问慢,后台管理上传慢,特别是大图上传浏览…如果用的是虚拟主机,还有可能ftp传不上去源代码。(啧啧啧… T_T)
一次偶然看到restful接口的一些文章,我突然想到,对于企业站而言,需要后台操作的只是管理员,而前台基本都是访问,不需要其他功能,所以如果可以把站的前端放在国外,把后台管理部分放在国内,然后用restful接口进行数据传递,不就可以解决所以问题了?(其实还是有些小问题的>_< ),所以我尝试了一下分开布置,效果不错。
这样做的优点是:
- 只需备案自己的服务器和域名,其他企业域名和服务器都无需备案;
- 访问速度比整站放到国外服务器要快
三. 分开部署原理
我的部署是这样子的,首先准备一台国内阿里云ECS,自然的也就需要一个国内域名,这里是your-domain.com
,LAMP环境,而国外的虚拟主机和企业的域名www.qiye.com
绑定,如下图:
我在虚拟主机上部署了前端的代码,在ECS上部署了后台管理系统,后台管理系统提供接口,用于获取后台的数据。
整个访问的流程如下:
- 用户访问企业站
www.qiye.com
,向虚拟主机请求网页; - 如果虚拟主机有需要向ECS请求一些数据的话(比如网站名称、网站版权信息等),则会向ECS发出请求,如果没有则直接跳到第4步;
- ECS返回Json信息,如果有第2步请求的话;
- 虚拟主机把HTML返回给用户;
- 用户浏览器通过ajax向ECS请求信息;
- ECS返回信息。
不难看出,其实我们仍需要备案的,但我们要备案的只是自己的域名和服务器,而其他客户的企业域名则不再需要备案。
流程中,第2、3步不是必需的,网站名称、网站版权等信息也可以在第5步的时候请求,而且会比虚拟主机向ECS请求快(假设访问用户在国内的话),因为虚拟主机和ECS隔着一道墙 😃
这里第2、3步的请求,是在服务端用PHP、python等去做请求,请求完之后,将数据嵌入html中,然后一并返回,而5、6步的请求则用js,例如用jquery的ajax方法来做请求。
下面我用伪代码模拟写一下吧 😃
- 前端:可以用jquery进行ajax请求,再将数据渲染至网页。
<div class="news-list"><div>
<script>
$(function(){
$.get('api.your-domain.com/get/newslist',{
page: 1
}, function(data){
if(data.success){
$('.news-list').html(data); // 如果请求成功,则渲染至div层。
}
})
});
</script>
- 后台接口:这里我提供两个接口,一个是
apiGetNewsList
获取新闻列表,一个是apiGetNewsDetail
获取一篇新闻详情。
// 获取新闻列表的接口
function ApiGetNewsList(page=1){
newsList = searchDB(page);
return toJSON(newsList);
}
// 获取新闻详情的接口
function ApiGetNewsDetail(newsId){
news = searchDB(newsId);
return toJSON(news);
}
当有人访问接口时,比如访问:api.your-domain.com/get/newslist?page=1
,返回json格式的新闻列表,访问:api.your-domain.com/get/newsdetail?newsid=2
,返回json格式的新闻详情,用户浏览器拿到这些数据后,就可以用js渲染到网页上去。
返回的json数据:
// 新闻列表的json数据
{
1: { "title":"新闻标题1", "createTime":"2020-02-02", "id":1 },
2: { "title":"新闻标题2", "createTime":"2020-02-03", "id":2 },
3: { "title":"新闻标题3", "createTime":"2020-02-04", "id":3 },
}
// 新闻详情的json数据
{
1: {
"title":"新闻标题1",
"createTime":"2020-02-02",
"id":1
"content": "<p>文章正文....</p><img src='api.your-domain.com/123.jpg'>"
}
}
四. 后记
你可能会问,这样国内的服务器和域名不也需要备案吗?是的,国内的域名your-domain.com
和ECS服务器一样需要备案,这个域名和ECS一般都是你自己的,你只需要备一次案,而其他客户的企业域名和服务器都在国外,不需要备案,所以无论有多少个企业站,客户网站只需要从你的ECS得到接口,网站就能运行起来了。对于网站访问者而言,打开企业域名,他们就能访问到企业网,至于里面是怎么运行的,我相信他们不会打开F12控制台去看网页的源代码吧 😃
至此,整个部署和请求的过程我也就说完了,最后,我们再来说说这样做的优缺点吧。
优点:
- 只需本案自己的域名服务器,其他企业站的域名服务器都无需备案;
- 访问速度比整站放到国外服务器上要快;
- 国外服务器只需要存放少量的文件(html,css,js),数据都在国内;
上面说只需自己备案一次,算最大的一个优点吧。客户不需要麻烦的备案,也不需要忍受国外服务器龟速的访问,所以这么大费周章也是值得的。
重点就是能够最大限度地减少向虚拟主机的数据请求,
举个例子:用户浏览器拿到html之后,从里面的图片<img src='api.your-domane.com/123.jpg'>
再去请求图片信息,这个时候,请求的图片在国内服务器,用户通过ajax向ECS请求列表和新闻详情也都是在国内,速度自然会快很多。
管理员对网站进行管理也是在国内,上传速度会很快,而遇到前端修改的时候,我们只需要上传一些简单的html和css、js,自然比整个框架上传到虚拟主机FTP上要快上许多。
缺点:
这么做,缺点也很多,首先你的接口是暴露在公网的,你能调用自然别人也能调用,你的图片也是被跨域访问,所以,如果你是做一些商城或者安全性要求高的站,就不建议这么做,这里只是对普通的企业站用这种方式,毕竟只是展示性的功能,别人愿意调用企业的新闻或者产品,帮企业宣传也行,何乐不为:)
第二个确定就我们后台管理是在ECS上的,所以企业登陆、管理操作需要打开的是国内的域名,这个国内域名一般都是你的二级域名,这些许对客户不友好,也会增加他们的疑虑,但相对麻烦的备案而言,这是可以接受的吧 😃
第三,如果网站对外不仅需要提供信息展示,还需要提供一些登陆操作的话,这种方式就不太好,解决的办法也有,就是用auth2.0这种授权模式,但这无疑增加了我们的开发成本。所以如果客户要求的功能比较多的,还是应该乖乖叫客户去备案,他好、我也好 😃
以上就是我的分享,如果有什么错误,欢迎大家指正,如果大家有什么更好的解决方法,那么也请告诉我,谢谢大家的阅读🙏