初步实现对象存储源站

This commit is contained in:
GoEdgeLab
2023-06-07 17:24:56 +08:00
parent 24db40540b
commit 7e6e2b6889
19 changed files with 587 additions and 255 deletions

View File

@@ -5,12 +5,16 @@
<form method="post" class="ui form" data-tea-action="$" data-tea-success="success">
<table class="ui table selectable definition">
<tr>
<td>源站协议 *</td>
<td class="title">源站协议 *</td>
<td>
<!-- HTTP -->
<select class="ui dropdown auto-width" name="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol" v-model="protocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
<!-- 对象存储 -->
<optgroup label="对象存储" v-if="ossTypes.length > 0"></optgroup>
<option v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
</select>
<!-- TCP -->
@@ -25,20 +29,56 @@
</select>
</td>
</tr>
<tr>
<!-- 普通源站 -->
<tr v-show="!isOSS">
<td class="title">源站地址 *</td>
<td>
<input type="text" name="addr" ref="focus" v-model="addr" @input="changeAddr"/>
<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址通常是一个IP或域名加端口<span v-if="serverType == 'httpProxy'">,不需要加 http:// 或 https://</span></p>
</td>
</tr>
<tr v-if="isHTTP || protocol == 'tls'">
<tr v-if="(isHTTP || protocol == 'tls') && !isOSS">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值用于设置访问源站的站点域名<span v-if="isHTTP">,支持请求变量</span></p>
</td>
</tr>
<!-- OSS -->
<!-- 腾讯云COS -->
<tbody v-if="protocol == 'oss:tencentCOS'">
<tr>
<td>密钥ID *<br/><em>(Secret Id)</em></td>
<td>
<input type="text" name="tencentCOSSecretId" maxlength="100"/>
<p class="comment">访问存储桶需要的密钥ID。</p>
</td>
</tr>
<tr>
<td>密钥Key *<br/><em>(Secret Key)</em></td>
<td>
<input type="text" name="tencentCOSSecretKey" maxlength="100"/>
<p class="comment">访问存储桶需要的密钥Key。</p>
</td>
</tr>
<tr>
<td>存储桶名称 *</td>
<td>
<input type="text" name="tencentCOSBucketName" maxlength="100"/>
<p class="comment">存储桶名称,类似于<code-label>example-12345678</code-label></p>
</td>
</tr>
<tr>
<td>所属区域代号 *</td>
<td>
<input type="text" name="tencentCOSRegion" maxlength="100"/>
<p class="comment">COS服务所属区域代号类似于<code-label>ap-beijing</code-label></p>
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
@@ -56,7 +96,7 @@
<p class="comment">默认不需要填写,表示支持所有域名。如果填写了专属域名,表示这些源站只会在所列的专属域名被访问时才生效。</p>
</td>
</tr>
<tr>
<tr v-show="!isOSS">
<td>端口跟随</td>
<td>
<checkbox name="followPort"></checkbox>

View File

