自建論壇 - NodeBB 的安裝教學

NodeBB 是一款由 Node.js 開發的、開源的、現代化的論壇程式，使用MongDB作為資料庫（也可以選擇 Redis，但不推薦）。

本教學將一步步演示，如何在Windows和Linux平台下，搭建 NodeBB 論壇程式。

Github: https://github.com/NodeBB/NodeBB/

官網: https://nodebb.org/

安裝Node.js 和 MongoDB

因為NodeBB 使用Node.js開發，所以我們需要先安裝Node.js運行環境。

Node.js

Windows安裝

Node.js官網，下載 Windows 安裝包 (.msi)

Linux or Mac 安裝

這裡介紹使用nvm方式進行安裝，nvm 是 Node.js 版本管理工具，目的是方便對 Node.js 進行版本切換和升級

依次執行下面命令

# 下載並安裝nvm

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

source ~/.bashrc

# 通過nvm安裝最新版的Node.js

nvm install node 16.13.2

查詢Node版本，以驗證Node.js是否成功安裝。

node -v （輸出結果應該是：v16.13.2）

安裝MongoDB

NodeBB 默認選擇 MongoDB 作為資料庫。

Windows下安裝

MongoDB官網，下載Windows安裝包

詳細教學請看這邊

Linux - Ubuntu下安裝

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add -

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list

sudo apt-get update

sudo apt-get install -y mongodb-org

查詢 MongoDB 版本，以驗證是否安裝成功

mongod --version

db version v5.0

安裝NodeBB

使用 git clone 下載 NodeBB 源碼

git clone -b v1.18.x https://github.com/NodeBB/NodeBB.git nodebb

cd nodebb

執行下面命令，開始安裝和配置。

./nodebb setup

安裝過程會要你輸入訪問地址，資料庫帳號密碼等配置，如果不清楚，使用默認的設置即可。之後會在項目根目錄生成名為 config.json 的配置文件，後續有變化你可以手動更改。

然後執行啟動

./nodebb start

最後用瀏覽器訪問 NodeBB，http://localhost:4567，看是否正常啟動。

線上的 Demo 網址

繼續閱讀 >

設定 S3 的 CORS 規則，並使用 FileSaver 取得圖片下載

最近需要做一個功能，就是把上傳的圖片下載下來。

這簡單！我啪啪啪就寫好了，結果出現了....CORS 的問題，因為網址跟 s3 的網址是不同 Domain 的，上網搜尋一下，發現只要設定好 S3 的 CORS 就可以了。

主要設置為:

權限 -> 跨源资源共享(CORS)

[ { 

  "AllowedHeaders": [ "*" ], 

  "AllowedMethods": [ "GET", "HEAD" ], 

  "AllowedOrigins": [ "http://www.example.com" ], 

  "ExposeHeaders": [], 

  "MaxAgeSeconds": 3000 

} ]

因為我主要是取圖片，所以只要這樣設定便可以了。

另外推薦一個好的套件 「FileSaver」，使用程式碼如下

import { saveAs } from 'file-saver';

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

這個好處是，如果他碰到 CORS 問題，會另開新分頁顯示圖，最差就是讓使用者直接下載，也不用處理 CORS 問題。

參考: https://docs.aws.amazon.com/AmazonS3/latest/userguide/ManageCorsUsing.html

參考: https://aws.amazon.com/tw/premiumsupport/knowledge-center/s3-configure-cors/

繼續閱讀 >

在 M1 Mac pro 安裝 Windows 11 UTM 的虛擬機

最近朋友問我可不可以幫他在 M1 的電腦上面安裝 Windows，剛好我也很想聞看看新款的 M1，就二話不說地答應了！

搜尋了一下，發現大家都是用 Parallels Desktop 來安裝，但只有 15天試用期，想說就索性跟他申請一下經費來安裝安裝，然後我就又回去搜尋看看有沒有免費的辦法。(貪小便宜的人厚...)

後來找到一個叫 Keith 的安裝教學，也解決了我的困難，那就做個紀錄吧。

M1 Macbook Air 上執行的 Windows 11

簡單步驟如下

