分類: Web Developer

發佈日期: 作者:

雛型程式開發AI工具介紹

v0 by Vercel

官方網站：https://v0.dev/

v0 by Vercel 是由 Vercel 推出的一個開發工具，旨在幫助開發者快速構建和部署各種網頁應用和元件。該工具的核心功能是提供一個開放的社群平台，開發者可以從中獲取靈感、分享項目，並基於現有的範例進行快速開發。

這個平台提供了大量由社群貢獻的範例項目，這些項目涵蓋了多種應用場景，例如： AI SDK 聊天機器人、加密貨幣儀表板、3D 登陸頁面、動態背景生成、卡片生成器、音樂播放器等。 每個範例都可以被 Fork（複製）並用於自己的項目，大大降低了開發的門檻。可以快速將範例或自定義項目部署到線上，並即時查看效果。

特別適合需要靈感或快速原型開發的開發者。其社群驅動的範例庫和快速部署功能是其主要亮點。然而，對於需要更高自定義或複雜功能的項目，可能需要搭配其他工具使用。

bolt

官方網站：https://bolt.new/

bolt.new 是一個專注於快速構建、運行、編輯和部署全棧網頁應用的平台。該網站的核心功能是提供一個簡化的開發環境，讓用戶能夠快速實現從構想到部署的完整流程。其目標用戶可能包括開發者、設計師以及需要快速原型開發的團隊。這是一款創新的 AI 驅動全端開發工具，特別適合需要快速構建原型或 MVP 的開發者和團隊。其零配置、即時預覽和一鍵部署功能大幅簡化了開發流程。然而，對於需要更高穩定性和複雜功能的專案，Bolt.new 可能仍需進一步完善。

網站首頁的標語為「Prompt, run, edit, and deploy full-stack web apps」，這表明該平台的主要特點是：

  • Prompt：快速啟動項目。
  • Run：運行應用程式。
  • Edit：即時編輯代碼。
  • Deploy：快速部署應用。

這樣的功能設計適合需要快速迭代和測試的開發場景。

Replit

使用心得的文章：https://blog.creatorhome.tw/ai-hackathon/

文章中介紹了他利用 AI 的協助，實現了兩大主要功能：一個是透過問卷內容和 AI API 推薦禮物的功能，另一個是客製化祝福卡片並提供可下載的信件圖片和語音轉換功能的功能。

官方網站：https://replit.com

Replit是一款具有多人協作和開發者社群功能的寫程式工具，且用戶不必在電腦設定複雜的環境安裝或程式下載，直接在瀏覽器中打開網站，就能開始寫程式、發作品。從2016年上線至今，用戶累積突破1,000萬人。這是一個線上集成開發環境（Integrated Development Environment，IDE），支援Python、Java、C++等50多種程式語言，並可將寫好的程式碼即時更新在GitHub儲存庫中，讓開發應用程式從無到有的過程，都能直接在Replit一站完成。

Replit還能像Google Docs一樣邀請多位用戶協作，學程式的過程可以不再孤單。Replit 更適合用來打造小型應用程式，使用體驗上可能不如本地開發環境順暢，且運行速度較慢。

主要功能：

  • 多語言支援： Replit 支援多種程式語言，讓開發者能夠在同一平台上進行不同語言的開發。
  • 即時協作： 多位使用者可以同時編輯同一專案，類似於 Google 文件的協作方式，方便團隊合作。
  • 一鍵部署： 使用者可以快速將應用程式部署並獲取公開連結，方便分享和展示專案。
  • AI 助手： 透過 Replit Agent，使用者只需描述需求，AI 即可自動生成程式碼並完成部署，適合沒有程式設計經驗的初學者。

21st.dev

官方網址:https://21st.dev/

21st.dev 是一個專為設計工程師打造的開源 React UI 元件平台，靈感來自 shadcn/ui。 21ST.DEV 該平台提供多樣化的預建元件和頁面模板，協助開發者快速構建高品質的使用者介面。 HUNTSCREENS.COM 使用者只需透過一條命令即可安裝所需元件，顯著提升開發效率。

