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

今天药忘吃喽~ 2022-12-30 10:38 79阅读 0赞

###  ###

*  静态网站的全生命周期实战
 *   *  创建应用
     *  开发部署
     *  下线&删除应用

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

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

> 往期文章：  
> [阿里云开发平台普及篇——创建应用][Link 1]

## 创建应用 ##

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

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]

## 开发部署 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]

> 左上角这个是提供的workbench插件，有部署和调试功能![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]

`.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`文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]  
随便写一写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]  
我们可以调试一下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]  
可以看到，控制台输出了调试的日志信息

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

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

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

## 下线&删除应用 ##

在应用列表点击一下就好了  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 21]  
删除应用如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 22]

[Link 1]: https://ruochen.blog.csdn.net/article/details/111657921
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70]: /images/20221120/3e4f0809e275452eaa2d3376941980a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 1]: /images/20221120/ff7352b1eba846af82319ecbe1574bda.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201224213409283.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201224213504171.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201224213538684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20201224213611717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20201224214249761.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20201224214108313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20201224214200803.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20201224214452312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/202012242145181.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020122421471877.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20201224214957496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20201224220808502.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20201224220905885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20201224221051261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20201224221323229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20201224221340752.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20201224221417663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20201224222002322.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/2020122422202940.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 21]: https://img-blog.csdnimg.cn/20201224222456478.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3_size_16_color_FFFFFF_t_70 22]: https://img-blog.csdnimg.cn/20201224222523148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5MzM5NDY3,size_16,color_FFFFFF,t_70