场景体验:基于函数计算快速搭建Vuepress博客

本文涉及的产品
对象存储 OSS,20GB 3个月
函数计算FC,每月15万CU 3个月
对象存储 OSS,内容安全 1000次 1年
简介: 本场景介绍使用函数计算服务搭建一个Vuepress博客。

体验简介

本场景介绍使用函数计算服务搭建一个Vuepress博客。

背景知识

本场景主要涉及以下云产品和服务:

● 函数计算(FunctionCompute)

函数计算是事件驱动的全托管计算服务。使用函数计算,您无需采购与管理服务器等基础设施,只需编写并上传代码。函数计算为您准备好计算资源,弹性地可靠地运行任务,并提供日志查询、性能监控和报警等功能。函数计算帮助您无需管理服务器(Serverless),仅专注于函数代码就能快速搭建应用。函数计算能够弹性地伸缩,您只需要按使用量付费。
函数计算Serverless服务和自建服务相比有以下优点:
○ 上手简单,只专注业务逻辑开发,极大提高工程开发效率。
○ 自建方案有太多学习和配置成本,例如针对不同场景,ESS需要做各种不同的参数配置系统环境的维护升级麻烦等。
○ 免运维,函数执行级别粒度的监控和告警。
○ 毫秒级弹性扩容,保证弹性高可用,同时能覆盖延迟敏感和成本敏感类型。

● 对象存储OSS

对象存储OSS是一款海量、安全、低成本、高可靠的云存储服务,提供99.9999999999%(12个9)的数据持久性,99.995%的数据可用性。多种存储类型供选择,全面优化存储成本。

● CDN

CDN通过广泛的网络节点分布,提供快速、稳定、安全、可编程的全球内容分发加速服务,支持将网站、音视频、下载等内容分发至接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。

● Serverless Devs开发者工具

Serverless Devs是一个组件化与插件化的Serverless开发者平台,开发者可以在平台中可插拔式的使用不同Serverless的服务和框架,同时可参与组件和插件的开发。无论是工业级的Serverless服务,还是各类开源的Serverless框架,Serverless Devs都可友好支持。开发者无需对市面上每一款Serverless工具进行研究和学习,只需通过Serverless Devs,就可以简单、快捷的“上手”主流Serverless服务和框架。

● Vuepress
Vuepress是一款轻量级的前端博客系统。更多信息请参见Vuepress文档。

创建资源

开通函数计算服务

在使用函数计算前,您需要开通函数计算服务。

说明 :

本场景中提供的阿里云子账号无函数计算服务操作权限,所以请使用您自己的阿里云账号操作。您无需担心扣费问题,因为函数计算服务有一定的免费额度,请参见计费方式

  1. 使用您自己的阿里云账号登录阿里云控制台,然后进入函数计算详情页
  2. 单击免费开通

img

  1. 阅读《函数计算服务协议》勾选同意服务协议,最后单击立即开通

img

  1. 看到如下页面表示开通成功。

img

开通CDN服务

在使用CDN服务前,您需要开通CDN服务。

说明 :

本场景中提供的阿里云子账号无CDN服务操作权限,所以请使用您自己的阿里云账号操作。CDN具体计费说明请参见计费方式。

  1. 使用您自己的阿里云账号登录阿里云控制台,然后进入CDN服务详情页
  2. 单击立即开通

img

  1. 阅读《内容分发网络CDN服务协议》勾选同意服务协议,最后单击立即开通

img

  1. 看到如下页面表示开通成功。

img

安装Serverless Devs命令行工具

  1. 安装Node.js环境。
    1. 执行如下命令,下载Node.js安装包。
wget https://npm.taobao.org/mirrors/node/v12.4.0/node-v12.4.0-linux-x64.tar.xz
  1. 执行如下命令,解压安装包并重命名。
tar -xvf node-v12.4.0-linux-x64.tar.xz && mv node-v12.4.0-linux-x64/ /usr/local/node
  1. 执行如下命令,配置环境变量。
echo "export PATH=$PATH:/usr/local/node/bin" >> /etc/profile
source /etc/profile
  1. 执行如下命令,安装Serverless-Devs工具。
npm install @serverless-devs/s -g

说明 :

如果安装过程较慢,可以使用淘宝npm源,安装命令为npm --registry=https://registry.npm.taobao.org install @serverless-devs/s -g。

  1. 执行如下命令,查看版本并检查安装是否正确。
s -v

配置阿里云账号信息配置阿里云账号信息

