feat(sys-client): add app access url to func/deploy/policy/file pages;

maslow · Sep 10, 2021 · 21ca41e · 21ca41e
1 parent 23c94b5
commit 21ca41e
Show file tree

Hide file tree

Showing 8 changed files with 116 additions and 21 deletions.
diff --git a/packages/system-client/nginx.conf b/packages/system-client/nginx.conf
@@ -33,7 +33,7 @@ server {
 server {
    listen 80;
    # server_name ~^ "(\w{8}(-\w{4}){3}-\w{12})\.(.+)$";
-   server_name *.${APP_SERVICE_BASE_DOMAIN};
+   server_name *.${DEPLOY_DOMAIN};
    client_max_body_size 0;
 
    location / {
@@ -45,4 +45,15 @@ server {
          add_header appid $appid;
       }
    }
+
+   location /deploy/incoming {
+       if ($host ~* "(\w{8}(-\w{4}){3}-\w{12})\.(.+)$") {
+         set $appid $1;
+         proxy_pass http://system_server:9000/apps/$appid/deploy/incoming;
+         add_header appid $appid;
+       }
+
+      proxy_send_timeout 600s;
+      proxy_read_timeout 600s;
+    }
 }
diff --git a/packages/system-client/src/api/application.js b/packages/system-client/src/api/application.js
@@ -205,3 +205,15 @@ export async function importApplication(appid, import_data) {
   })
   return res
 }
