---
# System prepended metadata

title: 前台開發前準備

---

# 前台開發前準備
1. 裝docker([參考](https://www.docker.com/products/docker-desktop/))
2. 裝redis
    docker pull redis
    docker run --name redis-lab -p 6379:6379 -d redis
    
3. 確認好要連的資料庫(也可以用docker跑mysql)
4. 準備好ap server:
   git clone git@bitbucket.org:cyberomni168/ocms-ap.git
    設定好 dev.config.js(主要改db連線)
    安裝好套件: npm i
    執行: npm run start
5. 準備好前端環境:
   git clone git@bitbucket.org:cyberomni168/ocms-mem-core.git
   git clone git@bitbucket.org:cyberomni168/ocms-template-style22.git
   git clone git@bitbucket.org:cyberomni168/ocms-skin-style22-black.git
   ![](https://hackmd.io/_uploads/SJ61GkP1p.png)

6. 安裝好套件: 
    cd ocms-mem-core 
    設定好 nuxt.config.js(主要改ap的連結[參考](https://v2.nuxt.com/docs/configuration-glossary/configuration-alias))
    npm i
    npm run linkTemplate -- ../ocms-template-style22
    npm run linkSkin -- ../ocms-skin-style22
    npm run initProcess 
    執行: npm run dev
   
   
reference:
* [docker](https://www.docker.com/products/docker-desktop/)
* [git](https://git-scm.com/)
* [nuxt](https://v2.nuxt.com/)
* [node](https://nodejs.org/)(請用14.17.0版本)
* [vs code](https://code.visualstudio.com/)


文件：
* https://ops.{後台主domain}/member/apiDocument/
需加上header(可利用 https://modheader.com/)
x-backend-port: 8080
x-backend: ocms-ap

* http://localhost:8080/member/apiDocument/
也可以從本機開起來，但需先準備好ap server


系統架構
https://excalidraw.com/#room=48420862336247de7414,4_edhJuphE75eYUicB2lsA