主要功能：

  • 專業元件（Pro Components）： 提供專業級的 React 與 Tailwind CSS 元件，協助開發者快速構建精緻的使用者介面。 21st.dev
  • 登陸頁面（Landing Pages）： 包含多種頁面模板，如公告、背景、邊框、行動呼籲、客戶展示、比較、功能介紹、頁尾、英雄圖、圖片、地圖、導航選單、定價、捲動區域、推薦詞、文字、影片等，方便快速搭建網站。
  • UI 元素（UI Elements）： 提供豐富的 UI 元素，如手風琴、AI 聊天、警示、頭像、徽章、按鈕、日曆、卡片、輪播、核取方塊、日期選擇器、對話框、下拉選單、空狀態、檔案樹、檔案上傳、表單、圖示、輸入框、連結、選單、通知、數字、分頁、彈出視窗、單選群組、選擇器、側邊欄、登入、註冊、滑桿、載入器、表格、標籤頁、標籤、文字區域、提示、切換、工具提示等，滿足不同的設計需求。
  • Hooks： 提供 React Hooks，簡化狀態管理和副作用處理。

shadcn/ui

官方網站：https://ui.shadcn.com/

shadcn/ui 是一個開源的 React 元件集合，專為開發者提供設計精美且可高度客製化的 UI 元件。 與傳統的元件庫不同，shadcn/ui 採用「複製貼上」的方式，開發者可以直接將所需的元件程式碼複製到自己的專案中，進行深度客製化。

主要功能：

  • 多樣化的元件： 提供多種常見的 UI 元件，如按鈕、表單、對話框等，滿足不同的開發需求。
  • 基於 Tailwind CSS： 所有元件均使用 Tailwind CSS 構建，方便開發者進行樣式調整和主題設定。
  • 無障礙設計： 元件設計時考慮了無障礙性，確保應用程式對所有使用者友善。

許多開發者讚賞 shadcn/ui 的客製化能力，認為它提供了更大的靈活性，特別適合需要精細控制元件行為和樣式的專案。然而，也有使用者指出，對於僅需基本功能的專案，傳統的元件庫可能更為方便，因為它們提供了開箱即用的解決方案。

Lovable

官方網站：https://lovable.dev/

Lovable 是一款由人工智慧（AI）驅動的全端應用程式構建工具，旨在透過自然語言處理技術，讓使用者能夠以對話的方式快速建立網站和 Web 應用程式。 使用者只需描述想要的功能，Lovable 即可自動生成對應的程式碼，簡化了軟體開發流程，讓非技術人員也能輕鬆構建高品質的軟體。Lovable 的主要功能特點包括後端功能實現、精確編輯和支持大型代碼庫，這些特點使得 Lovable 在 AI 全栈應用程序構建器中具有獨特的優勢。

主要功能：

  • 自然語言生成程式碼： 使用者以自然語言描述所需功能，Lovable 會將其轉換為實際的程式碼。
  • 構建和部署網站/應用程式： 透過對話，使用者可以構建並部署完整的網站和 Web 應用程式。
  • 與 Supabase 整合： 支援與 Supabase 整合，方便使用者連接 Postgres 資料庫，處理資料儲存和使用者身份驗證。
  • GitHub 同步： 使用者可以將生成的程式碼同步至 GitHub，進行版本控制和程式碼管理。
  • 處理大型程式碼庫： Lovable 能夠處理包含超過 100,000 行程式碼的大型專案。
發佈日期: 作者:

Line Bot圖文回覆的幾個功能

列出快速回覆選項

官網教學：https://developers.line.biz/en/docs/messaging-api/using-quick-reply/#set-quick-reply-buttons

可在訊息中加入快速回覆按鈕，讓使用者能夠快速回應。快速回覆功能可在一對一聊天、群組聊天和多人的聊天中使用，每則訊息最多可設定 13 個快速回覆按鈕。

快速回覆按鈕的消失時機：

  • 當使用者點擊快速回覆按鈕時，按鈕會消失（相機、相簿、日期時間選擇器和位置資訊等動作除外，這些按鈕會保留直到使用者提供所需資訊）。
  • 如果聊天室中有新的訊息（無論是來自官方帳號、使用者或其他成員），快速回覆按鈕也會消失。若新訊息被刪除，按鈕會重新出現。

LINE Front-end Framework

LINE 前端框架（LIFF，LINE Front-end Framework）是由 LINE 提供的網頁應用程式框架，透過將 LIFF SDK 整合至您的網頁應用程式，您可以存取 LINE 平台提供的資訊，或使用 LINE 應用程式的功能。

主要功能：

  • 與 LINE Login 和 LINE 平台整合： LIFF 與 LINE Login 整合，可以透過 LINE 平台的授權流程，安全地存取使用者的個人資料。
  • 分享目標選擇器： 這是一個強大的工具，允許使用者透過 LIFF 應用程式，選擇 LINE 好友並傳送訊息。

