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

本文涉及的产品
.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了

下线&删除应用

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

目录
相关文章
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
44 3
|
2月前
|
前端开发 JavaScript Python
Python Web应用中的WebSocket实战:前后端分离时代的实时数据交换
在前后端分离的Web应用开发模式中,如何实现前后端之间的实时数据交换成为了一个重要议题。传统的轮询或长轮询方式在实时性、资源消耗和服务器压力方面存在明显不足,而WebSocket技术的出现则为这一问题提供了优雅的解决方案。本文将通过实战案例,详细介绍如何在Python Web应用中运用WebSocket技术,实现前后端之间的实时数据交换。
107 0
|
6天前
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
|
8天前
|
安全 应用服务中间件 网络安全
实战经验分享:利用免费SSL证书构建安全可靠的Web应用
本文分享了利用免费SSL证书构建安全Web应用的实战经验,涵盖选择合适的证书颁发机构、申请与获取证书、配置Web服务器、优化安全性及实际案例。帮助开发者提升应用安全性,增强用户信任。
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
180 45
|
1月前
|
机器学习/深度学习 数据采集 Docker
Docker容器化实战:构建并部署一个简单的Web应用
Docker容器化实战:构建并部署一个简单的Web应用
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
53 1
|
2月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
127 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
1月前
|
SQL 负载均衡 安全
安全至上:Web应用防火墙技术深度剖析与实战
【10月更文挑战第29天】在数字化时代,Web应用防火墙(WAF)成为保护Web应用免受攻击的关键技术。本文深入解析WAF的工作原理和核心组件,如Envoy和Coraza,并提供实战指南,涵盖动态加载规则、集成威胁情报、高可用性配置等内容,帮助开发者和安全专家构建更安全的Web环境。
66 1
|
1月前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
63 2