1. 下載 Windows 11 ARM Inside Preview
2. 安裝 QEMU 
3. 轉換 Window 11 為 qcow2 格式
4. MacOS 安裝 UTM
5. 設定 Windows 11 配置虛擬機
1.  8 核 CPU ARM64
2. 4GB RAM
3. 80GB 類型 NVMe 的 HDD
6. 啟動 Windows 11 VM
1.  將 BIOS 中的顯示更改為 1074x768
2. 安裝 Windows 11
3. 安裝 Spice 工具 (網路連線用)
7. 切換Windows 11介面語系為中文
8. 停用Windows 11更新 (看個人)

詳細步驟說明

下載 ARM

您需要成為 Microsoft Insider Program 的成員，該計劃可以免費加入。

網址：https://www.microsoft.com/en-us/software-download/windowsinsiderpreviewARM64

VHDX 文件。他只在 Hyper-V 上運行，但我們可以轉換此映像，讓 windows 可以在 UTM 上執行。

安裝 QEMU

使用 Homebrew安裝 QEMU — 需要安裝 QEMU 方便我們轉換 Windows 11 的映像格式。

如果您安裝了 Homebrew，則跳到最後一點，但如果沒有，則這些是您需要遵循的步驟：

1. 在終端運行中

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 這將安裝 Homebrew 但你需要運行兩個額外的命令

echo 'eval $(/opt/homebrew/bin/brew shellenv)' >> /Users/$USER/.zprofile

eval $(/opt/homebrew/bin/brew shellenv)

3. 現在將安裝 Homebrew，您可以從終端安裝 QEMU

brew install qemu

轉換成 qcow2

為了使來自 Microsoft 的 VHDX 圖像與 UTM 兼容，我們需要轉換格式。我們使用之前安裝的 QEMU。從終端執行以下命令：

qemu-img convert -p -O qcow2 /Users/keith/Virtual\ Machines/Windows10_InsiderPreview_Client_ARM64_en-us_21354.VHDX /users/keith/Virtual\ Machines/Windows10_21354.qcow2

安裝 UTM

安裝 MTU從 https://mac.getutm.app/ 獲取最新版本的 MTU 。UTM 是一個基於開源平台 QEMU 的免費虛擬化平台。這基本上是一個基於 GUI 的 QEMU 版本。

UTM 驅動程序

我們需要在 Windows 11 中安裝 UTM 的驅動程序，以允許 Windows 11 訪問 Mac 網路連接器。

下載 Spice 工具：https://mac.getutm.app/support/

建立 Windows 11 虛擬機

在 UTM 中創建一個名為 Windows 11 的虛擬機並設定下面的設置。

System

架構：ARM64 (aarch64)

系統：QEMU 5.2 ARM Virtual Machine (virt-5.2)

內存：8192MB

勾選 Show Advanced Settings

CPU：默認

CPU Cores：8

勾選 Force Mutlicore

Drives

Import Drive → 選擇 Windows 11 qcow2 鏡像

interface：NVMe

New Drive → 勾選 Removable Drive

Information

CD 放入 Spice 的 iso 檔案

UTM小技巧

Control + Option 使您退出虛擬機

F2 進入 BISO

選擇Device Manager → OVMF Platform Configuration

更改為 1024x768，然後選擇 commit 並退出

按ESC退出BIOS

進入安裝流程

切換Windows 11介面語系為中文

1. 點選「開始」按鈕圖示 -> 「Settings」-> 「Time & Language」

將Time zone變更為「(UTC+08:00)Taipei」

2. 點選「開始」按鈕圖示 -> 「Settings」-> 「Date & time」

將 Country or region 設定為「Taiwan」

將 Regional Format 設定為「Chinese(Traditional, Taiwan)」

2. 點選「開始」按鈕圖示 -> 「Settings」-> 「Language」

在 Preferred languages 點選「Add a languages」

選擇「中文(台灣)」，接著點選「install」開始下載及安裝語系

調整優先的順位，點選「↑」方向按鈕

點選 Options 來 Download 語系的 Language pck

Windows display language 選項中，變更為「中文(台灣)」，並點選「No, sign out later」

重新開機後，再次登入就可以看到一個中文介面的Windows 11了。

停用Windows 11更新

1. 按下「Win+R」鍵開啟執行視窗。
2. 透過輸入services.msc並按下Enter鍵以開啟服務視窗。
3. 在「服務」列表中找到並選擇「Windows Update」選項，然後點擊「停止」按鈕。
4. 在「一般」選項卡，將「啟動類型」變更為「已停用」。

