阿里oss+cdn部署前后端分离项目

文章介绍了使用阿里云OSS结合CDN部署前端项目相比ECS的诸多优势,如降低成本、简化运维和提升访问速度。详细步骤包括开通服务、配置存储桶、绑定域名、启用CDN加速以及通过Jenkins进行自动化部署。此外,文章还提及了CDN的其他优化配置选项。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

相对于ECS部署前端项目,直接使用阿里云oss+cdn部署有几大好处:

  • 成本低。oss+cdn部署不需要单独的购买ECS服务器所需要的花费少很多;

  • 大幅度降低运营成本。直接使用现成云服务,无需花精力去维护ECS;

  • 极高的可用性与访问速度。ECS带宽毕竟有限,高带宽伴随着超高的计费。但用oss+cdn可以解决带宽瓶颈,极大的提升了用户的访问体验

部署准备

  1. 备案过的域名

  1. 足够的账户余额

部署步骤

开通oss与cdn服务

oss与cdn都是按量付费(后付),开通无需付款

oss创建存储桶(bucket)

每个存储桶(bucket)可以当作一个单独的网盘使用,但存储桶名称必须全局唯一,不能重名。创建如下:

配置存储桶

存储桶创建后,默认市不具备惊天网站托管的功能,因此需要所一些配置。配置如下:

如果不是部署history默认的前端项目,可以不用开通子目录首页功能

绑定域名

存储桶配置完成后,需要绑定自己的域名,虽然可以使用oss提供的存储桶域名,但在当前需求下是不能使用的。所以需要配置自己的域名。如下:

如果域名在当前账号下可直接勾选 自动添加 CNAME 记录,减少手动配置。如果域名没有在当前账号或者当前平台,需手动配置域名解析。如下:

启用cdn加速

cdn还存在一些优化配置,此处不作以列出(如ssl、http2等)。

Jenkins集成部署

在Jenkins中前端项目打包完成后,可通过命令行工具(ossutil64)直接将打包文件上传到oss上,一般情况会存在打包文件版本控制,如文件20211025。

ossutil64:文档地址:help.aliyun.com/document_de…

#!/bin/bash

cd /opt/appserver/<项目存放目录>

yarn instal && yarn build

ossutil64 cp -r -f /opt/appserver/<项目存放目录>/dist oss://cn-myjerry-test/dev/<打包时间/版本>
# 创建index.html软链(如果是一级目录部署可忽略)
ossutil64 create-symlink oss://cn-myjerry-test/index.html oss://cn-myjerry-test/dev/<打包时间/版本>/index.html
### 前后端分离架构下无SEO模板的选择与部署 对于前后端分离项目结构,在不考虑 SEO 的情况下,通常会采用基于单页应用(SPA, Single Page Application)的技术栈来构建前端部分。这种技术栈的特点是所有的 HTML、CSS 和 JavaScript 文件均由前端框架管理,而后端仅提供 API 接口供前端调用。 #### 1. 技术选型 常见的 SPA 框架有 Vue.js、React 和 Angular 等[^3]。这些框架提供了丰富的工具链和生态支持,能够快速搭建一个适合前后端分离的应用程序。以下是几个推荐的开源模板: - **Vue CLI Template**: 使用 Vue CLI 创建的基础模板可以满足大部分需求。它内置了 Webpack 构建配置,并支持多种插件扩展。 ```bash npm install -g @vue/cli vue create my-project ``` - **Create React App (CRA)**: 这是一个官方提供的 React 应用初始化脚手架,开箱即用且易于定制。 ```bash npx create-react-app my-app --template typescript cd my-app npm start ``` - **Angular CLI**: 提供了一个完整的开发环境设置,包括测试工具和服务运行器。 ```bash npm install -g @angular/cli ng new my-angular-app cd my-angular-app ng serve ``` 以上三种方式都可以作为基础模板下载并进行二次开发[^2]。 #### 2. 静态文件托管方案 在前后端完全分离的情况下,最终生成的 `index.html` 文件及其关联的静态资源(JS/CSS 图片等),一般会被放置在一个专门用于服务静态内容的服务中。这类服务被称为 CDN 或者 Static Server[^1]。 如果决定让前端团队负责维护该环节,则可以选择如下几种实现方法之一: - **Nginx/Apache HTTPD**: 将编译后的产物上传至 Nginx 或 Apache 配置好的目录路径下即可对外访问; - **云存储解决方案**:阿里OSS/Bucket S3 等对象储存产品也十分适合作为长期保存位置; 无论采取哪种形式都需要确保域名解析正确指向目标机器地址。 #### 3. 自动化流程集成(CI/CD) 为了简化重复劳动过程提高效率建议引入持续交付机制。通过 GitLab Runner/Jenkins CircleCI 等平台定义好流水线规
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

抛竿不抛锚

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值