ROS CDK魔法书:点亮博客上云新技能(JavaScript篇)

简介: ROS CDK提供Asset类,将本地文件转化为云资源,通过ROS CDK部署时,自动上传到指定的OSS Bucket。ROS CDK简化了基础设施即代码的流程,通过TypeScript、JavaScript等编程语言代替JSON或YAML模板,提高了效率和安全性。在实际应用中,通过ROS CDK和OSS,可以将本地博客项目打包并部署到阿里云OSS,实现静态网站的云托管。整个过程包括初始化项目、配置凭证、打包博客内容、通过CDK将内容部署到OSS Bucket,以及配置静态网站托管和自定义域名。

引言

在数字世界的浩瀚海洋中,信息与数据如同戏剧中的主角,舞动着无形的旋律,构建起信息时代的交响乐。而在这其中,作为一位技术领域的探索者,你的使命便是挥舞着编码的魔杖,创造和守护着这些宝贵的数字灵魂。不过,面对如潮水般汹涌涌来的数据流,你或许会困惑:如何能将这些珍贵的数字财富安全、有效地存储、管理乃至发挥其最大的价值?

别害怕,现在你手头有了一本魔法书——阿里云资源编排服务(Resource Orchestration Service,简称ROS)的云开发套件(Cloud Development Kit,简称CDK),其中的神奇篇章“Asset模块”将成为你最信赖的助手。无需纠结复杂的咒语(SDK)和手工的辛苦劳作(控制台操作),你将学到如何借助ROS CDK的力量,将你地面上的财宝(本地文件)以一种最轻巧简易的方式上传到一座漂浮在数据云端的宝库——OSS(对象存储服务)——中去。

在这篇文章里,我们将一起翻开这本神秘的魔法书,通过将网站内容部署到云端的案例,来揭露资产(Asset)模块的秘密。我将指引你通过简单的咒语、轻点魔杖,将本地文件巧妙地搬运到OSS之中,无需亲自攀爬数据的高峰,也无须担忧文件在旅途中的安全与完整。

背景

什么是ROS CDK?

想象一下你是一位建筑师,面前有一片空白土地,你的任务是构建一座由不同楼层和房间组成的大楼。在传统方式中,你可能需要一块一块砖头手工搭建,一个一个螺丝钉紧固,这不仅耗时而且劳力密集。现在,假设你有一本魔法书,只要念几句咒语(输入几行代码),那座建筑就能自动建造好,并且可以随时按照你的设计意图进行修改和扩展。这本魔法书,就是阿里云资源编排服务(Resource Orchestration Service,简称ROS)的云开发套件(Cloud Development Kit,简称CDK)。

ROS CDK 是一种软件开发框架,它允许开发人员使用熟悉的编程语言来定义、构建和部署云资源。使用ROS CDK,你可以把你的云基础架构定义为代码(Infrastructure as Code, IaC),像你编写应用程序逻辑一样编写云资源的布局和配置。

为了绘画出你理想中的云结构,你不必每次都去拧每个螺丝、背诵每个资源的配置细节。而是可以编写干净、直观的代码,用来描述这些建筑的结构。这些代码随后通过CDK框架转化成具体的资源配置,比如弹性计算云服务器(ECS)、对象存储服务(OSS)桶或是负载均衡器等,在云上快速部署。这样一来,整个部署过程更加自动化、可重复,并且可以轻松地跨团队或者项目共享。

将基础设施代码化,不仅大大降低了人为错误,还让原本复杂的云服务管理变得像搭积木一样简单。ROS CDK 对于迅速部署、升级和扩展云应用提供了巨大便利,让开发者更专注于创新和开发本身,而非重复劳动。简而言之,ROS CDK 赋予了开发者一种创造云上城堡的巧夺天工之能。

什么是OSS?

作为一名旅行在无限广阔数据荒原上的魔法师,在你的奇幻旅程中,征服了许多知识,创造了无数的魂核(数据)。要在这样浩瀚的世界中安全地保存这些珍贵的魂核,你需要一个强大而神秘的宝库——这就是OSS(对象存储服务)。

OSS像一座横跨数据海洋之上的庞大云城堡,由无数个神奇的能够无限扩张的房间(Buckets)组成。每一个房间都可以根据你的需要无限扩张,就像魔法伸缩袋一样,可以储存无尽的魂核,不管是一张小小的符箓(文本文件),还是一个包含着强大能量的水晶球(音视频文件)。

将魂核存放到OSS中就像施展了永久保护咒,使得每一片知识和记忆都能够抵抗时间的侵蚀,亦或是地狱火焰的焚烧。它赋予你的宝贵资源一种神通:随时随地、不管在何方,只要一念之间,就能达到你所愿,提取你所需。

