分類: 筆記x備忘

  • Cloudflare Workers 服務介紹

    如果有使用 cloudflare 服務,需要 serverless 功能的話,可以評估使用量來使用 cloudflare 的 workers 服務。參考:

    Cloudflare Workers documentation · Cloudflare Workers docs
    Documentation for Cloudflare Workers, a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.

    他可以作為 client to server 的 middleware 或是當作是一個終端。 serverless 的服務各大 vps 商也都有,像是 AWS GCPAzure 等,這裡也有篇 Linode 關於 Serverless Computing 的優缺點介紹

    值得一提的是他還有 wokers router 服務,以及 workers KV 服務,提供了路由和儲存的實作,有興趣可以玩玩看。另外在 workers 的設定中,如果同一個帳號中也有使用 name server 的服務,可以調整自定義網域的作法,將子域名指定過去,這樣就不用記很奇怪的域名啦。

    Cloudflare 的 workers 服務有提供免費以及付費的方案,參考介紹頁面底下的表格,細節計算可以參考:

    Pricing · Cloudflare Workers docs
    By default, users have access to the Workers Free plan. The Workers free plan includes limited usage of Workers, Pages Functions and Workers KV. Read …

    Workers 使用的語言比較偏向 nodejs ,可用的應用場景滿多的,可以參考官方文件範例
    像是如果需要做一個簡單跳轉,可以這樣寫:

    const base = 'https://example.com';
    const statusCode = 301;
    
    async function handleRequest(request) {
      const url = new URL(request.url);
      const { pathname, search } = url;
    
      const destinationURL = base + pathname + search;
    
      return Response.redirect(destinationURL, statusCode);
    }
    
    addEventListener('fetch', async event => {
      event.respondWith(handleRequest(event.request));
    });
    

     

    同場加映其他介紹文章:

    Cloudflare Workers入門 ─ 簡介
    Cloudflare Workers將送進來的request在cloudflare的網絡上做處理。你可以把它放在client和server的中間,用做Middleware;後方也可以沒有server ─ …
    tool man xyz
    此網站版面極為簡潔,內容包含不好笑又尷尬的文章、覺得之後可能會看所以先保存但事後很少會看的新聞等。
  • Linode 伺服器調整規格與調整硬碟空間配置

    常常會有需要調整 VPS 規格的狀況,一般通常會有幾個狀況需要調整規格:

    1. 應用程式需要更多,或是更少的 CPU / 內存(Memory)
    2. 硬碟空間不足,但是不想要另掛儲存空間
    3. 發現目前使用量太少了,目前規格過高需要調低

    我們以調整 Linode 的 VPS 服務操作介紹,首先需要確認以下幾個項目:

    1. 調整的是 Linodes ,也就是 VPS 主機服務的規格。
    2. 調整無法更換地區,如果需要更換地區請使用 clone 服務,IP 也會更換,如果 VPS 內應用程式有依賴 IP 的話,或是 DNS 服務需要特別注意是否能夠更改。
    3. 更換前需要確認該 VPS 配置的硬碟空間是否符合目標規格所使用的硬碟空間。
    4. VPS 更換規格大約會停機 5 – 30 分鐘,如果是已經上線產品的話要注意是否是離峰時段。

    以下介紹至 2022-10-07 當前的版本下如何操作更換規格:

    首先登入以後會看到你的 VPS 服務器列表,選一個。

    可以從列表上選擇,或是點進去 VPS 後選擇 Resize 選項。

    選擇 Resize 後,會彈出一個視窗,可以選擇對應的規格。

    選擇規格後,注意 Auto Resize Disk 選項,如果勾選了表示他將會隨著規格上的硬碟自動配置。這樣之後要降規格時會需要特別調整。

    最後在 Confirm 上輸入要求的內容(作為確保輸入無誤用途)後,Resize Linode 按鈕就會顯示可點擊狀態,點擊該按鈕送出即可。

    在 Linode VPS 上特別要注意的是 Auto Resize Disk 這個選項,如果沒有硬碟空間的需求,或是暫時調高規格的話,是可以不需要勾選的。

    果需要調整硬碟空間,要注意以下幾點:

    1. 購買的硬碟空間不等於這台 VPS 分配的硬碟空間
    2. 配置硬碟空間時需要停止主機才能啟用

    首先,要先確認主機是否關閉,如果沒有關閉的話要先 Power Off。

    接者往下滑動(需要等一下或是再刷新一下頁面),選擇 Storage 選項,接著在主要硬碟(這個例子是 “CentOS 7 Disk” 這個項目,我們可以看到他的 Size 是 258088 MB。如果有另外開,則需確保總共的容量)中。選擇 Resize 這個連結。

    點擊後可以看到 Size 這個選項可以輸入以 MB 為單位的硬碟配置空間,底下有一個 Maximun Size 顯示當前可以配置的總空間數量,輸入數字無法超過這個最大上限。輸入完後,點擊 Reszie 按鈕送出,再重新啟動 VPS 主機即可生效。

    提醒一下:請注意目前硬碟實際佔用空間,輸入最小數量請勿低於實際佔用空間。
    查看實際佔用空間可以參考使用指令,參考指令文件

    df -h

  • vue3 學習筆記 EP3

    直譯語言和編譯語言是程式語言的一種分類,自己在有 server-side 的程式中寫 PHP 寫久了,都快忘記編譯語言會有編輯檔案以及編譯後的檔案。 這時會開始苦惱幾個需求:

    1. 在 server 上只 pull 下編譯後檔案即可
    2. 編輯檔還是需要版控
    3. server 上儘量不要搞太多東西,要不以後架設會很麻煩
    4. 儘量自動化

    版控使用 git 來實現,因為部屬到 server 是 master branch,所以打算開一個 dev branch 來處理編輯,然後測試沒問題以後再 marge 到 master branch ,然後 npm run build 把產生的 dist 的資料夾(編譯後的檔案) push 上去。

    參考:

    HowTo have specific .gitignore for each git branch
    HowTo have specific .gitignore for each git branch – gitignore_per_git_branch.md

    可以透過 git 之中的 hook 達到目的。

    他的原理是透過 git hook 在 checkout 的時候,取得對應不同 branch 的 .gitignore.{branch name} 檔案,讀取裡面的設定實現 git ignore 的功能,以達到不同 branch 能夠指定不同需要 ignore 檔案的目的。

    主要的作法是在 .git/hooks 之中建立一個 post-checkout 檔案(該檔案名稱對應 hook 行為):

    #!/bin/sh
    
    old_ref=$1
    new_ref=$2
    branch_switched=$3
    
    if [[ $branch_switched != '1' ]]
    then
        exit 0
    fi
    echo "---- POST CHECKOUT ----"
    current_branch=$(git rev-parse --abbrev-ref HEAD)
    hook_dir=$(dirname $0)
    root_dir="$(pwd -P)"
    info_dir="$root_dir/.git/info"
    
    exclude_target='.gitignore'
    if [[ -f "$root_dir/$exclude_target.$current_branch" ]]
    then
    	echo "Prepare to use .gitignore.$current_branch as exclude file"
        exclude_target=.gitignore.$current_branch
    fi
    cd "$info_dir"
    rm exclude
    #ln -s $exclude_target exclude
    echo "Copy .gitignore.$current_branch file in place of exclude"
    cp "$root_dir/$exclude_target" exclude
    echo "--- POST CHECKOUT END ---"

    然後執行 git init ,重新啟用 git hooks。

    之後實作 .gitignore 時,檔案名稱依照分支加上後綴即可。例如是 dev 分支下,添加 .gitignore.dev 檔案即可生效;在 master 中,添加 .gitignore.master 就行啦。

    附上設定截圖更清楚:

     

    同場加映:

  • vue3 學習筆記 EP2

    在 sublime 中,.vue 的檔案再配置高亮(highlight)的實作方法,網路上很多推薦 vue-syntax-highlight 這個外掛,安裝方法就不贅述了。

    而如果 .vue 檔案中包含了 script 和 template 兩個 tag 的話,這個外掛就很容易只會 highlight 上面的 tag ,這樣頗不方便的。 後來發現,其實只要把 .vue 設定為 HTML 的格式, highlight 的動作就會很漂亮的。

    但是 .vue 並非預設是 HTML 格式,內建設定中,打開 .vue 會是以純文字的形式,如果想要每次開啟預設都是以 HTML 格式開啟,需要調整一下設定:

    1. 點擊 Sublime Text-> Preferences->Browse Packages,開啟資料夾。
    2. 進入 Packages 資料夾後,點擊進入 User 資料夾。該資料夾是用戶設定的集合。
    3. 創建一個 HTML.sublime-settings 檔案,並且依照格式輸入以下檔案清單,主要是有包含 vue 這個值就行的:
      {
           // Which file extensions go with this file type?
          "extensions":
          [   
              "html5",
              "vue"
          ]
      }

     

    題外話,同樣的資料夾中,如果需要創建不同的對應,只要把 HTML.sublime-settings 名稱的 HTML 至換成想要的格式即可。

     

  • vue3 學習筆記 EP1

    這份學習筆記是基於自身的經驗之上,在學習 vue.js 3 所寫下的筆記。

    目標和過去經驗:

    1. 寫過 node.js 做爬蟲和 API 服務
    2. 後端分離,後端打算以 PHP 做 restful API 套用。
    3. 前端以 vue3 typescript 為主
    4. 基本上學到了以後就用套件,這是套件王精神。
    5. 以實作一個個人 Line 工具服務,可登入後台操作。

    dev 環境:

    1. macOS 12.6
    2. node 16.17.1, npm 8.19.2
    3. IDE 用的是 sublime3 和 Mac 內建的編譯器
    4. PHP 使用 vm 獨立環境,vue3 於 macOS 環境實作。

    首先先確認在 mac 上安裝 npm 和 node,這之前安裝過了,參考這裡

    安裝 git,之前用 fork 跑 git 結果發現 macOS 本體沒安裝過,參考這裡

    brew install git

    再來升級一下太久沒用的 npm 和 node ,參考這裡

    sudo npm install -g npm@latest
    sudo npm cache clean -f
    sudo npm install -g n
    
    sudo n stable

     

    這樣就差不多啦~

    vue3 的教學參考:

    個人推薦使用 vite 創建,不過依照接下來要實作的專案,我應該會直接買一個模版來製作的。

    另外提供一下退坑的文章:

    對我來說,最大的學習成本是:

    1. vue 要建構一個編譯環境到生產環境再處理上 CI 的流程,以及未來協做或接手的作法(總不可能 node_modules 都上 git )。
    2. 學習在 vue3 上 操作 SaaS 和 AJAX
    3. 各種 vue 上的套件蒐集和使用方式,儘量不要用到 jQuery 套件的。

    加油吧。

  • 製作 Ubuntu 遠端桌面伺服器

    有時我們會需要安裝一個雲端的伺服器是有 GUI 介面可以操作的,舉例像是用模擬器爬爬蟲,或是需要遠端協作需求的人,會需要在雲端伺服器上安裝一個桌面伺服器。

    先提一下會有缺點:

    1. 通常雲端 VPS 廠商不會有顯卡,所以遠端桌面勢必顏色和顯示上不會太好。
    2. 雲端廠商的規格和價格成正比,勢必無法和自己使用電腦上比較。
    3. 即便使用 GUI 介面,他畢竟是一台伺服器,你能連上表示其他人也能連,常常很容易忽略了伺服器需要設定的安全機制。

    這邊使用 Linode Ubuntu 22.04 安裝,安裝目標:

    1. Gnome desktop 環境
    2. XRDP 遠端桌面連線

    捨棄 Linode 文件中描述的 VNC 連線,是因為怎麼裝都連不起來…曾經懷疑是不是 Gnome 安裝錯了,後來發現根本是 VNC 設定有問題,果斷使用 XRDP 來處理。

    步驟:

    1. 首先參照 Linode 文件 確認購買一個伺服器,並且設定好伺服器時區\hostname\更新等等。
    2. 如果不使用 tasksel 安裝,則使用以下指令:
      sudo apt install ubuntu-desktop gnome-panel gnome-settings-daemon metacity nautilus gnome-terminal
    3. 如果使用 tasksel 安裝,請參考這裡 
      sudo apt install tasksel
      sudo tasksel install ubuntu-desktop
    4. 安裝 xrdp 功能,文件中使用的 OS 是 ubuntu 18.04 不過用 22.04 也行的:
      sudo apt-get install xrdp -y
    5. 如果使用 ufw 套件(可用 ufw status 或是 iptabes -h 指令檢查):
      sudo ufw allow 3389/tcp
    6. 如果使用 iptables 套件:
          1. 編輯設定檔案:
            nano /etc/v4
          2. 輸入內容並儲存(注意要開啟 3389 port):
            *filter
            
            
            # Allow all loopback (lo0) traffic and reject traffic
            # to localhost that does not originate from lo0.
            -A INPUT -i lo -j ACCEPT
            -A INPUT ! -i lo -s 127.0.0.0/8 -j REJECT
            
            
            # Allow ping.
            -A INPUT -p icmp -m state --state NEW --icmp-type 8 -j ACCEPT
            
            
            # Allow SSH connections.
            -A INPUT -p tcp --dport 22 -m state --state NEW -j ACCEPT
            
            
            # Allow HTTP and HTTPS connections from anywhere
            # (the normal ports for web servers).
            #-A INPUT -p tcp --dport 80 -m state --state NEW -j ACCEPT
            #-A INPUT -p tcp --dport 443 -m state --state NEW -j ACCEPT
            -A INPUT -p tcp --dport 3389 -m state --state NEW -j ACCEPT
            
            # Allow inbound traffic from established connections.
            # This includes ICMP error returns.
            -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
            
            
            # Log what was incoming but denied (optional but useful).
            -A INPUT -m limit --limit 5/min -j LOG --log-prefix "iptables_INPUT_denied: " --log-level 7
            
            
            # Reject all other inbound.
            -A INPUT -j REJECT
            
            
            # Log any traffic that was sent to you
            # for forwarding (optional but useful).
            -A FORWARD -m limit --limit 5/min -j LOG --log-prefix "iptables_FORWARD_denied: " --log-level 7
            
            
            # Reject all traffic forwarding.
            -A FORWARD -j REJECT
            
            
            COMMIT
          3. 編輯設定檔案:
            nano /etc/v6
          4. 輸入內容並儲存:
            *filter
            
            
            # Allow all loopback (lo0) traffic and reject traffic
            # to localhost that does not originate from lo0.
            -A INPUT -i lo -j ACCEPT
            -A INPUT ! -i lo -s ::1/128 -j REJECT
            
            
            # Allow ICMP
            -A INPUT -p icmpv6 -j ACCEPT
            
            
            # Allow HTTP and HTTPS connections from anywhere
            # (the normal ports for web servers).
            #-A INPUT -p tcp --dport 80 -m state --state NEW -j ACCEPT
            #-A INPUT -p tcp --dport 443 -m state --state NEW -j ACCEPT
            
            
            # Allow inbound traffic from established connections.
            -A INPUT -m state --state ESTABLISHED,RELATED -j ACCEPT
            
            
            # Log what was incoming but denied (optional but useful).
            -A INPUT -m limit --limit 5/min -j LOG --log-prefix "ip6tables_INPUT_denied: " --log-level 7
            
            
            # Reject all other inbound.
            -A INPUT -j REJECT
            
            
            # Log any traffic that was sent to you
            # for forwarding (optional but useful).
            -A FORWARD -m limit --limit 5/min -j LOG --log-prefix "ip6tables_FORWARD_denied: " --log-level 7
            
            
            # Reject all traffic forwarding.
            -A FORWARD -j REJECT
            
            
            COMMIT
        1. 執行指令:
          iptables-restore < /etc/v4;/sbin/iptables-save;ip6tables-restore < /etc/v6;/sbin/ip6tables-save;
    7. 設定 polkit 添加授權規則,編輯檔案:
      sudo nano /etc/polkit-1/localauthority.conf.d/02-allow-colord.conf
    8. 輸入以下內容後儲存,這主要功能是色彩管理避免需要多次輸入密碼:
      polkit.addRule(function(action, subject) { if ((action.id == "org.freedesktop.color-manager.create-device" || action.id == "org.freedesktop.color-manager.create-profile" || action.id == "org.freedesktop.color-manager.delete-device" || action.id == "org.freedesktop.color-manager.delete-profile" || action.id == "org.freedesktop.color-manager.modify-device" || action.id == "org.freedesktop.color-manager.modify-profile") && subject.isInGroup("{group}")) { return polkit.Result.YES; } });
    9. 重啟 XRDP:
      sudo /etc/init.d/xrdp restart

    連線時 windows OS 用戶使用內建的遠端桌面連線工具即可, MacOS 用戶推薦使用 Microsoft Remote Desktop 這套軟體。

    其他額外你可能需要的東西

    1. 安裝 Chrome: https://linuxize.com/post/how-to-install-google-chrome-web-browser-on-ubuntu-20-04/
    2. 安裝 Telegram:https://linuxhint.com/install-telegram-desktop-messenger-linux/

     

    參考文件:

    1. https://www.linode.com/docs/guides/set-up-and-secure/
    2. https://www.linode.com/docs/guides/install-vnc-on-ubuntu-20-04/
    3. https://operavps.com/linux-vps-with-gui-and-rdp/
    4. https://documentation.suse.com/zh-cn/sles/15-SP2/html/SLES-all/cha-security-policykit.html
  • Progressive Web Application(PWA) 製作

    PWA 又稱「漸進式的網頁應用程式」,有很多文章已經有說明,參考這裡,或是參考這個都有說明。

    這次介紹一個 PWA 的好用工具:

    PWABuilder
    All the tools you need to build and deploy your Progressive Web Apps.

    操作方法簡化非常多,開始之前要注意幾件事情:

    • 準備一張  512×512 的 png logo (如果原本 logo 不夠大的話)
    • 要確保有更改網站內網頁的權限
    • HTTP Server 要注意安全性配置是否會阻擋根目錄的 json 和 js 檔案
    • 網站一定要有合規的 HTTPS 憑證使用

    首先進入網站以後輸入網址。
    系統便會開始撿測需要的資源,會給一份報告告訴你缺什麼,或是已經有了什麼。如下圖,會發現 PWA 需要的 Manifest.json 和 server-woker.js  都沒有,這時點擊一下右下角的 next 按鈕。

    點擊之後,會產生可以下載的 PWA 必要文件檔案。依照提示點擊 Generate 按鈕,下載必要檔案。
    下載完成解壓縮後,資料夾中會有如下檔案,點開 next-steps.html 會提示接下來要做的事情。
    next-steps.html 會導向 https://github.com/pwa-builder/pwabuilder-web/blob/V2/src/assets/next-steps.md 這個網址。簡單來說要做五件事情。

    1. 把目錄裡面的 manifest.json 上傳到網站根目錄。
    2. 把 pwabuilder-sw/pwabuilder-sw.js 上傳到網站根目錄
    3. 把準備好的 logo 改名 app-icon-512×512.png(預設 manifest.json 會吃 favicon.ico 可以從檔案中修改)
    4. 在網頁 header 中添加以下兩串代碼
      <link rel="manifest" href="manifest.json" />
      <script type="module">
         import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate';
         const el = document.createElement('pwa-update');
         document.body.appendChild(el);
      </script>
      
      

       

    以上,恭喜完成一個 PWA 基本配置,更進階的使用可以參考 manifest.json 中的配置:

    Web App Manifest | MDN
    Web App manifest 是一個 JSON 格式的文件,它提供了應用程式相關的資訊(像是名稱、作者、圖示、描述)。 manifest 的功用是將 Web …

    這裡面有詳細說明。像是如果要讓主畫面圖片更清晰,可以在 manifest.json 把 icons 參數調整過。

    值得一提的有幾個設定:

    —-

    安卓手機上使用 PWA 方法,請參考這裡

    iOS 上就是開 safari 然後把網站加入主畫面就行啦,參考這裡

    同場加映:

    Progressive Web App 加入主畫面 : PWA 究竟加入和安裝了什麼 (2) – iT …
    加入主畫面 (Add to Home screen) 加入主畫面 (Add to Home screen) 常見的縮寫為 A2HS,可以看成是讓使用者將 Web App 進行 "安裝&quo…
    iOS PWA Compatibility-firt.dev
    What's supported on Safari on iOS and iPadOS for Progressive Web Apps
    Day 02 – 30 天 Progressive Web App 學習筆記 – 為什麼需要 PWA? – iT …
    為什麼需要 PWA? 很多人認為網頁沒辦法跟原生的 APP 相提並論,因為網站沒辦法像原生 APP 一樣快速、可靠、高互動等等 PWA …
    將您的網站轉換成高品質PWA
    使用 PWA Builder 從現有網站建立高品質的PWA

     

  • Hestiacp 安裝筆記

    最近再找一款能夠方便架站自由度也高的管理面板,主要是為了架設 LEMP 的環境,於是找到這款 Hestiacp 。這是 Vestacp 的兄弟款,不過 Vestacp 已經沒有維護了。

    先講結論:
    這是一款學習門檻較高的 panel,建議提供給已經熟悉使用 debain / ubuntu 的管理員,可以做一個屬於自己的習慣的模版和 SOP,對於較為複雜的 LEMP 網站會滿方便的。但因為是開源的服務,導致還是不是很方便(和 aapanel 比較),對於習慣無 panel 操作的用戶還是會感覺到礙手礙腳的。


    這款 Hestiacp 的好壞,個人分析如下:

    優點:

    1. Panel 最大的好處就是有許多配置都調整好了,不用費心客製化 LEMP 的各種參數。
    2. 同樣使用 Panel 的好處之一:很多動作不用一堆指令,用網頁 UI 點一點就處理好了。
    3. 這款 Hestiacp 許多套件安裝和配置是使用系統原生的實作方法, panel 實作安裝服務等也是很透明易懂,甚至提供開發文件。也是開源的。
    4. 許多操作是原生的作法,會用 debain / ubuntu 的話會很方便,也不會有過多包裝,不用擔心學了以後其他 panel 或是轉換無 panel 等有學習障礙。
    5. 有還在維護中的文件和論壇,而且 panel 也有繁體中文的翻譯可以使用。
    6. 內建網站統計工具,是面向 MIS/SE 的一套統計服務。

    缺點:

    1. 使用 panel 都會有壞處就是:習慣使用 command line 的操作的話,要強迫自己有些需求要從 panel 上實現,要不 panel 沒有同步的話可能會有設定互相衝突覆蓋的問題。
    2. Hestiacp 有部分設定在網頁上不方便操作,要用 v-xxxxx  等 panel 指令動作比較快處理,參考列表。學習門檻較高。
    3. 文件管理器長的很醜,如果有需要還是推薦用 command line 處理比較舒服。
    4. 開源的 Panel 要記得常更新,避免被 0day 攻擊,更新時要注意客製化的 template 等需要確保不會被更新覆蓋。
    5. 客製化 http Service (Nginx / Apache)的樣版真的有夠麻煩。和 aapanel 的方便性差滿多的。
    6. Hestiacp 建立 LEMP 套件需要事先安裝好,套件無法獨立安裝(會與面板衝突導致不顯示)。

    Hestiacp 論壇: https://forum.hestiacp.com/
    介紹:https://hestiacp.com/
    文件:https://docs.hestiacp.com/
    Github:https://github.com/hestiacp/hestiacp

    支持系統:

    • Debian 10
    • Debian 11
    • Ubuntu 18.04 LTS
    • Ubuntu 20.04 LTS
    • Ubuntu 22.04 LTS

    — 以下架設和簡易心得 —

    提醒下:有部分配置和安裝需要更詳細的測試,並非一個完整的安裝 SOP。

    先登入root 權限,更新一遍

    apt-get update

    下載 install.sh

    wget https://raw.githubusercontent.com/hestiacp/hestiacp/release/install/hst-install.sh

    下載 install.sh

    wget https://raw.githubusercontent.com/hestiacp/hestiacp/release/install/hst-install.sh

    參考選定安裝(https://gabizz.github.io/hestiacp-scriptline-generator/)不安裝 mysql \ http server 做最小安裝,port 設定 8083:

    sudo bash hst-install.sh --apache no --phpfpm no --multiphp no --vsftpd no --proftpd no --named yes --mysql no --postgresql no --exim yes --dovecot yes --sieve no --clamav yes --spamassassin no --iptables yes --fail2ban yes --quota no --api no --interactive yes --hostname no --email no --password no --with-debs no --port '8083' --lang 'zh-tw' --force

    更新 Panel 網域(假設網域 cp-testing.69939.uk),記得 dns 要先設定上

    v-change-sys-hostname cp-testing.69939.uk

    Panel 網域補 SSL

    v-add-letsencrypt-host

    更改密碼

    v-change-user-password admin 密碼

    透過上述選定安裝,預設安裝的服務有這些:

    後台新增一個用戶,設定方案為 default

    點入該新增的帳號以後,選擇右上角登入該帳號之後,就可以創建其他網站。

    再創建網站之前如果需要編輯 nginx 內容,需要編輯樣版,參考:https://docs.hestiacp.com/admin_docs/web.html#how-do-web-templates-work
    Nginx 的路徑為:

    /usr/local/hestia/data/templates/web/nginx/php-fpm/

    檔案要記得複製一份新的並且命名好。避免更新 panel 的時候被覆蓋回去。

     

    另外備註一些參考:

    1. 面板的指令列表:https://github.com/hestiacp/hestiacp/tree/main/bin
  • 壓力測試 – ab(ApacheBench)指令的操作與結果說明

    Apache 內建帶有一個 ab 指令,可以作為壓力測試使用。

    用法:ab [options] [http[s]://]hostname[:port]/path
    
    可用餐數:
    -n requests 要執行的請求數
    -c concurrency 一次發出的多個請求的數量
    
    -t timelimit 秒到最大值。花在基準測試上,這意味著 -n 50000
    -s timeout 秒到最大值。等待每個響應,默認為 30 秒
    
    -b windowsize TCP 發送/接收緩衝區的大小,以字節為單位
    -B address 進行傳出連接時綁定的地址
    -p postfile 包含要 POST 的數據的文件。還記得設置 -T
    -u putfile 包含要 PUT 的數據的文件。還記得設置 -T
    -T content-type 用於 POST/PUT 數據的內容類型標頭,例如: 'application//x-www-form-urlencoded',默認為"text/plain"
    
    -v verbosity 要打印多少故障排除信息
    -w 在 HTML 表格中打印結果
    -i 使用 HEAD 而不是 GET
    
    -x 屬性 要作為表屬性插入的字符串
    -y 屬性字符串作為 tr 屬性插入
    -z 屬性字符串作為 td 或 th 屬性插入
    -C 屬性 添加 cookie,例如。 'Apache= 1234'(可重複)
    -H 屬性添加任意標題行,例如。 'Accept-Encoding:gzip'
    在所有正常標題行之後插入。 (可重複)
    -A 屬性 添加 Basic WWW Authentication,屬性
    是冒號分隔的用戶名和密碼。
    -P 屬性 添加Basic Proxy Authentication,屬性
    是冒號分隔的用戶名和密碼。
    
    -X proxy:port 代理服務器和使用的端口號
    -V 打印版本號並退出
    
    -k 使用 HTTP KeepAlive 功能
    
    -d 不顯示百分位數服務表
    -S 不顯示置信度估計值和警告
    -q 執行超過 150 個請求時不顯示進度
    -l 接受可變文檔長度(用於動態頁面)
    
    -g filename 將收集到的數據輸出到 gnuplot 格式文件
    -e filename 輸出帶有百分比的 CSV 文件
    
    -r 不要在套接字接收錯誤時退出。
    
    -m 方法 方法名稱
    -h 顯示使用信息(此消息)
    -I 禁用 TLS 服務器名稱指示 (SNI) 擴展
    -Z ciphersuite 指定 SSL/TLS 密碼套件(參見 openssl 密碼)
    -f protocol 指定 SSL/TLS 協議
    (SSL2、TLS1、TLS1.1、TLS1.2 或 ALL)
    -E certfile 指定可選的客戶端證書鍊和私鑰
    

    結果的部分會長的像是這樣:

    Server Software: 主機使用的系統\軟體(nginx or apache 之類)和版本,通嘗是關閉的
    Server Hostname: 網站的 Hostname ,網域名稱
    Server Port: 連線的 port,大多是 443 或是 80
    Server Temp Key: 連線時的臨時交換密鑰
    TLS Server Name: TLS 連線的名稱
    
    Document Path: 連線網頁路徑
    Document Length: 連線網頁回應的檔案大小
    
    Concurrency Level: 同時進行壓力測試的人數
    Time taken for tests: 本次壓力測試所花費的總秒數
    Complete requests: 完成的要求數(Requests)
    Failed requests: 失敗的要求數(Requests)
    Keep-Alive requests: Keep-Alive 的要求數
    Total transferred: 本次壓力測試的總數據傳輸量(包括 HTTP Header 的資料也計算在內)
    HTML transferred: 本次壓力測試的總數據傳輸量(僅計算回傳的 HTML 的資料)
    Requests per second: 平均每秒回應要求數量
    Time per request: 平均每個要求所花費的時間(注意單位是 ms, 豪秒)
    Time per request: 平均每個要求所花費的時間,跨所有同時連線數的平均值(注意單位是 ms, 豪秒)
    Transfer rate: 從 Client 端到 Web Server 之間的網路傳輸速度
    
    Connection Times: 連線的時間統計,是一個二維表格,分別表示最小值\平均\中間值\最大值:
    
    Connect: Request 從 Client 端到 Web Server 的時間
    Processing: 資料到 Web Server 後到 Response 結束( Response 全部下載完成)的時間
    Waiting: 資料 Connect 狀態後,Client 端等待的時間,亦指 Client 送出 Request 後,一收到 Response 前等待的時間
    Total: Connect + Processing 的時間,也就是從 Client 發出 Request 到 Response 全部下載完成的時間
    

    要注意幾點:

    1. mac 默認是安裝的,但是在 mac 上使用會遇到版本或是數量上限的問題,可自行 google 修復
    2. 一般壓力測試不考慮頻寬,如果遠端測試的話會有頻寬限制(除非 server 端頻寬更低XD),建議是在同網段進行測試
    3. 壓力測試請由小至大,一次太大伺服器爆掉會有點麻煩。

    參考資料:

    使用 ApacheBench 進行網站的壓力測試 – The Will Will Web
    The Will Will Web – 記載著 Will 在網路世界的學習心得與技術分享 –
    指令-ab 壓力測試工具
    OS: ubuntu-20.04 說明:ab 是一種用於對 Apache (HTTP) 服務器進行基準測試的工具。最主要是在讓您了解當前的 Apache 安裝方式執行。這尤其會顯示您的 Apache …
    分享 ApacheBench 的壓力測試結果報告分析心得 – The Will Will Web
    The Will Will Web – 記載著 Will 在網路世界的學習心得與技術分享 –

    如果想要在 windows 上操作(我沒做過),參考:

  • 檢查與轉換檔案編碼,使用 Chrome 瀏覽器和 Sublime 3 文字編輯器

    有時下載一個 txt 文件,用文字編輯器打開來發現不是 utf8 編碼,但是不知道他是用了什麼編碼,這邊可以先丟到 chrome 瀏覽器看看,如果 chrome 瀏覽器顯示是正常的,就可以開啟 “開發者工具”,開啟”主控台”,輸入指令:

    document.charset

    就可以顯示目前的編碼名稱,如下圖所示:

    這時如果想要儲存成常用編碼的檔案,這時可以用 sublime 3 或是其他可以轉換編碼的文字編輯器。

    用 usblime 3 為例,如圖操作,先開啟指定編碼看是否正確,正確的話再另存編碼即可。