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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储 OSS,内容安全 1000 次 1年
对象存储 OSS,恶意文件检测 1000次 1年
简介: 阿里云云开发平台重磅推出开源应用中心,聚合最热门的开源应用,让你像安装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. 本活动最终的解释权归阿里巴巴集团所有。


相关文章
|
13天前
|
弹性计算 安全 Linux
阿里云服务器购买、域名注册、备案和域名绑定全流程指南,图文教程参考
对于初次构建网站的用户而言,实现云端部署需依次完成云服务器选购、域名注册、备案及域名绑定等关键步骤,待上述流程全部完成后,网站方可正式上线运营。本文基于阿里云2025年云服务器购买政策及域名备案规范,系统梳理了阿里云服务器的购买流程、域名注册与绑定方法以及备案操作指南,全文以图文并茂的形式详细阐述各环节的具体操作步骤及注意事项,供新手用户参考。
|
12天前
|
弹性计算 人工智能 运维
如何基于阿里云 ECS 一键部署 AskTable?
AskTable + 阿里云 ECS 一键私有部署方案,3 分钟快速搭建专属数据智能平台。无需复杂运维,支持弹性扩展、私网安全访问及AI对话式分析,助力企业高效、安全实现数据智能。
|
6天前
|
弹性计算 ice
阿里云4核8g服务器多少钱一年?1个月和1小时价格,省钱购买方法分享
阿里云4核8G服务器价格因实例类型而异,经济型e实例约159元/月,计算型c9i约371元/月,按小时计费最低0.45元。实际购买享折扣,1年最高可省至1578元,附主流ECS实例及CPU型号参考。
137 0
|
14天前
|
Java Linux Apache
在CentOS服务器上编译并部署NiFi源码
部署Apache NiFi在CentOS上是一个涉及细节的过程,需要注意Java环境、源码编译、配置调整等多个方面。遵循上述步骤,可以在CentOS服务器上成功部署和配置Apache NiFi,从而高效地处理和分发数据。
89 17
|
6天前
|
弹性计算 人工智能 前端开发
在阿里云ECS上部署n8n自动化工作流:U2实例实战
本文介绍如何在阿里云ECS的u2i/u2a实例上部署开源工作流自动化平台n8n,利用Docker快速搭建并配置定时任务,实现如每日抓取MuleRun新AI Agent并推送通知等自动化流程。内容涵盖环境准备、安全组设置、实战案例与优化建议,助力高效构建低维护成本的自动化系统。
122 5
|
10天前
|
存储 弹性计算 网络协议
超详细的阿里云服务器购买流程,ECS自定义购买配置教程
本文详细图解阿里云ECS服务器自定义购买全流程,涵盖付费模式、地域选择、网络配置、实例规格、镜像、存储、安全组及登录设置等核心步骤,助您轻松掌握专业级云服务器搭建方法。
|
11天前
|
存储 弹性计算 Linux
阿里云账号注册、领取优惠券、试用云服务器和购买云服务器教程参考
对于还未使用阿里云任何云产品的用户来说,完整的上云流程包括账号注册并完成实名认证,然后才是试用或者购买云服务器,有的新手用户对这一流程还不是很清楚。本文为大家介绍新手用户从注册阿里云账号,完成实名认证,然后领取阿里云优惠券,并试用云服务器和购买云服务器的全部流程,适合初次购买和试用阿里云服务器的新手用户参考。
|
6天前
|
弹性计算
阿里云8核16G云服务器收费标准:最新价格及省钱购买方法整理
阿里云8核16G云服务器价格因实例类型而异。计算型c9i约743元/月,一年6450元(7折);通用算力型u1约673元/月,一年仅需4225元(5.1折)。实际价格享时长折扣,详情见ECS官网。
|
10天前
|
域名解析 弹性计算 负载均衡
给阿里云服务器加速的方法有哪些?
本文介绍如何通过阿里云CDN加速、ECS网络优化及SLB负载均衡三种方法提升服务器响应速度。涵盖具体操作步骤,助力用户优化访问性能。
|
4天前
|
弹性计算 运维 安全
区别及选择指南:阿里云轻量应用服务器与ECS云服务器有什么区别?
阿里云轻量应用服务器适合个人开发者、学生搭建博客、测试环境,易用且性价比高;ECS功能更强大,适合企业级应用如大数据、高流量网站。根据需求选择:轻量入门首选,ECS专业之选。

热门文章

最新文章