為了協助新手快速上手，LINE 提供了 LIFF 起始應用程式，這是一個包含基本功能的範本，開發者可以在此基礎上進行自訂和開發。

開始使用 LIFF 起始應用程式的步驟：

  1. 環境準備：
    • Node.js： 確保已安裝 Node.js，建議版本為 16.13.1。
    • Yarn： 使用 Yarn 作為套件管理工具，建議版本為 1.22.17。
    • Netlify CLI： 若計劃使用 Netlify 部署，建議版本為 9.16.3。
  2. 下載並執行原始碼：
    • 下載原始碼： 在終端機中執行以下指令，下載 LIFF 起始應用程式的原始碼：bash複製程式碼git clone https://github.com/line/line-liff-v2-starter.git
    • 選擇實作版本： 在 line-liff-v2-starter/src/ 目錄下，有三種實作版本可供選擇：
      • Vanilla JavaScript： line-liff-v2-starter/src/vanilla
      • Next.js： line-liff-v2-starter/src/nextjs
      • Nuxt.js： line-liff-v2-starter/src/nuxtjs
    • 安裝依賴套件並啟動： 進入所選目錄後，執行以下指令安裝套件並啟動應用程式：bash複製程式碼yarn install yarn dev 啟動後，可在瀏覽器中訪問 http://localhost:3000 查看應用程式。
  3. 部署至伺服器：
    • 使用 Netlify 部署： 若尚未有 Netlify 帳號，請先註冊。安裝 Netlify CLI 後，執行以下指令部署應用程式：bash複製程式碼netlify deploy 按照指示完成部署流程。
  4. 取得並設定 LIFF ID：
    • 建立 LINE Login 頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
    • 新增 LIFF 應用程式： 在該頻道中，新增 LIFF 應用程式，並設定相關資訊，如端點 URL。
    • 設定 LIFF ID： 取得 LIFF ID 後，將其設定為環境變數，確保應用程式能正確運行。

LIFF視窗的大小可以以以下三種大小之一顯示。

要在 LINE 平台上運行 LIFF（LINE Front-end Framework）應用程式，您需要將其新增至 LINE Login 頻道。以下是詳細步驟：

取得 LIFF ID 和 URL： 新增成功後，系統會生成 LIFF ID 和 LIFF URL，您可在應用程式中使用這些資訊。

  1. 準備工作：
    建立頻道： 在 LINE Developers Console 中，建立一個 LINE Login 頻道。
    部署應用程式： 將您的 LIFF 應用程式部署至伺服器，確保其可透過 HTTPS 存取。
  2. 新增 LIFF 應用程式：
    登入 LINE Developers Console： 使用您的帳號登入。
    選擇頻道： 在主控台中，選擇您要新增 LIFF 應用程式的 LINE Login 頻道。
    進入 LIFF 頁籤： 點擊「LIFF」頁籤。
    新增 LIFF 應用程式： 點擊「新增」按鈕，開始設定。
  3. 設定 LIFF 應用程式資訊：
    應用程式名稱： 輸入 LIFF 應用程式的名稱，請避免使用「LINE」或類似字樣。
    視圖大小： 選擇應用程式的視圖大小，可選擇「Compact」、「Tall」或「Full」。
    端點 URL： 輸入您的 LIFF 應用程式的 HTTPS URL，請確保該 URL 可正常存取。
    權限範圍（Scopes）： 根據應用程式需求，選擇所需的權限範圍，如 openid、profile、email 等。
    加好友選項： 設定使用者在使用應用程式時，是否顯示加好友選項。
  4. 完成設定：確認並新增： 檢查所有設定，確保無誤後，點擊「新增」按鈕。

選單功能

在 LINE 的 Messaging API 中，圖文選單（Rich Menu）是一種可自訂的互動式選單，可提升使用者與您的 LINE 官方帳號之間的互動體驗。

圖文選單的結構：

  • 選單圖片： 一張 JPEG 或 PNG 格式的圖片，包含選單項目。
  • 可點擊區域： 在圖片上定義的區域，每個區域可設定不同的動作，如開啟網址或發送訊息。
  • 聊天列： 位於聊天視窗底部的選單，可自訂其顯示文字，用於開啟或關閉圖文選單。