@@ -1,6 +1,7 @@
Tea.context(function () {
this.addr = ""
this.protocol = ""
this.isOSS = false
this.addrError = ""
@@ -15,6 +16,8 @@ Tea.context(function () {
}
this.changeProtocol = function () {
this.isOSS = this.protocol.startsWith("oss:")
this.checkPort()
}

View File

@@ -59,7 +59,8 @@
<input type="hidden" name="origins" :value="JSON.stringify(origins)"/>
<div v-if="origins.length > 0">
<div v-for="(origin, index) in origins" class="ui label small basic">
{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}
<span v-if="origin.addrSummary != null && origin.addrSummary.length > 0">{{origin.addrSummary}}</span>
<span v-else>{{origin.addr.protocol}}://{{origin.addr.host}}:{{origin.addr.portRange}}</span>
<a href="" title="删除" @click.prevent="removeOrigin(index)"><i class="icon remove"></i></a>
</div>
<div class="ui divider"></div>

View File

@@ -7,12 +7,16 @@
<input type="hidden" name="originType" :value="originType"/>
<table class="ui table selectable definition">
<tr>
<td>源站协议</td>
<td class="title">源站协议</td>
<td>
<!-- HTTP -->
<select class="ui dropdown auto-width" name="protocol" v-model="protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
<!-- 对象存储 -->
<optgroup label="对象存储" v-if="ossTypes.length > 0"></optgroup>
<option v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
</select>
<!-- TCP -->
@@ -27,7 +31,9 @@
</select>
</td>
</tr>
<tr>
<!-- 普通源站 -->
<tr v-show="!isOSS">
<td class="title">源站地址 *</td>
<td>
<input type="text" name="addr" ref="focus" v-model="addr" @input="changeAddr"/>
@@ -35,13 +41,47 @@
源站服务器地址通常是一个IP或域名加端口<span v-if="serverType == 'httpProxy'">,不需要加 http:// 或 https://</span></p>
</td>
</tr>
<tr v-if="isHTTP || protocol == 'tls'">
<tr v-if="(isHTTP || protocol == 'tls') && !isOSS">
<td>回源主机名</td>
<td>
<input type="text" name="host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值用于设置访问源站的站点域名<span v-if="isHTTP">,支持请求变量</span></p>
</td>
</tr>
<!-- OSS -->
<!-- 腾讯云COS -->
<tbody v-if="protocol == 'oss:tencentCOS'">
<tr>
<td>密钥ID *<br/><em>(Secret Id)</em></td>
<td>
<input type="text" name="tencentCOSSecretId" maxlength="100"/>
<p class="comment">访问存储桶需要的密钥ID。</p>
</td>
</tr>
<tr>
<td>密钥Key *<br/><em>(Secret Key)</em></td>
<td>
<input type="text" name="tencentCOSSecretKey" maxlength="100"/>
<p class="comment">访问存储桶需要的密钥Key。</p>
</td>
</tr>
<tr>
<td>存储桶名称 *</td>
<td>
<input type="text" name="tencentCOSBucketName" maxlength="100"/>
<p class="comment">存储桶名称,类似于<code-label>example-12345678</code-label></p>
</td>
</tr>
<tr>
<td>所属区域代号 *</td>
<td>
<input type="text" name="tencentCOSRegion" maxlength="100"/>
<p class="comment">COS服务所属区域代号类似于<code-label>ap-beijing</code-label></p>
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
@@ -59,7 +99,7 @@
<p class="comment">默认不需要填写,表示支持所有域名。如果填写了专属域名,表示这些源站只会在所列的专属域名被访问时才生效。</p>
</td>
</tr>
<tr>
<tr v-show="!isOSS">
<td>端口跟随</td>
<td>
<checkbox name="followPort"></checkbox>
@@ -80,7 +120,7 @@
<p class="comment">给当前源站起一个容易识别的名称。</p>
</td>
</tr>
<tr>
<tr v-show="!isOSS">
<td>连接失败超时时间</td>
<td>
<div class="ui fields inline">
@@ -94,7 +134,7 @@
<p class="comment">连接源站失败的最大超时时间0表示不限制。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>读取超时时间</td>
<td>
<div class="ui fields inline">
@@ -108,7 +148,7 @@
<p class="comment">读取内容时的最大超时时间0表示不限制。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大并发连接数</td>
<td>
<div class="ui fields inline">
@@ -119,7 +159,7 @@
<p class="comment">源站可以接受到的最大并发连接数0表示使用系统默认。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大空闲连接数</td>
<td>
<div class="ui fields inline">
@@ -130,7 +170,7 @@
<p class="comment">当没有请求时源站保持等待的最大空闲连接数量0表示使用系统默认。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大空闲超时时间</td>
<td>
<div class="ui fields inline">
@@ -151,7 +191,7 @@
</td>
</tr>
<tr>
<td>是否启用</td>
<td>启用当前源站</td>
<td>
<checkbox name="isOn" :value="true"></checkbox>
</td>

View File

@@ -1,6 +1,7 @@
Tea.context(function () {
this.addr = ""
this.protocol = ""
this.isOSS = false
this.addrError = ""
@@ -13,6 +14,8 @@ Tea.context(function () {
}
this.changeProtocol = function () {
this.isOSS = this.protocol.startsWith("oss:")
this.checkPort()
}

View File

@@ -9,12 +9,16 @@
<table class="ui table selectable definition">
<tr>
<td>源站协议</td>
<td class="title">源站协议</td>
<td>
<!-- HTTP -->
<select class="ui dropdown auto-width" name="protocol" v-model="origin.protocol" v-if="serverType == 'httpProxy' || serverType == 'httpWeb'" @change="changeProtocol">
<option value="http">HTTP</option>
<option value="https">HTTPS</option>
<!-- 对象存储 -->
<optgroup label="对象存储" v-if="ossTypes.length > 0"></optgroup>
<option v-for="ossType in ossTypes" :value="ossType.code">{{ossType.name}}</option>
</select>
<!-- TCP -->
@@ -29,20 +33,56 @@
</select>
</td>
</tr>
<tr>
<!-- 普通源站 -->
<tr v-show="!isOSS">
<td class="title">源站地址 *</td>
<td>
<input type="text" name="addr" ref="focus" v-model="origin.addr" @input="changeAddr"/>
<p class="comment"><span class="red" v-if="addrError.length > 0">{{addrError}}</span>源站服务器地址通常是一个IP或域名加端口<span v-if="serverType == 'httpProxy'">,不需要加 http:// 或 https://</span></p>
</td>
</tr>
<tr v-if="isHTTP || origin.protocol == 'tls'">
<tr v-if="(isHTTP || origin.protocol == 'tls') && !isOSS">
<td>回源主机名</td>
<td>
<input type="text" name="host" v-model="origin.host" placeholder="比如example.com" maxlength="100"/>
<p class="comment">请求源站时的Host字段值用于设置访问源站的站点域名<span v-if="isHTTP">,支持请求变量</span></p>
</td>
</tr>
<!-- OSS -->
<!-- 腾讯云COS -->
<tbody v-if="origin.protocol == 'oss:tencentCOS'">
<tr>
<td>密钥ID *<br/><em>(Secret Id)</em></td>
<td>
<input type="text" name="tencentCOSSecretId" maxlength="100" v-model="origin.oss.options.secretId"/>
<p class="comment">访问存储桶需要的密钥ID。</p>
</td>
</tr>
<tr>
<td>密钥Key *<br/><em>(Secret Key)</em></td>
<td>
<input type="text" name="tencentCOSSecretKey" maxlength="100" v-model="origin.oss.options.secretKey"/>
<p class="comment">访问存储桶需要的密钥Key。</p>
</td>
</tr>
<tr>
<td>存储桶名称 *</td>
<td>
<input type="text" name="tencentCOSBucketName" maxlength="100" v-model="origin.oss.options.bucketName"/>
<p class="comment">存储桶名称,类似于<code-label>example-12345678</code-label></p>
</td>
</tr>
<tr>
<td>所属区域代号 *</td>
<td>
<input type="text" name="tencentCOSRegion" maxlength="100" v-model="origin.oss.options.region"/>
<p class="comment">COS服务所属区域代号类似于<code-label>ap-beijing</code-label></p>
</td>
</tr>
</tbody>
<tr>
<td colspan="2"><more-options-indicator></more-options-indicator></td>
</tr>
@@ -60,7 +100,7 @@
<p class="comment">默认不需要填写,表示支持所有域名。如果填写了专属域名,表示这些源站只会在所列的专属域名被访问时才生效。</p>
</td>
</tr>
<tr>
<tr v-show="!isOSS">
<td>端口跟随</td>
<td>
<checkbox name="followPort" v-model="origin.followPort"></checkbox>
@@ -81,7 +121,7 @@
<p class="comment">给当前源站起一个容易识别的名称。</p>
</td>
</tr>
<tr>
<tr v-show="!isOSS">
<td>连接失败超时时间</td>
<td>
<div class="ui fields inline">
@@ -95,7 +135,7 @@
<p class="comment">连接源站失败的最大超时时间0表示不限制。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>读取超时时间</td>
<td>
<div class="ui fields inline">
@@ -109,7 +149,7 @@
<p class="comment">读取内容时的最大超时时间0表示不限制。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大并发连接数</td>
<td>
<div class="ui fields inline">
@@ -120,7 +160,7 @@
<p class="comment">源站可以接受到的最大并发连接数0表示使用系统默认。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大空闲连接数</td>
<td>
<div class="ui fields inline">
@@ -131,7 +171,7 @@
<p class="comment">当没有请求时源站保持等待的最大空闲连接数量0表示使用系统默认。</p>
</td>
</tr>
<tr v-if="isHTTP">
<tr v-if="isHTTP && !isOSS">
<td>最大空闲超时时间</td>
<td>
<div class="ui fields inline">
@@ -152,7 +192,7 @@
</td>
</tr>
<tr>
<td>是否启用</td>
<td>启用当前源站</td>
<td>
<checkbox name="isOn" :value="origin.isOn"></checkbox>
</td>

View File

@@ -1,11 +1,22 @@
Tea.context(function () {
this.addrError = ""
this.isOSS = this.origin != null && this.origin.protocol != null && this.origin.protocol.startsWith("oss:")
// 预先设置oss选项
if (!this.isOSS) {
this.origin.oss = {
type: "",
options: {}
}
}
this.$delay(function () {
this.checkPort()
})
this.changeProtocol = function () {
this.isOSS = this.origin.protocol.startsWith("oss:")
this.checkPort()
}