阿里云-云开发平台入门篇——静态网站的全生命周期实战

本文涉及的产品
.cn 域名,1个 12个月
简介: 阿里云-云开发平台入门篇——静态网站的全生命周期实战

静态网站的全生命周期实战

云开发平台官网: https://workbench.aliyun.com/

创建应用

这里我们使用默认的产品,就不再创建产品了

在这里插入图片描述
在这里插入图片描述
然后会有一些依赖服务,没开通的话开通一下就好了

在这里插入图片描述
然后就可以看到我们刚创建的demo了

在这里插入图片描述

开发部署

在这里插入图片描述
然后就会跳转到一个云端的 IDE

在这里插入图片描述

左上角这个是提供的workbench插件,有部署和调试功能 在这里插入图片描述

.workbench文件是来做一些默认的配置

{
  "fcRouteDefault" : [  // 可以理解为路由表
    {"apiUri":"/*",  // 匹配路径
     "fcHandler":"serverless.handler",  // 请求处理
     "httpMethod":"ANY"
    }
  ],
  "cicd": {  // 部署要执行
    "package": "mkdir zip && rsync -a --exclude node_modules/ --exclude package-lock.json --exclude zip/ . ./zip && cd zip && npm install --production && zip -r ../code.zip ./ -x '*.git*' -x '*.zip' -x '.DS_Store' && cd ../ && rm -rf zip"
  }
}

开发一个最简单的页面
新建一个index.html文件
在这里插入图片描述
随便写一写
在这里插入图片描述
我们可以调试一下
在这里插入图片描述
可以看到,控制台输出了调试的日志信息

在这里插入图片描述
我们可以点击控制台的url进行访问,也可以勾选预览模式,这样直接在IDE中就可以看到网页

在这里插入图片描述
处理请求的代码在serverless.js文件中,可以看到默认访问的文件
在这里插入图片描述
然后我这边使用一个案例demo,大家需要的话可以访问 https://github.com/royalrover/demo 进行下载,我将下载好的文件直接拖到 IDE,如下
在这里插入图片描述
然后我们再进行调试,可以看到静态html页面显示出来了
在这里插入图片描述
然后进行部署,直接点击部署即可
在这里插入图片描述
在这里插入图片描述

部署完成后,我们会得到一个测试域名,这个域名就可以公网访问,但是这个域名是有时效的,我们可以在应用页面进行查看
在这里插入图片描述
我们访问测试域名看一下
在这里插入图片描述
然后还有一个二级域名,二级域名需要绑定到我们自己的域名上,在域名解析中添加一条记录即可【记录值填二级域名就好了】
然后在云开发平台绑定我们的域名与二级域名的关系,在应用列表页点击应用配置
在这里插入图片描述
把自己的域名输入到绑定域名即可
在这里插入图片描述
最后重新部署一下就ok了

下线&删除应用

在应用列表点击一下就好了
在这里插入图片描述
删除应用如下
在这里插入图片描述

目录
相关文章
|
5月前
|
监控 Linux 数据库连接
手把手教你从本地到云端:全面解析Blazor应用的部署流程与最佳实践,助你轻松掌握发布Blazor WebAssembly应用到Azure的每一个细节
【8月更文挑战第31天】本文详细介绍了将 Blazor 应用从本地部署到 Azure 的全过程。首先确保已在 Visual Studio 中创建 Blazor WebAssembly 应用,接着清理项目并配置发布选项。然后在 Azure 中创建 App Service 并完成应用部署。最后,配置环境变量、SSL 和监控,确保应用稳定运行。附带示例代码,展示如何加载和使用 Azure 环境变量。通过最佳实践指导,帮助你顺利完成 Blazor 应用的云端部署。
131 0
|
6月前
怎么使用零代码平台,在线搭建一套应用系统 — 敲敲云免费
怎么使用零代码平台,在线搭建一套应用系统 — 敲敲云免费
52 0
|
小程序 JavaScript 前端开发
小程序云开发全套实战教程(最全)
小程序云开发全套实战教程(最全)
145 0
|
JSON 小程序 前端开发
云开发入门第六章,云函数的讲解
云开发入门第六章,云函数的讲解
368 0
|
域名解析 小程序 网络协议
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
1分钟部署一个属于自己的网站,借助云开发静态网站部署属于自己的网站
218 0
|
前端开发 Shell
如何使用阿里云云开发平台发布vuecli前端项目
如何使用阿里云云开发平台发布vuecli前端项目
|
小程序 数据库 开发者
【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数 下
5、将记录数据展示到页面上(云数据库的读取) 6、项目部署上线
366 0
【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数 下
|
缓存 小程序 JavaScript
【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数
3、登录功能(云函数的创建和调用) 4、点击按钮生成记录数据(云数据库的插入)
307 0
【2020云开发+源码】30分钟创建并上线微信小程序实战项目 | 零成本 | 云数据库 | 云函数
|
小程序 数据库 开发者
|
IDE Serverless API
阿里云云开发实践笔记【1】
阿里云云开发实践笔记
215 0