第二十四個夏天後

2022年11月14日星期一

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

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

追了一下，主因是權限問題，只需在設定 -> 隱私權與安全性 -> 完全取用磁碟，只需在這邊把 crontab: /usr/sbin/cron 添加進去即可。添加方式：

用 terminal 開啟 /usr/sbin 目錄：% open /usr/sbin
把 cron 拖拉進去 "設定 -> 隱私權與安全性 -> 完全取用磁碟" ，並改成 On 即可(拖進去會自動轉On)

只是，這也是另一個資安問題 XD 猜想 macOS 做更嚴謹的權限管控，也是想避開 macOS 不幸被惡意程式植入時，埋了一堆定期跑的程式。

2022年9月19日星期一

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

週末繼續把玩一下 Electron framework 也複習 Vue.js ，一直在想要怎樣兜再一起比較方便，類似的整合一直都有：

等等，後來自己想了一下，乾脆練習配置吧！自己先規劃想要的架構：

盡量把高變動的 code 都擺在 src 目錄中
盡量讓 vue.js code 可以統一在某個目錄中
直接使用最新的 Vue.js 及其最新工具
使用最新的 Electron Stable Release
盡量簡單，甚至不用 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 vite@latest my-vue-app --template vue
Need to install the following packages:
create-vite@latest
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

> my-vue-app@0.0.0 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

> my-electron-app@1.0.0 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，可以用完就拋掉也不用安裝在本地。

相關資料：

github.com/Rich-Harris/degit

2022年9月11日星期日

[Linux] 免費註冊 pCloud 獲得 500GB 空間 / 掛載 pCloud 空間進來使用 @ Docker - Ubuntu 22.04 Image

圖：pcloud.com 活動截圖

pCloud 是瑞士的雲端空間服務，有在推 500GB/2TB/10TB 等終身付費服務，通常會隨著節慶推出 80% OFF 的方案(兩折)，有興趣可以去逛逛粉絲團，像是註冊完一個免費帳號後 ( https://u.pcloud.com/#page=register&invite=cFRj7ZYwNRty 使用此連結註冊成功有機會送我1GB空間？ )，接著再瀏覽 https://www.pcloud.com/zh/500GB_free 連結，可以啟用 3個月 500GB 免費方案（這應該是限時活動，不知何時結束）

接著再來講講在 Linux/Ubuntu server 把 pCloud 網路空間用網芳的機制掛在進來，實作上是用 Filesystem in Userspace (FUSE) 機制。我在 Ubuntu 18.04 上，原本要安裝特定環境，但踩到 libudev-dev 安裝上的套件限制，想著想就改用 docker 來跑：

$ sudo docker run -i -t --privileged ubuntu:22.04

root@109661692d2c:/#

# uname -a
Linux 109661692d2c 5.4.0-1082-oracle #90~18.04.1-Ubuntu SMP Mon Aug 15 16:42:41 UTC 2022 x86_64 x86_64 x86_64 GNU/Linux

# apt update

# apt-get install cmake zlib1g-dev libboost-system-dev libboost-program-options-dev libpthread-stubs0-dev libfuse-dev libudev-dev fuse build-essential git

# git clone https://github.com/pcloudcom/console-client

# cd ./console-client/pCloudCC/lib/pclsync/
# make clean && make fs
# cd ../mbedtls/ && cmake . && make clean && make
# cd ../.. && cmake . && make && make install
# ldconfig
# which pcloudcc
/usr/local/bin/pcloudcc
# pcloudcc
pCloud console client v.2.0.1
Username option is required!!!

以上就是編譯出 pCloud - pcloudcc 指令的過程，接著使用時，在 docker 裡可以靠 tmux or screen 來切換，在此用 screen (因為我已經先用 tmux 包一層 XD)

# apt install screen
# screen

screen 1# pcloudcc -u YourpCloudAccount
pCloud console client v.2.0.1
Down: Everything Downloaded| Up: Everything Uploaded, status is LOGIN_REQUIRED
Please, enter password
logging in
Down: Everything Downloaded| Up: Everything Uploaded, status is CONNECTING
Down: Everything Downloaded| Up: Everything Uploaded, status is SCANNING
Down: Everything Downloaded| Up: Everything Uploaded, status is READY

如此，接著可以靠 screen 切另一個視窗

screen 2# df -h
Filesystem Size Used Avail Use% Mounted on
overlay 45G 38G 7.7G 84% /
tmpfs 64M 0 64M 0% /dev
tmpfs 487M 0 487M 0% /sys/fs/cgroup
shm 64M 0 64M 0% /dev/shm
pCloud.fs 500G 7.3G 493G 2% /pcloud

screen 2# tree /pcloud/
/pcloud/
|-- Getting\ started\ with\ pCloud.pdf
|-- My\ Music
| |-- Demo\ Audio\ 2.mp3
| |-- GotJoy.mp3
| |-- Lovely\ Day.wav
| `-- Momentum.mp3
|-- My\ Pictures
| |-- friends.jpg
| |-- happy-family.jpg
| |-- in-the-sky.jpg
| |-- lovers.jpg
| |-- romance.jpg
| `-- sweet.jpg
`-- My\ Videos
`-- pCloud.mp4

3 directories, 12 files

最後，如果要打包目前 docker 的環境，要回到 host 上進行 commit ：

$ sudo docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
123456789012 ubuntu:22.04 "bash" 25 minutes ago Up 25 minutes eager_bardeen

$ sudo docker commit 123456789012 pcloudcc:1.0
sha256:daf74928ed5ef2ee7c8d158ecf066d2b0707a9c145df4829488e01bf3bda751b

$ sudo docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
pcloudcc 1.0 daf74928ed5e 43 seconds ago 769MB

下次要使用時，再進入，可以省去重裝一堆東西：

$ sudo docker run -i -t --privileged pcloudcc:1.0
root@06bbad280e77:/#

另外，若想跟 host 環境做綁定，可以用 sudo docker run -i -t --privileged -v ~/my_host_dir:/vm_dir cloudcc:1.0，把 host 端的目錄掛載進去 docker vm 中，可以在靠 rsync 等指令把檔案傳到 pCloud 空間上！在 Oracle VM - JP Region 上，上傳到 pCloud US region 的速度可以來到均速 20MB/s 上喔，算是非常不錯的品質

此外，pCloud 採用類似網芳方式 mount 進來使用，對於這些虛擬機器只有 20GB, 40GB 來說，可以瞬間擴大到 500GB 等空間，很舒服 XD 且不像使用 Dropbox 機制，佔用到本機空間的。

最後，補充一下關於 docker 使用，由於 pcloudcc 會使用 fuse 環境，因此要求更高權限：特權容器 (privileged container) ，這件事是有風險的，當 docker 裡頭運行的程式被黑了，有可能傷及到 host 環境，但無論如何，在 host 安裝環境本來也會有風險沒錯 XD 就留意一下即可

以上體驗後，再自行評估要不要拿來當虛擬機的備份用法囉！

訂閱：文章 (Atom)

2022年11月14日 星期一

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

2022年9月19日 星期一