如何从零开始建设一个网站 「 Vue + Node.js 开发实战 」
theme: vuepress
快捷跳转
关于本课程大纲和内容介绍:前端全栈必备课程:Vue + Node.js 开发实战:从入门到就业
下一章:Node.js 基础与环境搭建
1. 历史长河
如何快速开发一个符合要求的网站,是每个网站开发初学者所困惑的问题;本章将从购买一个域名开始,介绍网站建设全部流程的相关知识,包括开发工具、开发技术,以及域名的备案和解析等
本章涉及的知识点如下: - 网站建设流程 - 网站搭建所使用的技术和工具 - 网站域名和服务器等 - 域名的备案和解析
1-1. 网站建设流程
百度百科中的网站定义如下:
网站(Website) 是指在因特网上根据一定的规则,使用HTML(标准通用标记语言)等工具制作的用于展示特定内容的相关网页的集合;简单来说,网站是一个沟通工具,人们可以通过网站发布自己想要公开的资讯,或者使用网站提供的相关网络服务;人们可以通过网页浏览器来访问网站,获取自己需要的资讯或者享受网络服务
网站一般不仅指网站代码和数据库本身,而且还是对服务的统称,即一般意义上的网站是指包括「 域名 + 代码 + 服务器 + 其他解析 」等服务的一个整体,而并非单纯的代码本身
也就是说,如果制作一个网站,在不考虑技术细节的情况下,最起码也需要通过以下流程才能完成一个完整的网站建设:
- 购买一个域名
- 实现域名的备案和实名认证
- 正确地解析域名至服务器或者其他服务
- 编写一套网站代码
- 在服务器或者应用容器中成功地运行网站代码
- 维持并且维护服务
🔔 Notice
代码的编写在整个网站产品的生命周期中是最重要的环节,该环节是想法的实现和需求的更新,而技术只是服务于产品和需求的工具
1-2. 网站开发技术和工具
早期的网站只能展示单纯的文本,经过十几年的发展,图像、声音、动画、视频甚至3D技术都可以通过互联网呈现;通过动态网页技术,用户之间可以交流了,越来越多的服务出现在了互联网中,包括电子邮件服务、在线聊天服务等
在互联网2.0时代,一个网站不仅仅是一个企业或服务的展示,更重要的是提供多种服务;当前的网络服务更多的是实体经济的线上延伸,越来越多的电商、外卖商家,甚至共享业务通过网站给每位使用者提供便利
互联网技术的发展使网站的功能愈加强大;网站诞生之初,其用处并非像如今这样多姿多彩,更多的是论坛、新闻、聊天这样的应用场景,而制作技术本身也被带宽、计算机性能所限制,静态网站的代码只需要一个文本文档就可以编写
伴随着网络技术和计算机性能的发展,越来越多的多媒体技术被运用在网页端,此时此刻,大名鼎鼎的「 网页三剑客 」出现在了开发者的桌面上
「 网页三剑客 」是一套强大的网页编辑工具,最初是由 Macromedia 公司开发出来的,由 Dreamweaver(简称Dw)、Fireworks(简称Fw)和 Flash 三个软件组成,如下图所示
在技术飞速发展的过程中,过时的技术被迅速淘汰,单纯地开发简单的静态页面也一步步被市场所淘汰;Adobe 公司于2005年收购了 Macromedia 公司,同时放弃开发 Fw;随着 HTML 5 标准的出现,Flash 技术因为「 先天不足 」也逐渐被淘汰,Dw 更是在如今各种开发技术的更新面前显得无能为力
时至今日,这3个软件渐渐消失在网页开发的长河之中,但它们作为一代网站开发者的标志,却刻印在开发者的记忆中
如今的网站开发技术相对于多年前的开发而言变得更加丰富多彩,虽然基本网页还是基于网页三剑客技术,但却经过了大量的更新和版本替换,出现了非常多的新兴框架和技术
如今的网站开发工具也变得异常简单,仅仅需要一个代码编辑器(俗称IDE)和一个网页浏览器,即可完成一个网站的开发和测试工作;下图总结了本节介绍的网页内容和网站技术的发展历程
2. 域名购买
域名是一个网站的重要组成部分; 一个合适的域名可以提高网站的知名度,甚至从某种程序上说,域名本身就是网站的推广标识;本节将介绍域名的基本知识,以及如何购买一个新域名
2-1. 域名简介
域名(Domain Name),也称为网域,是 Internet上 某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)
上面这段解释或许太抽象了,简单来说,域名就是用户在浏览器中输入的「 网址 」,如图所示的百度网站地址中,baidu.com 即为域名
通用的顶级域名一般分为以下3种:
- com:供商业机构使用,无限制,最常用,被大部分人所熟悉和使用
- net:原来供网络服务供应商使用,现在无限制
- org:原来供不属于其他通用顶级域名类别的组织使用,现在无限制
其实还有一种域名,作为网站服务国家或地区顶级域名的标识,如.de(德国)、.eu(欧盟)、.jp(日本)、.uk(英国)、.us(美国)等
在一个网站服务中,域名的作用就是进行请求的指向,当用户在浏览器中输入一个域名时,浏览器会通过互联网上的DNS服务器解析到网站代码所在的服务器上,这样才算完成了一次完整的网站访问操作
简单来说,域名更像是网站的别名,由根服务器进行记录,全球范围内的根服务器一共有13台;在全世界范围内不用担心如果根服务器受到攻击而导致网络中断,因为在各个地区都拥有相应的根服务器镜像,服务于当前地区或附近区域的域名解析
可以通过简单的命令行查看域名转发到真实主机中的服务器 IP 地址;下面查看 baidu.com 域名的真实 IP 地址;在 mac 系统中打开「 终端 」,使用 ping
命令,可以看到其真实的 IP 地址,如下图所示
在浏览器中输入该网站的IP地址,也会跳转至百度页面;需要注意的是,IP 地址并不一定是存放具体网站代码的主机IP 地址,也可能是 CDN 或者提供负载均衡功能的服务器 IP 地址;对于大型的服务提供商来说,仅仅一个IP地址或一台服务器是不能满足业务需求的
🔔 Notice
因为某些网站关闭了主机的 ping功能或防火墙禁用了该端口,所以在命令行窗口中的测试结果并不代表服务器当前的状态
( 如果能ping通,则返回类似于上图所示的数据,如果ping不通,则返回类似于Time Out的提示 )
2-2. 如何通过阿里云购买一个域名
购买域名需要通过专门的域名服务商
国际范围内的域名服务商中比较有名的是 godaddy、eNom 等;这类域名购买相对简单,因为解析到国外的服务器,不需要实名认证和备案等资料,但缺点也相当明显,网络访问可能出现缓慢、卡顿,甚至无法访问的情况
国内的域名服务商中知名的是阿里巴巴和腾讯,尤其是阿里巴巴,该公司在2013年1月6日收购了原本作为中国第一域名服务商的万网,合并成为阿里云;作为后起之秀的腾讯云,在这方面也做得很好
如果网站提供的服务面向的是国内用户,推荐使用阿里或腾讯的域名和主机服务,虽然价格稍显昂贵,手续较为烦琐,但是访问速度和稳定性都有不错的保证
本节就以阿里云为例介绍如何购买域名
第一步
进入阿里云页面,如图所示,单击右上角的「 登录 」按钮,可以直接使用支付宝或淘宝等账户进行登录;如果还没有账户,则单击「 免费注册 」按钮
第二步
登录后,选择「 产品 」菜单,然后选择「 域名注册 」选项,如图所示,此时会在新页面中打开阿里云旗下的域名服务商万网
第三步
输入想要购买的域名,因为域名在世界范围内都是唯一的,所以并不是所有的域名都可以直接购买;如果喜欢的域名没有被占用,单击「 加入清单 」按钮,然后再单击右侧的「 立即结算 」按钮,页面会跳转至结算页面;在该页面调整购买年限,即可像淘宝一样使用支付宝付款,但是这一步需要选择该域名是由企业还是个人持有,如图所示
第四步
单击「 立即购买 」按钮,成功付款后即可获取该域名的所有权,并且可以在阿里云管理页的域名列表中查看该域名
3. 域名的备案和解析
为了保证网络信息的安全,我国要求在国内架设服务器的网站都需要实名认证和备案;所以如果只拥有一个域名,而没有将其正确地解析到服务器端,就不能运行相关的代码和服务
3-1. 域名的实名认证和备案
阿里云为了方便用户,提供了专门用于备案的相关服务。备案主页是阿里云备案,通过提示步骤,便可备案相关的域名;各个地区的备案要求并不相同,所以具体地区的备案请以当地相关部门的审核为主
如果没有备案,则无法将域名解析到国内的云服务器中,也无法运行自己的网页代码,此时在浏览器中输入域名会进入备案提示页面
初次备案需要的资料(当前时间的备案资料,后期可能有变动)如下:
-
下载审核单,手写签字后上传,如果客服审核后没有问题,需要打印3份审核单快递到阿里云总部
-
申请幕布,并且要在幕布背景下拍照上传
-
个人需要手持身份证正、反面进行拍照,公司域名备案各地区要求不同,一般需要营业执照扫描件及公司法人的相关认证
一般来说,域名备案需要一定的审核时间,如果选择阿里云或腾讯云这样的一站式备案,并且在其网站购买了云服务器和域名,则备案时会进行信息初审;如果审核通过,会通知相关部门正式进入备案流程
普通备案一般在5个工作日内会有结果;负责审核材料的客服会帮助站长们审核并修改资料,极大地提高了备案的通过率;如果审核通过,则会显示该域名的备案号和网站信息,如下图所示
3-2. 域名相关解析
如果域名能够成功解析到服务器或提供其他的服务,那么域名的解析就是其中最为重要的一步,大部分售卖域名的服务商都提供这样的服务
最简单的域名解析即转发所有该域名的请求到一个服务器上;当然,如今的解析服务提供了更多的附加功能,包括请求量统计、DNS监控,还有更多的安全性相关功能
新建一个解析时,必须确定用户是该域名的拥有者,所以一般的解析服务都是由域名服务商提供的附加服务,可以添加的解析记录参见表
普通网站只需要添加 A 解析即可,某些应用服务器则需要使用 CNAME 解析,企业邮箱需要添加 NS 解析;本例的添加效果如下图所示
🔔 Notice
网站的解析不是立刻生效的,部分解析甚至需要一个较长的时间才可以生效,请耐心等待
4. 服务器购买
如果想要解析域名到一个 IP 地址,那么如何获取这个 IP 地址呢?对于网站来说,服务器是代码的运行环境,也是最重要的一个硬件设备,如果没有服务器,代码是不能独立运行的;可以这么说,服务器是网站的硬件支持
4-1. 云服务器
阿里云提供的服务器有以下两种
ECS云服务器
这种服务器相当于购买了一台计算机,其主页位于云服务器ECS,提供了不同型号和性能的服务器,如下图所示;ECS云服务器没有键盘或显示器,在阿里云的机房中是虚拟化的服务器,但是它拥有独立的IP和存储,通过远程方式进行连接,通过命令来实现操作
应用服务器
这种服务器不需要具体的配置,已经搭建好了完整的运行环境,但是缺乏扩展性
应用服务器虽然价格便宜,也有独立的 IP 地址,但不一定符合具体的应用环境
🔔 Notice
如果只需要简单的 Web 服务,购买一台云服务器并不是最经济且必要的选择,反而会增加不少运营和维护成本,所以有这种需求的用户推荐购买应用服务器+数据库服务
具体的购买和付款步骤与域名购买流程一致,购买之后可以在阿里云控制台看到该服务器是否启动运行
4-2. 服务器的后台管理
在阿里云上登录账户后,可以在管理页面看到购买的服务器、相关的 IP 地址和参数等
在 3-2 节的域名解析中提到过,只需要添加一条A记录,这样使用域名进行的访问都会转发到域名绑定的主机上
此时可以通过远程桌面(Windows)或SSH(Linux)的方式连接到该服务器,然后使用相关的软件或命令行进行操作;此时主机并不能处理来自用户的请求,不仅在主机上没有相应的网站服务,而且服务商也没有开放相应的端口,这些配置可以在安全组中查看,如图所示
在这组配置中,80 端口运行的是 HTTP 服务,如果希望对方访问网站,则需要开启该端口;443 端口是支持 HTTPS 加密的网站端口;原本开启的 22 端口是需要远程连接的端口(不同的云服务器可能默认端口不同),如果直接取消该端口,则无法通过 SSH 或远程桌面的方式进行连接
🔔 Notice
对于某些系统的主机可能存在两套防火墙系统,除了服务器管理后台的配置外,在本机上还需配置 iptables 等防火墙