feat: optimize configuration reading
Add config/config.yaml to set default configurations. Use the config/local_config.yaml to set the custom configurations Change-Id: I22049e478b6440c765751c8f17663f36f33c277a
This commit is contained in:
Jingwei.Zhang
parent
ec59419f4f
commit
0213d8c6d6
|
|
@ -5,6 +5,7 @@ yarn-error.log
|
|||
package-lock.json
|
||||
.vscode
|
||||
.idea
|
||||
config/local_config.yaml
|
||||
test/e2e/videos
|
||||
test/e2e/screenshots
|
||||
test/e2e/downloads
|
||||
|
|
|
|||
|
|
@ -82,8 +82,8 @@
|
|||
|
||||
- ``yarn run mock``: 使用\ `rap2 <http://rap2.taobao.org/>`__\ 工具
|
||||
mock 接口
|
||||
- ``yarn run dev``: 使用实际接口，需要将\ ``webpack.dev.js``\ 文件第 47
|
||||
行的 “http://pre.xxx.com” 修改为实际地址
|
||||
- ``yarn run dev``: 使用实际接口，可复制 \ ``config/config.yaml``\ 到
|
||||
\ ``config/local_config.yaml``\ ，将 \ ``server``\ 替换为正确的地址
|
||||
- ``yarn run build``: 构建打包，可将生成的 dist 目录的内容交给后端
|
||||
|
||||
文档
|
||||
|
|
|
|||
|
|
@ -82,9 +82,9 @@ Under the root directory, with ``package.json`` in the same place.
|
|||
|
||||
- ``yarn run mock``: Use the mock interface of
|
||||
`rap2 <http://rap2.taobao.org/>`__
|
||||
- ``yarn run dev``: To use the actual interface, please change the
|
||||
"http://pre.xxx.com" in line 47 into the real address in file
|
||||
``webpack.dev.js``.
|
||||
- ``yarn run dev``: To use the actual interface, you can copy
|
||||
``config/config.yaml`` to ``config/local_config.yaml`` , and
|
||||
replace the ``server`` value with the correct address.
|
||||
- ``yarn run build``: Build packages and then you can hand over the
|
||||
contents of the generated *dist* directory to the back end.
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
host: 0.0.0.0
|
||||
port: 8088
|
||||
server: http://localhost
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
const { isObject } = require('lodash');
|
||||
const { getServerConfig } = require('./utils');
|
||||
|
||||
const { server, port, host } = getServerConfig();
|
||||
|
||||
const getProxyByMap = (apiMap) => {
|
||||
const result = {};
|
||||
Object.keys(apiMap).forEach((key) => {
|
||||
const value = apiMap[key];
|
||||
const base = isObject(value) ? value : { target: value };
|
||||
result[key] = {
|
||||
...base,
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
headers: {
|
||||
Connection: 'keep-alive',
|
||||
},
|
||||
};
|
||||
});
|
||||
return result;
|
||||
};
|
||||
|
||||
const apiMap = {
|
||||
'/api/': server,
|
||||
};
|
||||
|
||||
// eslint-disable-next-line no-console
|
||||
console.log('apiMap', apiMap);
|
||||
const proxy = getProxyByMap(apiMap);
|
||||
|
||||
module.exports = { proxy, host, port };
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const yaml = require('js-yaml');
|
||||
const { merge } = require('lodash');
|
||||
|
||||
const root = (dir) =>
|
||||
`${path.resolve(__dirname, './')}/${dir}`.replace(/(\/+)/g, '/');
|
||||
|
||||
const loadYaml = (filePath) => {
|
||||
try {
|
||||
return yaml.load(fs.readFileSync(filePath), 'utf8');
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const getServerConfig = (key) => {
|
||||
// parse config yaml
|
||||
const config = loadYaml(root('./config.yaml')) || {};
|
||||
|
||||
const tryFile = root('./local_config.yaml');
|
||||
if (fs.existsSync(tryFile)) {
|
||||
// merge local_config
|
||||
const local_config = loadYaml(tryFile);
|
||||
if (typeof local_config === 'object') {
|
||||
merge(config, local_config);
|
||||
}
|
||||
}
|
||||
|
||||
return key ? config[key] : config;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
getServerConfig,
|
||||
root,
|
||||
};
|
||||
|
|
@ -23,17 +23,20 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
|
|||
const common = require('./webpack.common');
|
||||
const theme = require('./theme');
|
||||
|
||||
const server = require('./server.dev');
|
||||
|
||||
const root = (path) => resolve(__dirname, `../${path}`);
|
||||
|
||||
const { host, port, proxy } = server;
|
||||
|
||||
module.exports = (env) => {
|
||||
const API = (env || {}).API || 'mock';
|
||||
|
||||
console.log('API %s', API);
|
||||
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
host,
|
||||
port,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
|
|
@ -53,16 +56,7 @@ module.exports = (env) => {
|
|||
};
|
||||
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'http://localhost',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
headers: {
|
||||
Connection: 'keep-alive',
|
||||
},
|
||||
},
|
||||
};
|
||||
devServer.proxy = proxy;
|
||||
}
|
||||
|
||||
const { version, ...restConfig } = common;
|
||||
|
|
|
|||
|
|
@ -8,40 +8,26 @@ Skyline Console Settings Reference
|
|||
|
||||
- Prepare an accessible backend, for example: ``https://172.20.154.250``
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``:
|
||||
- Add file ``config/local_config.yaml``:
|
||||
|
||||
.. code:: javascript
|
||||
.. code-block:: yaml
|
||||
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'https://172.20.154.250',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
server: https://172.20.154.250
|
||||
|
||||
- Configure access host and port
|
||||
|
||||
- Modify ``devServer.host`` and ``devServer.port``
|
||||
- The default configuration is in ``config/config.yaml``
|
||||
- ``host`` is ``0.0.0.0``
|
||||
- ``port`` is ``8088``
|
||||
- If the current configuration does not need to be changed,
|
||||
the following steps do not need to be operated.
|
||||
- Added file ``config/local_config.yaml``
|
||||
- Add ``host`` and ``port`` configurations
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``
|
||||
.. code-block:: yaml
|
||||
|
||||
.. code:: javascript
|
||||
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
disableHostCheck: true,
|
||||
// progress: true
|
||||
};
|
||||
host: localhost
|
||||
port: 8080
|
||||
|
||||
- Execute in the project root directory, which is the same level as ``package.json``
|
||||
|
||||
|
|
@ -49,6 +35,6 @@ Skyline Console Settings Reference
|
|||
|
||||
yarn run dev
|
||||
|
||||
- Use the ``host`` and ``port`` configured in ``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
|
||||
- Use the ``host`` and ``port`` configured in ``config/config.yaml`` or ``config/local_config.yaml`` to access, such as ``http://localhost:8088``.
|
||||
|
||||
- The front-end real-time update environment used for development is done.
|
||||
|
|
|
|||
|
|
@ -83,9 +83,9 @@ You can also use the following commands:
|
|||
|
||||
- ``yarn run mock``: Use the mock interface of
|
||||
`rap2 <http://rap2.taobao.org/>`__
|
||||
- ``yarn run dev``: To use the actual interface, please change the
|
||||
"http://pre.xxx.com" in line 47 into the real address in file
|
||||
``webpack.dev.js``.
|
||||
- ``yarn run dev``: To use the actual interface, you can copy
|
||||
``config/config.yaml`` to ``config/local_config.yaml`` , and
|
||||
replace the ``server`` value with the correct address.
|
||||
- ``yarn run build``: Build packages and then you can hand over the
|
||||
contents of the generated *dist* directory to the back end.
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,10 @@ Catalog Introduction-Image Version
|
|||
├── Makefile
|
||||
├── README.rst
|
||||
├── config
|
||||
│ ├── config.yaml (The default configuration of host, port, and server during development)
|
||||
│ ├── local_config.yaml (gitignore file, you can configure the host/port/server used in the actual development, if the actual value is different from the default value in config.yaml, you can modify it in this file)
|
||||
│ ├── server.dev.js (Read the custom configuration information used during development)
|
||||
│ ├── utils.js
|
||||
│ ├── theme.js
|
||||
│ ├── webpack.common.js
|
||||
│ ├── webpack.dev.js (Webpack configuration used during development)
|
||||
|
|
|
|||
|
|
@ -36,40 +36,26 @@ Preparation before development
|
|||
|
||||
- Prepare an accessible backend, for example: ``https://172.20.154.250``
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``:
|
||||
- Add file ``config/local_config.yaml``:
|
||||
|
||||
.. code-block:: javascript
|
||||
.. code-block:: yaml
|
||||
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'https://172.20.154.250',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
server: https://172.20.154.250
|
||||
|
||||
- Configure access host and port
|
||||
|
||||
- Modify :guilabel:`devServer.host` and :guilabel:`devServer.port`
|
||||
- The default configuration is in ``config/config.yaml``
|
||||
- ``host`` is ``0.0.0.0``
|
||||
- ``port`` is ``8088``
|
||||
- If the current configuration does not need to be changed,
|
||||
the following steps do not need to be operated.
|
||||
- Added file ``config/local_config.yaml``
|
||||
- Add ``host`` and ``port`` configurations
|
||||
|
||||
- Modify the corresponding configuration in ``config/webpack.dev.js``
|
||||
.. code-block:: yaml
|
||||
|
||||
.. code-block:: javascript
|
||||
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
disableHostCheck: true,
|
||||
// progress: true
|
||||
};
|
||||
host: localhost
|
||||
port: 8080
|
||||
|
||||
- Completed
|
||||
|
||||
|
|
@ -81,7 +67,8 @@ Preparation before development
|
|||
yarn run dev
|
||||
|
||||
- Use the :guilabel:`host` and :guilabel:`port` configured in
|
||||
``config/webpack.dev.js`` to access, such as ``http://localhost:8088``
|
||||
``config/config.yaml`` or ``config/local_config.yaml`` to access,
|
||||
such as ``http://localhost:8088``
|
||||
|
||||
- The front-end real-time update environment used for development is done.
|
||||
|
||||
|
|
|
|||
|
|
@ -26,37 +26,24 @@ English | [Chinese](../../zh/develop/1-ready-to-work.md)
|
|||
|
||||
- Prepare a usable backend
|
||||
- Prepare an accessible backend, for example: https://172.20.154.250
|
||||
- Modify the corresponding configuration in `config/webpack.dev.js`:
|
||||
- Add file ``config/local_config.yaml``:
|
||||
|
||||
```javascript
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'https://172.20.154.250',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
```yaml
|
||||
server: https://172.20.154.250
|
||||
```
|
||||
|
||||
- Configure access host and port
|
||||
- Modify `devServer.host` and `devServer.port`
|
||||
- Modify the corresponding configuration in `config/webpack.dev.js`
|
||||
- The default configuration is in ``config/config.yaml``
|
||||
- `host` is `0.0.0.0`
|
||||
- `port` is `8088`
|
||||
- If the current configuration does not need to be changed,
|
||||
the following steps do not need to be operated.
|
||||
- Added file `config/local_config.yaml`
|
||||
- Add `host` and `port` configurations
|
||||
|
||||
```javascript
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
disableHostCheck: true,
|
||||
// progress: true
|
||||
};
|
||||
```yaml
|
||||
host: localhost
|
||||
port: 8080
|
||||
```
|
||||
|
||||
- Completed
|
||||
|
|
@ -66,7 +53,8 @@ English | [Chinese](../../zh/develop/1-ready-to-work.md)
|
|||
yarn run dev
|
||||
```
|
||||
|
||||
- Use the `host` and `port` configured in `config/webpack.dev.js` to access, such as `http://localhost:8088`
|
||||
- Use the `host` and `port` configured in `config/config.yaml` or
|
||||
`config/local_config.yaml` to access, such as `http://localhost:8088`
|
||||
- The front-end real-time update environment used for development is done.
|
||||
|
||||
# Front-end package used in production environment
|
||||
|
|
|
|||
|
|
@ -101,6 +101,10 @@ English | [Chinese](../../zh/develop/2-catalog-introduction.md)
|
|||
├── Makefile
|
||||
├── README.rst
|
||||
├── config
|
||||
│ ├── config.yaml (The default configuration of host, port, and server during development)
|
||||
│ ├── local_config.yaml (gitignore file, you can configure the host/port/server used in the actual development, if the actual value is different from the default value in config.yaml, you can modify it in this file)
|
||||
│ ├── server.dev.js (Read the custom configuration information used during development)
|
||||
│ ├── utils.js
|
||||
│ ├── theme.js
|
||||
│ ├── webpack.common.js
|
||||
│ ├── webpack.dev.js (Webpack configuration used during development)
|
||||
|
|
|
|||
|
|
@ -26,37 +26,23 @@
|
|||
|
||||
- 准备好可用的后端
|
||||
- 准备好可访问的后端，举个例子：https://172.20.154.250
|
||||
- 修改`config/webpack.dev.js`中的相应配置：
|
||||
- 新增 `config/local_config.yaml` 中的 `server` 配置：
|
||||
|
||||
```javascript
|
||||
if (API === 'mock' || API === 'dev') {
|
||||
devServer.proxy = {
|
||||
'/api': {
|
||||
target: 'https://172.20.154.250',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
```yaml
|
||||
server: https://172.20.154.250
|
||||
```
|
||||
|
||||
- 配置访问的 host 与 port
|
||||
- 修改`devServer.host`与`devServer.port`
|
||||
- 修改`config/webpack.dev.js`中的相应配置
|
||||
- 默认配置在 `config/config.yaml`
|
||||
- `host` 为 `0.0.0.0`
|
||||
- `port` 为 `8088`
|
||||
- 如果当前配置无需变更，则下面的步骤无需操作
|
||||
- 新增 `config/local_config.yaml`
|
||||
- 添加 `host` 与 `port` 配置
|
||||
|
||||
```javascript
|
||||
const devServer = {
|
||||
host: '0.0.0.0',
|
||||
// host: 'localhost',
|
||||
port: 8088,
|
||||
contentBase: root('dist'),
|
||||
historyApiFallback: true,
|
||||
compress: true,
|
||||
hot: true,
|
||||
inline: true,
|
||||
disableHostCheck: true,
|
||||
// progress: true
|
||||
};
|
||||
```yaml
|
||||
host: localhost
|
||||
port: 8080
|
||||
```
|
||||
|
||||
- 搭建完成
|
||||
|
|
@ -66,7 +52,8 @@
|
|||
yarn run dev
|
||||
```
|
||||
|
||||
- 使用`config/webpack.dev.js`中配置的`host`与`port`访问即可，如`http://localhost:8088`
|
||||
- 使用 `config/local_config.yaml` 或 `config/config.yaml` 中配置
|
||||
的 `host` 与 `port` 访问即可，如`http://localhost:8088`
|
||||
- 开发使用的前端实时更新环境搞定。
|
||||
|
||||
# 生产环境使用的前端包
|
||||
|
|
|
|||
|
|
@ -101,6 +101,10 @@
|
|||
├── Makefile
|
||||
├── README.rst
|
||||
├── config
|
||||
│ ├── config.yaml （开发时 host, port, server 的默认配置）
|
||||
│ ├── local_config.yaml （gitignore的文件，可配置实际开发时使用的 host/port/server，如实际使用的值与config.yaml中的默认值不一致，在该文件中修改即可）
|
||||
│ ├── server.dev.js （读取开发时使用的自定义配置信息）
|
||||
│ ├── utils.js
|
||||
│ ├── theme.js
|
||||
│ ├── webpack.common.js
|
||||
│ ├── webpack.dev.js (开发时使用的webpack配置)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
features:
|
||||
- |
|
||||
Add config/config.yaml to set the default configurations of host,
|
||||
port and server. For the development, you can add config/local_config.yaml,
|
||||
to set custom host, port, server, the config/local_config.yaml file is
|
||||
gitignored.
|
||||
Loading…
Reference in New Issue