正如一位能够指引星辰的导航者,OSS让你可以轻松地对这些魂核进行组织和检索,它的智能排序、标记、以及自动清理不用的过时魂核,让你的储存空间永远井然有序。而神秘的魔法屏障(加密和权限控制)则守护着你珍贵魂核的安全,仅允许那些持有正确咒语和钥匙(密钥和权限)的人接近。

在阿里云这片神奇的领土上,OSS是每位魔法师守护和共享他们智慧与成果的最佳之所,不受物理空间的限制和束缚,轻而易举地实现无尽数据的积累和传承。所以,尊敬的魔法师,当你准备在云上铸造你的知识帝国时,就让OSS成为你最值得依赖的守护者。

准备工作

语言要求

在进入IaC魔法世界前,我们还需要一些准备工作。为了安装ROS CDK,请确保Node.js和TypeScript满足以下版本要求:

  • Node.js:14.17.0及以上
  • TypeScript:3.8及以上

初始化工程项目

首先让我们获取魔杖(安装ROS CDK)。

注意:请确保你安装的 ros-cdk-cli 版本在 1.0.50 以上,可以通过运行 npm list -g 确认。

在你的魔法实践中,每当你打算开始一个全新的咒法项目,你都需要在你的魔法工作台(编程环境)上准备一些基础元素。就好比在开始一场远征前的准备过程,你需要确保你有一张图(项目框架),一些指南(配置)以及能够让你进出神秘地域(云平台)的通行证(凭证信息)。

初始化工程就好比是在你的魔法工作台上铺好一张干净的魔法制图纸,上面标注了将要完成的奇迹蓝图的基本轮廓。在你的电脑上,这就是创建一个包含必要文件结构的新目录,给魔法师们(开发者)提供了一个可以施展咒语(编码)的场所。

配置凭证信息则像是在你的魔法袍上缝上一枚能够开启云之城门的徽章,这枚徽章(AccessKey)凭证证明了你有权利指挥云中的能量流动,操纵存储在云中的宝藏。在阿里云的世界里,这意味着你需要在本地环境中配置好用于鉴权的AccessKey ID和Secret AccessKey。这样一来,当你使用ROS CDK这个强大的咒法工具时,它能够确保你是有权操控这些云资源的魔法师,而不是一个无意闯入的冒险者。

