Kubesphere 前端开发环境搭建

环境配置

安装 nodejs

1. 下载 nodejs

   wget https://nodejs.org/dist/v12.22.12/node-v12.22.12-linux-x64.tar.xz

2. 解压二进制安装包

   tar -C /usr/local/ -xvf node-v12.22.12-linux-x64.tar.xz

3. 修改并移动文件

   mv /usr/local/node-v12.22.12-linux-x64 /usr/local/node

4. 在 /etc/profile 文件中设置环境变量

   # Nodejs
   export PATH=$PATH:/usr/local/node/bin
   # 刷新
   source /etc/profile

5. 配软连接

   # 相当于全局变量，在任何文件夹都能查看版本信息
   ln -s /usr/local/node/bin/node /usr/local/bin/
   ln -s /usr/local/node/bin/npm /usr/local/bin/

安装 yarn

Yarn是一个由Facebook发布的软件包管理器，同时也可用作项目管理工具。它的主要功能是替代npm，用来更有效地管理和处理用JavaScript编写的软件包。无论你的项目规模是大是小，无论项目类型是单体型还是多仓库型，无论用户身份是业余爱好者还是企业用户，Yarn都可以为你提供满足需求的解决方案。

 # 使用 npm 包管理工具的命令安装即可
 npm install -g yarn

本地环境搭建

1. 下载 console 代码

2. 修改配置文件连接 ks-apiserver

     Ks-console 需要访问 ks-apiserver，下面提供三种不同场景下的后端环境配置方法：

   1. 场景一：本地搭建 ks-console 访问现有集群 ks-apiserver（Nodport 方式）

          后端 ks-apiserver 使用已安装的 kubeSphere 环境，更新 svc 为 nodeport 类型来对外开放 ks-apiserver 服务，开启调试端口 30881。然后就可以通过<node_ip>:<30881> 端口访问 ks-apiserver 服务，命令如下:

      # 以 nodeport 形式暴露
      kubectl -n kubesphere-system patch svc ks-apiserver -p '{"spec":{"type":"NodePort","ports":[{"name":"ks-apiserver","port":80,"protocal":"TCP","targetPort":9090,"nodePort":30881}]}}'
      # 查看是否成功
      kubectl get svc -n kubesphere-system | grep ks-apiserver

          修改配置文件 kubesphere/console/server/config.yaml 中的 apiServer 信息为如下内容：

      # --------------------修改 apiServer 信息为------------------------
      ……
        apiServer:
          url: http://[后端ip]:30881
          wsUrl: ws://[后端ip]:30881
      ……
      # -----------------------------------------------------------------

   2. 场景二：本地搭建 ks-console 访问现有集群 ks-apiserver（Telepresence 方式）

   3.     安装 Telepresence 参考

      # 使用 telepresence 连接集群
      telepresence connect

          修改配置文件 kubesphere/console/server/config.yaml 中的 apiServer 信息为如下内容：

      # --------------------修改 apiServer 信息为------------------------
      ……
        apiServer:
          url: http://ks-apiserver.kubesphere-system
          wsUrl: ws://ks-apiserver.kubesphere-system
      ……
      # -----------------------------------------------------------------

   4. 场景三：本地搭建的 ks-console 直接访问本地搭建的 ks-apiserver

          环境搭建参考

          修改配置文件 kubesphere/console/server/config.yaml 中的 apiServer 信息为如下内容：

      # --------------------修改 apiServer 信息为------------------------
      ……
        apiServer:
          url: http://localhost:9090
          wsUrl: ws://localhost:9090
      ……
      # -----------------------------------------------------------------

3. 启动本地调试

   # 切换淘宝镜像，执行速度更快
   yarn config set registry https://registry.npm.taobao.org
   # 安装 package.json 中所有的文件
   yarn install 
   # 启动（window中调试按下方提示中修改）
   yarn start

     执行成功就可以在页面使用 http://[前端 ip]:8000 进行访问了

   提示：如果是在 windows 环境下调试，因为单引号识别问题，需要修改 console/package.json 文件中的相关命令，如下图所示，将上面的命令改为下面的格式：