一年只要幾塊錢，使用oss來搭建我的純前端項目主頁

時間 2020-08-10

標籤一年 1年只要使用 oss 搭建我的前端項目主頁简体版

原文原文鏈接

不知道有沒有前端小夥伴有和我同樣的困擾，想作一個純前端展現的我的網站，或者寫了一個有用的插件，想要寫一個demo頁面放在readme中。而後就買了1核1g的阿里雲學生機，第一年還挺便宜，一百來塊就搞定，可是第二年續費就要五六百塊了。可是我其實也不須要一個ECS來跑腳本或者運行後端程序數據庫啥的。在ECS上也僅僅是啓個Nginx或者更粗暴的http-server守護進程來跑vue或者react打包後的html頁面，也不須要考慮SEO的事兒。還須要域名綁定服務器，各類備案。麻煩不說，是否是還總會碰到掃端口的給你來一個警告郵件。最重要的仍是白瞎錢。我僅僅是想展現一個HTML啊。javascript

下面我來給你們分享一個省錢小妙招，巧用阿里雲OSS來實現咱們的需求，按量付費，網站沒什麼訪問量，幾天都花不了1分錢。而且訪問還特別穩定，快。html

第一步申請域名
必需要申請一個本身的域名（若是沒有綁定域名，訪問會直接變成下載），這個很簡單，就是備案比較麻煩，須要提早材料照片身份證啥的，大約須要花一個星期左右就弄好。選個偏門的頂級域名一年就二三十塊。多年套餐更便宜。這個步驟就不細說了，跟着官方指引辦就行了。前端

第二步開通服務
登錄阿里雲，進入控制檯，開通OSS服務，這個不要錢。而後建立一個Bucket

主要讀寫權限那一項修改成公共讀寫，別的都按照默認的便可。
建立成功後點擊域名管理->綁定域名。將本身已經備案好的域名填入。
vue

第三步上傳文件
本地新建一個HTML文件java

<!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>

而後文件管理->上傳文件->成功後刷新->文件詳情->使用自有域名->複製地址。

瀏覽器訪問->大功告成
react

進階
如今頁面已經能夠訪問了，已vue腳手架爲例，把build以後生成的dist文件夾所有上傳而後點擊刷新便可，而後訪問XXX.com/index.html就會發現頁面已經更新了，成了一個SPA應用，vue-router須要使用hash模式。git

可是如今有一個問題，若是每次更新都要從新上傳文件再刷新緩存很麻煩，主要是阿里雲登錄信息維持不了好久，隔幾個小時就須要從新掃碼登錄。要是可以自動上傳刷新部署就行了。好在阿里雲團隊已經想到了這件事，使用ali-oss便可。
將你的帳號的用戶名、bucket、AccessKey等信息做爲參數傳入，能夠活得當前bucket實例，具備文件的一系列新增，刪除等方法。
第一步，新建一個oss.js文件，這裏保存你的信息，這屬於隱私，記得igonre哦github

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

第二步，咱們須要在根目錄新建一個叫upload.js的文件，對build後的文件進行全量替換（由於個人項目很是小，因此全量，若是資源不少，須要增量替換能夠自行實現）vue-router

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一下，網頁就自動更新了，是否是很方便呢。數據庫