mirror of
https://github.com/0xJacky/nginx-ui.git
synced 2025-05-11 02:15:48 +02:00
feat(template): add selection box; add scheme and host field for reverse_proxy #608
This commit is contained in:
Jacky
parent
77666f4cc6
commit
91799e64c4
20 changed files with 474 additions and 136 deletions
|
|
@ -31,6 +31,7 @@ export const zhTWConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
|
|||
items: [
|
||||
{text: '構建', link: '/zh_TW/guide/build'},
|
||||
{text: '專案結構', link: '/zh_TW/guide/project-structure'},
|
||||
{text: '配置模板', link: '/zh_TW/guide/nginx-ui-template'},
|
||||
{text: '貢獻程式碼', link: '/zh_TW/guide/contributing'}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -13,31 +13,71 @@ Please note, you need to recompile the backend after modifying or adding new con
|
|||
|
||||
Nginx UI Template file consists of two parts: the file header and the actual Nginx configuration.
|
||||
|
||||
Below is a configuration template for hotlink protection, which we will use as a basis to introduce the file format and related syntax of Nginx UI Template.
|
||||
Below is a configuration template for reverse proxy, which we will use as a basis to introduce the file format and related syntax of Nginx UI Template.
|
||||
|
||||
```nginx configuration
|
||||
# Nginx UI Template Start
|
||||
name = "Hotlink Protection"
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Hotlink Protection Config Template", zh_CN = "防盗链配置模板"}
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.NoneReferer]
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Allow Referer is None", zh_CN = "允许空 Referer"}
|
||||
value = false
|
||||
name = { en = "Enable WebSocket", zh_CN = "启用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.AllowReferers]
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Allow Referers", zh_CN = "允许的 Referers"}
|
||||
value = ""
|
||||
name = { en = "Client Max Body Size", zh_CN = "客户端最大请求内容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "协议"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主机"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
|
||||
location ~ .*\.(jpg|png|js|css)$ {
|
||||
valid_referers {{- if .NoneReferer}} none {{- end}} blocked server_names {{if .AllowReferers}}{{.AllowReferers}}{{- end}};
|
||||
if ($invalid_referer) {
|
||||
return 403;
|
||||
}
|
||||
# Nginx UI Custom Start
|
||||
{{- if .enableWebSocket }}
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
{{- end }}
|
||||
# Nginx UI Custom End
|
||||
|
||||
if ($host != $server_name) {
|
||||
return 404;
|
||||
}
|
||||
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
## File Header
|
||||
|
|
@ -51,27 +91,44 @@ The file header includes the following fields:
|
|||
| `name` | Name of the configuration | string | Yes |
|
||||
| `author` | Author | string | Yes |
|
||||
| `description` | Desciption, uses a toml dictionary for multi-language support | toml dictionary | Yes |
|
||||
| `variables.VariableName.type` | Variable type, currently supports `boolean` and `string` | string | No |
|
||||
| `variables.VariableName.name` | Variable display name, is a toml dictionary to support multi-language | toml dictionary | No |
|
||||
| `variables.VariableName.type` | Variable type, currently supports `boolean`, `string` and `select` | string | Yes |
|
||||
| `variables.VariableName.name` | Variable display name, is a toml dictionary to support multi-language | toml dictionary | Yes |
|
||||
| `variables.VariableName.value` | Default value of the variable | boolean/string (according to type definition) | No |
|
||||
| `variables.VariableName.mask` | The options of select | toml dictionary | No |
|
||||
|
||||
Example:
|
||||
|
||||
```toml
|
||||
# Nginx UI Template Start
|
||||
name = "Hotlink Protection"
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Hotlink Protection Config Template", zh_CN = "防盗链配置模板"}
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.NoneReferer]
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Allow Referer is None", zh_CN = "允许空 Referer"}
|
||||
value = false
|
||||
name = { en = "Enable WebSocket", zh_CN = "启用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.AllowReferers]
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Allow Referers", zh_CN = "允许的 Referers"}
|
||||
value = ""
|
||||
name = { en = "Client Max Body Size", zh_CN = "客户端最大请求内容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "协议"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主机"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
```
|
||||
|
||||
|
|
@ -83,29 +140,45 @@ When you click the "View" button, a dialog will appear, as shown below.
|
|||
|
||||
<img src="/assets/nginx-ui-template/en/config-ui.png" width="350px" title="Config Modal" />
|
||||
|
||||
The input boxes and switches in the interface correspond to the variable types `boolean` and `string`.
|
||||
The following table shows the relationship between the variable type and the UI element:
|
||||
|
||||
| Variable Type | UI Element |
|
||||
|:-------------:|:----------:|
|
||||
| `boolean` | switcher |
|
||||
| `string` | input |
|
||||
| `select` | select |
|
||||
|
||||
## Nginx Configuration
|
||||
The Nginx configuration should be provided after the file header. This part will be parsed using the Go `text/template` library. This library provides powerful template generation capabilities, including conditional judgment, looping, and complex text processing, etc.
|
||||
For more information, please check [Go Documentation](https://pkg.go.dev/text/template).
|
||||
|
||||
The variables defined in the header can be used in this part, such as `.NoneReferer` and `.AllowReferers`.
|
||||
The variables defined in the header can be used in this part, such as `.scheme`, `.host` and `.port`.
|
||||
Please note that you need to define the variables in the header in advance before using them in this part.
|
||||
|
||||
Here is an example:
|
||||
|
||||
```nginx configuration
|
||||
location ~ .*\.(jpg|png|js|css)$ {
|
||||
valid_referers {{- if .NoneReferer}} none {{- end}} blocked server_names {{if .AllowReferers}}{{.AllowReferers}}{{- end}};
|
||||
if ($invalid_referer) {
|
||||
return 403;
|
||||
}
|
||||
}
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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 Forwarded $proxy_add_forwarded;
|
||||
|
||||
proxy_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
When users input variable values in the app input boxes, the system will automatically generate new configuration content, as shown below:
|
||||
|
||||
<img src="/assets/nginx-ui-template/en/config-ui-after-input.png" width="350px" title="Config Modal" />
|
||||
When users change the form, the system will automatically generate new configuration content based on the template and the input of user.
|
||||
|
||||
In addition to the variables defined in the template header, we also provide macro-defined variables, as shown in the table below:
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 189 KiB |
|
|
@ -12,31 +12,71 @@ Nginx UI Template 提供了一种开箱即用的配置模板机制。在 NgxConf
|
|||
|
||||
Nginx UI Template 文件由两部分组成：文件头部以及具体的 Nginx 配置。
|
||||
|
||||
以下是一个关于防盗链的配置模板，我们将以这个模板为基础为您介绍 Nginx UI Template 的文件格式及相关语法。
|
||||
以下是一个关于反向代理的配置模板，我们将以这个模板为基础为您介绍 Nginx UI Template 的文件格式及相关语法。
|
||||
|
||||
```nginx configuration
|
||||
# Nginx UI Template Start
|
||||
name = "Hotlink Protection"
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Hotlink Protection Config Template", zh_CN = "防盗链配置模板"}
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.NoneReferer]
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Allow Referer is None", zh_CN = "允许空 Referer"}
|
||||
value = false
|
||||
name = { en = "Enable WebSocket", zh_CN = "启用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.AllowReferers]
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Allow Referers", zh_CN = "允许的 Referers"}
|
||||
value = ""
|
||||
name = { en = "Client Max Body Size", zh_CN = "客户端最大请求内容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "协议"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主机"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
|
||||
location ~ .*\.(jpg|png|js|css)$ {
|
||||
valid_referers {{- if .NoneReferer}} none {{- end}} blocked server_names {{if .AllowReferers}}{{.AllowReferers}}{{- end}};
|
||||
if ($invalid_referer) {
|
||||
return 403;
|
||||
}
|
||||
# Nginx UI Custom Start
|
||||
{{- if .enableWebSocket }}
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
{{- end }}
|
||||
# Nginx UI Custom End
|
||||
|
||||
if ($host != $server_name) {
|
||||
return 404;
|
||||
}
|
||||
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
## 文件头部
|
||||
|
|
@ -45,32 +85,49 @@ location ~ .*\.(jpg|png|js|css)$ {
|
|||
|
||||
文件头部包含以下字段：
|
||||
|
||||
| 字段 | 描述 | 类型 | 必要 |
|
||||
|:----------------------:|:------------------------------:|:---------------------------:|:--:|
|
||||
| `name` | 配置的名称 | string | 是 |
|
||||
| `author` | 作者 | string | 是 |
|
||||
| `description` | 描述，使用 toml 格式的字典来实现多语言描述 | toml 字典 | 是 |
|
||||
| `variables.变量名称.type` | 变量类型，目前支持 `boolean` 和 `string` | string (boolean/string) | 否 |
|
||||
| `variables.变量名称.name` | 变量显示的名称，是一个 toml 格式的字典，用于支持多语言 | toml 字典 | 否 |
|
||||
| `variables.变量名称.value` | 变量的默认值 | boolean/string (根据 type 定义) | 否 |
|
||||
| 字段 | 描述 | 类型 | 必要 |
|
||||
|:----------------------:|:----------------------------------------:|:---------------------------:|:--:|
|
||||
| `name` | 配置的名称 | string | 是 |
|
||||
| `author` | 作者 | string | 是 |
|
||||
| `description` | 描述，使用 toml 格式的字典来实现多语言描述 | toml 字典 | 是 |
|
||||
| `variables.变量名称.type` | 变量类型，目前支持 `boolean`, `string` 和 `select` | string | 是 |
|
||||
| `variables.变量名称.name` | 变量显示的名称，是一个 toml 格式的字典，用于支持多语言 | toml 字典 | 是 |
|
||||
| `variables.变量名称.value` | 变量的默认值 | boolean/string (根据 type 定义) | 否 |
|
||||
| `variables.变量名称.mask` | 选择框的选项 | toml 字典 | 否 |
|
||||
|
||||
示例如下：
|
||||
|
||||
```toml
|
||||
# Nginx UI Template Start
|
||||
name = "Hotlink Protection"
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Hotlink Protection Config Template", zh_CN = "防盗链配置模板"}
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.NoneReferer]
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Allow Referer is None", zh_CN = "允许空 Referer"}
|
||||
value = false
|
||||
name = { en = "Enable WebSocket", zh_CN = "启用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.AllowReferers]
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Allow Referers", zh_CN = "允许的 Referers"}
|
||||
value = ""
|
||||
name = { en = "Client Max Body Size", zh_CN = "客户端最大请求内容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "协议"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主机"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
```
|
||||
|
||||
|
|
@ -82,7 +139,14 @@ value = ""
|
|||
|
||||
<img src="/assets/nginx-ui-template/zh_CN/config-ui.png" width="350px" title="配置 Modal" />
|
||||
|
||||
界面中的输入框和开关对应着变量的类型 `boolean` 和 `string`。
|
||||
下表展示了变量类型与用户界面元素的关系：
|
||||
|
||||
| 类型 | 用户界面元素 |
|
||||
|:---------:|:------:|
|
||||
| `boolean` | 开关 |
|
||||
| `string` | 输入框 |
|
||||
| `select` | 选择框 |
|
||||
|
||||
|
||||
## Nginx 配置
|
||||
Nginx 配置应该在文件头部之后提供，这部分将使用 Go 的 `text/template` 库进行解析。这个库提供了强大的模板生成能力，包括条件判断、循环以及复杂的文本处理等。
|
||||
|
|
@ -93,16 +157,27 @@ Nginx 配置应该在文件头部之后提供，这部分将使用 Go 的 `text/
|
|||
示例如下：
|
||||
|
||||
```nginx configuration
|
||||
location ~ .*\.(jpg|png|js|css)$ {
|
||||
valid_referers {{- if .NoneReferer}} none {{- end}} blocked server_names {{if .AllowReferers}}{{.AllowReferers}}{{- end}};
|
||||
if ($invalid_referer) {
|
||||
return 403;
|
||||
}
|
||||
}
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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 Forwarded $proxy_add_forwarded;
|
||||
|
||||
proxy_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
当用户在前端的输入框中输入变量的值后，系统将会自动生成新的配置内容，效果如下：
|
||||
<img src="/assets/nginx-ui-template/zh_CN/config-ui-after-input.png" width="350px" title="配置 Modal" />
|
||||
当用户修改前端的表单后，系统将会根据用户的输入和配置模板自动生成新的配置内容。
|
||||
|
||||
除了模板头部定义的变量，我们还提供了宏定义的变量，如下表所示：
|
||||
|
||||
|
|
|
|||
189
docs/zh_TW/guide/nginx-ui-template.md
Normal file
189
docs/zh_TW/guide/nginx-ui-template.md
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
# 配置模板
|
||||
|
||||
Nginx UI Template 提供了一種開箱即用的配置模板機制。在 NgxConfigEditor 中，我們設計了一個可視化界面，使使用者能夠方便地將模板中的配置插入到當前的配置文件中。
|
||||
在本指南中，我們將介紹這種配置模板的文件格式和語法規則。
|
||||
配置模板文件存儲在 `template/block` 目錄中，我們歡迎並期待您通過提交 [PR](https://github.com/0xJacky/nginx-ui/pulls) 的形式分享您編寫的配置模板。
|
||||
|
||||
::: tip
|
||||
請注意，每次修改或新增配置文件後，需要重新編譯後端以生效。
|
||||
:::
|
||||
|
||||
## 文件格式
|
||||
|
||||
Nginx UI Template 文件由兩部分組成：文件頭部以及具體的 Nginx 配置。
|
||||
|
||||
以下是一個關於反向代理的配置模板，我們將以此模板為基礎向您介紹 Nginx UI Template 的文件格式及相關語法。
|
||||
|
||||
```nginx configuration
|
||||
# Nginx UI Template Start
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Enable WebSocket", zh_CN = "啟用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Client Max Body Size", zh_CN = "客戶端最大請求內容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "協議"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主機"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
|
||||
# Nginx UI Custom Start
|
||||
{{- if .enableWebSocket }}
|
||||
map $http_upgrade $connection_upgrade {
|
||||
default upgrade;
|
||||
'' close;
|
||||
}
|
||||
{{- end }}
|
||||
# Nginx UI Custom End
|
||||
|
||||
if ($host != $server_name) {
|
||||
return 404;
|
||||
}
|
||||
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
## 文件頭部
|
||||
|
||||
文件頭部應包含在 `# Nginx UI Template Start` 和 `# Nginx UI Template End` 之間，並遵循 toml 語法。
|
||||
|
||||
文件頭部包含以下欄位：
|
||||
|
||||
| 欄位 | 描述 | 類型 | 必要 |
|
||||
|:----------------------:|:----------------------------------------:|:---------------------------:|:--:|
|
||||
| `name` | 配置的名稱 | string | 是 |
|
||||
| `author` | 作者 | string | 是 |
|
||||
| `description` | 描述，使用 toml 格式的字典來實現多語言描述 | toml 字典 | 是 |
|
||||
| `variables.變量名稱.type` | 變量類型，目前支持 `boolean`, `string` 和 `select` | string | 是 |
|
||||
| `variables.變量名稱.name` | 變量顯示的名稱，是一個 toml 格式的字典，用於支持多語言 | toml 字典 | 是 |
|
||||
| `variables.變量名稱.value` | 變量的默認值 | boolean/string (根據 type 定義) | 否 |
|
||||
| `variables.變量名稱.mask` | 選擇框的選項 | toml 字典 | 否 |
|
||||
|
||||
示例如下：
|
||||
|
||||
```toml
|
||||
# Nginx UI Template Start
|
||||
name = "Reverse Proxy"
|
||||
author = "@0xJacky"
|
||||
description = { en = "Reverse Proxy Config", zh_CN = "反向代理配置"}
|
||||
|
||||
[variables.enableWebSocket]
|
||||
type = "boolean"
|
||||
name = { en = "Enable WebSocket", zh_CN = "啟用 WebSocket"}
|
||||
value = true
|
||||
|
||||
[variables.clientMaxBodySize]
|
||||
type = "string"
|
||||
name = { en = "Client Max Body Size", zh_CN = "客戶端最大請求內容大小"}
|
||||
value = "1000m"
|
||||
|
||||
[variables.scheme]
|
||||
type = "select"
|
||||
name = { en = "Scheme", zh_CN = "協議"}
|
||||
value = "http"
|
||||
mask = { http = { en = "HTTP" }, https = { en = "HTTPS" } }
|
||||
|
||||
[variables.host]
|
||||
type = "string"
|
||||
name = { en = "Host", zh_CN = "主機"}
|
||||
value = "127.0.0.1"
|
||||
|
||||
[variables.port]
|
||||
type = "string"
|
||||
name = { en = "Port", zh_CN = "端口"}
|
||||
value = 9000
|
||||
# Nginx UI Template End
|
||||
```
|
||||
|
||||
其中，名稱、作者及描述將會以摘要的形式在配置列表中顯示。
|
||||
|
||||
|
||||
|
||||
當您點擊「查看」按鈕，界面會顯示一個對話框，如下圖所示。
|
||||
|
||||
<img src="/assets/nginx-ui-template/zh_TW/config-ui.png" width="350px" title="配置 Modal" />
|
||||
|
||||
下表展示了變量類型與使用者界面元素的關係：
|
||||
|
||||
| 類型 | 使用者界面元素 |
|
||||
|:---------:|:------:|
|
||||
| `boolean` | 開關 |
|
||||
| `string` | 輸入框 |
|
||||
| `select` | 選擇框 |
|
||||
|
||||
|
||||
## Nginx 配置
|
||||
Nginx 配置應該在文件頭部之後提供，這部分將使用 Go 的 `text/template` 庫進行解析。這個庫提供了強大的模板生成能力，包括條件判斷、循環以及複雜的文本處理等。
|
||||
具體語法可以參考 [Go 文件](https://pkg.go.dev/text/template)。
|
||||
|
||||
在頭部中定義的變量可以在這部分中使用，如 `.NoneReferer` 和 `.AllowReferers`。請注意，需要預先在頭部定義變量，才能在這部分中使用。
|
||||
|
||||
示例如下：
|
||||
|
||||
```nginx configuration
|
||||
location / {
|
||||
{{ if .enableWebSocket }}
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection $connection_upgrade;
|
||||
{{ end }}
|
||||
|
||||
client_max_body_size {{ .clientMaxBodySize }};
|
||||
|
||||
proxy_redirect off;
|
||||
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 Forwarded $proxy_add_forwarded;
|
||||
|
||||
proxy_pass {{ .scheme }}://{{ .host }}:{{ .port }}/;
|
||||
}
|
||||
```
|
||||
|
||||
當使用者修改前端的表單後，系統將會根據使用者的輸入和配置模板自動生成新的配置內容。
|
||||
|
||||
除了模板頭部定義的變量，我們還提供了宏定義的變量，如下表所示：
|
||||
|
||||
| 變量名 | 描述 |
|
||||
|:----------:|:-----------------------:|
|
||||
| HTTPPORT | Nginx UI 監聽的端口 |
|
||||
| HTTP01PORT | 用於 HTTP01 Challenge 的端口 |
|
||||
|
||||
上述變量可以直接在配置部分使用，無需在頭部定義。
|
||||
Loading…
Add table
Add a link
Reference in a new issue