17666030540

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 网站建设 >

云开发静态网站托管现已支持 Angular 应用

发表时间:2020-05-14 21:12

文章来源:快明科技

浏览次数:

互联网人工智能 网站开发

A BOUTBEAUTY 关于研究君 每天精选深度互联网业内文章、收集最新互联网业界资讯、移动互联网报道、研究、服务为己任的第三方行业研究机构。   设计主要是根据客户的需求来做客户需求的产品        一、前期的一个准备阶段,获取网站所需要的信息,以及客户的

云开发静态托管是云开发提供的静态网站托管的能力,静态资源(HTML、CSS、JavaScript、字体等)的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持。

在云开发静态托管中,你同样可以托管一个 Angular 项目,接下来,我就介绍一下应该如何将一个 Angular 项目部署到云开发静态网站托管服务中。

 

初始化一个 Angular 项目

首先,我们使用 Angular cli 创建一个项目,来作为演示:

  •  
  •  
ng new cloudbasecd cloudbase

执行完成后,可以执行 npm run start 启动预览,查看一下效果。

看完效果以后,可以执行 npm run build 来构建出最终的产出物

在构建完成后,我们可以在 dist/cloudbase 中看到我们的项目构建产物。

 

创建云开发环境

完成了 Angular 项目的创建后,接下来创建云开发的环境,访问云开发控制台,点击上方的新建环境,创建一个新的环境。在弹出的界面中输入你的环境名称,并选择按量计费,点击下方的立即开通,就可以开通一个云开发环境了。

等待环境初始化完成后,点击刚刚创建好的环境,进入到详情页,点击左侧的环境设置,可以看到环境的 ID, 记住这里的环境 ID,后续上传文件的时候会用到。

再次选择左侧列表的「静态网站托管」:

在静态网站托管页面选择立即开通:

等待静态网站托管服务开通后,你就可以看到这样的界面。点击上方的「设置」,可以看到你的测试域名,后续上传后,你就可以在这个测试域名中查看你的站点。

 

 

初始化云开发 Cli

完成了环境的创建后,接下来配置云开发 Cli。

程序员自己的个人网站搭建必备指南

阅读本文需要1分钟  请各位还没有自己个人网站的仔细阅读。 如果是程序员一般都会搭建自己的个人网站,将自己每次study到自己的网站上。建网站很容易,两大件:服务器和域名,域名顶级的.com也就50几元一年,大头是服务器,动辄上千。  如果说什么是程序员的

安装云开发 Cli 并登陆:

首先,我们执行命令安装云开发 Cli:

  •  
npm i -g @cloudbase/cli

安装完成后, 执行命令登陆 Cli:

  •  
tcb login

系统会自动打开浏览器,你只需要在弹出的页面中登陆你的腾讯云账号,并授予 Cli 权限就可以操作了。

 

上传文件

完成了 Cli 的登陆后,接下来就可以上传文件了。首先,进入到 Angular 项目的 dist 目录:

  •  
cd dist/cloudbase

然后,执行命令来上传文件:

  •  
tcb hosting:deploy -e envId

这里你需要将 envId 替换为你自己的环境 ID,比如我的替换为 website-126ca8,结果如下:

可以看到,我成功的上传了文件,这个时候,我可以直接访问我的测试域名来查看我刚刚上传的 Angular 项目。

当你看到这样的界面时,就说明你配置成功了。

 

总结

云开发的静态托管中想要上传 Angular 项目也十分简单,你只需要初始化一个 Angular 项目,并使用云开发的 CLi 工具就可以完成文件的上传。

 

 

本文由快明科技整理发布,需要转载请联系邮箱863854976@qq.com

【网站搭建】-网站建设终极版本:13个教学+费用

针对采用WordPress搭建外贸网站,我之前写过很多,此篇是我完整教学的第一篇,以后将会重点讲述网站营销方面的文章。 对此,我在以下13个教学,示范如何建立网站。从域名申请到DNS设定、从架站平台比较(免费、付费)到虚拟主机推荐。 无论是搭建电商官网还是

相关案例查看更多