说明:

本场景提供免费的ECS服务器,但是使用的函数计算服务是开通在您账号下,以下配置信息也是需要配置AKID和AKSecret信息。

执行如下命令,配置账号信息。

s config add

然后根据提示填写以下信息。

  • 云厂商:选择阿里云(alibaba)。

img

  • AccessKeyID和AccessKeySecret:请在安全信息管理页面查看您账号的AccessKey ID和AccessKey Secret。
    • 如果您使用的是阿里云主账号,请在安全信息管理页面的安全提示弹框中单击继续使用AccessKey。

img

  • 如果您使用的是阿里云RAM子用户,需要确保您的子用户拥有函数计算管理权限AliyunFCFullAccess,请参见为RAM用户授权

如下图所示为您的AccessKey ID和AccessKey Secret。如果您的账号未使用过AccessKey,请单击右上角创建AccessKey。

img

配置成功后显示类似如下。

搭建Vuepress博客项目

\1. 执行以下命令,在当前路径初始化一个Vuepress项目。

s init devsapp/website-vuepress

a. 返回结果如下,输入项目文件名website-vuepress。

img

b. 安装依赖组件,输入yes按回车

img

c. 输入OSS Bucket名称后按回车

说明:阿里云OSS控制台中创建的Bucket名称,可在步骤三的云产品资源下拉列表的文件存储OSS中查看。

img

d. 选择默认凭据后按回车

img

结果类似如下。

img

\2. 将Vuepress项目部署到函数计算服务上。

a. 执行以下命令,进入项目所在目录。

cd website-vuepress

b. 执行以下命令,部署项目。

s deploy

结果类似如下。

img

\3. 打开虚拟桌面浏览器,访问测试域名查看部署好的Vuepress博客系统。

img

\4. 执行以下命令,安装Vuepress。

npm install -g vuepress

结果类似如下。

img

\5. 执行以下命令,创建一个markdown文件。

echo '# Hello VuePress!' > README.md

结果类似如下。

img

\6. 执行以下命令,开始写作。

vuepress dev .

结果类似如下。

img

\7. 在虚拟桌面浏览器中访问http://:8080,可以看到所创建的文件。

img

接下来您可以添加一些主题和插件以丰富您的博客系统。

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
存储 JavaScript 开发者
VuePress 博客优化之增加 Vssue 评论功能
本篇讲讲如何使用 Vssue 快速的实现评论功能。
488 0
VuePress 博客优化之增加 Vssue 评论功能
|
7月前
|
JavaScript 应用服务中间件 程序员
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
技术人如何利用 github+Jekyll ,搭建一个独立免费的技术博客
|
7月前
|
Web App开发 Windows
VitePress 构建的博客如何部署到 Netlify 平台?
VitePress 构建的博客如何部署到 Netlify 平台? 前言 之前写了篇文章【使用 Vitepress 构建博客并部署到 github 平台】,有个老哥说 github page 访问太慢了,希望放到 Netlify 平台上面。 咱也没部署过,就试了一下,发现比在 github 上部署简单多了... 一、注册账号 注册 netlify 账号 【Netlify】 地址:app.netlify.com/ 可以使用 github 账号注册,这样可以直接拉取 github 的内容进行部署,更简单
111 0
|
8月前
|
前端开发 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第4章 博客功能增强(2024 最新版)
《VitePress 简易速速上手小册》第4章 博客功能增强(2024 最新版)
175 0
|
网络安全 开发工具 git
从零开始搭建属于自己的hexo博客
整个搭建过程大概需要30分钟不到,请各位控制自己的时间~
150 0
|
安全 JavaScript Serverless
基于函数计算快速搭建Vuepress博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Vuepress博客。
|
弹性计算 安全 JavaScript
基于函数计算快速搭建Typecho博客
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Typecho博客。
|
资源调度 JavaScript
十分钟教会你如何使用VitePress搭建及部署个人博客站点
十分钟教会你如何使用VitePress搭建及部署个人博客站点
1105 0
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!
比hexo更好用的轻量级博客,5分钟部署上线!
|
存储 JavaScript 安全
VuePress 博客优化之增加 Valine 评论功能
在 《一篇带你用 VuePress + Github Pages 搭建博客》中,我们使用 VuePress 搭建了一个博客,最终的效果查看:TypeScript 中文文档。本篇讲讲如何使用 Valine 快速的实现评论功能。
266 0
VuePress 博客优化之增加 Valine 评论功能