阿里云OSS部署前端

简介：

最近看到一个不错的电商项目，前后端分离，在大佬的教学下使用OSS部署前端，docker部署后端。下面记录大佬教的OSS部署前端的步骤。

项目地址：GitHub - macrozheng/mall: mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。mall项目是一套电商系统，包括前台商城系统及后台管理系统，基于SpringBoot+MyBatis实现，采用Docker容器化部署。 前台商城系统包含首页门户、商品推荐、商品搜索、商品展示、购物车、订单流程、会员中心、客户服务、帮助中心等模块。 后台管理系统包含商品管理、订单管理、会员管理、促销管理、运营管理、内容管理、统计报表、财务管理、权限管理、设置等模块。 - macrozheng/mallhttps://github.com/macrozheng/mall

 小注：

业务系统开发、企业数字化、企业合规及效率提升等联系

邮箱：xlaodal@163.com

企业官网:www.jiema.net.cn

个人站点：xlaodal.github.io

1.前提：

拥有阿里云账号、有完整可打包的前端项目。

2.创建Bucket：

a：打开阿里云控制台，找到对象存储OSS,打开

b:找到Bucket列表，点击打开：

c:点击创建Bucket,自定义创建----填写名称----选择有地域属性----低频访问存储----本地冗余存储----公共读----其他的不变就行，点击创建。

注意：这里选择的低频访问存储，主要用于自己查看，测试，适用于较少的用户场景

3.打包前端文件：

a:打包命令：

npm run build

注意：

1.项目本身没问题，能运行成功的，可以打包成功。

2.打包的信息在 package.json的文件中查看。

b:打包成功后，有一个dist文件：我们要用里面的static和index.html文件。

4.上传前端文件，static  和 index.html：

5.开通静态页面：

打开指定的Bucket----数据处理----静态页面----设置默认首页 index.html,开通子目录首页

6.绑定域名：

Bucket配置----域名管理----绑定域名----mall.xlaodal.com

注意：这里需要有自己的域名，比如我注册 xlaodal.com，这里可以使用子域名  mall.xlaodal.com

7.体验：mall.xlaodal.com

（用户名：admin  密码 ：macro123）