diff --git a/.gitignore b/.gitignore
index f852aea4..97092098 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,3 +16,4 @@ cypress/config/local_config.yaml
 coverage
 unitCoverage
 .history
+config/local_config.yaml
diff --git a/config/common.js b/config/common.js
deleted file mode 100644
index f4045b76..00000000
--- a/config/common.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright 2021 KubeClipper Authors.
- *
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-module.exports = {
-  devIp: '172.20.150.52:8080',
-};
diff --git a/config/config.yaml b/config/config.yaml
new file mode 100644
index 00000000..d059b814
--- /dev/null
+++ b/config/config.yaml
@@ -0,0 +1 @@
+devIp: xxxxx:8080
diff --git a/config/webpack.dev.js b/config/webpack.dev.js
index f76f8f48..d95b6170 100644
--- a/config/webpack.dev.js
+++ b/config/webpack.dev.js
@@ -23,9 +23,12 @@ const theme = require('./theme');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { devIp } = require('./common');
 const root = (path) => resolve(__dirname, `../${path}`);
 
+const util = require('./util');
+const { getConfig } = util;
+const { devIp } = getConfig();
+
 module.exports = (env = {}) => {
   const devServer = {
     host: 'localhost',
@@ -187,6 +190,7 @@ module.exports = (env = {}) => {
         'process.env': {
           NODE_ENV: JSON.stringify(process.env.NODE_ENV),
           env: JSON.stringify(env),
+          devIp,
         },
       }),
     ],
diff --git a/docs/1-ready-to-work.md b/docs/1-ready-to-work.md
index 8da3a2df..3d4dff0f 100644
--- a/docs/1-ready-to-work.md
+++ b/docs/1-ready-to-work.md
@@ -30,12 +30,10 @@
 - 准备好可用的后端
 
   - 准备好可访问的后端，举个例子：<https://172.20.150.52:8080>
-  - 修改`config/common.js`中的相应配置：
+  - 修改`config/config.yaml`中的相应配置：
 
     ```javascript
-    module.exports = {
-      devIp: '172.20.150.52:8080',
-    };
+    devIp: 'xxxx:8080',
     ```
 
 - 配置访问的 host 与 port
diff --git a/src/components/Terminal/index.jsx b/src/components/Terminal/index.jsx
index 51fe6093..d60182d1 100644
--- a/src/components/Terminal/index.jsx
+++ b/src/components/Terminal/index.jsx
@@ -16,7 +16,6 @@
 import React, { Suspense } from 'react';
 import { getWebSocketProtocol } from 'utils';
 import ContainerTerminal from './terminal';
-import { devIp } from '../../../config/common';
 
 const BG_COLOR = '#181d28';
 
@@ -27,7 +26,7 @@ export default function SessionTerminal(props) {
     const { protocol, host } = window.location;
 
     const wsIp = `${getWebSocketProtocol(protocol)}://${
-      process.env.NODE_ENV === 'development' ? devIp : host
+      process.env.NODE_ENV === 'development' ? process.env.devIp : host
     }`;
 
     return `${wsIp}${url}`;
diff --git a/src/stores/websocket.js b/src/stores/websocket.js
index 3a7018e0..10d32a8a 100644
--- a/src/stores/websocket.js
+++ b/src/stores/websocket.js
@@ -16,7 +16,6 @@
 import { action, observable, makeObservable } from 'mobx';
 import { getWebSocketProtocol } from 'utils';
 import SocketClient from 'utils/socket.client';
-import { devIp } from '../../config/common';
 
 export default class WebSocketStore {
   message = {};
@@ -30,7 +29,7 @@ export default class WebSocketStore {
 
   get host() {
     return process.env.NODE_ENV === 'development'
-      ? devIp
+      ? process.env.devIp
       : window.location.host;
   }