設定圖文選單的方法：

  1. 使用 LINE 官方帳號管理後台：
    • 透過圖形介面快速建立和設定圖文選單。
    • 適合需要快速開發且不需高度自訂的情境。
  2. 使用 Messaging API：
    • 提供進階自訂功能，如設定 postback 動作或日期時間選擇器。
    • 適合需要高度自訂和動態管理圖文選單的情境。

在 LINE 的 Messaging API 中，您可以為特定使用者設定專屬的圖文選單（Rich Menu）

https://developers.line.biz/en/docs/messaging-api/use-per-user-rich-menus/#unlink-the-rich-menu-from-user

同一個使用者可設定多個選單來切換

Flex Message

Flex Message 是 LINE 提供的一種訊息格式，允許開發者透過 JSON 定義訊息的結構和樣式，以實現高度自訂的訊息內容。這種訊息格式適用於各種情境，如商品推薦、訂單確認等，提供豐富的視覺效果和互動性。

這個模擬器可以線上模擬呈現效果: https://developers.line.biz/flex-simulator/

Flex Message 的結構：

Flex Message 的結構由三個主要部分組成：

  1. 容器（Container）： 最外層的結構，包含訊息的主要內容。主要有兩種類型：
    • Bubble： 單一訊息泡泡。
    • Carousel： 多個訊息泡泡的輪播。
  2. 區塊（Block）： 組成 Bubble 的部分，包括：
    • Header： 標題區塊。
    • Hero： 主要圖片或影片區塊。
    • Body： 主要內容區塊。
    • Footer： 底部區塊。
  3. 元件（Component）： 構成區塊的元素，如文字、圖片、按鈕等。

發佈日期: 作者:

用Chrome將本地端檔案替代伺服器檔案

功能介紹

很多時候我們在除錯前端時，會需要把某些例如像設定檔之類換成別的(例如換成DEV環境的設定檔)，這個時候可以用Chrome Developer Tool內建的功能，指定替換掉某個伺服器上面的檔案，非常方便。

很多時候我們要了解別人的網站的一些技術，這個功能也可以幫上很多忙

使用方法

在 Chrome 中可以使用”Developer Tool > Source > 找到要取代的檔案 > 右鍵 > Override Content”去把內容取代掉

點選了之後，切換到Override頁籤，選擇取代的檔案所放置的資料夾，接著就可以去該資料夾看你剛剛所選的Override的檔案

然後更改裡面的檔案，同步就會更改線上的檔案，我們可以console.log出一些我們有興趣知道的東西，或者修改某些設定。

取代後不能下載檔案的問題

如果某些檔案不能取代，而出現錯誤訊息時，如下

則可以去關掉Source Map的功能

  • 打開 開發者工具 (DevTools)：按下 F12 或右鍵點選網頁選擇「檢查」。
  • 點擊右上角的 設定齒輪圖示（通常在「Console」標籤右側）。
  • 在「Preferences」設定頁中，找到「Sources」部分。
  • 取消勾選Enable JavaScript source maps（啟用 JavaScript Source Map）和 Enable CSS source maps（啟用 CSS Source Map）這兩個選項。
  • 關閉設定窗口。
發佈日期: 作者:

在本機測試LineBot API

在本機測試和LINE的API串接時，有幾種方法可以幫助你模擬和測試，而不需要將程式部署到有HTTPS的網址。

使用Ngrok

Ngrok是一個免費的命令行工具，可以將你本機運行的服務暴露到互聯網上。這樣，你可以在本機測試你的API，同時讓外部服務（如LINE的Webhook）能夠訪問你的本機服務。ngrok的原理就是可以把外界的請求轉發到你本機指定的 Port，也就是由 ngrok 產生一串公開的網址來讓外網存取你本機上的Port。它的優點是快速而且還提供了https的服務讓你使用上更安全，甚至還可以設置密碼保護。

這個服務在開發Line Bot時非常好用，我們在本機開發webhook的後端程式，當然不想要每次都一定得部屬到伺服器上面才可以測試，使用Ngrok可以擁有一個公開的網址，可以讓其他人直接連上該網址上的內容。

安裝Ngrok

可從下面網址下載，下載頁面可選擇平台以及安裝方式
https://ngrok.com/download

接著將ngrok.exe放置在你想要放置的硬碟位置即可

直接使用下面的指令會出現錯誤訊息 “authentication failed: Usage of ngrok requires a verified account and authtoken.”

ngrok http 8080

查了一下，這是使用 ngrok 時遇到了身份驗證的問題，具體錯誤是 ERR_NGROK_4018， ngrok 需要使用一個已經驗證過的帳戶和 authtoken

