新手建站就用这个方法,无需购买服务器10分钟快速部署你的静态网页-阿里云开发者社区

开发者社区> 游客e3z6zif73awni> 正文

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

简介: 阿里云云开发平台重磅推出开源应用中心,聚合最热门的开源应用,让你像安装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. 本活动最终的解释权归阿里巴巴集团所有。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8119 0
再见 HTTP?10 分钟手把手教会你将网站切换到 HTTPS,安全有保障,yyds!(1)
再见 HTTP?10 分钟手把手教会你将网站切换到 HTTPS,安全有保障,yyds!
63 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
2698 0
再见 HTTP?10 分钟手把手教会你将网站切换到 HTTPS,安全有保障,yyds!(2)
再见 HTTP?10 分钟手把手教会你将网站切换到 HTTPS,安全有保障,yyds!
67 0
阿里云学生服务器搭建网站---阿里云学生服务器购买
阿里云学生服务器搭建网站-购买阿里云服务器
424 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
9900 0
5分钟快速安装ASP.NET Core 网站运行环境
简介 ASP.NET Core 是新一代的 ASP.NET,早期称为 ASP.NET vNext,并且在推出初期命名为 ASP.NET 5,但随着 .NET Core 的成熟,以及 ASP.NET 5 的命名会使得外界将它视为 ASP.NET 的升级版,但它其实是新一代从头开始打造的 ASP.NET 核心功能,因此微软宣布将它改为与 .NET Core 同步的名称,即 ASP.NET Core。
2269 0
jsp文件的请求是如何被服务器的JSP容器转换成静态网页的
jsp文件的请求是如何被服务器的JSP容器转换成静态网页的
64 0
万台服务器分钟级部署,探秘阿里双十一弹性扩容背后的技术故事
与您分享下双十一的秘密武器~ 请移步:容器镜像服务产品页,了解更多:https://www.aliyun.com/product/acr
6129 0
20
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载