一、新建前后端项目

一切从一个空文件夹开始~

后端项目

1、新建maven项目，JDK8版本，创建本地git仓库

2、配置maven版本，JDK版本

3、初始化内容提交Git

前端项目

1、创建vite+react+ts项目

2、npm install安装依赖，npm run dev 启动项目

3、创建Git仓库，初始化内容提交Git

二、关联GitHub仓库

创建前后端仓库

本地关联远程仓库

# 后端项目根路径执行

# 本地git添加远程仓库地址
# git remote add [远程仓库名(自定义)] [远程仓库地址]
git remote add origin git@github.com:pig-gua/chat-ai-app.git

# 当前分支重命名为master
# git branch -M [新分支名]
git branch -M master

# 推送当前分支到远程的master分支，并建立跟踪关系
# git push -u [远程仓库名] [远程分支名]
git push -u origin master

# 前端项目根路径执行

# 本地git添加远程仓库地址
# git remote add [远程仓库名(自定义)] [远程仓库地址]
git remote add origin git@github.com:pig-gua/chat-ai-web.git

# 当前分支重命名为master
# git branch -M [新分支名]
git branch -M master

# 推送当前分支到远程的master分支，并建立跟踪关系
# git push -u [远程仓库名] [远程分支名]
git push -u origin master

推送初始化记录

三、配置CI/CD

后端项目

准备配置文件

在pom.xml文件中修改打包配置，目前前期先从单体项目开始，使spring-boot-maven-plugin插件，指定启动cloud.abaaba.ChatApplication进行打包。在实际企业开发中，基本很少有这种简单的单体项目，在架构方面通常会采用聚合项目的方式，分成若干个微服务，每个微服务又会分boot domain repo spi等小的jar包，以此来达到架构解耦的目的。这类复杂项目的打包方式，后面看情况安排~

<plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
    <version>2.3.0.RELEASE</version>
    <configuration>
        <mainClass>cloud.abaaba.ChatApplication</mainClass>
        <skip>false</skip>
    </configuration>
    <executions>
        <execution>
            <id>repackage</id>
            <goals>
                <goal>repackage</goal>
            </goals>
        </execution>
    </executions>
</plugin>

这里将所有依赖都打进了一个jar包，可以通过手动打包的方式，验证jar包是否可用。

# 手动打包，在target目录下得到jar包
mvn clean package

# 运行jar包
java -jar xxx.jar

在小型项目中，可能会采用在Linux服务器上直接后台运行jar包的方式进行启动，这种场景下需要考虑Linux输出的处理，避免大量日志占满磁盘空间引发生产问题。

# 后台运行jar包，控制台输出重定向到/dev/null
nohup java -jar xxx.jar >/dev/null 2>&1 &

这里为了方便后续管理，采用容器化技术进行部署，所以还需要Dockerfile文件，在其中指定镜像构建方式步骤。

# 这里使用本地Harbor仓库地址，可换为公共仓库地址
FROM 192.168.0.20:80/library/openjdk:8

# 添加时区环境变量，亚洲，上海
ENV TimeZone=Asia/Shanghai
# 使用软连接，并且将时区配置覆盖/etc/timezone
RUN ln -snf /usr/share/zoneinfo/$TimeZone /etc/localtime && echo $TimeZone > /etc/timezone

# 将jar包复制到容器中
ADD target/chat-ai-app-1.0.0.jar /chat-ai-app.jar
# 启动
ENTRYPOINT ["java","-jar","/chat-ai-app.jar"]

配置流水线

Jenkins配置流水线，先在Jenkins容器中创建ssh的公钥和私钥，把公钥配置在github上。（先在容器git clone拉一遍代码，会提示是否添加指纹，输入yes ，后续才能在页面操作时，避免没有添加指纹无法成功拉代码的坑。）在Jenkins上配置ssh凭据，使用此凭据去拉代码到工作空间。

配置maven，确保使用和本地相同版本的maven。

