乐趣区

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

jiezi

不晓得有没有前端小伙伴有和我一样的困扰，想做一个纯前端展现的集体网站，或者写了一个有用的插件，想要写一个 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 流程。毕竟典礼感还是很重要的，即便是一只小麻雀，也要让他五脏俱全。等我有工夫实现之后再来跟大家分享。

退出移动版