RAP2 是一個api管理系統，前后端協作開發的利器。
在線體驗地址http://rap2.taobao.org
Web接口管理工具，開源免費，接口自動化，MOCK數據自動生成，自動化測試，企業級管理。
有一份一鍵搭建的docker-compose.yml，但是已經是比較老的前端了，具體可以查看https://hub.docker.com/r/taomaree/rap2
我這里把他的docker-compose.yml貼出來
version: '2.2'
services:
delos:
container_name: rap2-delos
image: taomaree/rap2:1.0.6
environment:
- MYSQL_URL=rap2-mysql
- MYSQL_PORT=3306
- MYSQL_USERNAME=rap2
- MYSQL_PASSWD=rap2delos
- MYSQL_SCHEMA=RAP2_DELOS_APP
- REDIS_URL=rap2-redis
- REDIS_PORT=6379
- NODE_ENV=production
working_dir: /app/rap2-delos/dist
volumes:
- "/srv/rap2-mysql/mysql-backup:/backup"
ports:
- "38080:80" # expose 38080
links:
- redis
- mysql
depends_on:
- redis
- mysql
redis:
container_name: rap2-redis
image: redis:4.0
mysql:
container_name: rap2-mysql
image: mysql:8.0
#ports:
# - 33306:3306
volumes:
- "/srv/rap2-mysql/mysql-data:/var/lib/mysql"
command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci --init-connect='SET NAMES utf8mb4;' --default-authentication-plugin=mysql_native_password --innodb-flush-log-at-trx-commit=0
environment:
- MYSQL_ALLOW_EMPTY_PASSWORD=yes
- MYSQL_DATABASE=RAP2_DELOS_APP
- MYSQL_USER=rap2
- MYSQL_PASSWORD=rap2delos
rap2-init:
container_name: rap2-init
image: taomaree/rap2:1.0.6
environment:
- MYSQL_URL=rap2-mysql
- MYSQL_PORT=3306
- MYSQL_USERNAME=rap2
- MYSQL_PASSWD=rap2delos
- MYSQL_SCHEMA=RAP2_DELOS_APP
- REDIS_URL=rap2-redis
- REDIS_PORT=6379
- NODE_ENV=production
working_dir: /app/rap2-delos
#command: 'mysql -h${MYSQL_URL} -u${MYSQL_USERNAME} -p${MYSQL_PASSWD} -e "select * from ${MYSQL_SCHEMA}.Users;" || npm run create-db'
command: ["bash", "-c", "sleep 30 && mysql -h$${MYSQL_URL} -u$${MYSQL_USERNAME} -p$${MYSQL_PASSWD} -e \"select * from $${MYSQL_SCHEMA}.Users;\" || node dist/scripts/init"]
links:
- redis
- mysql
depends_on:
- redis
- mysql
注意一下數據掛載目錄就行了。然后訪問38080端口就ok了
但是我想要最新的前端。
這個搭建是稍微有點復雜的
啟動后端
使用官方貼出的docker-compose.yml
mkdir rap2
cd rap2
wget -c https://raw.githubusercontent.com/thx/rap2-delos/master/docker-compose.yml
sudo docker-compose up -d
docker起來后，默認是監聽38080端口，你可以按照自己的喜好編輯docker-compose.yml，並且這個是允許跨域的，跨域規則比較松，Allow-Origin是*，所以你可以把前端部署在任何地方，不過我習慣部署在同一個域名下。
部署前端
首先下載前端
git clone https://github.com/thx/rap2-dolores.git
然后修改前端的配置，這一步是為了與后端對接
我是打算把整個服務部署在 mock.test.com 域名下，然后 http://mock.test.com/api 作為接口的根url（這里需要靠nginx來重寫）
那么我們需要修改前端的配置文件
進入我們剛才clone下來的目錄 rap2-dolores/src/config下，修改 config.prod.ts 文件
只需要修改 serve 字段的值即可。
然后編譯前端，這里我使用淘寶的源
cd rap2-dolores
npm install --registry=https://registry.npm.taobao.org
npm run build
編譯完成后，rap2-dolores 目錄下會出現一個名字為 build 或者 dist 的文件夾，把這個文件夾放到你剛才放docker-compose.yml的目錄下（為了以后遷移方便，可以放在任意位置，只需要修改對應的nginx配置即可）
這里我假定編譯出來的是 build 文件夾，放置到docker-compose.yml所在的目錄
那么現在你的目錄結構應該是這樣
lab@lab-desktop:~/dockers/rap2$ pwd
/home/lab/dockers/rap2
lab@lab-desktop:~/dockers/rap2$ tree -L 1
.
├── docker-compose.yml
├── build
└── docker
2 directories, 1 file
然后新建nginx配置文件
sudo vim /etc/nginx/sites-enabled/mock.test.com.conf
寫入以下內容
server {
listen 80;
listen [::]:80;
server_name mock.test.com;
root /home/lab/dockers/rap2/build;
# reverse proxy
location /api/ {
# 38080后面加/是為了把http://127.0.0.1:38080/api/*反代到http://127.0.0.1:38080/*
proxy_pass http://127.0.0.1:38080/; # 38080后面的/是必要的，是否會附加location配置路徑與proxy_pass配置的路徑后是否有"/"有關，有"/"則不附加
# 代理配置，可選
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
location / {
# 路由在前端，后端沒有真實路由，在路由不存在的 404狀態的頁面返回 /index.html
# 這個方式使用場景，你在寫React或者Vue項目的時候，沒有真實路由
try_files $uri /index.html;
}
}
然后重啟一下nginx，訪問mock.test.com就可以了
這里給出一份比較詳盡的nginx配置教程
- Nginx 代理轉發，讓生產和測試環境 React、Vue 項目輕松訪問 API，前端路由不再 404 https://juejin.im/entry/58df166a0ce463005821e9d9