環(huán)境：5 步搭好一個熱重載調(diào)試閉環(huán))
Label Studio 源碼開發(fā)環(huán)境5 步搭好一個熱重載調(diào)試閉環(huán)【免費下載鏈接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format項目地址: https://gitcode.com/GitHub_Trending/la/label-studio搭完之后瀏覽器打開http://localhost:8080你會看到 Label Studio 的項目列表和數(shù)據(jù)管理頁面標(biāo)注編輯器、工具欄、右側(cè)標(biāo)注面板完整渲染更關(guān)鍵的是此后你每保存一次前端代碼頁面會在 1 秒內(nèi)自動更新不需要手動刷新。本文解決從零搭建 Label Studio 開發(fā)環(huán)境的全部問題克隆源碼、跑起 Django 后端、接上 Vite 前端開發(fā)服務(wù)器并開啟熱模塊替換HMR。開工前環(huán)境核對清單完成這一步后你應(yīng)該看到每條檢查命令都打出版本號終端里沒有任何command not found。Label Studio 是前后端分離的雙棧項目后端是 Django Python前端是 React Vite。Python 側(cè)用uv管理依賴根目錄Makefile里的命令都是uv run起的前端用bun。要準(zhǔn)備的東西如下項目要求檢查命令系統(tǒng)Linux / macOSWindows 用 WSL2—Python≥ 3.10 4python3 --versionNode.js≥ 18用于安裝 bunnode -vuv任意較新版本uv --versionbun任意較新版本bun -v如果uv或bun缺失各裝一下預(yù)期結(jié)果兩條命令隨后都能打印版本號pip install uv npm i -g bunPython 版本是硬約束pyproject.toml里聲明了requires-python 3.10,4低于 3.10 會導(dǎo)致依賴解析直接失敗。后端先跑起來完成這一步后你應(yīng)該看到終端出現(xiàn) Django 啟動信息瀏覽器訪問http://localhost:8080有響應(yīng)——此時頁面可能是空殼或維護(hù)提示這很正常前端還沒接上?？寺?Label Studio 源碼倉庫拉取代碼并進(jìn)入目錄預(yù)期結(jié)果本地多出一個label-studio目錄git clone https://gitcode.com/GitHub_Trending/la/label-studio cd label-studio安裝 Python 依賴并執(zhí)行數(shù)據(jù)庫遷移uv sync會在根目錄創(chuàng)建.venv并按鎖文件安裝全部 Python 依賴預(yù)期結(jié)果出現(xiàn)安裝進(jìn)度最后無報錯make migrate-dev用內(nèi)置的 SQLite 配置執(zhí)行遷移預(yù)期結(jié)果終端逐條打印應(yīng)用了的 App 遷移uv sync make migrate-dev開發(fā)默認(rèn)走 SQLite不需要裝 PostgreSQL——Makefile里的*-dev目標(biāo)已經(jīng)替你帶上了DJANGO_DBsqlite等環(huán)境變量。啟動 Django 開發(fā)服務(wù)器用 Makefile 里現(xiàn)成的目標(biāo)啟動預(yù)期結(jié)果Django 監(jiān)聽 8080 端口終端開始打印請求日志make run-dev到這里后端就齊了頁面、API、數(shù)據(jù)都從 8080 這個進(jìn)程走。接上前端打開熱重載完成這一步后你應(yīng)該看到終端出現(xiàn) Vite 監(jiān)聽 8010 的提示瀏覽器里 8080 的頁面終于完整渲染——編輯器、數(shù)據(jù)管理、登錄頁全部就位。為什么會有兩個端口8080 是 Django負(fù)責(zé)頁面殼和全部 API8010 是 Vite 開發(fā)服務(wù)器負(fù)責(zé)前端資源和 HMR 連接。Vite 配置里已把/api、/static代理到 8080見web/vite.config.ts所以瀏覽器始終只訪問 8080跨域不用你操心。創(chuàng)建根目錄 .env 并開啟 HMR熱重載的開關(guān)就一行FRONTEND_HMRtrue兩個地址也順手寫明方便日后改端口。在項目根目錄創(chuàng)建.env預(yù)期結(jié)果文件里只有 3 行內(nèi)容cat .env EOF FRONTEND_HMRtrue FRONTEND_HOSTNAMEhttp://localhost:8010 DJANGO_HOSTNAMEhttp://localhost:8080 EOF??FRONTEND_HMR是 Django 啟動時讀的變量。如果后端已經(jīng)在跑先按 CtrlC 停掉再重新make run-dev否則 HMR 不會生效。安裝前端依賴用 Makefile 目標(biāo)安裝前端依賴預(yù)期結(jié)果web/node_modules被填充無 peer 依賴報錯make frontend-install啟動 8010 的 Vite 開發(fā)服務(wù)器啟動前端開發(fā)服務(wù)器預(yù)期結(jié)果終端出現(xiàn) Vite listening on 8010 的提示和本地地址make frontend-dev回到http://localhost:8080現(xiàn)在應(yīng)該能看到帶任務(wù)、縮略圖和 Import / Export / Label 按鈕行的數(shù)據(jù)管理頁驗證改一行代碼頁面自己變完成這一步后你應(yīng)該看到文件一保存瀏覽器在 1 秒內(nèi)自動更新且沒有整頁刷新的閃動。先認(rèn)一下代碼放在哪。倉庫大致分兩半label_studio/是 Django 后端入口是label_studio/manage.py核心配置在label_studio/core/web/是前端內(nèi)部又分三塊——web/apps/labelstudio/主應(yīng)用頁面殼和路由web/libs/editor/標(biāo)注編輯器畫布、右側(cè)標(biāo)注組件都在這里web/libs/datamanager/任務(wù)列表和數(shù)據(jù)管理頁面對應(yīng)關(guān)系記成口訣改libs/editor標(biāo)注編輯器區(qū)域動改libs/datamanager數(shù)據(jù)管理頁動改label_studio/API 和后端邏輯變Python 沒有 HMR但 Django 開發(fā)服務(wù)器會自動重啟手動刷新即可。動手驗證挑web/libs/editor/src/components/下任意組件里的一段可見文案改掉保存。 HMR 生效的話編輯器對應(yīng)位置的文字會立刻變化。如果頁面沒動直接去下面那張表對照?？ㄗ×藢φ者@張表對照這張表你應(yīng)該能把終端或頁面的現(xiàn)狀對到現(xiàn)象一列執(zhí)行處理列的命令后對應(yīng)服務(wù)恢復(fù)正?！，F(xiàn)象可能原因處理命令8080 頁面一直是空殼或維護(hù)提示前端開發(fā)服務(wù)器沒啟動make frontend-dev改了代碼頁面不自動刷新.env缺FRONTEND_HMRtrue或后端沒重啟檢查.env后 CtrlC重跑make run-dev頁面能開但 API 報 404 / 跨域錯誤前后端端口配置不一致核對.env里的FRONTEND_HOSTNAME與DJANGO_HOSTNAMEuv sync報依賴解析失敗Python 版本低于 3.10python3 --version確認(rèn)升級后重試提示 8080 端口已被占用上一個進(jìn)程沒退干凈lsof -i:8080找到 PID 后結(jié)束該進(jìn)程bun: command not foundbun 未安裝npm i -g bun下一步完成這一節(jié)后你應(yīng)該擁有一個可以在 IDE 里打斷點跑runserver的調(diào)試入口。在根目錄放一份.vscode/launch.json關(guān)鍵行如下比盯終端日志直觀得多{ version: 0.2.0, configurations: [ { name: Django: runserver, type: debugpy, request: launch, program: ${workspaceFolder}/label_studio/manage.py, args: [runserver], django: true, env: { DJANGO_DB: sqlite } } ] }其余安裝與部署主題見倉庫內(nèi)的官方安裝指南?！久赓M下載鏈接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format項目地址: https://gitcode.com/GitHub_Trending/la/label-studio創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 Label Studio 源碼開發(fā)環(huán)境：5 步搭好一個熱重載調(diào)試閉環(huán)
Label Studio 源碼開發(fā)環(huán)境5 步搭好一個熱重載調(diào)試閉環(huán)【免費下載鏈接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format項目地址: https://gitcode.com/GitHub_Trending/la/label-studio搭完之后瀏覽器打開http://localhost:8080你會看到 Label Studio 的項目列表和數(shù)據(jù)管理頁面標(biāo)注編輯器、工具欄、右側(cè)標(biāo)注面板完整渲染更關(guān)鍵的是此后你每保存一次前端代碼頁面會在 1 秒內(nèi)自動更新不需要手動刷新。本文解決從零搭建 Label Studio 開發(fā)環(huán)境的全部問題克隆源碼、跑起 Django 后端、接上 Vite 前端開發(fā)服務(wù)器并開啟熱模塊替換HMR。開工前環(huán)境核對清單完成這一步后你應(yīng)該看到每條檢查命令都打出版本號終端里沒有任何command not found。Label Studio 是前后端分離的雙棧項目后端是 Django Python前端是 React Vite。Python 側(cè)用uv管理依賴根目錄Makefile里的命令都是uv run起的前端用bun。要準(zhǔn)備的東西如下項目要求檢查命令系統(tǒng)Linux / macOSWindows 用 WSL2—Python≥ 3.10 4python3 --versionNode.js≥ 18用于安裝 bunnode -vuv任意較新版本uv --versionbun任意較新版本bun -v如果uv或bun缺失各裝一下預(yù)期結(jié)果兩條命令隨后都能打印版本號pip install uv npm i -g bunPython 版本是硬約束pyproject.toml里聲明了requires-python 3.10,4低于 3.10 會導(dǎo)致依賴解析直接失敗。后端先跑起來完成這一步后你應(yīng)該看到終端出現(xiàn) Django 啟動信息瀏覽器訪問http://localhost:8080有響應(yīng)——此時頁面可能是空殼或維護(hù)提示這很正常前端還沒接上?？寺?Label Studio 源碼倉庫拉取代碼并進(jìn)入目錄預(yù)期結(jié)果本地多出一個label-studio目錄git clone https://gitcode.com/GitHub_Trending/la/label-studio cd label-studio安裝 Python 依賴并執(zhí)行數(shù)據(jù)庫遷移uv sync會在根目錄創(chuàng)建.venv并按鎖文件安裝全部 Python 依賴預(yù)期結(jié)果出現(xiàn)安裝進(jìn)度最后無報錯make migrate-dev用內(nèi)置的 SQLite 配置執(zhí)行遷移預(yù)期結(jié)果終端逐條打印應(yīng)用了的 App 遷移uv sync make migrate-dev開發(fā)默認(rèn)走 SQLite不需要裝 PostgreSQL——Makefile里的*-dev目標(biāo)已經(jīng)替你帶上了DJANGO_DBsqlite等環(huán)境變量。啟動 Django 開發(fā)服務(wù)器用 Makefile 里現(xiàn)成的目標(biāo)啟動預(yù)期結(jié)果Django 監(jiān)聽 8080 端口終端開始打印請求日志make run-dev到這里后端就齊了頁面、API、數(shù)據(jù)都從 8080 這個進(jìn)程走。接上前端打開熱重載完成這一步后你應(yīng)該看到終端出現(xiàn) Vite 監(jiān)聽 8010 的提示瀏覽器里 8080 的頁面終于完整渲染——編輯器、數(shù)據(jù)管理、登錄頁全部就位。為什么會有兩個端口8080 是 Django負(fù)責(zé)頁面殼和全部 API8010 是 Vite 開發(fā)服務(wù)器負(fù)責(zé)前端資源和 HMR 連接。Vite 配置里已把/api、/static代理到 8080見web/vite.config.ts所以瀏覽器始終只訪問 8080跨域不用你操心。創(chuàng)建根目錄 .env 并開啟 HMR熱重載的開關(guān)就一行FRONTEND_HMRtrue兩個地址也順手寫明方便日后改端口。在項目根目錄創(chuàng)建.env預(yù)期結(jié)果文件里只有 3 行內(nèi)容cat .env EOF FRONTEND_HMRtrue FRONTEND_HOSTNAMEhttp://localhost:8010 DJANGO_HOSTNAMEhttp://localhost:8080 EOF??FRONTEND_HMR是 Django 啟動時讀的變量。如果后端已經(jīng)在跑先按 CtrlC 停掉再重新make run-dev否則 HMR 不會生效。安裝前端依賴用 Makefile 目標(biāo)安裝前端依賴預(yù)期結(jié)果web/node_modules被填充無 peer 依賴報錯make frontend-install啟動 8010 的 Vite 開發(fā)服務(wù)器啟動前端開發(fā)服務(wù)器預(yù)期結(jié)果終端出現(xiàn) Vite listening on 8010 的提示和本地地址make frontend-dev回到http://localhost:8080現(xiàn)在應(yīng)該能看到帶任務(wù)、縮略圖和 Import / Export / Label 按鈕行的數(shù)據(jù)管理頁驗證改一行代碼頁面自己變完成這一步后你應(yīng)該看到文件一保存瀏覽器在 1 秒內(nèi)自動更新且沒有整頁刷新的閃動。先認(rèn)一下代碼放在哪。倉庫大致分兩半label_studio/是 Django 后端入口是label_studio/manage.py核心配置在label_studio/core/web/是前端內(nèi)部又分三塊——web/apps/labelstudio/主應(yīng)用頁面殼和路由web/libs/editor/標(biāo)注編輯器畫布、右側(cè)標(biāo)注組件都在這里web/libs/datamanager/任務(wù)列表和數(shù)據(jù)管理頁面對應(yīng)關(guān)系記成口訣改libs/editor標(biāo)注編輯器區(qū)域動改libs/datamanager數(shù)據(jù)管理頁動改label_studio/API 和后端邏輯變Python 沒有 HMR但 Django 開發(fā)服務(wù)器會自動重啟手動刷新即可。動手驗證挑web/libs/editor/src/components/下任意組件里的一段可見文案改掉保存。 HMR 生效的話編輯器對應(yīng)位置的文字會立刻變化。如果頁面沒動直接去下面那張表對照?？ㄗ×藢φ者@張表對照這張表你應(yīng)該能把終端或頁面的現(xiàn)狀對到現(xiàn)象一列執(zhí)行處理列的命令后對應(yīng)服務(wù)恢復(fù)正?！，F(xiàn)象可能原因處理命令8080 頁面一直是空殼或維護(hù)提示前端開發(fā)服務(wù)器沒啟動make frontend-dev改了代碼頁面不自動刷新.env缺FRONTEND_HMRtrue或后端沒重啟檢查.env后 CtrlC重跑make run-dev頁面能開但 API 報 404 / 跨域錯誤前后端端口配置不一致核對.env里的FRONTEND_HOSTNAME與DJANGO_HOSTNAMEuv sync報依賴解析失敗Python 版本低于 3.10python3 --version確認(rèn)升級后重試提示 8080 端口已被占用上一個進(jìn)程沒退干凈lsof -i:8080找到 PID 后結(jié)束該進(jìn)程bun: command not foundbun 未安裝npm i -g bun下一步完成這一節(jié)后你應(yīng)該擁有一個可以在 IDE 里打斷點跑runserver的調(diào)試入口。在根目錄放一份.vscode/launch.json關(guān)鍵行如下比盯終端日志直觀得多{ version: 0.2.0, configurations: [ { name: Django: runserver, type: debugpy, request: launch, program: ${workspaceFolder}/label_studio/manage.py, args: [runserver], django: true, env: { DJANGO_DB: sqlite } } ] }其余安裝與部署主題見倉庫內(nèi)的官方安裝指南?！久赓M下載鏈接】label-studioLabel Studio is a multi-type data labeling and annotation tool with standardized output format項目地址: https://gitcode.com/GitHub_Trending/la/label-studio創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考