Web训练营Day02——静态网站的全生命周期实战-阿里云开发者社区

开发者社区> 阿里云高校学研支持计划> 正文
登录阅读全文

Web训练营Day02——静态网站的全生命周期实战

简介: 阿里云云开发平台静态网站的全生命周期实战

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

云开发平台官网: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了

下线&删除应用

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
阿里云高校学研支持计划
使用钉钉扫一扫加入圈子
+ 订阅

阿里云高校学研支持计划旨在为高等院校师生提供包括算力、培训、平台 等全方位支持,助推高校计算机学科建设、培养数字经济时代的前沿技术人才、为多学科跨 领域科研探索提速增效。目前,我们已经开启了学生成长计划、教学支持计划和科研加速 三大板块。精彩内容,先睹为快。

官方博客
申请加入高校学研支持计划
友情链接