逍遙雲飛

HomeBrew 快速切換 Node 版本

2021-06-26T00:00:00+08:00

HomeBrew 可以同時安裝多個版本的開發環境，以 Node 來說現在最新版本是 16.4.0 ，但有許多專案可能停留在 14.x.x 的 LTS 版本，所以如果使用最新版本可能會有些相容性的問題，這時如果習慣使用 HomeBrew 就能發揮出好處了，要切換版本是輕而易舉的事情

$ node -v
v16.4.0
$ brew install node@14
$ brew unlink node
$ brew link --overwrite node@14
$ node -v
v14.17.1

打完收工

ESP8266 開發板在 macOS 燒錄 MicroPython 韌體

2021-04-03T00:00:00+08:00

最近想自己做些小東西玩玩，翻出之前買來做遠端開啟冷氣的 ESP8266 開發板，自己對於 Python 稍微比較熟悉一點，所以來嘗試看看把 MicroPython 燒錄到 ESP8266 來開發看看，紀錄一下如何燒錄韌體

首先當然先將 ESP8266 接上 Micro USB 傳輸線通電並連上電腦

這時開啟 Thermal ，到 /dev 確認一下 USB Port 的名稱是甚麽，如果不確定的話可以在未接上 ESP8266 時先 ls 再接回對比一下，在我的電腦是 cu.usbserial-0001，先記起來備用

接著到 MicroPython 下載 ESP8266 最新的韌體檔案，接著安裝 esptool 並進到韌體檔案的目錄即可開始刷入韌體

$ pip install esptool
$ esptool.py --port /dev/cu.usbserial-0001 erase_flash
$ esptool.py --port /dev/cu.usbserial-0001 --baud 460800 write_flash --flash_size=detect 0 esp8266-20210203-unstable-v1.14.bin

接著在 Wi-Fi 中看看有沒有 MicroPython 名稱開頭的 SSID，如果有就代表燒錄韌體成功

接下來就能使用 picocom 進入到開發板中使用 Python 開發了

$ picocom /dev/cu.usbserial-0001 -b115200

References

MicroPython tutorial for ESP8266

Firmware for Generic ESP8266 module

Vue 2 CLI 使用 Prerender 預渲染解決 SEO 問題

2021-04-01T00:00:00+08:00

Vue 本身的特性是 SPA (Single Page Application)，所有的頁面都只有經由入口點 index.html 使用 JavaScript 進行動態渲染，所以當搜尋引擎機器人爬內容及社群網站上分享連結時顯示不出內容，導致影響 SEO，如果要解決這種問題除了使用 SSR (Server Side Rendering) 之外，也可以使用預先渲染的方式，當你的專案不大且頁面內容異動不大時就可以採用預先渲染的方式來解決這個問題

今天簡單紀錄一下 Vue CLI 導入 Prerender-SPA-Plugin 的過程跟遇到的小問題

導入很簡單，就使用別人做好的輪子即可（太懶了吧….

$ vue add prerender-spa

照著提示訊息回答功能選項，基本上都是 Yes 即可，然後輸入需要渲染的頁面路由即可，提醒只能路由模式只能使用 History ，否則無法使用完成之後就可以 npm run build 看看 dist 中有沒有產生相對的路由頁面，簡簡單單就打完收工

小問題

當你的頁面如果需要 Loading 比較久的時候，你可能會發現..奇怪為甚麼渲染出來的東西少了點東西，比如說有使用 Vue-Meta 時，發現渲染完後少了 Meta Tag，後來發現需要在 main.js 入口點中的 mounted 加入個延時才能正常渲染

mounted() {
    setTimeout(() => {
      document.dispatchEvent(new Event("x-app-rendered"));
    }, 5000);
  },

VMware ESXi 7 安裝 CentOS 8 MariaDB 紀錄

2021-02-01T00:00:00+08:00

最近協助同事在 VMware ESXi 上設定一台新的 DB 主機，很久沒有架新主機了，過程有點生疏，這邊紀錄一下過程

Setting Virtual Machine

首先進到 VMware ESXi 中的 Storage 中將 CentOS 的 ISO 檔上傳，待會要掛載到 VM 上進行安裝

