不晓得有没有前端小伙伴有和我一样的困扰，想做一个纯前端展现的集体网站，或者写了一个有用的插件，想要写一个demo页面放在readme中。而后就买了1核1g的阿里云学生机，第一年还挺便宜，一百来块就搞定，然而第二年续费就要五六百块了。然而我其实也不须要一个ECS来跑脚本或者运行后端程序数据库啥的。在ECS上也仅仅是启个Nginx或者更粗犷的http-server守护过程来跑vue或者react打包后的html页面，也不须要思考SEO的事儿。还须要域名绑定服务器，各种备案。麻烦不说，是不是还总会碰到扫端口的给你来一个正告邮件。最重要的还是白瞎钱。我仅仅是想展现一个HTML啊。

上面我来给大家分享一个省钱小妙招，巧用阿里云OSS来实现咱们的需要，按量付费，网站没什么访问量，几天都花不了1分钱。并且拜访还特地稳固，快。

第一步 申请域名
必须要申请一个本人的域名（如果没有绑定域名，拜访会间接变成下载），这个很简略，就是备案比拟麻烦，须要提前资料照片身份证啥的，大概须要花一个星期左右就弄好。选个偏门的顶级域名一年就二三十块。多年套餐更便宜。这个步骤就不细说了，跟着官网指引办就好了。

第二步 开明服务
登陆阿里云，进入控制台，开明OSS服务，这个不要钱。而后创立一个Bucket

次要读写权限那一项批改为公共读写，别的都依照默认的即可。
创立胜利后点击域名治理->绑定域名。将本人曾经备案好的域名填入。

第三步 上传文件
本地新建一个HTML文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>测试</title></head><body>    这是测试页面</body></html>

而后文件治理->上传文件->胜利后刷新->文件详情->应用自有域名->复制地址。

浏览器拜访->功败垂成

进阶
当初页面曾经能够拜访了，已vue脚手架为例，把build之后生成的dist文件夹全副上传而后点击刷新即可，而后拜访XXX.com/index.html就会发现页面曾经更新了，成了一个SPA利用，vue-router须要应用hash模式。

然而当初有一个问题，如果每次更新都要从新上传文件再刷新缓存很麻烦，次要是阿里云登陆信息维持不了很久，隔几个小时就须要从新扫码登陆。要是可能主动上传刷新部署就好了。好在阿里云团队曾经想到了这件事，应用ali-oss即可。
将你的账号的用户名、bucket、AccessKey等信息作为参数传入，能够活得以后bucket实例，具备文件的一系列新增，删除等办法。
第一步，新建一个oss.js文件，这里保留你的信息，这属于隐衷，记得igonre哦

module.exports = {    region:'oss-cn-beijing',    AccessKey: 'ABCDABCDABCDABCDABCD',    SECRET: 'saaaaaaaaaaaa',    UserName: 'xxx@xxx.com',    bucket: 'xxxxxx',}

第二步，咱们须要在根目录新建一个叫upload.js的文件，对build后的文件进行全量替换（因为我的我的项目十分小，所以全量，如果资源很多，须要增量替换能够自行实现）

const OSS = require('ali-oss');const oss = require('./oss')const recursive = require('recursive-readdir')const fs = require('fs')let client = new OSS({    region: oss.region,    accessKeyId: oss.AccessKey,    accessKeySecret: oss.SECRET,    bucket: oss.bucket,});(async function() {    console.log('开始同步OSS=============================')    let list = await getList();    // 删除旧文件    for (let i = 0; i < list.length; i++) {        await client.delete(list[i].name)        console.log('删除文件'+list[i].name);    }    // 上传新的    recursive('dist',function (err,files) {        files.forEach(filePath => {            fs.readFile(filePath,async function (err, file) {                let filename = filePath.replace('dist/','')                await putObject(file, filename)                console.log('上传文件'+ filename);            })        })    })})()async function putObject (file,fileDir) {    try {        // object-key能够自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的模式，实现将文件上传至以后Bucket或Bucket下的指定目录。        client.put(fileDir, file);    } catch (e) {        console.log(e);    }}async function getList() {    let res = await client.list()    return res.objects;}

最初批改一下package.json中的build命令

这样咱们每次改完bug或者上新性能之后只有yarn build一下，网页就自动更新了，是不是很不便呢。

talk is cheap，show me your code

将来拓展
目前这种部署形式属于野路子部署，最好还是走正规git的CI/CD流程。毕竟典礼感还是很重要的，即便是一只小麻雀，也要让他五脏俱全。等我有工夫实现之后再来跟大家分享。