那么让我们在施展更高级魔法之前,先布置一下仪式现场。

  1. 执行以下命令,创建工程目录并初始化工程:
     mkdir demo
     cd demo
     ros-cdk init --language=javascript --generate-only=true
    
  2. 执行以下命令,配置阿里云凭证信息:
     ros-cdk config
    
  3. 根据界面提示输入配置信息:

     endpoint(optional, default:https://ros.aliyuncs.com):
     defaultRegionId(optional, default:cn-hangzhou):
    
     [1] AK
     [2] StsToken
     [3] RamRoleArn
     [4] EcsRamRole
     [0] CANCEL
    
     Authenticate mode [1...4 / 0]: 1
     accessKeyId:************************
     accessKeySecret:******************************
    
     ✅ Your cdk configuration has been saved successfully!
    

配置内容说明如下:

  • endpoint:ROS服务地址。默认值为https://ros.aliyuncs.com。
  • defaultRegionId:ROS资源栈部署的地域。默认值为cn-hangzhou。
  • Authenticate mode:鉴权方式。本示例的鉴权方式为AccessKey,您需要输入AccessKey ID和AccessKey Secret。关于如何获取AccessKey,请参见交互式配置(快速配置)

万事俱备,让我们开始ROS CDK魔法之旅。

注册域名(可选)

为了访问部署在OSS bucket上的静态网页,你需要为其准备一个域名,该域名会在本篇教程的最后一步用到,因此也可以在CDK部署完成后注册。

建议你使用阿里云域名服务快速注册一个属于你的域名。详细步骤,请参见注册通用域名

若你注册的域名需绑定在中国内地的 OSS Bucket 上,你还需在中国工信部备案域名。详细步骤,请参见备案

模块介绍

Asset模块:彩虹桥

在你作为魔法师的云上造物之旅中,ROS CDK的Asset模块是你魔法书中的一章,它让你能够轻松地搬运地上的宝贵资源进入神秘的云层城堡。想象一下,你在自己的书房里,手头有一些宝贵的卷轴(本地文件),你想将它们安全地存放到漂浮在空中的巨大宝库(OSS Bucket)中。在没有魔法的日子里,你或许得亲自爬上高塔,把卷轴一一放进宝库。但借助Asset模块的力量,这一切都变得简单。

Asset 模块就像是一座精灵工匠构建的独特彩虹桥。这座彩虹桥异常奇妙,它本身并不负责直接搬运宝物,却能够把现实世界的资源转化为一个个用魔法符号(元数据)标记好的光球。这些光球静静地等待在桥的一端,包含了足够的信息,让其他的魔法结构(如部署工具)能够准确无误地识别并将宝物传输到云端世界的准确位置。

让我们来用更现实的视角详细描述这过程:

当一位工程师或开发者使用 Asset 模块时,他们其实是在启动一个准备过程,这个过程会将本地文件或者目录封装成可以被云端理解的资源。Asset 模块会生成所有必要的元数据和配置文件,告诉云端如何接收和存储即将到来的文件。但是,Asset 模块自己并不执行文件的实际上传操作。

换句话说,Asset 模块赋予了你的本地资源在云上具象化的能力,它将文件转化为资产描述,就像给文件打上了云端寓所的地址标签。然后,它等待一位邮递员(比如一个CDK构建和部署流程)来收集这些准备好的包裹(包含元数据的文件),并将其通过数据的高速公路准确无误地送达到指定的云端存储服务(如OSS)上。

ros-cdk-ossassets 与 ros-cdk-ossdeployment:魔法背包与肩上的猎鹰

你,一位技艺高超的魔法师,总是寻找着更高效的方法来操控与传送你的魔法卷轴(文件)和魔能结晶(数据)。在ROS CDK魔法书中,有两条特别的咒语—— ros-cdk-ossassets 和 ros-cdk-ossdeployment。

ros-cdk-ossassets 是你神奇的魔法背包,其中的Asset类可以暂时将卷轴(本地文件)缓存到一个临时的桥梁宝库(临时的OSS Bucket)中。这是缓存与转移的首要步骤,为接下来更远的旅程做好准备。

而ros-cdk-ossdeployment,则宛如你肩头的猎鹰,精准无误地执行着你下达的搬运命令。该模块中的 Source 类支持从不同来源上传文件,四个静态函数如猎鹰四只锐利的眼紧锁着源头:

  • bucket:支持将同地域bucket中的object作为部署源;
  • asset:将本地文件作为部署源;
  • data:将指定字符串作为部署源;
  • jsonData:将Json对象作为部署源。

最后,当你需要传送这些源头文件到具体的OSS Bucket时,只需将Source传入BucketDeployment类,并指定要传送到的目标bucket。

这样,通过你的魔法背包和肩头的猎鹰,任何所需的资源和能量都将毫无失误地被存储、转移,并精确地部署到云端的宝库之中,此时,阿里云的广袤宇宙里又将多了一个由你一手构建的魔法领地。

cdk_asset_principle.png

最佳实践:本地博客网站上云

接下来,我们将通过一个最佳实践案例来演示如何将本地文件上传至阿里云OSS Bucket。我们先创建一个全新的博客项目(或者你也可以使用本地已存在的博客项目),然后将向你展示如何将其内容优雅地部署到OSS Bucket中。完成之后,我们可以直接使用OSS Bucket提供的公网地址来访问并欣赏我们的博客网站。

进行如下步骤之前请确保你已完成所有必须的准备工作,包括环境配置和初始化项目工程。

新建博客(可选)

本步骤示例运行环境:

  • 芯片:Apple M1
  • 系统环境:macOS Ventura 13.2.1
  • Next.js 14.2.3

我们将使用基于 React 的 Next.js 框架来搭建一个极简的博客网站。你只需要按顺序操作以下步骤:

  1. 执行以下命令创建项目
npx create-next-app nextjs-blog --use-npm --example https://github.com/vercel/examples/tree/main/solutions/blog

该项目是利用 create-next-app 工具生成的,它自动为你构建了一个 Next.js 应用,并通过 --example 参数引用了此特定模板

若有兴趣探索不同的网页设计,你可以浏览Vercel的其他模板选项

如果你是第一次使用create-next-app,命令行终端会返回如下提示:

Need to install the following packages:
create-next-app@14.2.3
Ok to proceed? (y)

在Ok to proceed? (y)后输入y,然后回车。

等待几分钟后项目将自动创建完成,同时会自动安装依赖。

项目完成创建后,你将在命令行中看到相应的确认信息:

Success! Created nextjs-blog at ***/nextjs-blog
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd nextjs-blog
  npm run dev
  1. 进入开发模式
cd nextjs-blog
npm run dev

等待命令行终端返回如下信息:

> dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
Corepack is about to download https://registry.npmjs.org/pnpm/-/pnpm-9.3.0.tgz.
 ✓ Ready in 5.6s

此时点击http://localhost:3000,即可看到如下页面内容:

blog_home.png

  1. 创建页面

Next.js 的开发模式下具备热刷新功能,即当你修改文件后,系统将自动更新并反映这些变更至浏览器。

现在,让我们动手添加一篇新的博文吧。在该模板中,所有博文都位于 app/blog/posts 目录下,并以 MDX 格式保存。执行以下命令来创建你的第一篇博文:

touch app/blog/posts/what-is-ros-cdk.mdx

使用你熟悉的编辑器或 vim 模式下打开 app/blog/posts 目录下的 what-is-ros-cdk.mdx 文件,并添加如下内容:

---
title: '什么是ROS CDK?'
publishedAt: '2024-06-11'
summary: '本文将介绍如何ROS CDK的基本概念与适用场景'
---

ROS CDK(Cloud Development Toolkit)是阿里云资源编排服务ROS提供的一套开源软件开发工具包,用于在代码中定义云资源并通过ROS进行部署。使用该工具,你无需再依赖繁琐的JSON或YAML模板语法,而是可以通过熟悉的编程语言完成资源的创建和配置,实现自动化部署及运维。

## 使用须知

ROS CDK已经支持在TypeScript、JavaScript、Python、Java和C#中使用,你可以选择任意已支持的编程语言来定义云资源。更多信息,请参见[入门应用示例](https://help.aliyun.com/zh/ros/developer-reference/getting-started-with-applications)。

ROS CDK由构造库和命令行工具两部分组成:

- **构造库**:预先编写的模块化和可重用代码片段的集合,可供你组合、修改和集成,用于快速部署云资源以构建你的应用程序。构造库中配备了多种简化操作的函数,旨在降低在构建应用程序时定义和集成阿里云服务的复杂性。
- **命令行工具**:在完成应用程序构建后,需要使用ROS CDK提供的命令行工具与其交互,以实现生成模板、线上部署、查询和删除资源栈等功能。

## 适用场景

ROS CDK利用面向对象的高级抽象模式对云资源进行标准定义,从而实现快速构建云资源,适用于需要快速、安全且可重复部署云资源的开发团队。其适用场景主要包括:

- 基础设施即代码(Infrastructure as Code,IaC):在需要以可编程和可重复的方式预置、管理和更新阿里云上的云基础设施时,CDK提供了一种强大的解决方案。通过编写代码定义你的资源栈(包含例如VPC、ECS实例、RDS数据库实例、ACK集群等资源),可以确保环境的一致性,并且能够轻松地在不同环境中部署相同的基础设施配置。
- 复杂架构管理:若你的项目涉及复杂的阿里云资源架构设计,包含多个服务之间的相互依赖关系,CDK可以协助你组织这些服务组件,创建模块化的构造块(Constructs),并允许复用和组合这些组件以构建大型应用架构。
- 多团队协作与分层设计:针对多团队共同开发的项目,CDK可以通过版本控制工具促进协同工作,并支持基础设施的分层设计,使得不同的团队可以专注于各自负责的服务或组件。
- 自动化部署与持续集成/持续部署(CI/CD)流水线:CDK可以无缝集成到持续集成和持续部署(Continuous Integration/Continuous Deployment,CI/CD)流程中,便利开发者进行应用和相关基础设施资源的自动部署和更新。
- 安全性与权限管理:使用CDK,你可以精确控制RAM角色、策略和其他安全相关设置,以确保基础设施的安全合规性。
- 测试驱动开发:CDK支持单元测试和合成测试,你可以在实际部署之前对基础设施模型进行验证,从而提高代码质量并减少生产环境中的错误。

## 工具优势

ROS CDK是一种基础设施即代码(IaC)的框架,它提供了将基础设施定义为代码的能力。借助编程语言的强大功能,使得基础设施的创建和管理更加高效、灵活和可靠。以下是CDK的一些主要优势:

- 通用编程语言开发:CDK允许开发者使用他们已经熟悉的编程语言(如JavaScript、TypeScript、Python、Java、C#等),来定义基础设施,无需学习专有的配置语言。
- 高级抽象层次:CDK提供了构建块(称为Constructs),用于封装较低层次的细节,使开发者能够专注于业务逻辑。
- 模块化和可重用性:开发者可以利用构造库中预先定义的构建块,也可以创建自定义的构建块,然后在不同的基础设施项目中反复利用它们,从而促进了模块化和代码的重用。
- 类型安全:对于支持静态类型的语言(如TypeScript和Java),CDK提供了类型安全性,减少了因类型错误而导致的运行时问题。
- 智能编辑器支持:由于CDK使用通用编程语言开发,开发者可以充分利用现代集成开发环境(IDE)提供的代码补全、语法高亮、格式化和Linting等功能。
- 版本控制和团队协作:CDK代码以源码形式存在,因此可以轻松地纳入版本控制系统,从而便于团队成员协同工作。
- ROS集成支持:ROS CDK与ROS集成,可以在阿里云上部署和预置你的基础设施。借助ROS,你可以可预测地重复执行基础设施部署,并在出现错误时进行回滚。如果你已经熟悉ROS,则在开始使用ROS CDK时无需学习新的IaC管理服务。
- 其他软件开发工具集成:CDK可以无缝集成到现有的软件工程工具和流程中,例如源代码管理、单元测试、集成测试以及持续集成/持续交付。

此时你会发现博客主页已经多了一篇文章:

blog_home_new.png

点击文章标题可以看到文章的具体内容:

how_to_use_cdk.png

  1. 更多操作

为了保持文章的简洁性和主题相关性,我们这里只介绍如何进行最基础的博文添加操作。对于那些渴望深入挖掘的开发者朋友来说,你可以通过访问 Next.js 官方文档 来获取更多高级定制和基本知识,以进一步优化和个性化你的网站。

  1. 打包生产环境代码

crtl + C 退出开发模式。

为了生成可直接部署于 OSS 的静态网页文件,我们需要对现有配置做一些改动,首先需要去除在生成 OG 图片时传入的request.url参数,具体的,修改 app/og/route.tsx 文件内容如下:

import {
   
    ImageResponse } from 'next/og';

export function GET() {
   
   
    let title = 'Next.js Portfolio Starter';

    return new ImageResponse(
        (
            <div tw="flex flex-col w-full h-full items-center justify-center bg-white">
                <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
                    <h2 tw="flex flex-col text-4xl font-bold tracking-tight text-left">
                        {
   
   title}
                    </h2>
                </div>
            </div>
        ),
        {
   
   
            width: 1200,
            height: 630,
        }
    );
}

其次,为了启用 Next.js 的静态导出,我们需要修改项目根目录下的 next.config.js 文件,如果没有该配置文件,可以执行以下命令同时创建并保存配置:

echo "const nextConfig = { output: 'export' }\nmodule.exports = nextConfig" > next.config.js

最后执行以下命令打包生产环境代码:

npm run build

如果成功则会显示如下信息:

> build
> next build

  ▲ Next.js 14.2.3

   Creating an optimized production build ...
 ✓ Compiled successfully
 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
 ✓ Generating static pages (13/13)
 ✓ Collecting build traces    
 ✓ Finalizing page optimization    

Route (app)                              Size     First Load JS
┌ ○ /                                    175 B            94 kB
├ ○ /_not-found                          141 B          87.2 kB
├ ○ /blog                                175 B            94 kB
├ ● /blog/[slug]                         5.29 kB        99.1 kB
├   ├ /blog/how-to-use-cdk
├   ├ /blog/spaces-vs-tabs
├   ├ /blog/static-typing
├   └ /blog/vim
├ ○ /og                                  0 B                0 B
├ ○ /robots.txt                          0 B                0 B
├ ○ /rss                                 0 B                0 B
└ ○ /sitemap.xml                         0 B                0 B
+ First Load JS shared by all            87.1 kB
  ├ chunks/23-a6fd6170b6cfa730.js        31.6 kB
  ├ chunks/fd9d1056-6184565b3c21c232.js  53.6 kB
  └ other shared chunks (total)          1.86 kB


○  (Static)  prerendered as static content
●  (SSG)     prerendered as static HTML (uses getStaticProps)

Next.js 将生成一个out文件夹,其中包含应用程序的 HTML/CSS/JS 资源。

通过CDK托管静态网站至OSS

安装依赖

首先,我们需要安装使用你选定语言开发CDK项目时所需的依赖。

进入在「准备工作」中初始化的项目,并修改 package.json 文件内容如下:

{
   
   
  "name": "demo",
  "version": "0.1.0",
  "bin": {
   
   
    "demo": "bin/demo.js"
  },
  "scripts": {
   
   
    "build": "echo \"The build step is not required when using JavaScript!\" && exit 0",
    "cdk": "cdk",
    "test": "jest"
  },
  "devDependencies": {
   
   
    "@types/jest": "^25.2.1",
    "@types/node": "10.17.5",
    "typescript": "^3.9.7",
    "jest": "^25.5.0",
    "ts-jest": "^25.3.1",
    "ts-node": "^8.1.0",
    "babel-jest": "^26.6.3",
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "7.12.7",
    "@babel/preset-typescript": "^7.12.7",
    "@alicloud/ros-cdk-assert": "^1.0.25"
  },
  "dependencies": {
   
   
    "@alicloud/ros-cdk-core": "^1.0.29",
    "@alicloud/ros-cdk-oss": "^1.0.27",
    "@alicloud/ros-cdk-ossdeployment": "^1.0.27"
  }
}

修改完成后执行以下命令,安装依赖:

npm install

添加资源

接着,我们要为项目中添加资源,也就是实现将本地博客传输至云端的功能。本示例涉及到的资源有:

本项目涉及到的收费项有:

进入项目目录,并修改 lib/demo-stack.js 的内容如下:

const ros = require('@alicloud/ros-cdk-core');
const oss_deployment = require('@alicloud/ros-cdk-ossdeployment');
const oss = require('@alicloud/ros-cdk-oss');
const fs = require("fs");
const path = require("path");

/**
 * Recursively reads all files in a directory including subdirectories.
 * @param dirPath The directory path to read.
 * @returns An array containing paths of all files.
 */
function getAllFiles(dirPath) {
   
   
  dirPath = dirPath.endsWith('/') ? dirPath : dirPath + '/';
  const result = [];
  const files = fs.readdirSync(dirPath);
  for (const file of files) {
   
   
    const curPath = path.join(dirPath, file);
    if (fs.lstatSync(curPath).isDirectory()) {
   
   
      result.push(...getAllFiles(curPath));
    } else {
   
   
      const objectPrefix = path.dirname(curPath).substring(
          path.dirname(curPath).indexOf('/out') + '/out'.length) + '/';
      result.push(oss_deployment.Source.asset(curPath, {
   
   }, objectPrefix.substring(1)));
    }
  }
  return result;
}

class DemoStack extends ros.Stack {
   
   
  constructor(scope, id, props) {
   
   
    super(scope, id, props);
    const blogPath = "your-blog-project-path/out";  // 本地文件夹路径
    const ossBucketName = "my-blog";  // OSS bucket名称
    const filePaths = getAllFiles(blogPath);
    new ros.RosInfo(this, ros.RosInfo.description, "Deploy the blog to OSS.");
    const destBucket = new oss.Bucket(this, 'SampleDestBucket', {
   
   
      bucketName: ossBucketName
    });
    new oss_deployment.BucketDeployment(this, 'SampleFileDeployment', {
   
   
      sources: filePaths,
      destinationBucket: destBucket,
      timeout: 300,
      logMonitoring: true,  // 是否开启日志监控,设为false则不开启
    });
  }
}

module.exports = {
   
    DemoStack };

请将 blogPath 变量设置为你的本地博客项目打包生成的生产环境代码路径,例如,在完成“新建博客”章节最终得到的 out 目录;同时,将 ossBucketName 变量指定为你计划创建的,用于存储博客文件的OSS Bucket名称,Bucket 名称必须全局唯一!

如果你想使用已有的 OSS Bucket来存放你的博客项目文件,那么请修改上述代码如下:

const ros = require('@alicloud/ros-cdk-core');
const oss_deployment = require('@alicloud/ros-cdk-ossdeployment');
const oss = require('@alicloud/ros-cdk-oss');
const fs = require("fs");
const path = require("path");

/**
 * Recursively reads all files in a directory including subdirectories.
 * @param dirPath The directory path to read.
 * @returns An array containing paths of all files.
 */
function getAllFiles(dirPath) {
   
   
  dirPath = dirPath.endsWith('/') ? dirPath : dirPath + '/';
  const result = [];
  const files = fs.readdirSync(dirPath);
  for (const file of files) {
   
   
    const curPath = path.join(dirPath, file);
    if (fs.lstatSync(curPath).isDirectory()) {
   
   
      result.push(...getAllFiles(curPath));
    } else {
   
   
      const objectPrefix = path.dirname(curPath).substring(
          path.dirname(curPath).indexOf('/out') + '/out'.length) + '/';
      result.push(oss_deployment.Source.asset(curPath, {
   
   }, objectPrefix.substring(1)));
    }
  }
  return result;
}

class DemoStack extends ros.Stack {
   
   
  constructor(scope, id, props) {
   
   
    super(scope, id, props);
    const blogPath = "your-blog-project-path/out";  // 本地文件夹路径
    const ossBucketName = "my-blog";  // OSS bucket名称
    const filePaths = getAllFiles(blogPath);
    new ros.RosInfo(this, ros.RosInfo.description, "Deploy the blog to OSS.");
    new oss_deployment.BucketDeployment(this, 'SampleFileDeployment', {
   
   
      sources: filePaths,
      destinationBucket: ossBucketName,
      timeout: 300,
      logMonitoring: true,  // 是否开启日志监控,设为false则不开启
    });
  }
}

module.exports = {
   
    DemoStack };

并将 ossBucketName 变量赋值为你想要存放博客项目文件的 OSS Bucket名称。请确保该 Bucket 已存在。

部署资源栈

运行如下命令:

ros-cdk deploy --sync=true

--sync=true 会将资源栈信息同步返回至终端显示。成功后,命令行终端返回如下信息:

DemoStack: deploying...
|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::SLS::Logstore   | ros-cdk-oss-deploy...gxxxx/funct
ion-log | SLSLogStoregxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::SLS::Project    | ros-cdk-oss-deployment-gxxxx | S
LSProjectgxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::RAM::Role       | ros-cdk-oss-deployment-gxxxx | F
CRolegxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::OSS::Bucket     | yingzhao-blog-0001 | SampleDestB
ucket

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::FC::Service     | 6ba8771f-a499-433d-a7ac-5e7axxxx
eb4b | FCServicegxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::FC::Function    | 436f5ba6-7ce2-4627-be63-c67dxxxx
907a | FCFunctiongxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::SLS::Index      | ros-cdk-oss-deploy...function-lo
g/index | SLSIndexgxxxx

|DemoStack               |2024-06-20T03:46:09 | CREATE_COMPLETE      | ALIYUN::ROS::CustomResource | - | SampleFileDeployment


 ✅ The deployment(sync create stack) has completed!
Status: CREATE_COMPLETE
StatusReason: Stack CREATE completed successfully
StackId: 070932bb-d6d3-4f08-8e6a-2a0740bxxxx

配置静态网站托管与绑定自定义域名

最后,还需要在 OSS 控制台上进行两步简单的配置。请按照以下简化的步骤操作:

  1. 打开 OSS 控制台,并登陆你的阿里云账号。
  2. 选定你的 Bucket,步入文件管理界面。在这里,你应能看到 Bucket 中已整齐存放着博客的全部生产环境文件目录,一切就绪待命。如下:
    oss_bucket.png
  3. 在左侧导航栏,选择数据管理 > 静态页面
  4. 静态页面,单击设置,然后将 index.html 设置为默认首页,将 error.html 设置为默认404页。如下:
    oss_static.png
  5. 单击保存
  6. 在左侧导航栏,选择Bucket配置 > 域名管理
  7. 域名管理页面,单击绑定域名
  8. 域名文本框输入你准备好的域名,并打开自动添加CNAME记录开关。
  9. 单击确定。

恭喜你!通过精心的准备和一系列的配置工作,你已成功将本地博客迁移到云端。现在,仅需在浏览器中输入你准备好的域名,便可轻松访问你的专属博客了!

这意味着你的创作内容可以以全新的形式,在全球范围内被更多的读者发现和欣赏。不仅如此,借助云平台的稳定性和可扩展性,你的博客站点将能够提供更佳的访问体验,轻松应对访问量的增长。

更新资源栈

更新资源栈的命令与创建相同,当你本地博客内容有更新或新增,执行以下命令以推送到云端:

ros-cdk deploy --sync=true

更新成功会显示如下信息:

✅ The deployment(sync update stack) has completed!
Status: UPDATE_COMPLETE
StatusReason: Stack successfully updated
StackId: 070932bb-d6d3-4f08-8e6a-2a0740bxxxx

删除资源栈

ROS CDK 不会主动删除目标 Bucket 中的内容,所以需要你手动登陆 OSS 控制台全选并删除存放博客文件的 Bucket 中的所有文件。

完成手动清空 Bucket 内容后,执行以下命令以删除资源栈:

ros-cdk destroy --sync=true

CDK 会二次确认即将删除的资源栈:

The following stack(s) will be destroyed(Only deployed stacks will be displayed).

DemoStack

Please confirm.(Y/N)

输入 y 并回车,删除成功会显示如下信息:

✅ The task(sync destroy stack) has finished!
status: DELETE_COMPLETE
StatusReason: Stack DELETE completed successfully
StackId: 070932bb-d6d3-4f08-8e6a-2a0740bxxxx
相关实践学习
Docker镜像管理快速入门
本教程将介绍如何使用Docker构建镜像,并通过阿里云镜像服务分发到ECS服务器,运行该镜像。
阿里云资源编排ROS使用教程
资源编排(Resource Orchestration)是一种简单易用的云计算资源管理和自动化运维服务。用户通过模板描述多个云计算资源的依赖关系、配置等,并自动完成所有资源的创建和配置,以达到自动化部署、运维等目的。编排模板同时也是一种标准化的资源和应用交付方式,并且可以随时编辑修改,使基础设施即代码(Infrastructure as Code)成为可能。 产品详情:https://www.aliyun.com/product/ros/
目录
相关文章
|
3天前
|
存储 JavaScript C#
ROS CDK魔法书:点亮博客上云新技能(C#篇)
阿里云ROS CDK结合OSS的资源编排教程,教你如何以代码定义云资源,简化部署流程。ROS CDK允许使用编程语言(如TypeScript、C#)代替JSON或YAML模板,创建和管理云资源,如OSS Bucket。通过Asset模块,本地文件被转化为云资源,ROS CDK的`ros-cdk-ossassets`和`ros-cdk-ossdeployment`则负责资源上传和管理。教程以创建和部署博客到OSS为例,展示了从初始化项目、配置凭证到编写CDK代码,再到打包、部署和更新资源栈的全过程。使用ROS CDK,开发者能更高效地实现云上资源的自动化运维和管理。
10 1
|
3天前
|
存储 JavaScript Java
ROS CDK魔法书:点亮博客上云新技能(Java篇)
在阿里云资源编排服务ROS的Cloud Development Kit(ROS CDK)中,开发者可以使用编程语言(如TypeScript、Java等)定义云资源,简化了基础设施即代码(IaC)的管理。ROS CDK的Asset模块是用于处理本地文件到云端对象存储(如OSS)的工具,它通过元数据封装本地资源,然后配合ROS CDK的部署工具将文件上传至云端。通过一个将本地博客网站部署到OSS的案例,文章展示了如何使用ROS CDK的Asset模块和BucketDeployment来实现这一过程。
194 1
|
3天前
|
存储 JavaScript 安全
ROS CDK魔法书:点亮博客上云新技能(TypeScript篇)
阿里云ROS CDK是资源编排服务的命令行工具,它允许开发者用编程语言(如TypeScript、JavaScript等)定义云资源,简化了JSON或YAML模板的使用。ROS CDK的Asset模块用于将本地文件上传到OSS(对象存储服务),实现了本地资源到云端的自动化迁移。在实践中,通过初始化工程、配置凭证、使用Asset模块创建资源描述,然后通过CDK部署到OSS,实现静态网站的云上托管。此外,ROS CDK支持版本控制、多团队协作和自动化部署,提高了基础设施管理的效率和一致性。
10 1
ROS CDK魔法书:点亮博客上云新技能(TypeScript篇)
|
23天前
|
JavaScript Shell
Vue.js功能实现博客
Vue.js功能实现博客
|
3天前
|
存储 JavaScript 对象存储
ROS CDK魔法书:点亮博客上云新技能(Python篇)
ROS(Resource Orchestration Service)是阿里云的资源编排服务,通过模板定义资源和依赖关系。CDK中的Asset模块扮演关键角色,将本地文件转化为云资产,方便上传至OSS(Object Storage Service)存储。OSS是一个云存储服务,能安全存储大量数据,并支持高效访问。通过ROS CDK,开发者可以将本地的Next.js博客项目打包并部署到OSS,实现静态网站的云托管。部署过程包括初始化项目、安装依赖、定义资源、打包博客代码和使用CDK部署到OSS。通过这种方式,开发者可以利用ROS CDK的自动化能力,高效地管理和更新云上资源。
11 0
|
27天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的博客系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的博客系统附带文章和源代码设计说明文档ppt
20 2
|
17天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的精简博客系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的精简博客系统附带文章源码部署视频讲解等
10 0
|
21天前
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的博客系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的博客系统附带文章和源代码部署视频讲解等
7 0
|
存储 编解码 前端开发
你的博客用不着什么 JavaScript 框架
  最近,我终于决定将自己的网站从基于 PHP 的 CMS 移植到基于 JavaScript 的静态网站生成器(SSG)了。原因如下:   虽然一开始我是“全栈”开发人员,但现在我只负责前端工作:如果我需要编写自定义功能,那么能用 JavaScript 编写的代码我就不想用 PHP 来写。我不需要抽象层或 CMS 的复杂性——我最喜欢用 markdown 文件编写内容,并且希望永远不要再碰 Mysql 数据库或所见即所得编辑器。我想提高网站的性能:静态 HTML 文件在 99% 的时候都比动态页面更快。最后还有成本优势:LAMP stack 服务器得按月付费;Netlify 的免费套餐(每月
139 0
|
15天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的校园竞赛管理系统附带文章源码部署视频讲解等
163 63

推荐镜像

更多