基于阿里的Node全栈之路(三)利用阿里云OSS实现前后端分离
2017-09-26 14:15
561 查看
点击查看全文
嘿嘿,上篇文章因为在火车上写的,偷懒了,心存愧疚,还是补发一篇吧!
这次嘞,我们聊聊开发上老生常谈的话题,前后端分离。在文章第一篇里,我用了一张我的架构图,这里我把关于OSS的这部分抽出来。
可以看到这种图上,我的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的结构基本一致。
嗯,我的文章前端是围绕着vue来的,react那些其实类似,感兴趣的童鞋可以自己动手试试。
用vue-cli生成一个webpack或者其它什么模板的脚手架(因为我对其它模版没有尝试,这里就指定是webpack模板,这样让大家少走些弯路)
项目构建
生成生产环境代码
你会在项目中得到类似这样的文件:
-project
-dist //生产环境代码
-static //静态文件
-index.html //页面
创建阿里云OSS的bucket,然后把dist里面的文件全部放到bucket的根目录下,类似这样。
在OSS基础设置那里设置默认访问页面
绑定域名(这里给个建议,最好域名和oss都在同个账号下,可以省很多时间,阿里可以自动挂上,如果想让自己网站是https访问的,绑定时勾选开启CDN,也可以自己后期手动开)
给自己的网站挂上https,进到CDN管理界面,点击域名管理,在https设置里面,修改配置,如果是阿里云上下发的证书是可以直接勾选的,不过这里要@阿里云 ,为啥上面没名字的,竟然是"cert-"后面跟着一串码,我怎么记得嘛!
进阶篇-自动上传前端代码到OSS
点击查看全文
嘿嘿,上篇文章因为在火车上写的,偷懒了,心存愧疚,还是补发一篇吧!
这次嘞,我们聊聊开发上老生常谈的话题,前后端分离。在文章第一篇里,我用了一张我的架构图,这里我把关于OSS的这部分抽出来。
敲黑板!敲黑板!
下面介绍下我的前端技术架构的实现。大家是否还记得我前面说的我的文件结构
-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那些其实类似,感兴趣的童鞋可以自己动手试试。
流程
用vue-cli生成一个webpack或者其它什么模板的脚手架(因为我对其它模版没有尝试,这里就指定是webpack模板,这样让大家少走些弯路)项目构建
yarn #or npm install
生成生产环境代码
yarn build #or npm build
你会在项目中得到类似这样的文件:
-project
-dist //生产环境代码
-static //静态文件
-index.html //页面
创建阿里云OSS的bucket,然后把dist里面的文件全部放到bucket的根目录下,类似这样。
在OSS基础设置那里设置默认访问页面
绑定域名(这里给个建议,最好域名和oss都在同个账号下,可以省很多时间,阿里可以自动挂上,如果想让自己网站是https访问的,绑定时勾选开启CDN,也可以自己后期手动开)
给自己的网站挂上https,进到CDN管理界面,点击域名管理,在https设置里面,修改配置,如果是阿里云上下发的证书是可以直接勾选的,不过这里要@阿里云 ,为啥上面没名字的,竟然是"cert-"后面跟着一串码,我怎么记得嘛!
进阶篇-自动上传前端代码到OSS
点击查看全文
相关文章推荐
- 基于阿里的Node全栈之路(四)前后端分离进阶-自动上传前端代码到OSS
- 基于 Node.js 实现前后端分离
- 基于springboot+vue+element+ueditor实现前后端分离的富文本框实现
- 图解基于node.js实现前后端分离
- 利用阿里云OSS开发一个私人网盘/外链系统,php+js实现
- 图解基于node.js实现前后端分离
- OSS阿里云存储——整合Spring文件上传,实现动静网站资源分离
- 基于阿里云oss及jquery.magnific-popup的在线图片浏览功能的实现
- 图解基于node.js实现前后端分离
- AngularJS中在前后端分离模式下实现权限控制 - 基于RBAC
- 详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
- 前后端分离实践:基于vue实现网站前台的权限管理
- 基于vue实现网站前台的权限管理(前后端分离实践)
- Angular中在前后端分离模式下实现权限控制 - 基于RBAC
- 图解基于 Node.js 实现前后端分离
- 基于CAS的单点登录SSO[5]: 基于Springboot实现CAS客户端的前后端分离
- Angular中在前后端分离模式下实现权限控制 - 基于RBAC【转】
- 基于 Node.js 实现前后端分离
- php 利用阿里云oss实现托管文件
- 基于前后端分离的身份认证方式——JWT