新手建站方法介绍：无需购买服务器快速部署静态网页

阿里云云开发平台重磅推出开源应用中心，聚合最热门的开源应用，让你像安装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 选择应用中心任意模版创建应用

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

 

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

 

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

 

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

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

 

• 设定部署配置。当部署的是您自己的代码仓库时，开发平台需要您根据具体代码进行简单配置来部署成功：

1. 编写build.sh：代码从源码，经过npm打包编译等过程，到生成为纯粹HTML/CSS/JS静态文件的全过程的shell指令，需要被完整填写到发布分支根路径下的build.sh文件中，例如：

   

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

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

 

Tip：例如React应用（如图），一般会填写“./build”；Vue应用则一般为“./dist”。

 

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

   

3. 在日常环境部署站点

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

 

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

 

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

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

 

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

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

审核编辑：符乾江