目录

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

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

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

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

往期文章:

创建应用

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

https://i-blog.csdnimg.cn/blog_migrate/2f58287cd1686001c715d35a0ab93643.png

https://i-blog.csdnimg.cn/blog_migrate/2cf371bf61b4c77a77f5753c11069da2.png

然后会有一些依赖服务,没开通的话开通一下就好了

https://i-blog.csdnimg.cn/blog_migrate/7d644e847d781aac199ce0f456dac017.png

然后就可以看到我们刚创建的demo了

https://i-blog.csdnimg.cn/blog_migrate/0baf628a0f5967860f9e89398c93637d.png

开发部署

https://i-blog.csdnimg.cn/blog_migrate/e7cbeb57daf91a858fb927acdfcc2c93.png

然后就会跳转到一个云端的 IDE

https://i-blog.csdnimg.cn/blog_migrate/33eea82d04d6e3a02ae81ff0a8e5d3e8.png

左上角这个是提供的workbench插件,有部署和调试功能 https://i-blog.csdnimg.cn/blog_migrate/b544ca500c5277ad38d0b3a36f9f4778.png

.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 文件

https://i-blog.csdnimg.cn/blog_migrate/89589fdfb7ca1c1902e93df2cdc42f3a.png

随便写一写

https://i-blog.csdnimg.cn/blog_migrate/bf10f23ef98e0f696bdc25dc978e5a5b.png

https://i-blog.csdnimg.cn/blog_migrate/3ab74301c601393d2bce2aadbcd362c0.png

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

https://i-blog.csdnimg.cn/blog_migrate/b9380468045a40e60dee04aaf86d9123.png

处理请求的代码在 serverless.js 文件中,可以看到默认访问的文件

https://i-blog.csdnimg.cn/blog_migrate/bb24812fc5f7dd19aa1c0b6297bbdc8e.png

然后我这边使用一个案例demo,大家需要的话可以访问 进行下载,我将下载好的文件直接拖到 IDE,如下

https://i-blog.csdnimg.cn/blog_migrate/ece9af3c63e146874c4bcfb5ec8e5e9f.png

然后我们再进行调试,可以看到静态html页面显示出来了

https://i-blog.csdnimg.cn/blog_migrate/5a7a80dce1091f3313dff1973aa91d99.png

然后进行部署,直接点击部署即可

https://i-blog.csdnimg.cn/blog_migrate/2f8360c4978222ebc817e82fe3df3f3e.png

https://i-blog.csdnimg.cn/blog_migrate/4edad9f29844d67491f986bf50429cbf.png

部署完成后,我们会得到一个测试域名,这个域名就可以公网访问,但是这个域名是有时效的,我们可以在应用页面进行查看

https://i-blog.csdnimg.cn/blog_migrate/0da8d2dd13f4aa04cac4c23d6f1762be.png

我们访问测试域名看一下

https://i-blog.csdnimg.cn/blog_migrate/9d488139e7f865e134177a177e07e652.png

然后还有一个二级域名,二级域名需要绑定到我们自己的域名上,在域名解析中添加一条记录即可【记录值填二级域名就好了】

然后在云开发平台绑定我们的域名与二级域名的关系,在应用列表页点击应用配置

https://i-blog.csdnimg.cn/blog_migrate/71edee60abf30719aa2188b25279e35b.png

把自己的域名输入到绑定域名即可

https://i-blog.csdnimg.cn/blog_migrate/67d58b373f1de08b99c6500b96a46e6a.png

最后重新部署一下就ok了

下线&删除应用

在应用列表点击一下就好了

https://i-blog.csdnimg.cn/blog_migrate/c12cb7818ad2187de36bbeba120bfc52.png

删除应用如下

https://i-blog.csdnimg.cn/blog_migrate/58041f81c4ad29146b12964d94f9b871.png