maven成功打包后，编写部署脚本，此处脚本内容没有参考意义，要具体环境具体分析。此处的大致思路是：

1、[CI/CD服务器]：构建镜像

2、[CI/CD服务器]：推送镜像到私有仓库

3、[CI/CD服务器]：删除临时镜像

4、[CI/CD服务器]：登录目标服务器执行发布脚本

5、[目标服务器]：停服务，删容器，删除上一个版本镜像

6、[目标服务器]：拉新镜像，启动

7、[目标服务器]：删除临时脚本文件

至此CI/CD就配好咯，后续怎么触发，看个人需求了。可以推完代码，自动触发构建发布~这里我是需要发布的时候，手动登录Jenkins进行发布的。

前端项目

本地测试构建

测试本地是否能成功build，我这里使用yarn进yarn buid，成功构建会出现dist包，失败大概率是因tsc -b 的检查。虽然很麻烦，但推荐还是不要删掉。

准备配置文件

Nginx转发配置，监听80端口，/api开头的请求去除首层后转发至后端服务，其余请求转发至前端静态资源dist 包。

# 全局参数
user nginx;              # Nginx进程运行用户
worker_processes auto;   # Nginx工作进程数，通常设置为CPU核数
error_log /var/log/nginx/error.log warn;    # 错误日志路径和日志级别
pid /run/nginx.pid;      # 进程PID保存路径

# 定义事件模块
events {
    worker_connections 1024;    # 每个工作进程最大并发连接数
    use epoll;                  # 使用epoll网络模型，提高性能
    multi_accept on;            # 开启支持多个连接同时建立
}

# 定义HTTP服务器模块
http {

    include mime.types;

    # 定义日志格式，main是默认的日志格式
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
        '$status $body_bytes_sent "$http_referer" '
        '"$http_user_agent" "$http_x_forwarded_for"';

    # 默认访问日志保存路径和格式
    access_log /var/log/nginx/access.log main;

    server {
        listen 80;
        # server_name example.com;

        location /api {
            proxy_pass http://192.168.0.100:10523;
            rewrite  ^/api/(.*)$ /$1 break;
        }

        location / {
            root /dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

Dockerfile构建配置，拉取基础nginx镜像，添加构建后的文件，和nginx配置。

# 此处从本地Harbor仓库拉取镜像，也可以换成官方仓库
FROM 192.168.0.20:80/library/nginx:latest

# 添加编译后的静态文件
ADD ./dist /dist

# 添加nginx配置文件
ADD ./nginx.conf /etc/nginx/nginx.conf

配置流水线

跟后端类似，不详细写了哈~比较大的区别就是构建指令。

转发配置

使用开源工具进行转发，公网9107端口，到私网前端nginx服务。

准备DNS解析

先得有域名，然后配置~

准备SSL证书

SSL证书有免费的Let's Encrypt ，记得配置自动续期替换，要不每三个月得手动更换，太麻烦了。

互联网入口转发

互联网入口监听80/443，根据域名进行转发配置。其他端口记得关闭防火墙，要不容易被攻击哈~

为了安全考虑，通常会再配置一层WAF，推荐长亭WAF，社区版免费~

蜜罐就看需求了，安全要求比较高就搞一个，免费的推荐Hfish~

效果展示

Vite + React + TS （项目刚初始化，网站名没换~明天再换~）

三、核心技术点

1、操作系统相关

• 如何配置(win系统、Linux系统)环境变量

2、maven相关

• 理解maven配置文件内容

• 了解如何设置maven的仓库settings.xml文件

• 了解如何设置maven本地库路径

3、Git相关

• 理解Git存储逻辑：暂存、本地库、远程库、本地分支、远程分支、追踪

• 熟练使用Git相关命令

4、后端JDK环境，前端Node环境

5、DNS解析原理

6、SSL证书原理

7、CDN原理（这里没配CDN哈，有点贵，容易被刷流量，但应该有一定的理解）