這裡有幾個解決步驟：

  1. 註冊 ngrok 帳號
    如果你還沒有 ngrok 帳戶，請先前往 ngrok 註冊頁面 進行註冊。註冊完後，確認你的帳號是已驗證的。
  2. 取得 authtoken
    登入 ngrok 後，前往 ngrok 的 authtoken 頁面，你會看到你的 authtoken。這是一串用來驗證你 ngrok 帳號的密鑰。
  3. 安裝 authtoken
    在你的命令行或終端中執行以下指令來安裝你的 authtoken：ngrok config add-authtoken YOUR_AUTHTOKEN 請將 YOUR_AUTHTOKEN 替換為你從 ngrok 控制台中取得的 authtoken。
  4. 重新啟動 ngrok
    完成上述步驟後，再次嘗試啟動 ngrok 隧道，應該就能正常運作。
ngrok config add-authtoken YOUR_AUTHTOKEN

以下為正常運作的畫面，獲得的公開網址為”https://ab7c-61-219-171-252.ngrok-free.app“

接著到Line Console創建一個LineBot串接到這個公開位置就可以啦!接著就可以在本機測試你的本地端程式了

更多詳細教學請參考: https://medium.com/%E4%BC%81%E9%B5%9D%E4%B9%9F%E6%87%82%E7%A8%8B%E5%BC%8F%E8%A8%AD%E8%A8%88/%E5%BF%AB%E9%80%9F%E8%AE%93%E5%A4%96%E7%B6%B2%E9%80%A3%E6%8E%A5%E6%9C%AC%E6%A9%9F%E7%9A%84%E5%88%A9%E5%99%A8-ngrok-ac92f792e1f0

發佈日期: 作者:

Jōtai 介紹

什麼是 Jōtai？

Jōtai 是一個輕量級、易於使用的 JavaScript 狀態管理庫，特別設計來與 React 無縫整合。它提供了一種簡單而直觀的方式來管理應用程式中的狀態，並讓這些狀態在不同的組件之間共享。

Jōtai 的核心概念

  • Atom: Jōtai 中最基本的單位，用來儲存一個單一的狀態值。你可以將 Atom 視為一個可變的變數，但它具有反應式特性，當 Atom 的值改變時，所有訂閱它的組件都會自動更新。
  • 用於訂閱的 Hook: useAtom 是一個 React Hook，用來訂閱一個 Atom。當你使用 useAtom 時，你會得到兩個值：當前的 Atom 值和一個用於更新 Atom 值的函數。

Jōtai 的優勢

  • 狀態共享: Jōtai 可以輕鬆地將狀態共享給應用程式中的任何組件。
  • 反應式更新: 當 Atom 的值改變時，訂閱它的組件會自動更新。
  • 避免 prop drilling: 你不再需要通過層層嵌套的組件來傳遞 props。
  • 可測試性: Jōtai 的狀態是可測試的，這有助於你寫出更可靠的應用程式。

安裝Jōtai 

# npm
npm i jotai

# yarn
yarn add jotai

# pnpm
pnpm add jotai

基本用法

import { atom } from 'jotai'

const countAtom = atom(0)

const countryAtom = atom('Japan')

const citiesAtom = atom(['Tokyo', 'Kyoto', 'Osaka'])

const animeAtom = atom([
  {
    title: 'Ghost in the Shell',
    year: 1995,
    watched: true
  },
  {
    title: 'Serial Experiments Lain',
    year: 1998,
    watched: false
  }
])

從同一元件讀取和寫入

當原子在同一元件中同時讀取和寫入時，為簡單起見，請使用組合 useAtom 鉤子。

import { useAtom } from 'jotai'

const AnimeApp = () => {
  const [anime, setAnime] = useAtom(animeAtom)

  return (
    <>
      <ul>
        {anime.map((item) => (
          <li key={item.title}>{item.title}</li>
        ))}
      </ul>
      <button onClick={() => {
        setAnime((anime) => [
          ...anime,
          {
            title: 'Cowboy Bebop',
            year: 1998,
            watched: false
          }
        ])
      }}>
        Add Cowboy Bebop
      </button>
    <>
  )
}

從單獨的元件讀取和寫入

當僅讀取或寫入原子值時，可使用 useAtomValue 和 useSetAtom hooks 。

import { useAtomValue, useSetAtom } from 'jotai'

