【记录8】华为云耀云服务器L实例-静态网页项目部署

书接上文,在部署了springboot后端项目之外,我们同样可以进行一些静态网页的部署。本篇将以最简单的html文件为例,介绍部署静态网页到华为云耀云服务器L实例上的操作步骤。

首先,在本地准备一个html文件,命名为web.html,使用记事本打开它,以下是简单的内容示例:

xml 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>简单的静态网站</title>
</head>
<body>
    <header>
        <h1>欢迎访问我的静态网站</h1>
    </header>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/about">关于我们</a></li>
            <li><a href="/contact">联系我们</a></li>
        </ul>
    </nav>
    <main>
        <h2>欢迎来到我们的网站</h2>
        <p>这是一个简单的静态网站示例,用于演示基本的HTML结构。</p>
    </main>
    <footer>
        <p>&copy; 2023 我的静态网站</p>
    </footer>
</body>
</html>

接下来,让我们开始它在华为云耀云服务器L实例上的部署。

1. 连接到云服务器: 使用远程连接工具连接到CentOS 7云服务器,这里依旧选择Putty

2. 更新系统: 为确保系统安全和稳定性,首先更新服务器上的软件包。

执行以下指令:

bash 复制代码
sudo yum update

3. 安装Web服务器: 可以选择使用Apache或Nginx。在这个示例中,我们将使用Apache作为Web服务器。安装Apache:

bash 复制代码
sudo yum install httpd

4. 启动Apache服务: 安装完成后,启动Apache服务并设置它在系统启动时自动启动:

bash 复制代码
sudo systemctl start httpd

sudo systemctl enable httpd

5. 配置防火墙: 允许HTTP流量通过防火墙:

bash 复制代码
sudo firewall-cmd --permanent --add-service=http

sudo firewall-cmd --reload

倘若出现红色 FirewallD is not running,意味着防火墙并未开启,不会对任何流量通过做限制,可以在此选择输入指令开启,也可以跳过这一步直接进行下一步

6. 上传静态网站文件: 将静态网站文件上传到服务器。可以使用SCP、SFTP或FTP等工具将文件传输到服务器的/var/www/html目录中,在这里,我们选择使用scp

bash 复制代码
scp -r /path/to/your/static/site/* user@your_server_ip:/var/www/html/

7. 设置文件权限: 确保Apache用户可以访问文件:

输入指令:

bash 复制代码
sudo chown -R apache:apache /var/www/html/

8. 重启Apache: 重启Apache以使配置生效:

bash 复制代码
sudo systemctl restart httpd

现在,我们的静态网站web.html应该已经部署在CentOS 7华为云服务器上,并可以通过服务器的IP地址或域名进行访问。确保静态网站文件位于/var/www/html/目录中(或者虚拟主机配置所指定的目录)。

接下来,输入网址:公网ip/web.html进行访问尝试

成功访问我们在云服务器上部署的静态网站。

本篇中,我们成功在华为云耀云服务器L实例上部署了一个简单的html静态网站,而这只是一个开始,华为云是一个提供强大而稳定服务的云服务器,可支持更加复杂的前端项目部署。

相关推荐
lqj_本人7 小时前
Flutter三方库适配OpenHarmony【apple_product_name】华为nova系列设备映射表
flutter·华为
一只大侠的侠9 小时前
HarmonyOS实战:React Native实现Popover内容自适应
react native·华为·harmonyos
无巧不成书021810 小时前
【RN鸿蒙教学|第7课时】表单开发实战:TextInput输入+表单验证+鸿蒙多终端适配
react native·华为·开源·交互·harmonyos
钛态12 小时前
Flutter for OpenHarmony:mason_cli 拒绝重复劳动,用砖块构建你的代码模板(强大的脚手架生成器) 深度解析与鸿蒙适配指南
flutter·ui·华为·自动化·harmonyos
星空222312 小时前
【HarmonyOS】day30:React Native实战:实现高性能 StickyHeader(粘性标题)组件
react native·华为·harmonyos
无巧不成书021815 小时前
【RN鸿蒙教学|第8课时】表单优化+AsyncStorage数据持久化(本地缓存)+ 多终端兼容进阶
react native·缓存·华为·交互·harmonyos
●VON16 小时前
HarmonyOS应用开发实战(基础篇)Day06-《常见组件》
华为·harmonyos
盐焗西兰花17 小时前
鸿蒙学习实战之路-STG系列(1/11)-屏幕时间守护服务全攻略
学习·华为·harmonyos
一只大侠的侠17 小时前
HarmonyOS实战:React Native实现Popover弹出位置精准控制
react native·华为·harmonyos
●VON18 小时前
HarmonyOS应用开发实战(基础篇)Day05-《常见布局Row和Column》
学习·华为·harmonyos·鸿蒙·von