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，前端路由不再 404https://juejin.im/entry/58df166a0ce463005821e9d9

Reference

• Nginx------location常見配置指令，alias、root、proxy_pass
• https://github.com/taomaree/docker-rap2
• https://github.com/thx/rap2-delos/wiki/docker
• https://github.com/thx/rap2-delos/issues/119#issuecomment-392762261
• https://github.com/thx/rap2-dolores
• Api 文件管理系統 RAP2環境搭建