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