[从入门到入土(部署篇)]四,前端项目部署(oss)

[从入门到入土(后端篇)]四,前端项目部署(oss)

上一篇介绍了用nginx部署前端项目,有人会问,这一顿操作猛如虎,结果还是出现好多问题,有没有更加简单的方式?
当然有,就是利用oss部署。

1. 前期准备

首先我们要准备一个oss,什么是oss?之前的文章有写过,大家可以先去看看。

[从入门到入土(前端篇)]五,上传文件到OSS(一)

  • 1.新建一个Bucket (权限变更为公共读)

[从入门到入土(部署篇)]四,前端项目部署(oss)_第1张图片

  • 2.将打包后的项目文件上传到OSS上
    [从入门到入土(部署篇)]四,前端项目部署(oss)_第2张图片

网页上的上传不能上传文件夹,所以需要oss的客户端软件,在oss首页也可以找到下载地址

[从入门到入土(部署篇)]四,前端项目部署(oss)_第3张图片

2. 静态界面设置

我们进入刚创建的 Bucket,选择基础设置/静态页面

[从入门到入土(部署篇)]四,前端项目部署(oss)_第4张图片

设置静态页面相关参数

[从入门到入土(部署篇)]四,前端项目部署(oss)_第5张图片

3. 跨域设置

[从入门到入土(部署篇)]四,前端项目部署(oss)_第6张图片

到这里oss相关设置就完成了

4.域名解析指向该oss地址

我们进入域名管理,添加一条解析记录

10.png

    1. 主机记录,可以为www,也可以是自己的自定义二级域名
    1. 记录类型,选择CNAME,应为指向的是oss地址
    1. 记录值,需要填写我们建立的Bucket地址,在该Bucket的概览里可以看到
      [从入门到入土(部署篇)]四,前端项目部署(oss)_第7张图片

5.完成!

当都设置好后,就可以通过域名访问该网页啦,是不是非常简单。

不过对比nginx来说,oss不能设置前端跨域,必须由后端允许跨域。

当然oss也有好处,可以加快用户的访问速度~还可以设置cdn加速。

前端部署就写到这里,接下来就是后端项目部署了,respect~

你可能感兴趣的:(从入门到入土[部署篇],前端,javascript,开发语言)