接著進到 Virtual Machines 點 Create / Register VM 後選擇 Create a new virtual machine 下一步設定 VM Name 及系統類型跟選擇 Storage，接著在 Customize settings 的 CD/DVD Drive 1 中選擇 Datastore ISO file 選擇剛剛放在 Storage 的 ISO 檔下一步就可以把 VM 主機建立完成，安裝的過程就不多詳述

Centos configuration

以下是我習慣在系統安裝完後的基礎設定，僅供參考

# Update
$ yum check-update
$ yum update
$ yum install epel-release
$ yum update
$ reboot


# Change Host Name
$ hostnamectl set-hostname dbmaster-localdomain


# Timezone & Sync
$ timedatectl set-timezone Asia/Taipei
$ dnf install chrony
$ systemctl enable chronyd
$ vi /etc/chrony.conf
    # NTP Server
    Server time.stdtime.gov.tw
$ systemctl restart chronyd
$ chronyc sources


# Setting NetWork
$ cd /etc/sysconfig/network-scripts/
$ ls
$ vi ifcfg-ens192
	BOOTPROTO=static
	IPADDR=192.168.1.168
	NETMASK=255.255.255.0
	GATEWAY=192.168.1.254
	DNS1=8.8.8.8
	ONBOOT=yes
$ ifup ens192

# Disable Network Interface IPv6
$ vi /etc/sysctl.conf
  net.ipv6.conf.all.disable_ipv6 = 1
  net.ipv6.conf.default.disable_ipv6 = 1


# Disable SSH IPv6
$ vi /etc/ssh/sshd_config
  # inet is ipv4 only, inet6 is ipv6 only
  AddressFamily inet

Install MariaDB

$ sudo dnf install mariadb-server
$ sudo systemctl start mariadb
$ sudo systemctl status mariadb
$ sudo systemctl enable mariadb

Setting MariaDB (Allow root Remote access)

基本上是不建議開放 root 可以遠端登入，應該新增專屬的 User 帳號對應相應的資料庫，僅供參考

$ sudo mysql_secure_installation
  Remove anonymous users? [Y/n]: Y
  Disallow root login remotely? [Y/n]: N
  Remove test database and access to it? [Y/n]: Y
  Reload privilege tables now? [Y/n]: Y
$ mysql -u root -p
	GRANT ALL PRIVILEGES  ON *.* to ‘root’@‘192.168.1.%’ IDENTIFIED BY 'password' WITH GRANT OPTION;
	FLUSH PRIVILEGES;
$ vi /etc/my.cnf.d/mariadb-server.cnf
	bind-address = 0.0.0.0
$ systemctl restart mariadb

Setting FireWall

$ sudo firewall-cmd --permanent --add-port=3306/tcp
$ sudo firewall-cmd --reload

Add root disk space

將 /home 的容量減少到 20GB 並將剩餘的容量擴充到 /root 中

$ umount /home
$ lvreduce -L 20G /dev/mapper/cs-home
$ lvextend -l +100%FREE /dev/mapper/cs-root
$ xfs_growfs /dev/mapper/cs-root
$ mount /dev/mapper/cs-home /home/
$ mkfs.xfs -f /dev/mapper/cs-home
$ mount /dev/mapper/cs-home /home/
$ df -h
$ reboot

輕鬆使用 Docker nginx 打包兩個 Vue 專案進行部署

2021-01-24T00:00:00+08:00

前陣子準備部署一個專案，分別為前端使用者介面及管理員後台介面並切成兩個 Vue 專案，需求是希望統一打包成一個容器並使用資料夾的方式去區分，希望的網址呈現如下：

http://127.0.0.1/
http://127.0.0.1/admin/

前置作業需要先將 Vue 專案 Build 出來，再來開始撰寫 Dockerfile ，當然也可以寫個小腳本來讓所有動作都自動化

Dockerfile

FROM nginx

MAINTAINER RICK JIANG

COPY /admin/dist/ /usr/share/nginx/html/admin
COPY /frontend/dist/ /usr/share/nginx/html/
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

Nginx Default.conf

server {
    gzip on;
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
    root /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
    }

    location /admin {
        alias /usr/share/nginx/html/admin;
        index index.html index.htm;
        try_files $uri $uri/ /admin/index.html;
    }

    location @rewrites {
        rewrite ^(.*)$ /index.html last;
    }
}

