一年只要几块钱，使用oss来搭建个人纯前端项目主页

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

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

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

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

第三步 上传文件
本地新建一个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: '[email protected]',
    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流程。毕竟仪式感还是很重要的，即使是一只小麻雀，也要让他五脏俱全。等我有时间实现之后再来跟大家分享。