theme: vuepress

快捷跳转

关于本课程大纲和内容介绍：前端全栈必备课程：Vue + 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 等防火墙

如何从零开始建设一个网站 「 Vue + Node.js 开发实战 」