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

本文涉及的产品
对象存储 OSS,20GB 3个月
对象存储OSS,敏感数据保护2.0 200GB 1年
对象存储 OSS,内容安全 1000 次 1年
简介: 这个是开发上老生常谈的话题。如何利用云上资源,使项目前后端分离实现更彻底,让前端完全脱离服务器的概念,是我现在技术进阶的一部分!这次前后端分离的内容会比较多,后面还会有续集

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

这次嘞,我们聊聊开发上老生常谈的话题,前后端分离。在文章第一篇里,我用了一张我的架构图,这里我把关于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模板
AI 代码解读

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

流程

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

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

* -project
 * -dist //生产环境代码
   * -static //静态文件
   * -index.html //页面
AI 代码解读
  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什么的(公司太有钱另说)
AI 代码解读

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

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

相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS,搭建一个在线教育视频课程分享网站。
相关文章
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
Node.js 是一种高效的 JavaScript 运行环境,基于 Chrome V8 引擎,支持在服务器端运行 JavaScript 代码。本文介绍如何在阿里云上一键部署 Node.js 环境,无需繁琐配置,轻松上手。前提条件包括 ECS 实例运行中且操作系统为 CentOS、Ubuntu 等。功能特点为一键安装和稳定性好,支持常用 LTS 版本。安装步骤简单:登录阿里云控制台,选择扩展程序管理页面,安装 Node.js 扩展,选择实例和版本,等待创建完成并验证安装成功。通过阿里云的公共扩展,初学者和经验丰富的开发者都能快速进入开发状态,开启高效开发之旅。
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
一键安装!阿里云新功能部署Nodejs环境到ECS竟然如此简单!
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
基于阿里云 EMR Serverless Spark 版快速搭建OSS日志分析应用
人工智能平台PAI使用问题之怎么将DLC的数据写入到另一个阿里云主账号的OSS中
阿里云人工智能平台PAI是一个功能强大、易于使用的AI开发平台,旨在降低AI开发门槛,加速创新,助力企业和开发者高效构建、部署和管理人工智能应用。其中包含了一系列相互协同的产品与服务,共同构成一个完整的人工智能开发与应用生态系统。以下是对PAI产品使用合集的概述,涵盖数据处理、模型开发、训练加速、模型部署及管理等多个环节。
阿里云MaxCompute-XGBoost on Spark 极限梯度提升算法的分布式训练与模型持久化oss的实现与代码浅析
本文介绍了XGBoost在MaxCompute+OSS架构下模型持久化遇到的问题及其解决方案。首先简要介绍了XGBoost的特点和应用场景,随后详细描述了客户在将XGBoost on Spark任务从HDFS迁移到OSS时遇到的异常情况。通过分析异常堆栈和源代码,发现使用的`nativeBooster.saveModel`方法不支持OSS路径,而使用`write.overwrite().save`方法则能成功保存模型。最后提供了完整的Scala代码示例、Maven配置和提交命令,帮助用户顺利迁移模型存储路径。
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
阿里云EMR数据湖文件系统问题之OSS-HDFS全托管服务的问题如何解决
113 1
JSF 与 CDI 携手共进,紧跟技术热点,激发开发者情感共鸣,开启高效开发新征程
【8月更文挑战第31天】JavaServer Faces (JSF) 与 Contexts and Dependency Injection (CDI) 在 Java EE 领域中紧密协作,助力开发者高效构建现代 Web 应用。JSF 凭借其丰富的组件库和页面导航功能受到青睐,而 CDI 则优雅地管理对象生命周期并实现依赖注入。两者结合,不仅简化了复杂企业应用的开发,还实现了松耦合架构,增强了代码的灵活性、可维护性和可扩展性。通过示例展示了如何利用 CDI 将业务服务对象注入 JSF Managed Bean,以及如何在不同页面间共享数据,突显了这一组合的强大功能。
72 0
DataWorks产品使用合集之如何使用Python和阿里云SDK读取OSS中的文件
DataWorks作为一站式的数据开发与治理平台,提供了从数据采集、清洗、开发、调度、服务化、质量监控到安全管理的全套解决方案,帮助企业构建高效、规范、安全的大数据处理体系。以下是对DataWorks产品使用合集的概述,涵盖数据处理的各个环节。
|
9月前
|
阿里云OSS的优势
【7月更文挑战第19天】阿里云OSS的优势
354 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等