feat(Doc): added deploy doc for docker

.github/workflows/deploy.yml

@@ -0,0 +1,23 @@
+name: Deploy to Azure
+
+on:
+  push:
+    branches: [ master ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+
+    - uses: actions/checkout@v2
+
+    - uses: Azure/docker-login@v1
+      with:
+        login-server: apisixacr.azurecr.cn
+        username: ${{ secrets.REGISTRY_USERNAME }}
+        password: ${{ secrets.REGISTRY_PASSWORD }}
+
+    - run: |
+        docker build . -t apisixacr.azurecr.cn/dashboard:${{ github.sha }}
+        docker push apisixacr.azurecr.cn/dashboard:${{ github.sha }}

README.md

@@ -85,8 +85,22 @@ $ yarn install
 $ yarn build
 ```
 
-5. The bundled files are under `/dist` folder if the step 4 is successful, then We recommend using `nginx` to handle those files: just move them to nginx's default html folder, then visit `http://127.0.0.1` in your browser. The default Setting page would be shown, and you should set the API field to the manager api's address, e.g `http://127.0.0.1:8080/apisix/admin` .
+5. The bundled files are under `/dist` folder if the step 4 is successful, then we recommend using `nginx` to handle those files, please refer to the nginx conf `docker/nginx.conf`.
+6. Move files under `dist` folder to nginx's default html folder, then visit `http://127.0.0.1` in your browser.
+
+## Development
+
+1. Make sure you have `Node.js(version 8.10.0+)/Nginx` installed on your machine.
+2. Install [yarn](https://yarnpkg.com/).
+3. Install dependencies:
+4. If we want to modify the API, please refer to the `config/proxy.ts` file.
+
+```sh
+$ yarn install
+
+$ yarn start
+```
 
 ## Other
 
-1. If you need the elder dashboard which is built with Vue.js, please refer to [master-vue](https://github.com/apache/apisix-dashboard/tree/master-vue).
+1. If you need the dashboard-1.0 which is built with Vue.js, please refer to [master-vue](https://github.com/apache/apisix-dashboard/tree/master-vue).

compose/README.md

@@ -17,4 +17,21 @@
 #
 -->
 
-This folder stores the `docker-compose` file for `manager-api`.
+# docker-compose
+
+This folder stores the `docker-compose` file for `manager-api`.
+
+## Deploy
+
+1. Run docker-compose
+
+```sh
+$ cd apisix-dashboard/compose
+
+$ sh gen-config-yaml.sh
+
+# For most users in China, please use some proxy services like https://www.daocloud.io/mirror to speed up your Docker images pulling.
+$ docker-compose -p dashboard up -d
+```
+
+2. Visit `http://127.0.0.1/` in the browser.

config/proxy.ts

@@ -16,24 +16,10 @@
  */
 export default {
   dev: {
-    '/api/': {
-      target: 'https://apisix.iresty.com/apisix/admin/',
+    '/apisix/admin': {
+      // NOTE: This is the manager-api pre-deployed in Azure just for preview, please refer to https://www.yuque.com/umijs/umi/proxy for more info.
+      target: 'http://139.217.185.221',
       changeOrigin: true,
-      pathRewrite: { '^/api': '' },
-    },
-  },
-  test: {
-    '/api/': {
-      target: 'https://preview.pro.ant.design',
-      changeOrigin: true,
-      pathRewrite: { '^': '' },
-    },
-  },
-  pre: {
-    '/api/': {
-      target: 'your pre url',
-      changeOrigin: true,
-      pathRewrite: { '^': '' },
     },
   },
 };

netlify.toml

@@ -17,6 +17,11 @@
 [build]
   publish = "dist/"
 
+[[redirects]]
+  from = "/apisix/admin/*"
+  to = "https://api.apisix.dev/apisix/admin/:splat"
+  status = 200 
+
 [[redirects]]
   from = "/*"
   to = "/index.html"

src/app.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 import React from 'react';
-import { RequestConfig, history } from 'umi';
+import { RequestConfig } from 'umi';
 import {
   BasicLayoutProps,
   Settings as LayoutSettings,
@@ -25,26 +25,16 @@ import {
 import RightContent from '@/components/RightContent';
 import Footer from '@/components/Footer';
 import { queryCurrent } from '@/services/user';
-import { getMenuData, errorHandler, getBaseURL } from '@/helpers';
+import { getMenuData, errorHandler } from '@/helpers';
 import defaultSettings from '../config/defaultSettings';
 
 export async function getInitialState(): Promise<{
   currentUser?: API.CurrentUser;
   settings?: LayoutSettings;
 }> {
-  // 如果是设置页面，不执行
-  if (history.location.pathname !== '/settings') {
-    try {
-      const currentUser = await queryCurrent();
-      return {
-        currentUser,
-        settings: defaultSettings,
-      };
-    } catch (error) {
-      history.push('/settings');
-    }
-  }
+  const currentUser = await queryCurrent();
   return {
+    currentUser,
     settings: defaultSettings,
   };
 }
@@ -66,7 +56,7 @@ export const layout = ({
 };
 
 export const request: RequestConfig = {
-  prefix: getBaseURL(),
+  prefix: '/apisix/admin',
   errorHandler,
   credentials: 'same-origin',
 };

src/constants.ts

@@ -31,6 +31,3 @@ export const codeMessage = {
   503: '服务不可用，服务器暂时过载或维护。',
   504: '网关超时。',
 };
-
-// NOTE: This is the Manager API Address, e.g http://127.0.0.1:8080/apisix/admin
-export const DEFAULT_BASE_URL = 'https://api.apisix.dev/apisix/admin';

src/helpers.tsx

@@ -18,7 +18,7 @@ import React from 'react';
 import { notification } from 'antd';
 import { MenuDataItem } from '@ant-design/pro-layout';
 
-import { codeMessage, DEFAULT_BASE_URL } from './constants';
+import { codeMessage } from './constants';
 import IconFont from './iconfont';
 
 export const getMenuData = (): MenuDataItem[] => {
@@ -84,7 +84,3 @@ export const errorHandler = (error: { response: Response; data: any }): Promise<
   }
   return Promise.reject(response);
 };
-
-export const getBaseURL = () =>
-  localStorage.getItem('GLOBAL_SETTING_API_BASE_URL') || DEFAULT_BASE_URL;
-export const setBaseURL = (url = '') => localStorage.setItem('GLOBAL_SETTING_API_BASE_URL', url);

src/locales/en-US/setting.ts

@@ -14,7 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export default {
-  'app.settings.admin-api': 'Admin API Config',
-  'app.settings.item.baseURL': 'API base URL',
-};
+export default {};

src/locales/zh-CN/setting.ts

@@ -14,15 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export default {
-  'app.settings.admin-api': '管理 API 配置',
-  'app.settings.item.baseURL': 'API 基础地址',
-  'app.settings.item.admin-api-schema': '管理 API 协议',
-  'app.settings.item.admin-api-host': '管理 API 地址',
-  'app.settings.item.admin-api-path': '管理 API 路径',
-  'app.settings.item.admin-api-key': '管理 API 密钥',
-  'app.settings.item.admin-api-grafana': 'Grafana 地址',
-  'app.settings.description.invalid-admin-api-schema': '非法的管理 API 协议',
-  'app.settings.description.invalid-admin-api-host': '非法的管理 API 地址',
-  'app.settings.description.invalid-admin-api-path': '非法的管理 API 路径',
-};
+export default {};

src/pages/Setting/Setting.tsx

@@ -19,7 +19,6 @@ import { PageContainer } from '@ant-design/pro-layout';
 import { Card, Form, Input, Row, Col, notification } from 'antd';
 import { useIntl } from 'umi';
 
-import { setBaseURL, getBaseURL } from '@/helpers';
 import ActionBar from '@/components/ActionBar';
 import { getGrafanaURL } from '@/pages/Metrics/service';
 
@@ -35,10 +34,6 @@ const Setting: React.FC = () => {
   const { formatMessage } = useIntl();
 
   useEffect(() => {
-    form.setFieldsValue({
-      baseURL: getBaseURL(),
-    });
-
     if (!canFetchGrafana) {
       return;
     }
@@ -50,20 +45,14 @@ const Setting: React.FC = () => {
   }, [canFetchGrafana]);
 
   const onSubmit = () => {
-    const { grafanaURL, baseURL } = form.getFieldsValue();
+    const { grafanaURL } = form.getFieldsValue();
     Promise.all([
       new Promise((resolve) => {
         if (canFetchGrafana) {
           updateMonitorURL(grafanaURL).then(resolve);
         }
         resolve();
       }),
-      new Promise((resolve) => {
-        if (!isWorkspace) {
-          setBaseURL(baseURL);
-        }
-        resolve();
-      }),
     ]).then(() => {
       notification.success({
         message: formatMessage({
@@ -83,14 +72,6 @@ const Setting: React.FC = () => {
           <Row>
             <Col span={10}>
               <Form form={form} labelCol={{ span: 7 }}>
-                {!isWorkspace && (
-                  <Form.Item
-                    label={formatMessage({ id: 'page.setting.form.item.baseURL' })}
-                    name="baseURL"
-                  >
-                    <Input />
-                  </Form.Item>
-                )}
                 {canFetchGrafana && (
                   <Form.Item
                     label={formatMessage({ id: 'page.setting.form.item.grafanaURL' })}

src/pages/Setting/locales/en-US.ts

@@ -18,7 +18,6 @@ export default {
   'page.setting.notification.update.configuration.successfully':
     'Update Configuration Successfully',
   'page.setting.pageContainer.title': 'Setting',
-  'page.setting.form.item.baseURL': 'API Address',
   'page.setting.form.item.grafanaURL': 'Grafana Address',
   'page.setting.form.item.grafanaURL.inputHelpMessage':
     'Grafana address should begin with HTTP or HTTPS',

src/pages/Setting/locales/zh-CN.ts

@@ -17,7 +17,6 @@
 export default {
   'page.setting.notification.update.configuration.successfully': '更新配置成功',
   'page.setting.pageContainer.title': '设置',
-  'page.setting.form.item.baseURL': 'API 基础地址',
   'page.setting.form.item.grafanaURL': 'Grafana 地址',
   'page.setting.form.item.grafanaURL.inputHelpMessage': 'Grafana 地址需以 HTTP 或 HTTPS 开头',
   'page.setting.form.item.grafanaURL.inputErrorMessage': '非法的地址',

src/pages/Setting/typingd.d.ts

@@ -15,10 +15,6 @@
  * limitations under the License.
  */
 declare namespace Setting {
-  interface AdminAPI {
-    baseURL: string;
-  }
-
   interface GrafanaConfig {
     grafanaURL: string;
   }

src/services/user.ts

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 import { request } from 'umi';
-import { notification } from 'antd';
 
 import logo from '@/assets/logo.svg';
 
@@ -24,17 +23,12 @@ export async function query() {
 }
 
 export async function queryCurrent(): Promise<API.CurrentUser> {
-  if (!localStorage.getItem('GLOBAL_SETTING_API_BASE_URL')) {
-    notification.error({ message: '请设置 API 地址' });
-    throw new Error('Need Settings');
-  } else {
-    return Promise.resolve({
-      name: 'APISIX User',
-      avatar: logo,
-      userid: '00000001',
-      access: 'admin',
-    });
-  }
+  return Promise.resolve({
+    name: 'APISIX User',
+    avatar: logo,
+    userid: '00000001',
+    access: 'admin',
+  });
 }
 
 export async function queryNotices(): Promise<any> {