+
+/**
+ * 获取当前应用的访问地址
+ * @param {*} appid default is current appid
+ * @returns
+ */
+export function getAppAccessUrl() {
+  const appid = store.state.app.appid
+  const domain = store.state.app.app_deploy_host
+  const url = `http://${appid}.${domain}`
+  return url
+}
diff --git a/packages/system-client/src/store/modules/app.js b/packages/system-client/src/store/modules/app.js
@@ -26,7 +26,9 @@ const state = {
   /**
    * The token of file uploading and downloading
    */
-  file_token: null
+  file_token: null,
+
+  app_deploy_host: null
 }
 
 const mutations = {
@@ -46,13 +48,17 @@ const mutations = {
   SET_FILE_TOKEN: (state, payload) => {
     state.file_token = payload || []
   },
+  SET_APP_DEPLOY_HOST: (state, domain) => {
+    state.app_deploy_host = domain
+  },
   CLEAR_STATE: (state) => {
     state.application = null
     state.appid = null
     state.roles = []
     state.permissions = []
     state.debug_token = null
     state.file_token = null
+    state.app_deploy_host = null
   }
 }
 
@@ -68,6 +74,7 @@ const actions = {
     commit('SET_APP_PERMISSIONS', res.data?.permissions)
     commit('SET_DEBUG_TOKEN', res.data?.debug_token)
     commit('SET_FILE_TOKEN', res.data?.file_token)
+    commit('SET_APP_DEPLOY_HOST', res.data?.app_deploy_host)
   },
   clearStates({ commit }) {
     commit('CLEAR_STATE')

diff --git a/packages/system-client/src/views/cloudfunction/index.vue b/packages/system-client/src/views/cloudfunction/index.vue
@@ -95,6 +95,13 @@
           </el-tag>
         </template>
       </el-table-column>
+      <el-table-column label="调用地址" align="center" width="80px">
+        <template slot-scope="{row}">
+          <el-tooltip :content="getFunctionInvokeBaseUrl(row.name)" placement="top">
+            <i v-clipboard:message="getFunctionInvokeBaseUrl(row.name)" v-clipboard:success="onCopy" class="el-icon-document-copy copy-btn" />
+          </el-tooltip>
+        </template>
+      </el-table-column>
       <el-table-column fixed="right" label="操作" align="center" width="380" class-name="small-padding">
         <template slot-scope="{row,$index}">
           <el-button plain type="success" size="mini" @click="handleShowDetail(row)">
@@ -179,6 +186,7 @@
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import DeployPanel from '../deploy/components/deploy-panel.vue'
 import { createFunction, getAllFunctionTags, getFunctions, publishFunctions, removeFunction, updateFunction } from '@/api/func'
+import { getAppAccessUrl } from '@/api/application'
 
 const defaultCode = `
 import cloud from '@/cloud-sdk'
@@ -466,6 +474,10 @@ export default {
     },
     onCopy() {
       this.$message.success('已复制')
+    },
+    getFunctionInvokeBaseUrl(func_name) {
+      const app_url = getAppAccessUrl()
+      return app_url + `/func/${func_name}`
     }
   }
 }

diff --git a/packages/system-client/src/views/dashboard/index.vue b/packages/system-client/src/views/dashboard/index.vue
@@ -3,45 +3,83 @@
     <div class="welcome">
       欢迎使用 LaF 云开发！
     </div>
-    <div class="introduce">
-      使用文档:
-      <a style="color: blue" target="_blank" href="https://laf.laogen.site/">https://laf.laogen.site/</a>
+    <div class="introduce row">
+      <div class="label">使用文档：</div>
+      <div class="content">
+        <a style="color: blue" target="_blank" href="https://laf.laogen.site/">https://laf.laogen.site/</a>
+      </div>
+    </div>
+    <div class="row">
+      <div class="label">应用名：</div>
+      <div class="content">{{ app.name }}</div>
+    </div>
+    <div class="row">
+      <div class="label">应用ID：</div>
+      <div class="content">{{ app.appid }}</div>
+    </div>
+    <div class="row">
+      <div class="label">服务地址：</div>
+      <div class="content">
+        <a style="color: blue"> {{ getAppUrl() }}</a>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { getAppAccessUrl } from '@/api/application'
 
 export default {
   name: 'Dashboard',
   components: { },
   data() {
     return {}
   },
+  computed: {
+    app() {
+      return this.$store.state.app?.application
+    }
+  },
   async created() {
   },
   methods: {
+    getAppUrl() {
+      return getAppAccessUrl()
+    }
   }
 }
 </script>
 
 <style scoped>
 .application-container {
-  padding-top: 200px;
+  padding-top: 160px;
 }
 
 .welcome {
   width: 400px;
   margin: 0 auto;
   font-size: 26px;
-  color: rgba(218, 165, 32)
+  color: rgba(218, 165, 32);
+  margin-bottom: 80px;
 }
 
-.introduce {
-  width: 400px;
+.row {
+
+  width: 700px;
   margin: 0 auto;
-  text-align: left;
   margin-top: 20px;
-  color: rgb(126, 123, 123);
+  display: flex;
+}
+
+.row .label {
+  text-align: left;
+  width: 80px;
+  color: rgb(82, 80, 80);
+  font-size: 16;
+}
+
+.row .content {
+  color: black;
+  padding-left: 10px;
 }
 </style>
diff --git a/packages/system-client/src/views/database/files.vue b/packages/system-client/src/views/database/files.vue
@@ -114,6 +114,7 @@
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import * as fs from '@/api/file'
 import { assert } from '@/utils/assert'
+import { getAppAccessUrl } from '@/api/application'
 
 export default {
   name: 'BucketsListPage',
@@ -145,8 +146,8 @@ export default {
   },
   methods: {
     /**
-       * 获取数据列表
-       */
+     * 获取数据列表
+     */
     async getList() {
       this.listLoading = true
 
@@ -206,9 +207,8 @@ export default {
     // 拼装文件下载 URL
     getFileUrl(file) {
       assert(file && file.filename, 'invalid file or filename')
-      const appid = this.$store.state.app.appid
-      const base_url = process.env.VUE_APP_BASE_API_APP + `/${appid}/file`
-      const file_url = `${base_url}/${this.bucket}/${file.filename}`
+      const app_url = getAppAccessUrl()
+      const file_url = `${app_url}/file/${this.bucket}/${file.filename}`
       if (this.bucket === 'public') {
         return file_url
       }
@@ -218,9 +218,8 @@ export default {
     // 拼装文件上传地址
     getUploadUrl() {
       assert(this.bucket, 'empty bucket name got')
-      const appid = this.$store.state.app.appid
-      const base_url = process.env.VUE_APP_BASE_API_APP + `/${appid}/file`
-      const file_url = `${base_url}/upload/${this.bucket}`
+      const app_url = getAppAccessUrl()
+      const file_url = `${app_url}/file/upload/${this.bucket}`
       const token = this.$store.state.app.file_token
       return file_url + `?token=${token}`
     },

diff --git a/packages/system-client/src/views/database/policies.vue b/packages/system-client/src/views/database/policies.vue
@@ -42,11 +42,16 @@
           <span>{{ row._id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="标识" width="150px">
+      <el-table-column label="标识" align="center" width="150px">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="入口地址" align="left" width="150px">
+        <template slot-scope="{row}">
+          <span>/proxy/{{ row.name }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="说明" align="center">
         <template slot-scope="{row}">
           <span v-if="row.description">{{ row.description }}</span>

diff --git a/packages/system-client/src/views/deploy/requests.vue b/packages/system-client/src/views/deploy/requests.vue
@@ -117,8 +117,14 @@
         <el-form-item v-if="token_created" label="返回结果" size="normal" style="width: 800px">
           <div class="token_result">
             {{ token_created }}
+            <el-tag v-clipboard:message="token_created" v-clipboard:success="onCopy" type="success">复制</el-tag>
+          </div>
+        </el-form-item>
+        <el-form-item label="接收部署地址" size="normal" style="width: 800px">
+          <div>
+            {{ getSelfDeployUrl() }}
+            <el-tag v-clipboard:message="getSelfDeployUrl()" v-clipboard:success="onCopy" type="success">复制</el-tag>
           </div>
-          <el-tag v-clipboard:message="token_created" v-clipboard:success="onCopy" type="success">复制</el-tag>
         </el-form-item>
 
       </el-form>
@@ -137,6 +143,7 @@
 <script>
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import { applyDeployRequest, createDeployToken, getDeployRequests, removeDeployRequest } from '../../api/deploy'
+import { getAppAccessUrl } from '@/api/application'
 
 // 默认的创建部署令牌表单
 function getDefaultFormValue() {
@@ -285,6 +292,10 @@ export default {
     // },
     onCopy() {
       this.$message.success('已复制')
+    },
+    getSelfDeployUrl() {
+      const base = getAppAccessUrl()
+      return base + '/deploy/incoming'
     }
   }
 }