新手建站就用这个方法,无需购买服务器10分钟快速部署你的静态网页

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,恶意文件检测 1000次 1年
.cn 域名,1个 12个月
简介: 阿里云云开发平台重磅推出开源应用中心,聚合最热门的开源应用,让你像安装app一样快速上线一个网站。面向新人和持续活跃的开发者用户推出上线激励加油包,最高100元无门槛代金券免费送,现在体验还能够领取年轻人的养生神器,桌面不锈钢保温杯!

阿里云云开发平台重磅推出开源应用中心,聚合最热门的开源应用,让你像安装app一样快速上线一个网站。面向新人和持续活跃的开发者用户推出上线激励加油包,最高100元无门槛代金券免费送,现在体验还能够领取年轻人的养生神器,桌面不锈钢保温杯!

聚合最热门的开源应用


开源应用中心聚合了目前最热门的前端开源应用模版,让大家真正可以做到像安装APP一样来上线一个网站。目前已经支持最热门的前端框架,包括Vue.js、React、Nuxt.js、Next.js、AntDesign等,还有内容管理平台Hexo、Docusaurus、VuePress、Sapper等。使用部署开源模版非常适合您的以下场景:

  • 个人学习:轻松创建个人主页、博客等网站,边部署边学习。
  • 协同开发:创建信息管理系统、CMS等前端项目,多人协同维护开发。

云开发平台同样面向广大的开源作者征集应用,对于热门的应用我们能够提供现金激励、以及流量曝光等扶持。


开源应用一键同步一键部署


阿里云云开发平台前端应用部署功能旨在为前端开发者改善工作环境,优化前端开发和部署体验。同时还可以结合云开发平台云原生的架构能力和主机应用的部署能力,让前后端应用能够更高效地协同。

  • 操作简单:无需购买服务器、配环境、手动上传文件等,云开发平台都可以帮你自动操作,包括在需要时随时一键上线/下线。
  • 使用零成本:  支持GitHub和云效的Codeup仓库,快速将仓库的代码进行构建部署。
  • 免费资源扶持: 免费提供临时的测试域名,对于新用户和持续活跃的用户提供免费的云资源加油包。
  • 无数量限制:  没有使用的repo数量和应用数量的限制, 不管是开源仓库还是自己账户下的repo,每一个代码repo都可以部署为一个静态网站。

简单几步使用云开发平台上线静态应用

