Mark Ku's Blog
首頁 關於我
Headless CMS - Strapi 評估筆記
Infra
Headless CMS - Strapi 評估筆記
Mark Ku
Mark Ku
September 07, 2022
1 min

解決問題

老闆請我協助評估 CMS 系統,讓產品部門維護 FAQ 及產品 Knowledge Base,因為後端開發能量有些限、希望能靠友善的 UI 設定,就能快速的創造出後台維護頁面及前台Api,好讓其他前端同仁串接。

為何採用 strapi


我試用了幾套主流幾套 CMS,基於以下理由,首推 strapi 靈活輕巧,適合企業中長期發展,未來也可以移作他用。
使用者 - 界面友善、可以自由調整位置。 管理者 - 資料欄位驗證、權限管理、流程控制。
開發者 - 開源、串接友善,提供 swagger 文件、擴充性( 插件市集 )、提供豐富的接口、本身也是 react 及 node 寫的,對前端開發者相對很友善。

原理

strapi 透過友善的後台 UI 設定,能讓程式產生程式。

使用及安裝限制

  • node 版本 ’>=10.16.0 <=14.x.x’ ( 可以透過 nvm 管理多版本 node )
  • 雲端付費,地端開源永久免費

安裝 strapi

npx create-strapi-app@latest my-project --quickstart

安裝 swagger

cd my-project
npm run strapi install documentation
npm run build // 裝完一定要按 build 才會跑出按鈕

安裝完後,即可以登入後台,但會遇到一些小問題,順便記錄了一下

Api 沒回傳圖片

API 預設是不會傳圖片的欄位,在呼叫 api 的請求參數 populate 參數,額外填寫回傳的圖片欄位

Api 權限

預設 api 存取是需要帶 token,如果你不需要驗證則可以,到 Setting > USERS & PERMISSIONS PLUGIN > Role > 找到你的 Collection > 並給與 find 和 findOne 權限。

Rich Text 圖片無法即時預覽圖片

.env

HOST=0.0.0.0
PORT=1337
APP_KEYS=p285lmxQN6bZ90Dh870eIg==,twHIadFFnSgVKyGgzcpnIQ==,jgn83CaVHIPPnpSqsZPWGw==,s2lTboydFrhkPRHJp4omQw==
API_TOKEN_SALT=9LGnsz1zt4UpaKfCCQxEZQ==
ADMIN_JWT_SECRET=l7gG6CTUeK0502ns9FAKkw==
JWT_SECRET=mJg/1OqVkOeCiZcxiQfG5w==
WEBSITE=http://127.0.0.1:1337/

config/server.js

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  ------
  url: env('WEBSITE', 'http://127.0.0.1'), 
  ------
  app: {
    keys: env.array('APP_KEYS'),
  },  
});

資料備份

  • 資料庫 - 預設是 sql-lite ,路徑 .tmp/data.db ( 也支援 mysql 及 mongo db )
  • 靜態檔案 - 靜態檔案上傳後都會在 /public/uploads 目錄

功能頁面展示

動態產生後台

上傳圖片可以傳多張圖

上傳圖片格式限制

輸入畫面

Layout 動態調整

WebHook

角色

權限

相關連結

ckeditor
strapi provider upload ftp v2


Tags

Mark Ku

Mark Ku

Software Developer

9年以上豐富網站開發經驗,開發過各種網站,電子商務、平台網站、直播系統、POS系統、SEO 優化、金流串接、AI 串接,Infra 出身,帶過幾次團隊,也加入過大團隊一起開發。

Expertise

前端(React)
後端(C#)
網路管理
DevOps
溝通
領導

Social Media

facebook github website

Related Posts

你夢想中的自動昇降站立桌 - 開箱 DEZCTOP Bifrost Elite 160
你夢想中的自動昇降站立桌 - 開箱 DEZCTOP Bifrost Elite 160
June 06, 2024
1 min

Quick Links

關於我

Social Media