2022年11月15日 星期二

pCloud - 使用 Cryptomator 加密資料與 PC app, NAS, Linux Server 管理筆記 @ macOS 13, Ubuntu 18.04, Synology DS216play

圖:Synology - Cloud Sync

大概幾年前起,一直以來都有在跑小程式撈資料,並使用 Dropbox 來共享資料並且備份。像 Dropbox 免費版有的 2GB,更早之前甚至加一位好友有 500MB 時期,甚至還有 edu 校園比賽等病毒行銷,可以輕鬆衝到 10GB, 20GB, 甚至30GB等,這個空間也滿夠用。

現況,則是來試試 pCloud 500GB 終身版,掏錢付費 XD 被推坑後,就開始想想這個空間該怎樣規劃。首先,先來試試 Cryptomator - cryptomator.org 開源的端加密工具!pCloud 本身也有這等檔案加密的付費服務。原理上是上傳前先加密,讓雲端空間服務商無法知道資料內容。而使用 Cryptomator 時,他是透過一個檔案庫概念(可以想像跟 git 底層儲存拆成數個檔案,屬於常見的資料儲存架構),透過 WebDav 或 FUSE 建立一個虛擬空間或目錄,把資料搬進去時,順便完成加密儲存。對終端用戶來說,大概會稍微感覺讀寫資料較慢,其餘感受還好。

整體上的體驗較慢時,通常是直接掛載 pCloud 網路硬碟才會感受到,若是純本地存取 Cryptomator 加密檔案庫時,應該都還能接受的。除非是在搞 build code 等大量零碎檔案、不停更動等,才會感到不堪使用。


圖:Cryptomator PC app

使用原理上,就是先建立個 Cryptomator 加密檔案庫,接著把此資料上傳到 pCloud 即可搞定。剩下的就是存取資料的問題規劃,屬於 pCloud 在各類系統的存取方式:
  • 在 macOS 上,直接安裝 pCloud 官方提供的 PC app 最方便
  • 在 Ubuntu 18.04 server 機器上,透過 github.com/pcloudcom/console-client ,可用指令完成掛載 pCloud 網路空間進來
  • 在 Synology NAS 上,透過 pCloud WebDav API 溝通方式,可靠 Cloud Sync 完成資料同步
如此可以達到 pCloud (雲端) 有一份資料、NAS (Synology) 內也有一份資料、Macbook Pro (masOS) 也有一份資料等,三處會透過 pCloud 雲服務機制同步中。此外,若跟 NAS 在同一個區網內,倒也可以考慮純靠 NAS 同步,再靠 Samba 把 NAS 的資料掛進來使用,如此 PC 不需要額外安裝 pCloud app 處理同步。

當然,若主力有 macOS + iCloud ,也可以替代掉 pCloud 角色,沒錯,只是 iCloud 2TB 而已,通常拿來備份無止盡的照片影片了。

存取 pCloud 用法:
  1. 使用 WebDav Protocol: https://webdav.pcloud.com ,使用時無法開啟兩段式登入(2FA)或簡訊驗證,否則會無法登入
    • 在 Synology NAS 上,可以用 Cloud Sync 搭配 WebDav Protocol 來同步資料下來
  2. 使用 github.com/pcloudcom/console-client 上,需要花點心力依照專案上簡介編譯出工具來使用,同理,預設不支援兩段式登入驗證(2FA),但有人有改 code 讓他支援: github.com/dberlin/console-client
  3. 安裝 pCloud PC app ,這時可以純靠 Sync 功能,把想要的目錄進行同步即可,不一定要整包 pCloud 500GB 都下載回來使用
    • 例如負責創 Cryptomator 加密資料庫且經常更新的那台電腦可以安裝,其他台電腦不一定要安裝 pCloud PC app
在 Ubuntu server 透過指令存取 Cryptomator 加密資料庫:
  1. 首先,透過 JavaRutime/JAR 環境運行 github.com/cryptomator/cli
    • $ java -jar cryptomator-cli-0.5.1.jar --vault myVault=/pCloud/CStore/myVault/ --password myVault=MyPassword --bind 127.0.0.1 --port 12345
  2. 接著再靠 mount 指令,掛載 davfs 使用
    • $ mkdir -p /media/myVault
    • $ echo | sudo mount -t davfs -o username=,user,gid=1000,uid=1000 http://localhost:12345/myVault /media/myVault
  3. 如此,就能透過 /media/myVault 存取加密資料
目前美中不足的就是 NAS 透過 WebDAV 存取 pCloud 這步無法做2FA,令人感到不安心,但在雲台機器上,可以把 pCloud 掛在進來當網路硬碟真的很佛,像是原本一台 20GB 空間的機器,瞬間就擴增到 500GB 等級,並且把資料整理後就能塞進 pCloud 備份,很舒服的。對應使用 Dropbox 缺點就是 Dropbox 空間上,若有 5GB ,那 server 上就得佔系統空間 5GB 給他同步資料,而 server 本身並不需要多存一份 5GB 來用。

使用 Cryptomator 的最大缺點,就是任何要存取資料的電腦環境都需要安裝 Cryptomator 對應軟體,也使得 pCloud 網頁版變成沒用了,必須把 Cryptomator 完整的加密資料庫都下載到本地端才可以瀏覽。這時就得花點心思規畫要如何透過 Cryptomator 切資料儲存機制了

其他資訊:

2022年11月14日 星期一

macOS 開發筆記 - crontab 與 script 的 Operation not permitted 問題 @ macOS 13



很少會在 macOS 內埋 crontabe 做事,最近想嘗試定期做一些 log 檔案,才發現一直踩到 Operation not permitted 問題。

