Docker系列-部署基于Github Actions自动化构建的Team Nav的docker镜像-琉璃红梅

一直想部署一个好用点的导航网站，之前部署过 OneNav、花森导航 等许多导航网站，但是总感觉差点意思，有些导航网站加入了订阅机制比如OneNav，免费版有诸多限制；花森导航，个人感觉比较美观，但因其加入了服务器监控、文章发布等功能又显得比较臃肿，主要是这些额外的功能与我的博客重复了，此外它的升级比较麻烦一点。我个人希望部署的导航网站是不想加入这些杂七杂八的功能的，偶然间，发现了这一个名为 团队导航 的导航网站而且在持续更新，前端界面非常简洁与 WebStack 类似，并且支持二级和三级导航。

部署完成后个人感觉默认字体实在不够美观，提了一个issue，希望作者可以加一下自定义样式的配置项，后面又感觉这种自定义的事情还是自己做算了，其实单纯更改一下字体是非常简单的，主要问题在于打包，因为我的服务器全是部署的docker应用，所以即使有博主列出了详细的打包步骤但是缺少打包环境也是比较难办，比如需要java8、node等，而且纯粹打包一下docker镜像就需要在服务器上安装这些东西也实在没有什么必要。好在可以利用Github Actions，在AI的帮助下（准确的说是DeepSeek v3），很快便得到了想要的工作流文件。此工作流在手动创建Release时触发，不仅可以项目构建，还可以将镜像push到Docker Hub，Docker Hub是一个国外的在线Docker镜像仓库，可以进行docker镜像的上传、下载以及管理，而我的服务器在国外所以可以以较快的速度拉取Docker Hub中存储的镜像，非常方便。

1.利用Github Actions构建并push所需的docker镜像

1.1 创建docker仓库

首先在 Docker Hub 注册一个账号，并创建名为 team-nav 的docker仓库，可见性随意，如果设置为Public，在pull时不需要身份校验，而设置为Private，在pull时需要身份校验否则pull失败。

1.2 获取DOCKER_HUB_USERNAME与DOCKER_HUB_TOEKN

DOCKER_HUB_USERNAME：创建Docker Hub时所起的用户名也是命名空间，可以前往个人中心获取

DOCKER_HUB_TOEKN：Docker Hub生成的用于权限管理的Token，同样需要前往个人中心获取

1.2.1 点击个人的头像->Account settings页面

1.2.2 生成token

点击 Generate new token

进行token的设置，然后 Generate

token只显示一次，务必保存生成的token

1.3 获取GH_TOKEN

1.3.1 点击个人头像来到个人中心，点击 Settings

1.3.2 来到Settings页面，点击最下方的Developer settings

1.3.3 生成token

注意需要勾选repo和workflow，然后点击最下方的Generate token生成

同样的token只显示一次，注意保存

1.4 工作流配置

1.4.1 创建仓库

1.4.2 克隆远程仓库team-nav

git clone git@github.com:tuituidan/team-nav.git

1.4.3 切断克隆仓库与原仓库的关联

# 查看仓库关联情况
git remote -v
# origin  git@github.com:tuituidan/team-nav.git (fetch)
# origin  git@github.com:tuituidan/team-nav.git (push)
cd team-nav
git remote rm origin

1.4.4 关联自己创建的仓库

与自己创建的仓库建立联系并进行个性化的修改后进行推送，我这里就是更改了一下默认字体，所以省略了相关操作

git remote add origin git@github.com:Einstein-schrodinger/team-nav.git
git push -u origin develop

1.4.5 创建工作流文件

进入我们刚刚创建的仓库，创建工作流

该工作流在手动创建Release时触发，触发后在ubuntu环境下安装java8、node16、maven这些用于打包的环境与工具，接着进入web目录安装前端所需的依赖，之后返回根目录运行maven命令构建项目生成jar包，接着使用同级目录下的Dockerfile文件构建docker镜像，最后将镜像push到Docker Hub并将压缩后的jar包Release。因为push到Docker Hub需要身份的校验，所以需要配置用户名以及Token，将压缩的jar包Release到Github也需要身份的校验，同样需要配置Token，具体内容如下

