企业级Devops— 打造完整 CICD 实践指南(四)：Gitlab代码仓库搭建

🛠️ Gitlab代码仓库搭建

🖥️ 机器B中安装

GitLab是一个开源的Git代码仓库系统，GitLab提供了Git存储库管理、代码审查、问题追踪、CI/CD 管道等功能，旨在将开发流程的所有环节集成到一个平台上。

📋 1. 系统要求

🖥️ 操作系统：

支持的Linux发行版，如Ubuntu、Debian、CentOS、RHEL 等。

⚙️ 硬件要求（具体取决于团队规模和项目数量）：

CPU：2 核或更多。
内存：4 GB 或更多（建议 8 GB）。
磁盘：至少 20 GB 可用空间（实际需求取决于代码库和 CI/CD 使用情况）。

🌐 网络要求：

静态IP或域名。
防火墙允许 80（HTTP）和 443（HTTPS）端口。

🚀 2. 安装步骤(Ubuntu 20.04 及以上)

2.1 更新系统

使用以下命令更新系统：

bash 复制代码

sudo apt update && sudo apt upgrade -y

2.2 安装必要的依赖

执行以下命令安装依赖包：

bash 复制代码

sudo apt install -y curl openssh-server ca-certificates tzdata perl

2.3 安装 GitLab

🔹 使用极狐 GitLab 版本进行安装：

bash 复制代码

curl -fsSL https://packages.gitlab.cn/repository/raw/scripts/setup.sh | /bin/bash

sudo apt-get install gitlab-jh

2.4 配置 GitLab

🛠️ 初始化 GitLab 配置

运行以下命令初始化配置：

bash 复制代码

sudo gitlab-ctl reconfigure

🛠️ 配置修改

安装完成后，GitLab会生成默认配置文件。您可以根据需要修改配置文件：

bash 复制代码

sudo vim /etc/gitlab/gitlab.rb

常见配置：

修改external_url以匹配实际域名。
修改默认端口, 这里为18282
配置邮件服务器（用于通知）。
配置HTTPS（可选）。

保存后运行以下命令应用更改：

bash 复制代码

sudo gitlab-ctl reconfigure
sudo gitlab-ctl restart

🔑 2.5 重置 Root 密码

第一次初始化配置后会随机生成一个密码，我们需要重置root密码。

通过查看/etc/gitlab/initial_root_password来查看root密码：

第一次登陆进去后，修改root密码：

📁 Gitlab前后端项目实战

1. 创建组并选择组成员

2. 创建项目

🛠️ 创建项目并设置相关配置

3. 克隆项目

🔄 克隆项目到本地：

同样的步骤创建release-frontend并克隆：

4. 代码实现

后端

可以直接从我的github获取release-test已写好的代码。

🚀 Spring Boot 后端开发

IDEA创建SpringBoot项目
添加Controller

java 复制代码

@RestController
public class TestController {

    @Resource
    private TestService testService;

    @GetMapping("/api/test")
    public String test() {
        return "test";
    }

    @GetMapping("/user/user-info")
    public String user() {
        return "user";
    }

    @GetMapping("/demo/demo")
    public String demo() {
        return "demo";
    }
}

后端端口：30001

前端

本案例使用Vite。Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用Rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

Vite意在提供开箱即用的配置，同时它的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。

Vite的构建速度是真快！！！⚡⚡⚡

📁 创建项目：

可以直接从我的github获取release-frontend已写好的代码。

bash 复制代码

npm create vite release-frontend

用Vscode打开release-frontend。

编写App.tsx：

js 复制代码

import { useEffect } from 'react'
import './App.css'


function App() {

  useEffect(() => {
    
  }, [])
  

  const clickTest = () => {
    fetch('/api/test').then(ress => ress.text())
    .then(res => {
      console.log(res);
    })
  }

  const clickUser = () => {
    fetch('/user/user-info').then(ress => ress.text())
    .then(res => {
      console.log(res);
    })
  }

  return (
    <>
      <button onClick={clickTest}>api test</button>
      <button onClick={clickUser}>user</button>
      
    </>
  )
}

export default App

🔌 配置前后端联调代理

vite.config.ts中添加代理，并和后端联调成功✅：

js 复制代码

import { useEffect } from 'react'
import './App.css'


function App() {

  useEffect(() => {
    
  }, [])
  

  const clickTest = () => {
    fetch('/api/test').then(ress => ress.text())
    .then(res => {
      console.log(res);
    })
  }

  const clickUser = () => {
    fetch('/user/user-info').then(ress => ress.text())
    .then(res => {
      console.log(res);
    })
  }

  return (
    <>
      <button onClick={clickTest}>api test</button>
      <button onClick={clickUser}>user</button>
      
    </>
  )
}

export default App

💻 依赖安装并启动：

bash 复制代码

npm install
npm run dev

💾 提交前后端代码

不多说，这个都会吧？😉😉😉😉