zoukankan      html  css  js  c++  java
  • 云开发静态网站托管现已支持 Angular 应用

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

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

    初始化一个 Angular 项目

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

    ng new cloudbase
    cd cloudbase
    

    image-20200424184233870

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

    image-20200424184251681

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

    image-20200424184307504

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

    image-20200424184329873

    创建云开发环境

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

    image-20200424184341980

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

    image-20200424184359668

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

    image-20200424184411281

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

    image-20200424184425581

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

    image-20200424184436842

    初始化云开发 Cli

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

    安装云开发 Cli 并登陆

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

    npm i -g @cloudbase/cli
    

    image-20200424184448280

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

    tcb login
    

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

    上传文件

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

    cd dist/cloudbase
    

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

    tcb hosting:deploy -e envId
    

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

    image-20200424184504839

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

    image-20200424184513121

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

    总结

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

    One More Thing

    9.9元包年静态网站托管服务赞助计划,只要是技术站点即可参与,点击下方链接,立即申请!

    申请链接:https://cloud.tencent.com/product/wh?from=12331

    公众号:腾讯云云开发

    腾讯云云开发:https://cloudbase.net

    云开发控制台:https://console.cloud.tencent.com/tcb?from=12304


    更多精彩
    扫描二维码了解更多

  • 相关阅读:
    递归
    书评:《C程序设计语言》
    下一代互联网,今日揭开面纱:IPv6真的要来了
    庆祝Alan Mathison Turing(艾伦·图灵)诞辰100周年!
    svn常用命令行和批处理
    ORACLE 9i数据导入到ORACLE 10G中文出现的乱码问题
    Oracle 11G 的客户端,不再支持连接到ORACLE 8I
    DB2 一个汉字的Byte数,太操蛋了
    关于Windows 7 64位下Visual Studio 2010 开发的Asp.net程序连接Oracle 的出现的问题
    Web Frame 跨域调用Session 丢失问题
  • 原文地址:https://www.cnblogs.com/CloudBase/p/12771680.html
Copyright © 2011-2022 走看看