name: Build distribution Docker Image

on:
  release:
    types:
      - created

jobs:
  # jod的id
  build:
    # 运行的容器环境
    runs-on: ubuntu-latest
    steps:
      # 检出仓库
      - name: Checkout
        uses: actions/checkout@v3
        
      #  缓存Node模块
      - name: Cache Node.js modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
            
      #  缓存Maven
      - name: Cache Maven packages
        uses: actions/cache@v3
        with:
          path: ~/.m2
          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
          restore-keys: |
            ${{ runner.os }}-maven-
            
     # 安装Java8
      - name: Set up JDK 8
        uses: actions/setup-java@v3
        with:
          java-version: '8'
          distribution: 'adopt'
      
     # 安装Node16
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
      
      # 安装Maven
      - name: Install Maven
        run: |
          sudo apt update
          sudo apt install -y maven
          
      # 安装前端页面所需的依赖
      - name: Install Node.js dependencies
        run: |
          cd web
          npm install
          npm install @vue/cli-service -g
          cd ..

      # Maven构建项目
      - name: Build with Maven
        run: |
          mvn clean package -Dmaven.npm.skip=false
          
      # 构建Docker镜像
      - name: Build Docker image
        run: |
          docker build -t ${{ secrets.DOCKER_HUB_USERNAME }}/team-nav:${{ github.event.release.tag_name }} .

      # 查看构建的Docker镜像
      - name: List Docker images
        run: |
          docker images
          
      # 登录Docker Hub
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_HUB_USERNAME }}
          password: ${{ secrets.DOCKER_HUB_TOKEN }}
          
      # Push构建的Docker镜像到Docker Hub
      - name: Push Docker image
        run: |
          # 给Docker镜像打上标签，并且将该版本标签设置为latest版本
          docker tag ${{ secrets.DOCKER_HUB_USERNAME }}/team-nav:${{ github.event.release.tag_name }} ${{ secrets.DOCKER_HUB_USERNAME }}/team-nav:latest
          docker push ${{ secrets.DOCKER_HUB_USERNAME }}/team-nav:${{ github.event.release.tag_name }}
          docker push ${{ secrets.DOCKER_HUB_USERNAME }}/team-nav:latest

      # 打包Maven构建的tar包
      - name: Compress target
        run: |
          tar -zcvf target/team-nav.tar.gz target/team-nav.jar
          
       # 将tar包发布
      - name: Create Release
        uses: softprops/action-gh-release@v2
        with:
          # Release需要进行token校验
          token: ${{ secrets.GH_TOKEN }}
          tag_name: ${{ github.event.release.tag_name }}
          name: ${{ github.event.release.tag_name }}
          files: |
            target/team-nav.jar
            target/team-nav.tar.gz

创建上下文Secrets，这样在工作流文件中可以使用在Secrets中定义的变量代替敏感信息即不以明文显示

需要创建的三个变量如下，变量名称不要更改，然后填入前面生成的token等信息

至此工作流文件及其所需的变量创建完毕，之后在手动创建release时会自动触发执行工作流文件中的代码

等待大约7、8分钟后执行完毕，如果没有问题会显示绿色，如果报错按照给出的提示修改即可

成功之后可以看到，Release中多了两个文件分别是 team-nav.jar 与 team-nav.tar.gz

在Docker Hub也可以看到push的镜像版本，这里还push一个latest版本是为了方便后续docker服务的升级

1.5 push到阿里云docker镜像库

由于Docker Hub是国外的docker镜像服务网站，如果服务器是国内的，建议将docker镜像存储在阿里云，以防出现pull失败或者pull缓慢的问题

1.5.1 创建个人实例

前往 阿里云容器镜像服务 创建个人实例

1.5.2 创建命名空间

点击个人实例，创建命名空间

1.5.3 创建镜像仓库

选择本地仓库即可

1.5.4 获取访问凭证

设置固定密码，用于登录校验

此外还需要用到用于登录校验的用户名和仓库域名，即username和url

1.5.5 定义Secrets变量