有任何疑問歡迎提問，以上是我的安裝紀錄，謝謝。

繼續閱讀 >

[Linux] Vue 部署流程

最近要部署一台新的 Server, 想說這次把它做一個紀錄好了

Server: Ubuntu 20.04.3 LTS

就這樣。

繼續閱讀 >

[JS]注音輸入法要怎麼做自動完成呢！

如上圖，在輸入中文的時候，通常會需要透過注音之類的輸入法來做拼字。通常 autocomplete 的套件沒有去處理輸入法拼字的問題，畢竟他們打英文不需要多一個注音拼字的動作嘛！

那這個時候要怎麼樣才能做到像 Google 搜尋一樣呢？

其實就是在拼字的時候，就把打在輸入框上面的資料丟出去即可。

Composition Event (組成事件):

透過 Composition Events 我們可以觀察使用者在輸入框內開啟輸入法 (Input Method Editor, IME) 時，組字或選字的狀態。

• compositionstart：輸入框內開啟輸入法，且正在拼字時觸發。
• compositionend：輸入框內開啟輸入法，且正在拼字或選字時更改了內容時觸發。
• compositionupdate：輸入框內開啟輸入法，拼字或選字完成，正要送出至輸入框時觸發。

所以要確認使用者輸入完成並送出文字時，就可以透過 compositionend 來做最後確認。

因為我是用 Vue 來寫，所以會用 Vue 的範例，如下

mounted() {
    let isInputZh = false
    const searchInput = this.$refs.Input.$el.children[0]

    searchInput.addEventListener('compositionstart', function(e) {
      isInputZh = true
    }, false)

    searchInput.addEventListener('compositionupdate', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('compositionend', function(e) {
      isInputZh = false
    }, false)

    searchInput.addEventListener('input', function(e) {
      if (isInputZh) return
      remoteApiMethod(this.value)
    }, false)
}

用這種方式就可以在輸入法尚未結束的時候丟資料去 API 取資料嘍～

繼續閱讀 >

如何建立谷歌部落格(google blogger)

有自己的地方就是爽，我要當王！！

最近突然想要建立一個屬於自己的部落格，參考了一些網路文章以後，最後還是決定使用這個 google blogger。

為什麼要選擇Blogger呢？

1. 免費
2. 圖庫問題：可以串連Google相片
3. 數據：有自帶數據統計的功能
4. 賺錢：未來流量起來可以賺錢
5. 手機：我覺得手機可以讓你想到什麼就加入草稿，畢竟靈感不是說來就來

基於以上的好處，我就決定是這裡了。

簡單地按完建立以後，重點是要怎麼改成自己喜歡的樣子呢？！

登愣～

Google Blogger Theme: https://gooyaabitemplates.com/

請根據以下步驟處理：

1. 選擇一個你想要的外觀，並下載 Blogger 模板。
2. 解壓縮並取出 xml 檔案
3. 選擇左側列表中的 主題，並且按下還原，上傳你的 xml 檔案

搞定了！就像我現在的部落格這樣。

最後還有一個步驟要做，因為成果如下

你的網頁

他的網頁

....?

所以請去 版面配置 去調整細微的部分

希望大家都可以調整成喜歡的樣子！

繼續閱讀 >

mongo 基本的 shell 指令

因為是開發 nodejs ，最常用到的資料庫就是 mongo ，不過最近都在開發前端，太久沒有碰觸到他了，今天就來複習一下吧。

基本指令

進入 mongo

# mongo

結果他一直跳出很奇怪的錯誤

Failed global initialization: BadValue Invalid or no user locale set. Please ensure LANG and/or LC_* environment variables are set correctly.

所以我改成

# export LC_ALL=C
# mongo

yes 成功進入!

秀出所有db 

# show dbs

 秀出所有 collections

# show collections

秀出這個 user 欄位的所有資料 

# db.getCollection('user').find({})

更新這個 user 欄位的 startDate 跟 endDate

# db.getCollection('user').update({}, {$set:{'startDate':new Date('2016-01-01'), 'endDate': new Date('2018-01-01')}},{multi:true})

收工！

繼續閱讀 >