架构师教你来学大型网站架构的技术细节前端架构的工作原理

　　前端架构
　　前面从宏观的角度介绍了大型网站架构。
　　从本篇开始，我们将着眼于细节，逐一展开介绍前面章节中提到的前端、后端、云计算服务分层的技术架构。
　　其中，前端部分是直接影响用户体验的，因此本篇先介绍前端部分的架构。
　　需要注意的是，这里的前端指的是B/S架构网站中的前端网页，是静态网页。 前端的工作原理
　　在讨论前端架构之前，我们先搭建一个前端Web服务器，再通过构造一个简单的网页来了解其工作原理。在了解前端网页的工作原理之后，我们才能更好地理解前端架构需要注重的细节。 Web服务器搭建
　　网页想要被非本机的浏览器访问，便需要搭建一个Web服务器。目前比较主流的Web服务器软件有三个，即Apache、IIS和Nginx。
　　Apache是目前使用最多的Web服务器软件，它拥有极其稳定的性能，扩展模块全面、多样，且可以运行在Windows和Linux等多个平台上；IIS是微软提供的互联网基本服务，它除了提供Web服务外，还提供FTP、NNTP和SMTP等服务，不过IIS只能运行在Windows操作系统上；Nginx是轻量级的Web服务器软件，它支持负载均衡和反向代理等功能，扩展模块虽然没有Apache全面，但比Apache占用的内存和资源少，在高并发处理上表现更好。
　　Web服务器的选取需要根据具体情况而定。对于一般的大型网站而言，因为服务器操作系统一般以更为稳定的Linux为主，并且服务器需要应对大量的网页请求（高并发），所以本书选用Nginx作为Web服务器软件。
　　Nginx的安装以Windows系统和CentOS系统为例。选择这两个系统进行介绍是因为Windows一般是开发人员在开发时使用的操作系统，而CentOS一般是网站服务器操作系统。
　　1.在Windows系统中安装Nginx
　　在Windows系统中安装Nginx的具体操作步骤如下：
　　（1）从Nginx官网（ http://nginx.org/en/download.html ）下载Nginx，一般选择下载稳定版本。官网上的Nginx版本划分如图3.1所示，这里我们下载Windows系统上的稳定版本。
　　图3.1 Nginx官网上的版本划分
　　（2）下载完Nginx压缩包后，将其解压到一个目录下，其目录结构如图3.2所示。其中，html文件夹是默认存放网页资源的地方，conf文件夹存放的是Nginx的相关配置文件，logs文件夹存放的是Nginx的运行日志。
　　图3.2 解压后的Nginx目录结构
　　（3）修改Nginx配置，Nginx的配置文件是conf/nginx.conf。默认的配置文件如代码3.1所示，其中，＂…＂是省略的意思，＂#＂后面是对属性的注释。如果是本地调试，保持默认配置即可。
　　代码3.1　默认的Nginx配置 …
　　server {
　　listen 80; #端口，80为HTTP的默认端口
　　server_name default_server; #服务名称
　　…
　　location / {
　　root html; #网页资源文件夹，这里的html指的是图3.2中的html文件夹
　　index index.html; #网站默认网页
　　}
　　…
　　}
　　…
　　…
　　（4）启动服务，双击图3.2中的nginx.exe文件即可，运行窗口会一闪而过。在不修改默认配置且正常启动的情况下，在浏览器的地址中输入http://localhost会打开Nginx的默认网页，如图3.3所示。这个默认网页是图3.2中html文件夹里的index.html。
　　图3.3 Nginx的默认网页
　　如果不能正常启动，可以查看图3.2中logs文件夹里的运行日志。不能启动一般都是由于端口冲突造成的，此时可以修改步骤（3）中的listen配置项。
　　如果在步骤（3）中修改了server_name和listen配置项，则需要在浏览器的地址栏中输入server_name:listen。例如，将server_name设置为192.168.3.3，listen设置为8081，那么在浏览器的地址栏中应该输入http://192.168.3.3:8081。一般情况下，将server_name设置成default_server即可。
　　另外，可以通过在任务管理器中结束所有nginx.exe任务来关闭Nginx服务，如图3.4所示。
　　图3.4 关闭Nginx服务
　　（5）设置防火墙。如果非本机的浏览器想要访问网页，则需要设置防火墙端口的权限。对于大型网站而言，服务器系统一般为Linux，Windows系统下的Nginx安装一般只是为了方便本地开发，非本机浏览器访问的场景比较少，因此防火墙的设置不是必需的。如果开发时有非本机访问的情况，可以暂时关闭Windows防火墙。
　　2.在CentOS系统中安装Nginx
　　在Centos系统中安装Nginx时，虽然也可以从官网上下载安装，但是操作比较复杂。因此，这里推荐使用yum安装，这种安装方式简单方便且不易出错，具体操作步骤如下：
　　（1）添加Nginx源。在默认情况下，CentOS系统中不包含Nginx源，添加Nginx源的命令如代码3.2所示，其中＂＂为换行符。添加成功后，会在/etc/yum.repos.d目录下多出一个nginx.repo文件。
　　代码3.2　添加Nginx源的命令 sudo rpm -ivh
　　http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.
　　el7.ngx.noarch.rpm
　　（2）安装Nginx的命令如代码3.3所示。在CentOS系统中，Nginx默认安装在/etc/nginx目录下，配置文件是/etc/nginx/nginx.conf，运行日志的路径是/var/log/nginx/，默认网页资源存放在/usr/share/nginx/html/目录下。
　　代码3.3　安装Nginx的命令
　　sudo yum -y install nginx
　　（3）修改配置。Nginx的配置文件是/etc/nginx/nginx.conf，默认的配置文件如代码3.4所示，其中，＂…＂是省略的意思，＂#＂后面是对属性的注释。如果是本地调试，保持默认配置即可。
　　代码3.4　CentOS系统中的Nginx配置 server {
　　listen 80; #端口，80为HTTP的默认端口
　　server_name default_server; #服务名称
　　…
　　location / {
　　root /usr/share/nginx/html; #网页资源文件目录
　　index index.html; #网站默认网页
　　}
　　…
　　}
　　…
　　（4）启动服务。设置Nginx开机自动启动、启动服务和停止服务的命令如代码3.5所示。其中，＂#＂表示注释部分，输入命令时不需要输入，后文不再赘述。
　　代码3.5　Nginx的启动命令 sudo systemctl enable nginx #设置开机启动
　　sudo systemctl start nginx #启动服务
　　sudo systemctl stop nginx #停止服务
　　（5）配置防火墙。一般经过步骤（4）的配置就能启动Nginx了，但如果防火墙是开启状态的话，非本机浏览器是不能访问网页的，因此这里需要配置防火墙。配置防火墙的命令如代码3.6所示，命令需要按顺序执行。
　　代码3.6　配置防火墙的命令 sudo firewall-cmd --add-service=http --permanent #开启防火墙的HTTP服务
　　#打开端口，根据Nginx的端口配置，替换80即可
　　sudo firewall-cmd --add-port=80/tcp –permanent
　　sudo firewall-cmd --reload #重启防火墙
　　防火墙配置成功后，非本机浏览器访问网页的效果如图3.5所示。
　　图3.5 非本机浏览器访问网页
　　需要注意的是，如果有明确的Nginx版本要求的话，需要从官网上下载安装。 构造一个简单的网页
　　安装完Nginx后，有一个默认的网页，如图3.3或图3.5所示。这个网页只有一个HTML文件，这与我们平常的网页结构不一样，这样的网页会造成我们对前端网页工作原理的理解不够全面。我们一般把一个网页分成一个HTML文件、多个CSS样式文件和多个JavaScript文件，因此在介绍前端工作原理之前，我们还需要构造一个简单的网页，该网页将包含一个HTML文件、两个CSS文件和两个JavaScript文件。
　　注意： 本节构造的网页只是为了方便对3.1.3小节的讲解，其中的编码细节不作为现实编码的参考。
　　1.创建一个HTML文件
　　创建一个abc.html文件，如代码3.7所示。HTML文件主要用来设置网页的属性和定义页面元素，这个页面的元素主要包括标题、一行文字和按钮。
　　代码3.7　abd.html文件的代码 简单的例子
　　
　　简单的翻译例子
　　Hello World.
　　转换