这样我们在Secrets中定义的变量有如下四个

1.5.6 修改工作流文件

相应的工作流文件需要修改为如下内容

name: Build distribution Docker Image

on:
  release:
    types:
      - created

jobs:
  # jod的id
  build:
    # 运行的容器环境
    runs-on: ubuntu-latest
    steps:
      # 检出仓库
      - name: Checkout
        uses: actions/checkout@v3
        
      #  缓存Node模块
      - name: Cache Node.js modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
            
      #  缓存Maven
      - name: Cache Maven packages
        uses: actions/cache@v3
        with:
          path: ~/.m2
          key: ${{ runner.os }}-maven-${{ hashFiles('**/pom.xml') }}
          restore-keys: |
            ${{ runner.os }}-maven-
            
     # 安装Java8
      - name: Set up JDK 8
        uses: actions/setup-java@v3
        with:
          java-version: '8'
          distribution: 'adopt'
      
     # 安装Node16
      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 16
      
      # 安装Maven
      - name: Install Maven
        run: |
          sudo apt update
          sudo apt install -y maven
          
      # 安装前端页面所需的依赖
      - name: Install Node.js dependencies
        run: |
          cd web
          npm install
          npm install @vue/cli-service -g
          cd ..

      # Maven构建项目
      - name: Build with Maven
        run: |
          mvn clean package -Dmaven.npm.skip=false
          
      # 构建Docker镜像
      - name: Build Docker image
        run: |
          # 仓库域名/命名空间/仓库名:标签号
          docker build -t ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}/sqwfly/team-nav:${{ github.event.release.tag_name }} .

      # 查看构建的Docker镜像
      - name: List Docker images
        run: |
          docker images
          
      # 登录阿里云镜像服务
      - name: Log in to Aliyun Docker Registry
        uses: docker/login-action@v3
        with:
          # Registry的域名
          registry: ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}
          username: ${{ secrets.ALIYUN_DOCKER_REGISTRY_USERNAME }}
          password: ${{ secrets.ALIYUN_DOCKER_REGISTRY_PASSWORD }}
          
      # Push构建的Docker镜像到阿里云镜像服务
      - name: Push Docker image
        run: |
          # 给Docker镜像打上标签，并且将该版本标签设置为latest版本
          # 仓库域名/命名空间/仓库名:标签号
          docker tag ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}/sqwfly/team-nav:${{ github.event.release.tag_name }} ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}/${{ secrets.ALIYUN_DOCKER_REGISTRY_USERNAME }}/team-nav:latest
          docker push ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}/sqwfly/team-nav:${{ github.event.release.tag_name }}
          docker push ${{ secrets.ALIYUN_DOCKER_REGISTRY_URL }}/sqwfly/team-nav:latest

      # 打包Maven构建的tar包
      - name: Compress target
        run: |
          tar -zcvf target/team-nav.tar.gz target/team-nav.jar
          
       # 将tar包发布
      - name: Create Release
        uses: softprops/action-gh-release@v2
        with:
          # Release需要进行token校验
          token: ${{ secrets.GH_TOKEN }}
          tag_name: ${{ github.event.release.tag_name }}
          name: ${{ github.event.release.tag_name }}
          files: |
            target/team-nav.jar
            target/team-nav.tar.gz

同样的可以在阿里云镜像服务看到push的两个docker镜像

2.部署team-nav服务

由于本文的重点在于如何使用Github Actions构建并push所需的docker镜像，所以对于如何部署team-nav服务只列举关键步骤，更详细的步骤可以翻看我之前的相关博文，该导航服务的具体使用及其功能可以从官网知晓。

2.1 创建安装目录

mkdir -p /root/data/docker_data/team-nav

2.2 创建docker-compose.yaml并上传至服务器

上传 docker-compose.yaml 文件到 team-nav 目录下

docker-compose.yaml 内容如下：

version: "3"
services:
  teamNav:
    # 镜像的地址需要改为你自己的
    # image: registry.cn-hangzhou.aliyuncs.com/sqwfly/team-nav:latest
    image: sqwdream/team-nav:latest
    container_name: teamNav
    restart: always
    ports:
     # 左侧的映射端口可以根据情况修改
      - 8085:8080
    volumes:
      - ./logs:/logs
      - ./database:/database
      - ./ext-resources:/ext-resources

