最早,我从一个讲解电脑软件知识的杂志上看到的一篇文章,讲的是1元建站,心中植下了也要搞一个网站的想法。在很长一段时间,我都没有系统性的学习过相关知识,就导致我脑中的知识很混杂。不过,当相关知识积累到一定程度时,你可能就会在某一刻顿悟,惊呼,原来是这样!
想要在别人通过互联网访问到你提供的资源,最关键的一步,是需要有一个拥有一个公网IP的服务器。由于早年设计互联网的时候,没有想到会有那么多人上网,于是IP地址非常有限,(特指的IPv4,目前的IPv6暂时不存在这个问题),因此并非所有的机器都拥有可被直接访问的地址,绝大部分都是内网地址。为方便理解,你可以认为服务器的IP地址就如同小区的门牌号码,小区里面有很多楼,因此每个楼还有一个内部编号,好比是内网地址。你住在A小区,告诉一个B小区的人自己在A小区的楼号,那个人在自己小区即便找到了那个楼,那个楼里面也没有你。
为了获取一个独立公网IP的服务器,你有如下几个选择。
- 联系你的网络运营商,让他给你家分配一个独立IP;
- 购买一台独立的云服务器,然后自己在上面配置环境;
- 购买别人搭建好环境的服务器,托管自己的应用。
- GitHub Page
早年间绝大部分小白建站,都是走的第三条路,自己在本机上用Adobe Dreamweaver这类工具把网站设计好,然后打包资源,将结果上传到对方要求的一个地方。
如果全部是静态资源,目前一个很好的选择就是用GitHub Page免费构建一个网页,然后购买一个域名,将域名解析到GitHub Page对应的地址。
这里提到了两个新的知识点,静态资源和域名。先讲最简单的域名,因为所谓的域名, 无非就是用更好记的单词去替代一串数字。访问域名的时候,会有一个DNS服务器(Domain Name System)帮你做相应的转换。注意,域名的注册是要钱的,好的域名还可以用来交易。
购买后的域名,需要在域名提供商的管理后台设置一个解析,即让域名提供商去告诉其他DNS服务器,域名实际对应的IP地址。
下一部分,我们来讲讲静态资源和动态资源。这两者的区分并不是网页上的元素能不能动,比如说图片的切换(由JavaScrip控制),而是网页返回的内容是不是动态生成的,例如你搜索时,返回的内容就是经过数据库查询后返回给你,你在购物网站搜索商品也是如此。
举个例子:很久之前,我是通过HUGO框架搭建我自己的个人博客。HUGO会将我写好的Markdown文本进行处理,得到可以直接在本地查看的网页,我只要将其上传到服务器某个目录下,或者GitHub Page下,就算部署了我的博客。
目前,我的博客用的是Halo进行建站,它有一套后台管理系统,我在后台编辑文章,编辑好的文章会记录在底层的数据库。用户访问时,会先去进行数据查询,查询的数据返回到前端,进行渲染。
我们说的Web开发分为两个部分,一部分是别人在浏览器上可以看到的元素(前端),一部分是别人看不到后台处理工作(后端)。
前端开发有3个组成
- HTML: 控制页面的整体结构,相当于房子的结构
- CSS: 控制页面的样貌,相当于给房子做装修
- JavaScript: 控制页面的行为,相当于房子里面的各种开关
后端包括
- 应用: 不同编程语言开发的工具,用于处理数据,返回结果
- 应用服务器:负责运行编写的应用。例如Tomcat运行Java的Servlet应用,Python的Django,R的ShinyServer。应用服务器通常会实现一部分HTTP服务器的功能,因此,当网站没有那么大需求时,一个应用服务器就可以了。
- HTTP服务器: 负责HTTP的响应,获取用户端的请求,将服务端的结果发送给用户端。如Apache,Nginx。相当于应用服务器,HTTP服务器专注于并发,负载均衡。
在Web发展的初期,绝大部分网站都是静态网页,只要把网页写好,放在服务器上就行。但是这样子效率太低了,毕竟对于一个新闻资讯类网站而言,总不可能为条新闻都写一个页面吧。于是,就有了JSP技术,也就是在HTML里面混入Java代码,查询什么数据,就从数据库检索什么数据,填充到HTML指定位置即可。早期,这类数据获取操作每次都要刷新整个页面,在宽带不足的年代,会浪费不少的网页加载时间。另外,这也不利于分工合作,毕竟一个前端开发者未必懂Java(或许他懂PHP),一个Java开发者也未必能处理好HTML,最后出现bug,两方互相甩锅
题外话: R的shiny是可以把HTML,CSS,JS和数据处理逻辑全部混在一个脚本中的。一个简单的应用还好,可能就几百行代码,以一个相对少的代码实现了一个相对好的页面。但是一旦业务复杂起来,动辄上千的代码,混杂了前端的页面展示,后端的数据处理,可能就是灾难。
后来出现了Ajax技术(描述一类动态加载资源的技术),使得前端可以异步的获取数据并且刷新页面(目前不太会写原生的Ajax代码,主要用框架,如Axios),前后端的数据交互基于统一的数据格式(JSON),前端拿到数据后去改变页面上的展示(早年前用JQuery做DOM操作,后来则是AngularJS, Vue,React这类框架)。
如此一来,前后端分离,分工就更加精细了,写网页的只要负责好网页应该怎么展示,我预期从后端拿到什么样的数据,这类数据会如何改变当前的网页,完成开发后把项目部署在网络速度比较快的服务器上。而写后端的人,也不用考虑前端页面怎么展示,专心写数据处理逻辑,把项目部署在性能比较高的服务器上,以便于把要求的内容返回给前端即可。
最后小结一下
- 公网IP地址是允许公开访问的基础
- 域名会通过DNS服务商转换成IP地址
- 静态网站只需要懂HTML/CSS/JS即可
- 动态网站开发在技术发展前期,会在HTML里混入开发语言的代码。
- 在后期通过Ajax,让前后端通过JSON交互,前端使用JS改变页面展示。