Web前端开发技术

Appearance

元信息 ​

  • 目标：在一台机器上架设多个可独立域名访问的站点——用 hosts 模拟域名解析、用 Apache VirtualHost 配置虚拟站点，从而理解"URL 域名 → 虚拟站点 → 根目录"的对应关系
  • 关键概念：虚拟站点、hosts文件、域名解析、DNS、VirtualHost、ServerName、DocumentRoot、Web根目录
  • 关联阶段：cp1
  • 常见误区：以为一个 IP 只能放一个网站（虚拟站点正是单 IP 多站点技术）；改完 Apache 配置不重启就测试（配置不生效）；以为 hosts 里的域名全世界可访问（仅本机有效，生产须 DNS）

目标 ​

实现一台电脑上，可架设和运行多个站点（称之为虚拟站点），并且可以使用不同的域名或主机名进行访问，如：

目录准备 ​

  • 创建两个目录，每一个目录代表一个虚拟站点，如: c:\server\blog和c:\server\www

虚拟站点: 是早期使用的一种虚拟技术，就是在一台物理机器上（或一个IP地址上）运行多个站点。而从浏览器的角度，却好象是多个运行在独立物理机器上的独立站点。
当然，在今天，连物理机器都可以虚拟了，譬如云平台的VPS或ECS之类

配置主机名 ​

修改C:\windows\system32\drivers\etc\HOSTS 文件，添加两条本地域名解析记录:

ini
127.0.0.1 www.x.com
127.0.0.1 blog.x.com

生产环境或真实网络中，域名的解析是需要通过域名服务器(DNS)实现，需要购买域名等烦琐过程。为教学方便，这里使用本地的hosts文件来模拟域名，因此，仅仅只在本机上可以有效访问。
注意：某些安装杀毒软件的电脑会提示不允许更改hosts文件，请给予同意即可
参考： https://baike.baidu.com/item/localhost/2608730

配置apache ​

编辑d:\xampp\apache\conf\extra\http-vhosts.conf, 这是一个配置文件，可配置虚拟站点。

下例代码包含两个虚拟站点的配置，关键的配置项包括：网站根目录documentRoot、主机域名serverName、目录的权限等：

apache
## 站点1的配置；每架设一个站点，则增加一组<VirtualHost></VirtualHost>配置
## 此处默认为80端口，如端口被占用，请相应更改
## !!! 如你的根目录不是“c:/server/www”，请相应改为正确的路径 
<VirtualHost *:80>
    ## ServerName 设置访问该网站的域名，即浏览器中输入的网址的域名部分
    ## DocumentRoot 设置网站的根目录，网站所包含的各文件应放置于该目录下
    ServerName www.x.com    
    DocumentRoot "c:/server/www"

    ## 设置网站根目录的访问权限，如未设置，会出现access forbition的错误提示
    <Directory "c:/server/www">
        Options Indexes FollowSymLinks ExecCGI
        Require all granted
        AllowOverride None      
        Order deny,allow
        Allow from all
    </Directory>

    ## 定制日志文件的名称
    ErrorLog "logs/www-error.log"
    CustomLog "logs/www-access.log" common

</VirtualHost>

## 站点2的配置，除域名、根目录不同外，基本同上
<VirtualHost *:80>

    ServerName blog.x.com
    DocumentRoot "c:/server/blog"

    <Directory "c:/server/blog">
        Options Indexes FollowSymLinks ExecCGI
        Require all granted
        AllowOverride None      
        Order deny,allow
        Allow from all
    </Directory>

    ## 定制日志文件的名称
    ErrorLog "logs/blog-error.log"
    CustomLog "logs/blog-access.log" common    

</VirtualHost>

检验结果 ​

  • 重启apache
  • 在各站点的根目录下添加具有不同内容的 index.html文件
  • 使用浏览器用域名分别访问相应站点，查看是否成功

注：更改任何配置后，均请务必重启apache

host工具 ​