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

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

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

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

第二步 开通服务
登陆阿里云,进入控制台,开通OSS服务,这个不要钱。然后创建一个Bucket
image.png
主要读写权限那一项修改为公共读写,别的都按照默认的即可。
创建成功后点击域名管理->绑定域名。将自己已经备案好的域名填入。
image.png

第三步 上传文件
本地新建一个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>

然后文件管理->上传文件->成功后刷新->文件详情->使用自有域名->复制地址。
image.png
浏览器访问->大功告成
image.png

进阶
现在页面已经可以访问了,已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命令
image.png
这样我们每次改完bug或者上新功能之后只要yarn build一下,网页就自动更新了,是不是很方便呢。

talk is cheap,show me your code

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

阅读 279

推荐阅读