Apache 安装与部署完整手册（含静态网站、JavaScript网站、ECharts案例，支持在线与离线部署）

The god of big data

已于 2025-08-05 10:27:12 修改

阅读量804

点赞数 19

CC 4.0 BY-SA版权

分类专栏：建站大Big数据Data 教程文章标签： apache web3 html5 css3 javascript

于 2025-08-05 01:14:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_48953586/article/details/149918548

教程同时被 3 个专栏收录

50 篇文章

订阅专栏

大Big数据Data

30 篇文章

订阅专栏

建站

7 篇文章

订阅专栏

一、前言

本文档适用于 Ubuntu 系统下，Apache 的部署与网站发布，覆盖静态网页、JS 网站、ECharts 数据可视化案例，含在线与离线安装方式，适合初学者学习与进阶使用。

二、Apache 在线部署

1. 更新软件源

sudo apt update

2. 安装 Apache

sudo apt install apache2 -y

3. 启动并设置开机自启

sudo systemctl start apache2
sudo systemctl enable apache2

4. 查看默认网页

在浏览器中访问：http://你的IP地址

三、Apache 离线部署（适用于无法联网的服务器，如VM）

1. 在线机器准备离线包

mkdir apache_offline_pkg && cd apache_offline_pkg
sudo apt-get install --download-only apache2 apache2-bin apache2-data apache2-utils -y

2. 打包离线包

tar czvf apache_offline_pkg.tar.gz *.deb

3. 拷贝到目标 Ubuntu 虚拟机（VM中可通过挂载 ISO 或共享文件夹完成）

4. 安装 Apache（离线）

tar xzvf apache_offline_pkg.tar.gz
sudo dpkg -i *.deb

5. 检查安装

apache2 -v

四、发布静态网页

1. 替换默认网页目录

默认网页目录在：/var/www/html

2. 创建自定义网页

echo "<h1>欢迎访问我的站点</h1>" | sudo tee /var/www/html/index.html

3. 设置权限

sudo chown -R www-data:www-data /var/www/html
sudo chmod -R 755 /var/www/html

五、发布 JavaScript 网站

1. 示例结构

/var/www/html/myjs/
├── index.html
├── script.js
└── style.css

2. 示例 index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS 示例</title>
  <script src="script.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>这是一个 JavaScript 示例页面</h1>
</body>
</html>

3. 浏览器访问

http://你的IP地址/myjs/

六、ECharts 可视化页面示例

1. 结构

/var/www/html/echarts/
├── index.html
└── echarts.min.js

2. index.html 示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>ECharts 示例</title>
  <script src="echarts.min.js"></script>
</head>
<body>
  <h2 style="text-align:center;">销量图表</h2>
  <div id="main" style="width: 600px;height:400px;"></div>
  <script>
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: '产品销量'
      },
      tooltip: {},
      xAxis: {
        data: ["衬衫","毛衣","裤子","鞋子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10]
      }]
    };
    myChart.setOption(option);
  </script>
</body>
</html>

3. 下载离线包

你可以从官网下载 ECharts： https://github.com/apache/echarts/releases

将 echarts.min.js 放入 /var/www/html/echarts/ 目录即可。

七、自动化部署脚本（适用于离线 VM 安装）

#!/bin/bash
# apache_offline_deploy.sh

set -e

# 解压离线包
mkdir -p /tmp/apache_offline && tar xzvf apache_offline_pkg.tar.gz -C /tmp/apache_offline

# 安装 Apache
cd /tmp/apache_offline
sudo dpkg -i *.deb

# 启动 Apache
sudo systemctl start apache2
sudo systemctl enable apache2

# 发布静态网页示例
echo "<h1>Apache 已成功离线部署！</h1>" | sudo tee /var/www/html/index.html