const AnimeList = () => {
  const anime = useAtomValue(animeAtom)

  return (
    <ul>
      {anime.map((item) => (
        <li key={item.title}>{item.title}</li>
      ))}
    </ul>
  )
}

const AddAnime = () => {
  const setAnime = useSetAtom(animeAtom)

  return (
    <button onClick={() => {
      setAnime((anime) => [
        ...anime,
        {
          title: 'Cowboy Bebop',
          year: 1998,
          watched: false
        }
      ])
    }}>
      Add Cowboy Bebop
    </button>
  )
}

const ProgressTracker = () => {
  const progress = useAtomValue(progressAtom)

  return (
    <div>{Math.trunc(progress * 100)}% watched</div>
  )
}

const AnimeApp = () => {
  return (
    <>
      <AnimeList />
      <AddAnime />
      <ProgressTracker />
    </>
  )
}
發佈日期: 作者:

wordpress 永久連結設定失效

故障的可能原因

  1. .htaccess 檔案不正常：進入 WordPress 的管理後台，點擊「設定」→「連結」，然後按下「儲存變更」。這樣 WordPress 會重新生成 .htaccess 檔案。如果這個步驟沒有解決問題，可以手動在 WordPress 安裝目錄中找到 .htaccess 檔案，並且檢查它是否存在。
  2. 確認 WordPress 是否在正確的網址上運行：如果您的 WordPress 安裝在子目錄或子網域下，請確認永久連結設定正確設定到子目錄下這一點。
  3. 伺服器是否支援永久連結：如果您的伺服器不支援永久連結，則 WordPress 將無法使用它們。(設定方式請見下一篇)
  4. 確認您的主題是否有任何問題：某些 WordPress 主題可能會干擾永久連結的正常運作。嘗試暫時更換到 WordPress 默認主題並再次測試永久連結。

在Apache2支持永久連結

要啟用 Apache2 的 mod_rewrite 模組，您需要將以下內容添加到 Apache2 的設定檔案中：

LoadModule rewrite_module modules/mod_rewrite.so

這個設定通常會加入到 mods-enabled 目錄中的一個設定檔案中。例如，您可以創建一個名為 rewrite.load 的檔案，並將上面的設定添加到這個檔案中。請按照以下步驟進行操作：

  1. 進入 mods-enabled 目錄：
cd /etc/apache2/mods-available
  1. 創建一個名為 rewrite.load 的檔案：
sudo touch rewrite.load
  1. 打開這個檔案並添加以下內容：
LoadModule rewrite_module modules/mod_rewrite.so
  1. 儲存並關閉檔案。
  2. 重新啟動 Apache2 伺服器，以使更改生效：
sudo service apache2 restart

啟用rewrite功能

若您的 /etc/apache2/mods-available 目錄下已經有了 rewrite.load 設定檔案，您可以透過建立符號連結方式來啟用 mod_rewrite 模組。

請按照以下步驟：

  1. 進入到 /etc/apache2/mods-enabled 目錄：
cd /etc/apache2/mods-enabled
  1. 建立 rewrite.load 的符號連結：
sudo ln -s /etc/apache2/mods-available/rewrite.load
  1. 重新啟動 Apache2 伺服器，以使更改生效：
sudo service apache2 restart

執行完上述步驟後，Apache2 的 mod_rewrite 模組即會啟用。您可以再次檢查 /etc/apache2/mods-enabled 目錄，確保 rewrite.load 的符號連結已經建立。若您需要停用 mod_rewrite，則可以刪除這個符號連結即可。

發佈日期: 作者:

在AWS的EC2裡加上SSL/TSL

SSL/TSL是甚麼

SSL/TLS是一種網絡協議，用於在客戶端和服務器之間提供安全的數據傳輸。 SSL代表“安全套接字層”，TLS代表“傳輸層安全性”，兩者是相似的協議，TLS是SSL的升級版。

SSL/TLS通過加密數據流來保護通信的隱私和完整性，以防止數據在傳輸過程中被竊聽或篡改。它使用數字證書來驗證服務器身份，以確保連接到的服務器是預期的服務器，而不是惡意者偽裝的服務器。

SSL/TLS廣泛用於保護網站，電子郵件，即時通訊，虛擬專用網絡（VPN）等應用程序中的數據傳輸。通過使用SSL/TLS，這些應用程序能夠提供更安全的通信，確保用戶的數據受到保護。

我的伺服器環境

