support config file

This commit is contained in:
Stille 2022-07-11 16:17:01 +08:00
parent 3d5054182b
commit b2ee9e3a53
10 changed files with 56 additions and 26 deletions

2
.env
View File

@ -1,2 +0,0 @@
NODE_ENV = 'development'
VUE_APP_BASE_API_URL = 'http://127.0.0.1:25500'

View File

@ -1,2 +0,0 @@
NODE_ENV = 'production'
VUE_APP_BASE_API_URL = 'http://127.0.0.1:25500'

View File

@ -8,6 +8,6 @@ RUN npm run build
FROM nginx:1.16-alpine FROM nginx:1.16-alpine
COPY --from=build /app/dist /usr/share/nginx/html COPY --from=build /app/dist /usr/share/nginx/html
COPY start.sh / COPY . /app
EXPOSE 80 EXPOSE 80
CMD [ "sh", "-c", "/start.sh" ] CMD [ "sh", "-c", "/app/start.sh" ]

View File

@ -14,7 +14,7 @@ Docker [stilleshan/subweb](https://hub.docker.com/r/stilleshan/subweb)*
## 部署 ## 部署
### docker 本地版 ### docker 本地版
*适用于本机部署使用* *适用于本机快速部署使用*
```shell ```shell
docker run -d --name subweb --restart always \ docker run -d --name subweb --restart always \
-p 18080:80 \ -p 18080:80 \
@ -23,11 +23,22 @@ docker run -d --name subweb --restart always \
访问 `http://127.0.0.1:18080` 访问 `http://127.0.0.1:18080`
### docker 自定义后端 API 地址 ### docker 自定义版
修改`API_URL`环境变量为你的后端 API 地址 自定义版可以挂载配置文件来修改`API 地址`,`站点名称`,`导航链接`.
参考以下命令,修改本地挂载路径,启动容器后会生成`config.js`配置文件,更改后刷新生效.
```shell ```shell
docker run -d --name subweb --restart always \ docker run -d --name subweb --restart always \
-p 18080:80 \ -p 18080:80 \
-v /PATH/subweb/conf:/usr/share/nginx/html/conf \
stilleshan/subweb
```
同时也可以不挂载目录,直接通过`-e`环境变量来修改`API 地址`和`站点名称`,但是无法修改`导航链接`.
```shell
docker run -d --name subweb --restart always \
-p 18080:80 \
-e SITE_NAME=subweb \
-e API_URL=https://sub.ops.ci \ -e API_URL=https://sub.ops.ci \
stilleshan/subweb stilleshan/subweb
``` ```

16
public/conf/config.js Normal file
View File

@ -0,0 +1,16 @@
window.config = {
siteName: 'Subconverter Web',
apiUrl: 'http://127.0.0.1:25500',
menuItem: [
{
title: '首页',
link: '/',
target: '',
},
{
title: 'GitHub',
link: 'https://github.com/stilleshan/subweb',
target: '_blank',
},
],
};

View File

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
<script type="text/javascript" src="<%= BASE_URL %>conf/config.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>

View File

@ -1,12 +1,12 @@
<template> <template>
<header id="header" class="reveal"> <header id="header" class="reveal">
<h1><a href="/">Subconverter Web</a></h1> <h1>
<a href="/">{{ siteName }}</a>
</h1>
<nav id="nav" ref="navBar"> <nav id="nav" ref="navBar">
<ul> <ul>
<li v-for="i in navBarItem" :key="i" :class="i.style"> <li v-for="i in navBarItem" :key="i">
<a :href="i.link" :class="i.class" :target="i.target">{{ <a :href="i.link" :target="i.target">{{ i.title }}</a>
i.title
}}</a>
</li> </li>
</ul> </ul>
</nav> </nav>
@ -14,16 +14,18 @@
</template> </template>
<script> <script>
import { navBarItem } from './navBarItem'; // import { navBarItem } from './navBarItem';
export default { export default {
name: 'NavBar', name: 'NavBar',
data() { data() {
return { return {
navBarItem: [], navBarItem: [],
siteName: '',
}; };
}, },
created() { created() {
this.navBarItem = navBarItem; this.navBarItem = window.config.menuItem;
this.siteName = window.config.siteName;
}, },
}; };
</script> </script>

View File

@ -8,9 +8,9 @@
:key="i" :key="i"
:href="i.link" :href="i.link"
:target="i.target" :target="i.target"
:class="i.depth" class="link depth-0"
style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"
><span :class="i.indent"></span>{{ i.title }}</a ><span class="indent-0"></span>{{ i.title }}</a
> >
</nav> </nav>
</div> </div>
@ -18,7 +18,7 @@
</template> </template>
<script> <script>
import { navBarItem } from './navBarItem'; // import { navBarItem } from './navBarItem';
export default { export default {
name: 'NavBarMobile', name: 'NavBarMobile',
data() { data() {
@ -27,7 +27,7 @@ export default {
}; };
}, },
created() { created() {
this.navBarItem = navBarItem; this.navBarItem = window.config.menuItem;
document.addEventListener('click', (e) => { document.addEventListener('click', (e) => {
if (this.$refs.showPanel) { if (this.$refs.showPanel) {
let isSelf = this.$refs.showPanel.contains(e.target); let isSelf = this.$refs.showPanel.contains(e.target);

View File

@ -155,12 +155,12 @@ export default {
isShowMoreConfig: false, isShowMoreConfig: false,
urls: [], urls: [],
returnUrl: '', returnUrl: '',
apiUrl: process.env.VUE_APP_BASE_API_URL, apiUrl: window.config.apiUrl,
manualApiUrl: '', manualApiUrl: '',
isManualApi: true, isManualApi: true,
api: 'default', api: 'default',
apis: [ apis: [
{ value: 'default', text: process.env.VUE_APP_BASE_API_URL }, { value: 'default', text: window.config.apiUrl },
{ value: 'manual', text: '自定义后端 API 地址' }, { value: 'manual', text: '自定义后端 API 地址' },
], ],
inputs: { inputs: {

View File

@ -1,14 +1,18 @@
#/bin/sh #/bin/sh
if [ ! -f /usr/share/nginx/html/conf/config.js ]; then
cp /app/public/conf/config.js /usr/share/nginx/html/conf
fi
if [ $API_URL ]; then if [ $API_URL ]; then
echo "当前 API 地址为: $API_URL" echo "当前 API 地址为: $API_URL"
for js in /usr/share/nginx/html/js/*.js sed -i "s#http://127.0.0.1:25500#$API_URL#g" /usr/share/nginx/html/conf/config.js
do
sed -i "s#http://127.0.0.1:25500#$API_URL#g" $js
done
else else
echo "当前为默认本地 API 地址: http://127.0.0.1:25500" echo "当前为默认本地 API 地址: http://127.0.0.1:25500"
echo "如需修改请在容器启动时使用 -e API_URL='https://sub.ops.ci' 传递环境变量" echo "如需修改请在容器启动时使用 -e API_URL='https://sub.ops.ci' 传递环境变量"
fi fi
if [ $SITE_NAME ]; then
sed -i "s#Subconverter Web#$SITE_NAME#g" /usr/share/nginx/html/conf/config.js
fi
nginx -g "daemon off;" nginx -g "daemon off;"