1. 账号准备工作

  • 你需要一个阿里云账号,并使用阿里云账号登录云开发平台 (https://workbench.aliyun.com/),按照提示创建团队,点击同意协议。没有阿里云账号就在登录页面注册一个继续登录。
  • 拥有Github账号 (https://github.com/),没有就注册一个。为保证最好的使用体验,请使用Chrome浏览器。
  • 未开通阿里云OSS的用户,点击链接 (https://workbench.aliyun.com/product/open?code=oss)开通OSS服务。OSS开通免费,有一定的免费额度,超过额度之后按量付费。

2. 创建应用

2.1 选择应用中心任意模版创建应用

  • 选择应用中心任意模版创建应用。如果您之前没有使用过云开发平台,会出现云资源授权管理的选项,往下拉出现直至同意授权的字样,点击「同意授权」后出现授权成功,点击进入「下一步」。

1.png

  • 绑定GitHub账号。授权完成后选择来源仓库为GitHub,按照提示点击去绑定,绑定GitHub帐号,登录后并点击Authorize AliyunWorkbench允许云开发平台构建、发布你的GitHub代码为可访问的网站。 绑定完成后返回应用创建页面,代码仓库按照默认「模板仓库」以及默认主干分支不用操作,并点击「下一步」。

2.png

  • 填写应用信息完成创建。填写必要的的应用信息完成创建(我们已提供默认配置),成功后进入到应用详情和部署界面。首次登录并没有可选所属生产线,点击右侧自动创建产品线即可。

3.png

2.2 使用自己的仓库应用创建


  • 选择自己仓库里需要部署的应用。除了可以使用应用中心的模版创建网站,云开发平台也支持使用本地代码或者开源代码创建静态网站。与通过模版中心的应用创建的区别在于,在绑定Gihutb之后选择“自己的仓库”,找到上一步自己创建的GitHub仓库及master分支。然后在应用详情页面根据以上的步骤继续填写即可。

4.png

  • 设定部署配置。当部署的是您自己的代码仓库时,开发平台需要您根据具体代码进行简单配置来部署成功:
  1. 编写build.sh:代码从源码,经过npm打包编译等过程,到生成为纯粹HTML/CSS/JS静态文件的全过程的shell指令,需要被完整填写到发布分支根路径下的build.sh文件中,例如:

5.png

6.png

不知道如何操作?您也可直接点击一次“部署”按钮,之后,对默认生成的build.sh内容进行任意修改:


b. 填写静态文件相对目录:在build.sh执行后,从代码生成出的静态文件所在的相对目录,需要被填写到“部署配置-资源路径”中。

8.png

Tip:例如React应用(如图),一般会填写“./build”;Vue应用则一般为“./dist”。

9.png

c. 调整配置:当您完成上述步骤后,发现自己的代码仍然部署错误时,需查看排查部署日志,对上面的build.sh和部署资源路径进行修改。常见的几种部署错误情况如下:

10.png

11.png

3. 在日常环境部署站点


  • 一键进行应用部署。在应用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署以后可以点击访问部署网站查看效果。

12.png

  • Dinosaurs网站日常环境部署好了。日常环境的测试域名也是可以访问的,点击访问已部署网站按钮会出现一个弹出,点击弹出上的立即访问就能够访问已经部署好的站点了。在部署完成后,可以继续本地编码,并将代码push到应用的“基本信息”中对应的代码仓库内。

13.png

4. 配置自定义域名在线上环境上线


  • 配置线上环境自定义域名。在功能开发验证完成后要在线上环境进行部署,在线上环境的「部署配置」-「自定义域名」中填写自己的域名。例如我们添加一个二级域名 company.workbench.fun 来绑定我们部署的前端应用。然后复制自定义域名下方的API网关地址对添加的二级域名进行CNAME配置。

14.png

  • 配置CNAME地址。复制好 API网关域名地址后,来到你自己的域名管理平台(此示例中的域名管理是阿里云的域名管理控制台,请去自己的域名控制台操作)。添加记录的「记录类型」选择「CNAME」,在「主机记录」中输入你要创建的二级域名,这里我们输入「company」,在「记录值」中粘贴我们之前复制的 API网关域名地址,「TTL」保留默认值或者设置一个你认为合适的值即可。

15.png


  • 在线上环境部署上线。回到云开发平台的应用详情页面,按照部署的操作,点击线上环境的「部署按钮」,部署完成以后就在你自定义的域名进行了上线。CNAME 生效之后,我们输入 company.workbench.fun(示例网址) 可以打开部署的页面。至此,如何部署一个应用到线上环境,如何绑定自己的域名来访问一个线上的应用就完成了,赶紧部署自己的应用到线上环境,用自己的域名玩起来吧 ;)

16.png

立即体验领取双重好礼


第一个任务:使用阿里云账号登录云开发平台,创建团队和同意平台使用协议,仅云开发平台新用户可以完成。

第二个任务:部署开源应用中心列表页任意一个应用,并绑定自己的个人域名在线上环境上线。

第三个任务:点击前往提交你最想在开源应用中心看到的开源应用,可以是从现有列表中的应用,也可以是开源应用中心还没有上线的应用,我们收到你的需求后会优先上线。

截屏2021-12-08 上午9.56.22.png

一重礼:桌面不锈钢保温杯

完成全部3个任务即可领取桌面不锈钢保温杯领取资格,打卡任务状态有一定延时,请完成后刷新。活动期间(12月15日-12月24日)每个工作日150个,上午10点发放,领完为止。如果当天奖品已经领完,可以先完成打卡任务,第二天准时来领取即可!

18.jpeg19.jpeg


二重礼:免费云资源激励加油包

云开发平台为新用户提供了10元无门槛加油包,在活动页面完成相应的新手任务即可领取。

针对使用云开发平台上线个人或者企业站点的用户,可以申请领取100元的无门槛加油券。申请的用户需要满足两个条件,1.通过云开发平台上线了个人或者实际使用的网站,2. 撰写一篇基于云开发平台上线该网站的经验分享文章。工作人员会在收到申请后的60天完成审核,请确保站点保持在线上。


详细活动规则

活动对象:阿里云官网注册的已实名认证用户
活动时间:2021.12.15-2021.12.22, 活动延期到12月24日。
活动网址:https://workbench.aliyun.com/app


  1. 用户需要完成指定的所有打卡任务才可以领取奖品,同一用户限领一次。活动期间奖品每天发放150个,周六除外,每天上午10都会新补仓奖品,当日奖品领完以后可以次日再来领取,先到先得,发完即止。
  2. 实物奖品以实物为准,颜色随机,图片仅供参考,活动结束后15个工作日内发货。如果由于疫情影响,导致实物奖品发货时间不确定,请留意活动群的公告信息。
  3. 10元代金券奖品需要在新手加油包页面完成新手任务以后才可以领取。100元代金券需要按照表单填写进行申请,工作人员会在收到申请后的60天完成审核,请确保站点保持在线上。如果在60天内审核当天网站无法访问,将会造成无法通过审核。
  4. 阿里云可以根据活动的实际情况对活动规则进行变动或调整,相关变动或调整将公布在活动页面上,并于公布时即时生效;但不影响用户在活动规则调整前已经获得的权益。
  5. 活动相关问题可以钉钉扫码加入云开发的活动群或者搜索钉钉群号: 34096194加入。
  6. “同一用户”,是指根据不同阿里云账号在注册、登录、使用中的关联信息,阿里云判断其实际为同一用户。关联信息举例:同一证件、同一手机号、同一支付账号、同一设备、同一地址等。
  7. “同人账号”,是指同一用户拥有多个阿里云账号的,各个账号之间互为同人账号。
  8. 为保证活动的公平公正,如用户在活动中存在隐瞒、虚构、作弊、欺诈或通过其他非正常手段规避活动规则、获取不当利益的行为,例如:作弊领取、恶意套现、网络攻击、虚假交易等,阿里云有权收回相关权益、取消用户的活动参与资格,撤销违规交易,必要时追究违规用户的法律责任。
  9. 本活动最终的解释权归阿里巴巴集团所有。


相关文章
|
1月前
|
Java
java小工具util系列5:java文件相关操作工具,包括读取服务器路径下文件,删除文件及子文件,删除文件夹等方法
java小工具util系列5:java文件相关操作工具,包括读取服务器路径下文件,删除文件及子文件,删除文件夹等方法
69 9
|
6天前
|
SQL 弹性计算 安全
阿里云上云优选与飞天加速计划活动区别及购买云服务器后续必做功课参考
对于很多用户来说,购买云服务器通常都是通过阿里云当下的各种活动来购买,这就有必要了解这些活动的区别,同时由于活动内的云服务器购买之后还需要单独购买并挂载数据盘,还需要设置远程密码以及安全组等操作之后才能正常使用云服务器。本文就为大家介绍一下目前比较热门的上云优选与飞天加速计划两个活动的区别,以及通过活动来购买云服务器之后的一些必做功课,确保云服务器可以正常使用,以供参考。
|
1月前
|
弹性计算 安全 网络安全
阿里云服务器四种常见购买方式适用对象与购买流程参考
阿里云服务器有多种购买方式,不同的方式适合对象与购买流程不一样,常见的购买方式有自定义购买、一键购买、云市场购买和通过活动购买四种方式。本文为大家介绍这四种方式的区别、适合对象以及详细的流程,以供参考和选择。
|
1月前
|
弹性计算 异构计算
2024年阿里云GPU服务器多少钱1小时?亲测价格查询方法
2024年阿里云GPU服务器每小时收费因实例规格不同而异。可通过阿里云GPU服务器页面选择“按量付费”查看具体价格。例如,NVIDIA A100的gn7e实例为34.742元/小时,NVIDIA A10的gn7i实例为12.710156元/小时。更多详情请访问阿里云官网。
131 2
|
1月前
|
人工智能 弹性计算 关系型数据库
学生免费领取阿里云服务器一年的方法,以及各种活动
学生可以免费领取阿里云服务器一年,新人可获2核4G,非新人2核2G。访问链接注册并完成学生认证,领取300元无门槛优惠券,购买轻量应用服务器。此外,还有多项活动可赢取实物奖品。
333 2
|
1月前
|
安全 数据挖掘 网络安全
网站建站如何选择合适的服务器配置
建站初期应进行长期数据分析与预测,合理选择服务器配置。主要依据同时在线人数、CPU性能、内存大小及带宽类型,同时考虑安全防护,如选择带防火墙的高防服务器,确保网站稳定运行与良好用户体验。
44 0
|
2月前
|
弹性计算 开发框架 .NET
阿里云服务器购买教程及云服务器地域、实例、操作系统、带宽等参数选择指南
对于初次购买阿里云服务器的用户来说,想使用阿里云服务器搭建网站或者运行APP、小程序等项目,第一步就是要先购买阿里云服务器,下面小编以图文形式给大家介绍一下阿里云服务器的购买流程,以及购买过程中如何云服务器地域、实例、带宽等关键配置和选择这些参数的一些注意事项,以供参考。
|
2月前
|
Web App开发 安全 网络安全
tplink虚拟服务器设置方法
为了更全面地理解云服务及其在企业应用中的角色,推荐访问,他们提供了一系列高性能、安全稳定的云服务器解决方案,包括但不限于香港云服务器、高防服务器等,特别适合寻求全球化业务扩展的企业。蓝易云不仅拥有全球化的基础设施布局,还提供针对各种行业定制的全栈云解决方案,助力企业实现云端部署,跨越传统界限,即刻启航云端之旅。
54 0
|
2月前
|
前端开发 Docker 容器
主机host服务器和Docker容器之间的文件互传方法汇总
Docker 成为前端工具,可实现跨设备兼容。本文介绍主机与 Docker 容器/镜像间文件传输的三种方法:1. 构建镜像时使用 `COPY` 或 `ADD` 指令;2. 启动容器时使用 `-v` 挂载卷;3. 运行时使用 `docker cp` 命令。每种方法适用于不同场景,如静态文件打包、开发时文件同步及临时文件传输。注意权限问题、容器停止后的文件传输及性能影响。
442 0
|
5天前
|
弹性计算 运维 安全
阿里云轻量应用服务器与ECS的区别及选择指南
轻量应用服务器和云服务器ECS(Elastic Compute Service)是两款颇受欢迎的产品。本文将对这两者进行详细的对比,帮助用户更好地理解它们之间的区别,并根据自身需求做出明智的选择。
下一篇
DataWorks