有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

操作场景

弹性微服务通过 应用实例+CFS 的方式提供静态网站资源托管的能力,本文以业界流行的静态网站服务 Hugo 为例,为您提供静态资源托管的最佳实践。下述将通过 Hugo 生成个人静态博客,然后通过弹性微服务部署反向代理应用,配合 CFS 管理静态资源,最后通过弹性微服务提供的访问配置,在公网上提供对个人静态博客的访问。
整体流程如下:

操作步骤

步骤1:本地通过 Hugo 生成静态博客

1. 安装 Hugo(参考 Install Hugo)。 以 MacOS 系统为例,通过如下命令安装:
brew install hugo
2. 执行如下命令创建静态站点。
hugo new site quickstart
3. 执行如下命令添加主题。
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo theme = \\"ananke\\" >> config.toml
4. 执行如下命令添加博客。
hugo new posts/my-first-post.md
5. 执行如下命令构建静态页面。
hugo -D
6. 生成的静态内容存放在 quickstart 项目的 public/ 目录下。



步骤2:上传静态博客内容到 CFS

1. 参考 CFS:创建文件系统及挂载点 购买 CFS 文件系统。
注意
购买的 CFS 文件系统的区域VPC 网络 应与在弹性微服务上部署应用的区域保持一致。
2. 参考 CFS:在 Linux 客户端上使用 CFS 文件系统CFS:在 Windows 客户端上使用 CFS 文件系统 将 hugo 生成的 public/ 目录中的文件上传到 CFS 文件系统根目录或子目录中。

步骤3:在弹性微服务上部署 nginx 应用并关联 CFS

1. 登录 弹性微服务控制台,在应用部署所在的环境中关联上述购买的 CFS 实例。


2. 应用管理 页面创建一个名为 hugo 的应用。


3. 部署应用,在持久化存储模块选择已关联的 CFS 存储资源。



步骤4:在弹性微服务上配置 nginx 的网络访问

方案一:配置转发规则(推荐)
方案二:配置公网 CLB
1. 应用管理 页面,单击刚刚创建的应用的“ID”,进入应用基本信息页面。
2. 在应用基本信息页面,在访问配置模块单击前往配置,进入环境访问配置页面。


3. 在环境访问配置页面,单击新建,创建一条访问配置规则。


4. 单击完成,可获取如下 IP 地址。


通过生成的地址对 hugo 服务进行访问:



1. 应用管理 页面,单击刚刚创建的应用的“ID”,进入应用基本信息页面。
2. 在应用基本信息页面,在访问配置模块单击右上角的编辑并更新,添加公网 CLB。


3. 选择公网访问方式,填写端口映射关系。


4. 单击提交后,可获取如下公网访问IP。


通过生成的地址对 hugo 服务进行访问:




步骤5:(可选) 配置域名

1. 参考 域名注册 注册域名。
2. 将域名与上述生成的 CLB 实例进行关联,关联后即可通过域名访问静态网站,参考 配置 DNS 解析 DNSPod 将域名指向 CLB

步骤6:(可选) 配置防火墙

若静态网站的访问是通过 转发配置 设置,则可与腾讯云的 Web 应用防火墙 结合,对静态网站进行安全保护。详细配置可参见 配置 WAF 对负载均衡的监听域名进行 Web 安全防护

步骤7:(可选) 配置 CDN

静态网站为了给用户更好的体验,通常会与 CDN 结合提供访问加速,托管的静态网站可与腾讯云 CDN 结合,参见 腾讯云 CDN 新手指引