這邊所說的是自架的Linux服務器的狀況，一般若是在網域託管的服務商買網站空間，使用cPanel等管理網站的狀況下，一般都會在空間購買裡面附設有免費的SSL/TSL證書，除非我們的網站需要額外的附加資訊才需要自行購買。

這篇文章所講的主要是當我們要在Linux裡面自行設定SSL/TSL，或使用AWS、Azure等服務的虛擬機器架設網站時，會需要自行於Linux中建立SSL/TSL並匯入所需的SSL/TSL認證。

在AWS中使用免費的ACM證書

這邊有很詳細的指導: 教學課程: 在 Amazon Linux 2 上設定 SSL/TLS

但是這邊的教程在後面匯入SSL證書的部分，是要我們自己去購買自己網域專屬的證書，那個很貴而且不太能夠免費，一般免費的SSL/TSL其組織等資訊並不會附在上面，如下圖為AWS所提供的免費證書。

要使用免費證書一個重要的前提就是要將我們所購買的網域給AWS的Route 53來託管，這個動作會產生微量的費用，一個月為0.51美金。

在AWS裡面，有一些服務本身就可以直接和Route53，若是沒辦法，則要另外建立 Elastic Load Balancing，這個是免費的，它可以用來連結我們的EC2和Route53，這樣就可以利用ACM來設定憑證了。

發佈日期: 作者:

在CentOS 7的Xampp中使用Certbot

Certbot介紹

Certbot是一個由EFF（Electronic Frontier Foundation）開發的免費開源工具，用於自動化在Web服務器上部署SSL/TLS證書。它是一個自動化的客戶端，可以讓您輕鬆獲得免費的SSL/TLS證書，以保護您的網站通信，避免了手動創建證書的複雜過程。

Certbot支持多種服務器軟件，包括Apache、Nginx、HAProxy、Amazon Web Services等，它使用ACME（自動化證書管理環境）協議從Let’s Encrypt證書頒發機構獲取SSL/TLS證書。使用Certbot，您可以輕鬆地為您的網站啟用HTTPS協議，提高網站的安全性和可靠性。

如何安裝

CerBot的安裝很貼心，在官方網站就可以選擇你所使用的環境，然後他就會有很詳細的安裝教學了

官方網站: https://certbot.eff.org/

使用XAMPP的認證指令

若是要認證XAMPP的APACHE，不能直接使用–apache，而是要使用apache-ctl，如下: 

sudo certbot certonly --webroot --apache-ctl /opt/lampp/bin/apachectl

錯誤訊息除錯 – Could not find configuration root

下面這個錯誤訊息代表這個認證機器人不知道你的網站的本地端http files靜態路徑的位置

packages/certbot_apache/_internal/parser.py", line 924, in _find_config_root
    raise errors.NoInstallationError("Could not find configuration root")
certbot.errors.NoInstallationError: Could not find configuration root

解決方法: 在執行指令的時候告知http files靜態路徑的位置

sudo certbot certonly --webroot --apache-ctl /opt/lampp/bin/apachectl

或者

sudo certbot renew --webroot -w /var/www/html/

錯誤訊息除錯 – Please add a virtual host for port 80

ERROR:certbot._internal.log:Unable to find a virtual host listening on port 80 which is currently needed for Certbot to prove to the CA that you control your domain. Please add a virtual host for port 80.

這個錯誤提示表明Certbot無法在端口80上找到正在偵聽的虛擬主機，以便證明您控制域名。這是因為Certbot需要在域名的80端口上創建一個臨時HTTP服務器來進行驗證，以證明您控制該域名。

要解決這個問題，您需要在Apache服務器上為端口80添加虛擬主機配置。

在/opt/lampp/apache2/conf/httpd.conf添加以下內容

<VirtualHost *:80>
    ServerAdmin your-email@example.com
    ServerName your-domain.com
    DocumentRoot /var/www/html
</VirtualHost>

接著重啟XAMPP

sudo /opt/lampp/lampp stop
sudo /opt/lampp/lampp start

或者

sudo service apache2 restart

其他除錯方向

  1. 防火牆沒有開：可以在本機中用curl去打IP，和從外面打，若是裡面可以外面不行，代表防火牆沒有開
  2. httpd設定只有localhost可存取: 應要把權限設定為”require all granted”。可用下面指令去搜尋電腦的httpd.conf的位置，並且尋找是不是你的網站被設定為”Require local”
sudo find / -name httpd.conf

成功拿到Certbot的SSL/TSL憑證

