15. 安装配置Apache服务

什么是网页服务

网页服务是一种通过互联网提供网页内容的服务。它基于客户端 - 服务器（Client - Server）模型。在这个模型中，服务器是存储网页相关资源（如 HTML 文件、图片、脚本等）的计算机设备，而客户端是用户用来访问这些资源的工具，最常见的客户端就是网页浏览器（如 Chrome、Firefox、Safari 等）。
当用户在浏览器中输入一个网址（例如http://www.example.com）时，浏览器会向对应的服务器发送一个请求。这个请求通过互联网的网络协议（主要是 HTTP 或 HTTPS）传输。服务器接收到请求后，会根据请求的内容查找相应的网页资源，然后将这些资源打包并通过网络发送回浏览器。浏览器再将接收到的资源进行解析和渲染，最终呈现在用户的屏幕上，形成用户所看到的网页。

网页服务的组成部分

服务器软件：这是网页服务的核心部分，如 Apache、Nginx 等。这些软件负责接收客户端请求、处理请求并发送响应。以 Apache 为例，它会监听特定的端口（通常是 80 端口用于 HTTP，443 端口用于 HTTPS），等待客户端连接。当有请求到来时，它会根据配置文件中的规则，从服务器的文件系统中找到对应的网页文件，并将其发送给客户端。
网页文件：包括 HTML（超文本标记语言）文件，它是构建网页的基础。HTML 文件定义了网页的结构，如标题、段落、链接、图片等元素的位置。例如，一个简单的 HTML 文件可能如下：

<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is my first web page.</p>
</body>
</html>

除了 HTML，还包括 CSS（层叠样式表）用于控制网页的样式，如字体颜色、大小、布局等；JavaScript 文件用于实现网页的交互功能，如菜单的展开和收缩、表单验证等。

网络协议：主要是 HTTP（超文本传输协议）和 HTTPS（HTTP Secure）。HTTPS 后续课程再说。

网页服务的应用场景

企业网站：企业通过网页服务展示公司信息、产品介绍、联系信息等。例如，一家电子产品制造企业会有一个官方网站，在网站上展示其最新的产品型号、产品特点、技术参数等内容，方便客户了解和购买产品。
电子商务网站：如淘宝、京东等。这些网站通过网页服务提供商品展示、购物车功能、支付结算等一系列服务。用户可以在网页上浏览商品图片、查看商品详情、将商品加入购物车，然后通过安全的支付通道完成购买。
社交媒体网站：像 Facebook、微博等。它们利用网页服务让用户创建和分享内容，如发布状态更新、分享照片和视频、评论和点赞等。用户通过浏览器访问这些网站，与朋友、家人和关注的人进行互动。
新闻媒体网站：各大新闻机构（如 BBC、CNN、新华社等）通过网页服务发布新闻文章、图片和视频新闻。用户可以在网页上阅读最新的国内外新闻，浏览新闻专题，并且通过评论区发表自己的观点。

对网页服务的理解

