开发者社区> 木木工程师> 正文

基于阿里的Node全栈之路(三)利用阿里云OSS实现前后端分离

简介: 这个是开发上老生常谈的话题。如何利用云上资源,使项目前后端分离实现更彻底,让前端完全脱离服务器的概念,是我现在技术进阶的一部分!这次前后端分离的内容会比较多,后面还会有续集
+关注继续查看

嘿嘿,上篇文章因为在火车上写的,偷懒了,心存愧疚,还是补发一篇吧!

这次嘞,我们聊聊开发上老生常谈的话题,前后端分离。在文章第一篇里,我用了一张我的架构图,这里我把关于OSS的这部分抽出来。


_1_

可以看到这种图上,我的docker是只有restful api的作用,在web端应用,客户访问我的网站的时候,是跳转到OSS上的。没错,没错,在我这里,没有使用类似jsp、asp、ejs这些动态页面。先不说两者的优劣,我这里使用的方案,其实蛮有趣的,而且非常的高效实用!对于中型项目是完全行得通的,大型项目架构做得好的话,其实也是ok的。

敲黑板!敲黑板!

下面介绍下我的前端技术架构的实现。大家是否还记得我前面说的我的文件结构

  • -project

    • -api // 项目的api
    • -app // React-Native,移动端
    • -www // 项目主页
    • -admin // 项目后端管理系统
    • -h5 // 宣传H5
    • -Dockerfile // 部署api使用

好,我们的重点就是www和admin,www和admin的结构基本一致。

先列下我们会使用到的技术:


1. vue //这个不用我介绍了吧
2. vue-cli //vue项目脚手架
3. webpack-template //vue项目脚手架生成的webpack模板

嗯,我的文章前端是围绕着vue来的,react那些其实类似,感兴趣的童鞋可以自己动手试试。

流程

  1. 用vue-cli生成一个webpack或者其它什么模板的脚手架(因为我对其它模版没有尝试,这里就指定是webpack模板,这样让大家少走些弯路)
  2. 项目构建
yarn
#or
npm install
  1. 生成生产环境代码
yarn build
#or
npm build

你会在项目中得到类似这样的文件:

* -project
 * -dist //生产环境代码
   * -static //静态文件
   * -index.html //页面
  1. 创建阿里云OSS的bucket,然后把dist里面的文件全部放到bucket的根目录下,类似这样。
    1506365022319
  2. 在OSS基础设置那里设置默认访问页面
    image
  3. 绑定域名(这里给个建议,最好域名和oss都在同个账号下,可以省很多时间,阿里可以自动挂上,如果想让自己网站是https访问的,绑定时勾选开启CDN,也可以自己后期手动开)
    image
  4. 给自己的网站挂上https,进到CDN管理界面,点击域名管理,在https设置里面,修改配置,如果是阿里云上下发的证书是可以直接勾选的,不过这里要@阿里云 ,为啥上面没名字的,竟然是"cert-"后面跟着一串码,我怎么记得嘛!
    image
  5. 进阶篇-自动上传前端代码到OSS

好啦,到这里,你已经可以直接访问 http://www.xxxxxx.comhttps://www.xxxxxx.com 来访问我的主页了。

嗯,这下估计有同学会问了,为什么要这样做,这是静态页面!!!

但还记得文章开头我说的吗?这是一种新的方式。

我其实之前很无聊的为了一个用vue框架写的代码,竟然启动了一个docker来让别人来访问!

然后,我发现我启动一个node竟然只是为了让别人能够访问我的静态页面和文件!

因为本身用vue搭的代码本身就不需要动态网页ejs这些类似的特性的!

所以,如果真的想体验前后端分离的好处,那就不要把鉴权这些繁琐的业务放在动态jsp、asp、ejs这些地方,而更应该是放在api上做好鉴权,说句不好听的话,你就算在动态网页上做了鉴权,权限较低的就不能访问某些页面,但是那样有意义吗?

1. api上还是要做鉴权,这是浪费劳动力
2. 动态构建增加资源的损耗,这个最简单的体现是OSS的流量价格和ECS或者负载均衡的带宽,还有CDN什么的(公司太有钱另说)

要我说,计算和逻辑这些核心的东西,才是最应该放到ECS或Docker上,其它的就应该服务商托管。

今天刚到家,明天看看有没有空,来聊聊前后端分离的请求封装,实际使用效果非常的棒!,另外也想寻有相关经验的高手来一起探讨下应用型公司的技术实践。

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

相关文章
超大坑!springboot + vue + element-ui,运行前端项目报these dependencies were not found的问题
These dependencies were not found: * babel-runtime/core-js/json/stringify in ./src/mock/modules/sys-menu.
8215 0
Hex
阿里云 OSS 一站式前端资源上传工具
Resource Uploader 一站式前端资源 CDN 上传工具(使用阿里云 OSS) 安装 npm install -g resource-uploader 特性 支持 ES6/7/8 转译 ES5 支持 Javascript 压缩和优化 支持 Sass/Less 转 CSS 支持 CSS...
3321 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,大概有三种登录方式:
7592 0
一个简单的前端 router hash 模式实现
最近做的业务展现在 app 重的 webview 里,app 提供的 webview 框架是默认有底部返回按钮的。pm 希望前端外部页面的框架保持不变,框架中展现的卡片页面可以点击返回按钮进行切换返回。于是想到了用一个简易的前端 router 来实现。
1193 0
前端走进机器学习生态,在 Node.js 中使用 Python
从今天开始,你就可以开始看着 Python 的文档,使用 JavaScript 来“学习和使用”机器学习和深度学习了!
1798 0
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
18075 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
23594 0
好程序员web前端培训教程之Node Js流程
好程序员web前端培训学习教程之Node Js流程
1546 0
基于阿里的Node全栈之路(四)前后端分离进阶-自动上传前端代码到OSS
上一篇文章提到我们是人工上传构建后的代码的,作为一个自认自动化运维程度算比较高的我,怎么能忍受嘞,怎么也得是自动的吧! 这里,贴出我的自动化上传代码。
7249 0
基于阿里的Node全栈之路(七)[源码分享]——打造高效的开发流程
上一篇忘记放github地址了,这份代码可以说是我打造阿里高自动化运维的结晶,基本上,如果是在阿里云上部署项目的Node全栈工程师,应该会有很多借鉴的地方,如果有什么不懂的,也欢迎来找我。
2317 0
+关注
木木工程师
全栈工程师
8
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载