2.3 team-nav的部署

在同级目录下执行 docker compose up -d 命令，启动应用，部署完成即可访问通过网址 http://ip:8085 访问，默认的用户名与密码为 admin/123456，登陆之后及时修改密码。

第一次启动应用以及后续的升级，都会pull所需的docker镜像，如果存储docker镜像的仓库设置为Private需要先进行登录。

本小节以下内容为将仓库设置为Private的情况，如果是Public可以跳过

Private仓库中的docker镜像在 docker compose pull 之前需要先登录即执行 docker login，校验通过之后才能pull，并且建议pull之后及时注销即执行 docker logout。

如果未登录就执行 docker compose pull，会提示权限不够

root@racknerd-a56326:~/data/docker_data/team-nav# docker compose pull
WARN[0000] /root/data/docker_data/team-nav/docker-compose.yaml: the attribute `version` is obsolete, it will be ignored, please remove it to avoid potential confusion 
[+] Pulling 1/1
 ✘ teamNav Error pull access denied for sqwdream/team-nav, repository does not exist or...                1.1s 
Error response from daemon: pull access denied for sqwdream/team-nav, repository does not exist or may require 'docker login': denied: requested access to the resource is denied

pull存储在Docker Hub的镜像

1.登录

也可以以指定用户名的方式登录即执行 docker login -u sqwdream，这种方式会让你输入密码，不过建议采用验证码的方式

执行 docker login 之后访问该网址 https://login.docker.com/activate，输入所提供的验证码，比如这里的 KZNC-KKTM

root@racknerd-a56326:~/data/docker_data/team-nav# docker login

USING WEB-BASED LOGIN
To sign in with credentials on the command line, use 'docker login -u <username>'

Your one-time device confirmation code is: KZNC-KKTM
Press ENTER to open your browser or submit your device code here: https://login.docker.com/activate

Waiting for authentication in the browser…

登录成功则显示如下内容

WARNING! Your password will be stored unencrypted in /root/.docker/config.json.
Configure a credential helper to remove this warning. See
https://docs.docker.com/engine/reference/commandline/login/#credential-stores

Login Succeeded

2.注销

执行 docker logout 注销登录

root@racknerd-a56326:~/data/docker_data/team-nav# docker logout
Removing login credentials for https://index.docker.io/v1/

pull存储在阿里云的镜像

如果是阿里云镜像，登录要采用如下方式，用户名和仓库域名自行修改，之后会让你输入固定密码

docker login --username=yourusername registry.cn-hangzhou.aliyuncs.com

2.4 team-nav的升级与更新

注意升级时，Private仓库依然需要登录

cd /root/data/docker_data/team-nav

docker compose down   # 停止容器运行

docker compose pull   # 重新拉取镜像

docker compose up -d

2.5 team-nav的卸载

cd /root/data/docker_data/team-nav

docker compose down --rmi all           # 停止容器运行并删除相关镜像

cd ..

rm -rf /root/data/docker_data/team-nav  # 完全删除

3.修改team-nav登录密码

有时可能会忘记了登录密码，导致无法登录后台，而又没有通过邮箱修改密码的方式，所以只能通过访问数据库修改，这里采用的是默认H2数据库，只需要登录H2数据库控制台修改即可。

此处内容已隐藏，「登录可见」

4.参考博文

1.部署企业网站内部导航 Team-Nav 2.0

2.GitHub Actions 入门教程

3.使用Github Actions打包前端项目并自动上传到Releases

4.学会Github Actions自动发布版本

5.Git检出真正意味着什么?

6.给自己的 Python 笔记仓库添加 GitHub Actions 工作流

7.Docker：使用Github Action转存Docker镜像到阿里云私有仓库达到国内加速目的

8.利用github actions和aliyun私有镜像库，使用docker部署Nodejs项目

目录CONTENT

Docker系列-部署基于Github Actions自动化构建的Team Nav的docker镜像