會可以看到下面的訊息，或許我們會懷疑為什麼都是pem，而不是.crt和.key，這是因為SSL/TLS憑證的格式可以有很多種，其中PEM格式是其中一種常見的格式，而.crt和.key則是PEM格式的一種變體。

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/bliss-angel.org/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/bliss-angel.org/privkey.pem

PEM格式是一種基於Base64編碼的標準格式，可以將數字證書和私鑰等敏感信息以文本格式表示出來，同時保持數據的可讀性。PEM格式的憑證通常以”.pem”為文件擴展名，可以包含公鑰、私鑰、憑證鏈等信息。

而.crt和.key則是PEM格式的一種變體，.crt檔案包含數字證書，.key檔案包含私鑰。這兩種檔案格式同樣是基於Base64編碼的PEM格式，只是文件名和內容有所不同。

為什麼有時候會看到PEM格式的憑證而不是.crt和.key檔案呢？這是因為PEM格式憑證可以包含多種類型的數字證書和私鑰，而且可以被用於多種網絡應用程序。例如，在OpenSSL等工具中，PEM格式憑證可以用於SSL/TLS加密、S/MIME郵件加密、SSH服務器驗證等方面。

因此，當你拿到一個PEM格式的憑證時，可以通過文件內容判斷它所包含的數字證書或私鑰類型。如果你需要將PEM格式憑證轉換成.crt和.key檔案，你可以使用OpenSSL等工具進行轉換。

但是這不影響的，仍然可以在/opt/lampp/etc/extra/httpd-ssl.conf設定，然後重啟Apache後SSL證書就生效囉!

SSLCertificateFile "/etc/letsencrypt/live/bliss-angel.org/fullchain.pem"
SSLCertificateKeyFile "/etc/letsencrypt/live/bliss-angel.org/privkey.pem"
發佈日期: 作者:

Socket.io錯誤訊息意義

I have found:

  • “ping timeout”: client stopped responding to pings in the allotted amount of time (per the pingTimeout config setting).
  • “transport close”: this appears to happen if the client side stopped sending data at all… or maybe there’s some kind of callback causing this to happen. I can see it happen if I just close a tab or follow a link from a page where I have an active connection to the server. But I’m not clear if this is always a case of the client causing it to happen.

    Sorry for re-opening the issue. Regarding the transport close that is the reason when page is closed/reloaded, it also happens some times in bad network conditions specifically when the ping packets are not delivered to the client. For the latter I need to handle it in the server side by waiting for the client to reconnect. Is there a way to properly distinguish between these two?

  • “Client namespace disconnect”: When the client sends a disconnect packet (client.disconnect())
  • “server namespace disconnect”: Looks to be when the server performs a socket.disconnect() action.
  • “Transport error”: An error occurred, I assume this is a server side error, but I’m not totally clear, as I’ve not been able to trigger one on my own.
  • “io server disconnect” This occurs using a third party library socketIOAuth when authentication fails

閱讀全文 Socket.io錯誤訊息意義

發佈日期: 作者:

Socket.io介紹

Socket.io

socket.io是基於Websocket的Client-Server實時通信庫

Socket.io承繼了Node.js的事件處理方法，把Client端與Server端的程式統一成一至的操作方式，讓使用者可以只需專注在處理「事件」，就可以快速開發出應用，他也支援『房間』的概念，可以使用同一條WebSocket卻擁有不被彼此干擾的資料傳輸（多種聊天頻道的概念）。另外，他也提供了很好的fallback機制，即使用戶的瀏覽器不支援WebSocket，他還是可以利用Flash、XMLHttpRequest等方式來傳送資訊（速度會比較慢就是了）。這些機制都他都包裝好了，所以寫程式時並不需要知道這些細節，只需要設定好就可以運作。

Socket.io 特性整理

  • Events 自訂事件。
  • Rooms Room 的概念只存在於伺服器端。可以理解為訊息處理時的聽眾分組，可對同一個分組內的聽眾進行廣播。
  • Namespaces 命名空間，我理解為底層連線的分組管理，不同命名空間可以走同一條 Engine.io 連線或是各自連線，每個命名空間可以各自驗證是否接受連線。
  • ACK 回調 如同 HTTP 之於 TCP，HTTP 為 TCP 提供了一套請求與響應的模型。ACK 也為 Socket.io 提供了一套請求與響應的通訊模型。
  • 連線維護
  • 自動斷線重連
  • ping/pong 心跳

閱讀全文 Socket.io介紹