网页服务的本质是共享网页文件
- 从本质上来说，网页服务就是将存储在服务器上的网页文件共享给客户端。服务器就像是一个文件仓库，里面存放着各种各样的网页文件。这些文件包括 HTML（用于构建网页的基本结构）、CSS（用于控制网页的样式）、JavaScript（用于实现网页的交互功能）以及图片、视频等多媒体文件。
- 例如，当一个网站开发者创建了一个网站，他会把所有相关的网页文件存储在服务器的特定目录下（如 Apache 服务器默认的 /var/www/html目录）。当客户端（浏览器）请求访问这个网站时，网页服务（如 Apache 服务器）会从这个目录中找到对应的文件，然后把它们发送给客户端。这就好比图书馆的管理员（网页服务）根据读者（客户端）的要求，从书架（服务器的文件存储目录）上找到相应的书籍（网页文件）并交给读者。
客户端是文件的接收和解释器
- 客户端（浏览器）作为文件的接收者，它的主要任务是接收从服务器发送过来的网页文件。当浏览器向服务器发送一个 HTTP 请求后，它会等待服务器的响应。一旦收到服务器发送的网页文件，浏览器就开始对这些文件进行处理。
- 对于 HTML 文件，浏览器会按照 HTML 的语法规则来解析它。例如，浏览器会识别 <html>标签作为文档的开始，<body>标签内的内容是网页的主体部分，<h1>标签表示一级标题，<p>标签表示段落等。它会根据这些标签来构建网页的结构，确定各个元素在屏幕上的位置。
- 对于 CSS 文件，浏览器会根据 CSS 的样式规则来应用样式。如果 CSS 文件中有一条规则是 body { background - color: #fff; }，浏览器就会将网页主体部分（<body>标签内的内容）的背景颜色设置为白色。
- 对于 JavaScript 文件，浏览器会执行其中的脚本代码。例如，如果 JavaScript 文件中有一个函数用于在用户点击按钮时显示一个弹出框，当用户在网页上点击相应的按钮时，浏览器就会执行这个函数，弹出一个对话框。
- 就像一个翻译官（浏览器），它接收来自远方（服务器）的各种语言（网页文件类型）的文件，然后把它们翻译成用户能够理解的视觉和交互体验（网页在屏幕上的呈现和交互）。而且，不同的浏览器（如 Chrome、Firefox 等）可能会在解释这些文件时有一些细微的差别，就像不同的翻译官可能会有不同的翻译风格一样。

Apache服务

什么是 Apache 服务器

Apache 是一款开源的、跨平台的网页服务器软件。它在互联网中被广泛应用，主要功能是接收来自客户端（如浏览器）的 HTTP（超文本传输协议）请求，并将存储在服务器上的网页文件（如 HTML、CSS、JavaScript 文件等）发送回客户端，从而使用户能够在浏览器中访问网页。
例如，当用户在浏览器中输入一个网址（如https://www.example.com）时，浏览器会向该网址对应的服务器发送一个 HTTP 请求。如果该服务器运行着 Apache 服务器软件，Apache 就会处理这个请求，找到对应的网页文件，并将其内容返回给浏览器，浏览器再将这些内容渲染成用户看到的网页。

Apache 的配置文件

Apache 的主要配置文件是 httpd.conf，在 CentOS 7 中，它通常位于 /etc/httpd/conf/目录下。这个文件包含了许多指令，用于控制 Apache 服务器的行为。

网页文件的根目录

在网页服务器中，网页文件的根目录是服务器查找网页文件的起始位置。对于 Apache 服务器（在 CentOS 7 中），默认的网页文件根目录通常是 /var/www/html。这个目录就像是一棵大树的根部，所有要在网页上显示的内容（如 HTML 文件、图片、CSS 和 JavaScript 文件等）都可以放在这个目录或者它的子目录中。

默认文档

默认文档是当客户端请求一个目录而没有指定具体的文件名时，服务器自动返回的文档。例如，当用户在浏览器中输入 http://example.com（没有指定具体的文件名，如 index.html）时，服务器会查找默认文档并返回。这是为了方便用户访问网站，不需要用户每次都输入完整的文件名。

实验一：网页服务基础实验

环境要求-A机器：

正确配置IP地址，静态，DNS指向自己
正确配置本地yum源

安装Apache

yum install httpd

重启服务，关闭防火墙，验证安装

systemctl  restart httpd
systemctl enable httpd
systemctl stop firewalld

用浏览器打开A机器的IP地址，将看到默认的Apache欢迎页面表示成功

修改网站

在/var/www/html路径下创建以下内容：

文件夹news

文件index.html、test.html

文件news/index.html、文件news/n1.html

其中index.html内容为"this is index.html"

其中test.html内容为"this is test.html"

其中news/index.html内容为"this is index.html"

其中news/n1.html内容为"this is n1.html"

[root@localhost ~]# cd /var/www/html/
[root@localhost html]# mkdir news
[root@localhost html]# touch index.html
[root@localhost html]# touch test.html
[root@localhost html]# touch news/index.html
[root@localhost html]# touch news/n1.html
[root@localhost html]# echo "this is index.html" >index.html 
[root@localhost html]# echo "this is test.html" >test.html
[root@localhost html]# echo "this is news/index.html" >news/index.html 
[root@localhost html]# echo "this is news/n1.html" >news/n1.html

思考理解

默认情况下，网页文件的根目录为/var/www/html，假设网址为http://192.168.11.111

结合“网页文件的根目录”、“默认文档”等知识理解以下内容：

服务器真实路径	访问网址
/var/www/html/index.html	http://192.168.11.111
/var/www/html/test.html	http://192.168.11.111/test.html
/var/www/html/news/index.html	http://192.168.11.111/news/
/var/www/html/news/n1.html	http://192.168.11.111/news/n1.html
/var/www/html/news/img.jpg	http://192.168.11.111/news/img.jpg

美化网站

建议使用scp等方式上传文件和img.jpg

index.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<style>
			/* 整体页面样式 */     body {       font-family: Arial, sans-serif;       margin: 0;       padding: 0;       background-color: #f7f7f7;     }      /* 导航栏样式 */     nav {       background-color: #333;       color: white;       padding: 15px 0;       text-align: center;     }      nav ul {       list-style-type: none;       margin: 0;       padding: 0;     }      nav ul li {       display: inline-block;       margin-right: 25px;     }      nav ul li a {       color: white;       text-decoration: none;       padding: 8px 12px;       transition: background-color 0.3s ease;     }      nav ul li a:hover {       background-color: #555;     }      /* 页面主体样式 */    .container {       max-width: 800px;       margin: 30px auto;       background-color: white;       padding: 20px;       box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);     }      h1 {       text-align: center;       color: #333;     }      p {       line-height: 1.6;       text-align: justify;     }     .link-section {       margin-top: 30px;       text-align: center;     }     .link-section a {       display: inline-block;       background-color: #007BFF;       color: white;       text-decoration: none;       padding: 10px 20px;       border-radius: 5px;       margin-right: 15px;       transition: background-color 0.3s ease;     }     .link-section a:hover {       background-color: #0056b3;     }
		</style>
	</head>
	<body>
		<!-- 导航栏 -->
		<nav>
			<ul>
				<li>
					<a href="#">首页</a>
				</li>
				<li>
					<a href="#">关于我们</a>
				</li>
				<li>
					<a href="#">产品服务</a>
				</li>
			</ul>
		</nav> <!-- 页面主体内容 -->
		<div class="container">
			<h1>欢迎来到我们的网站</h1>
			<p> 这里是网站的首页，为您呈现丰富的资讯与精彩内容。您可以通过下方链接查看最新消息。 </p>
			<div class="link-section">
				<a href="news/index.html">新闻首页</a>
				<a href="news/n1.html">新闻详情1</a>
			</div>
		</div>
	</body>
</html>

news/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新闻首页</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
    }

   .news-container {
      max-width: 600px;
      margin: 20px auto;
      background-color: white;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    h2 {
      text-align: center;
      color: #333;
    }
      .back-button {
      display: block;
      margin: 20px auto;
      background-color: #007BFF;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 5px;
      text-align: center;
      transition: background-color 0.3s ease;
    }

   .back-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <div class="news-container">
    <h2>新闻首页 - 最新消息汇总</h2>
    <p>这里将持续更新各类热点新闻，敬请关注。</p>
    <a href="#" class="back-button" onclick="window.history.back(); return false;">返回</a>
  </div>
</body>

</html>

news/n1.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" width="device-width, initial-scale=1.0">
  <title>新闻详情1</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f7f7f7;
    }

   .news-detail-container {
      max-width: 600px;
      margin: 20px auto;
      background-color: white;
      padding: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    h2 {
      text-align: center;
      color: #333;
    }

    p {
      line-height: 1.6;
      text-align: justify;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      margin: 15px auto;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

   .back-button {
      display: block;
      margin: 20px auto;
      background-color: #007BFF;
      color: white;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 5px;
      text-align: center;
      transition: background-color 0.3s ease;
    }

   .back-button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
  <div class="news-detail-container">
    <h2>新闻详情1 - 重大突破事件</h2>
    <img src="img.jpg" alt="相关图片说明">
    <p>详细介绍此次重大突破事件的来龙去脉、影响范围等详细内容......你可以在这里补充更丰富、详实的新闻报道文字内容，对事件展开深度解读，阐述其背后所蕴含的意义以及对相关领域后续发展走向的预判等等，让读者能够通过这段文字清晰、全面地掌握该事件的核心要点与关键信息。</p>
    <a href="#" class="back-button" onclick="window.history.back(); return false;">返回</a>
  </div>
</body>

</html>