追了一下,主因是權限問題,只需在 設定 -> 隱私權與安全性 -> 完全取用磁碟,只需在這邊把 crontab: /usr/sbin/cron 添加進去即可。添加方式:
  1. 用 terminal 開啟 /usr/sbin 目錄:% open /usr/sbin
  2. 把 cron 拖拉進去 "設定 -> 隱私權與安全性 -> 完全取用磁碟" ,並改成 On 即可(拖進去會自動轉On)
只是,這也是另一個資安問題 XD 猜想 macOS 做更嚴謹的權限管控,也是想避開 macOS 不幸被惡意程式植入時,埋了一堆定期跑的程式。

2022年9月19日 星期一

Electron 開發筆記 - 使用 Vue.js 3 與 Vite 和最新 Electron Stable Release (20.x.x)

週末繼續把玩一下 Electron framework 也複習 Vue.js ,一直在想要怎樣兜再一起比較方便,類似的整合一直都有:
等等,後來自己想了一下,乾脆練習配置吧!自己先規劃想要的架構:
  1. 盡量把高變動的 code 都擺在 src 目錄中
  2. 盡量讓 vue.js code 可以統一在某個目錄中
  3. 直接使用最新的 Vue.js 及其最新工具
  4. 使用最新的 Electron Stable Release
  5. 盡量簡單,甚至不用 TypeScript ,讓其他新手想跨入也方便
就這樣,採用了 Electron 20.0.0 (2022.08) 和 Vue.js + Vite 環境

於是乎,先摸索了一個出來:github.com/changyy/node-electron-vue-vite

% tree src 
src
├── html
│   └── mainRenderer
│       ├── index.html
│       ├── src
│       │   ├── App.vue
│       │   ├── components
│       │   │   └── HelloWorld.vue
│       │   └── main.js
│       └── vite.config.js
├── main
│   └── index.js
├── preload
│   └── mainRenderer.js
└── renderer
    ├── index.js
    └── mainRenederer.js

7 directories, 9 files

之後再來想想看有什麼題目可以把玩吧!

2022年9月13日 星期二

Javascript 開發筆記 - 使用 Vue.js 和 Vite

規劃網頁開發時,引入一個框架是不錯的選項,讓團隊有共同溝通的語言,目前打算把以前接觸 Vue.js 部分複習一下,直接來用 Vue 3 以及 Vite ,其中 Vite 是一個很像 Webpack 的工具,號稱是下一代前端開發工具且運作效率高,看了一下是可以達成打包的程式碼任務,也能提供 dev web server + hot reload (hot module replacement/HMR) 服務。

文件資料:
這次主要接觸了 Vite ,才跑去看一下 Vue.JS 作者是誰 XD 我用了好一陣子都沒去認識一下。跑去看了一下 Vue.JS 作者的 twitter 跟 WIKI,發現人在新加坡且學經歷也滿有趣的,偶爾會分享跟小孩相處的經驗,並且也分享網路受訪又被辱罵等文,在 2022.08 剛和團隊產出了 Vue.JS 3 中文文檔,年紀相仿,滿有趣的生活。

快速上手法:

% nvm use v16
Now using node v16.13.0 (npm v8.1.0)
% npm -v
8.1.0
% npm create [email protected] my-vue-app --template vue
Need to install the following packages:
Ok to proceed? (y) y
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

Scaffolding project in /private/tmp/my-vue-app...

Done. Now run:

  cd my-vue-app
  npm install
  npm run dev
% cd my-vue-app 
% cat package.json 
{
  "name": "my-vue-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.37"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}
% tree     
.
├── README.md
├── index.html
├── package.json
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   └── style.css
└── vite.config.js

4 directories, 10 files
% npm install
% npm run dev

  VITE v3.1.0  ready in 435 ms

  ➜  Local:   http://127.0.0.1:5173/
  ➜  Network: use --host to expose

接著去編輯 src/components/HelloWorld.vue 可以看到網頁內容立即改變。如此大概就可以窺見 Vite 的基本用法,接著是編譯:

% npm run build

> vite build

vite v3.1.0 building for production...
✓ 16 modules transformed.
dist/assets/vue.5532db34.svg     0.48 KiB
dist/index.html                  0.44 KiB
dist/assets/index.43cf8108.css   1.26 KiB / gzip: 0.65 KiB
dist/assets/index.795d9409.js    52.87 KiB / gzip: 21.33 KiB

% tree dist 
dist
├── assets
│   ├── index.43cf8108.css
│   ├── index.795d9409.js
│   └── vue.5532db34.svg
├── index.html
└── vite.svg

1 directory, 5 files

% cat dist/index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <script type="module" crossorigin src="/assets/index.795d9409.js"></script>
    <link rel="stylesheet" href="/assets/index.43cf8108.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

以上就簡單過一下常用的東西。

Javascript 開發筆記 - 使用 npm/npx degit 管理開發模板

當你把你習慣的部分都設置在 github 後,可以靠以下資料快速複製出來使用:

% npx degit changyy/study-node-electron-simple my-project 
> cloned changyy/study-node-electron-simple#HEAD to my-project
% cd my-project 
% source env_nvm.sh 
Now using node v16.13.0 (npm v8.1.0)
% npm install
% npm run start

> electron-forge start

✔ Checking your system
✔ Locating Application
✔ Preparing native dependencies
✔ Launching Application

其中 degit 套件還滿方便的,可以快速複製樣板出來並去除 git 相關結構。而使用 npx 的指令,他本身 man page 介紹是 Run a command from a local or remote npm package,可以用完就拋掉也不用安裝在本地。

相關資料: