动手打造一个包含自定义rancher/ui的docker镜像

2023-09-18 23:52:09

前言

我们知道启动一个rancher服务只需要运行下面这行代码就行了。但如果我们想要对rancher的ui做一些自定义的定制，除了使用官方推荐的修改ui接口外，能否将自定义的UI打也打包成一个镜像。官方推荐的自定义UI部署方式，build时必须确定访问域名，部署到五个机器就要build五次。

本文将指导您如何创建包含自定义rancher/ui的docker镜像。您将学习如何修改rancher ui，以及如何使用docker构建自定义镜像。最后，您还将了解如何部署包含自定义ui的rancher server。

修改rancher UI

克隆rancher/ui仓库

git clone https://github.com/rancher/ui.git

cd ui

修改src/app/components/Header/index.js文件

import React from 'react';
import { Link } from 'react-router-dom';
import { Navbar, Nav, NavItem } from 'reactstrap';

const Header = () => (
  <Navbar color="light" light expand="md">
    <Link className="navbar-brand" to="/">Rancher</Link>
    <Nav className="ml-auto" navbar>
      <NavItem>
        <Link className="nav-link" to="/clusters">Clusters</Link>
      </NavItem>
      <NavItem>
        <Link className="nav-link" to="/projects">Projects</Link>
      </NavItem>
      <NavItem>
        <Link className="nav-link" to="/nodes">Nodes</Link>
      </NavItem>
      <NavItem>
        <Link className="nav-link" to="/storage">Storage</Link>
      </NavItem>
      <NavItem>
        <Link className="nav-link" to="/settings">Settings</Link>
      </NavItem>
    </Nav>
  </Navbar>
);

export default Header;

将修改后的文件提交到git仓库

git add src/app/components/Header/index.js
git commit -m "修改rancher ui"

推送修改到远程仓库

git push origin master

构建docker镜像

创建Dockerfile文件

FROM rancher/rancher:latest

RUN mkdir -p /usr/share/nginx/html/static/dist
COPY dist/ /usr/share/nginx/html/static/dist

CMD ["nginx", "-g", "daemon off;"]

构建docker镜像

docker build -t my-rancher-ui .

部署rancher server

创建rancher server的yaml文件

apiVersion: apps/v1
kind: Deployment
metadata:
  name: rancher-server
  namespace: cattle-system
spec:
  selector:
    matchLabels:
      app: rancher-server
  template:
    metadata:
      labels:
        app: rancher-server
    spec:
      containers:
      - name: rancher-server
        image: my-rancher-ui
        ports:
        - containerPort: 8080
          name: http
        - containerPort: 443
          name: https