將 Dockerfile 及 Default.conf 跟 Vue 專案的資料夾放在同一個目錄下就可以執行 Docker build . ，簡簡單單就可以打包成容器並部署

Mac 使用 FreeTDS 搭配 Pyodbc 連接 SQL Server 2000

2021-01-19T00:00:00+08:00

最近手上有一個案子必需連到客戶的舊有 ERP 資料庫上去撈一些資料回來處理，不得不說甚麼時代了還在用 SQL Server 2000，一開始為了處理連線問題真的耗費不少腦細胞，一直想用 ODBC Driver for SQL Server 來連線，但遇到一堆問題，後來才發現 FreeTDS 來使用方便快速多了

Install Unixodbc & Freetds

$ brew install unixodbc freetds
$ odbcinst -j
unixODBC 2.3.9
DRIVERS............: /usr/local/etc/odbcinst.ini
SYSTEM DATA SOURCES: /usr/local/etc/odbc.ini
FILE DATA SOURCES..: /usr/local/etc/ODBCDataSources
USER DATA SOURCES..: /Users/rick/.odbc.ini
SQLULEN Size.......: 8
SQLLEN Size........: 8
SQLSETPOSIROW Size.: 8

$ vi /usr/local/etc/odbcinst.ini
[FreeTDS]
Description = TD Driver (MSSQL)
Driver = /usr/local/lib/libtdsodbc.so
Setup = /usr/local/lib/libtdsodbc.so
FileUsage = 1

Pyodbc Connection

import pyodbc

conn = pyodbc.connect(
    'DRIVER={FreeTDS};SERVER=ovvo.cc,1433;DATABASE=test;UID=test;PWD=test')
cursor = conn.cursor()

Python pip 錯誤 The script is installed in directory, which is not PATH

2020-11-22T00:00:00+08:00

pip 安裝 uvicorn 之後會顯示 “The script is installed in directory, which is not PATH” 要啟動時會出現 zsh: command not found: uvicorn

原因是因爲找不到 PATH 導致無法執行，所以只要加上即可

macOS

export PATH="${PATH}:/Users/{User Name}/Library/Python/3.7/bin"

如果是使用 zsh 的話要編輯 ~/.zshrc 並加上重開 Terminal 即可解決

export PATH="${PATH}:/Users/{User Name}/Library/Python/3.7/bin"

Amazon RDS MySQL 開啟遠端連接

2020-10-09T00:00:00+08:00

首先進到自己的資料庫主機資訊頁中，選擇所屬的 VPC security groups，並進到設定頁面，在 Inbound rules 的頁面點擊 Edit inbound rules 在裡面新增規則選擇 MYSQL/Aurora 並將 Source 指向到 0.0.0.0 即可，若有其它安全性考量可以再做個別調整即可

Docker 容器連接到宿主主機的服務

2020-10-07T00:00:00+08:00

前幾天在打包一個伺服器端的服務時，想要連接到宿主主機的資料庫服務時發現連接不上，雖然 Ping 的到宿主的 IP 位址，但是都無法成功連接

Google 了一下發現可以使用 Docker 內所附的特殊 DNS 名稱來解析到主機的內部 IP 即可成功連接

macOS & Windows
Docker v18.03版本以上 (2018年3月21日起)
host.docker.internal

Docker for macOS v17.12 ~ 18.02
docker.for.mac.host.internal

Docker for macOS v17.06 ~ 17.11
docker.for.mac.localhost

Networking features in Docker Desktop for Mac

只要一行 CSS 實現錨點連結跳轉效果 scroll-behavior 屬性

2020-08-05T00:00:00+08:00

網頁內部的錨點跳轉效果很常見，通常在返回頁首及文章內的跳轉，效果 Y 軸呈現慢慢滾動過去的感覺，這種效果大多人可能使用 JavaScript 達成，但是 CSS 也是可以做到，而且更快更方便，只要加入下面一行 CSS 就可以。

body {
    scroll-behavior: smooth;
}

只要使用 scroll-behavior 屬性就可以達成

scroll-behavior 屬性主要有兩個參數，auto 及 smooth，auto 為預設值，其效果會直接滾動到目標，smooth 則可以緩慢的滾動到目標。