前端自动化部署方案原来这么简单（jenkins + docker + gitlab）前言你将会学会学会使用docke

前言

如何快速构建自己的应用

作为前端小伙伴你熟悉部署流程吗

npm run build 后面的事情呢

gitlab + genkins （CI/CD）

完整的一套操作模式

好文不多，记得点赞收藏哦

你将会学会

学会使用docker
学会使用gitlab、jenkins等操作命令
学会jenkins + gitlab devops自动化部署方案
跟着手把手敲一遍，成就感满满

docker 安装

可以直接安装桌面版，下载地址

检查docker是否安装成功

docker常用的命令

docker images 查看本地安装的镜像
docker image ls 查看镜像
docker image rm [镜像id] 删除镜像
docker rmi [镜像id1] [镜像id2] 删除多个镜像
docker ps  查看已经启动的容器
docker ps -a 查看本地所有容器
docker rm [容器id] 删除容器

拉取一个镜像，然后启动

docker pull nginx #默认拉取nginx:latest 版本
docker run -id -p 3009:80 --restart always --privileged=true --name nginx nginx:latest
-i 交互式操作
-d 表示后台运行
-p 3009:80 端口映射
--restart always  容器自启动
--privileged=true  让容器获取宿主机root权限
--name nginx  设置容器名称为nginx
nginx:latest 镜像的名称，这里也可以写镜像ID

打开浏览器，检查启动是否成功

交互式操作
docker exec -it nginx /bin/bash # 进入容器

进入容器退出操作
exit

DockerFile

可以这么理解，dockerfile不用我们在命令行中配置很多参数，而是把配置放在一个文件中管理

到官网注册账号：hub.docker.com/


docker build -t react-admin-vite:latest .
执行当前的dockerfile 制作镜像 名称为my-app 版本号latest  .表示当前文件目录执行打包

登录
docker login
发布
docker push 注册用户名/镜像名

检查远程仓库是否上传成功

gitlab 和 jenkins镜像安装

上面我们已经掌握了docker的基本用法
现在我们升级下使用docker-compose命令，集成多个镜像同时发布

docker-compose

安装了桌面端的docker，其实已经集成了docker-compose

docker-compose常用命令

docker-compose upc # 启动所有服务
docker-compose up -d # 在后台运行服务
docker-compose up --build # 强制重新构建服务


docker-compose down # 停止并移除服务
docker-compose down -v #停止服务并移除卷


docker-compose exec service_name /bin/sh # 进入容器的交互式命令行
docker-compose exec service_name ls -l # 执行特定命令


docker-compose stop：停止服务，但不移除容器


docker-compose start：启动已停止的服务


docker-compose restart：重启服务


docker-compose pause：暂停服务


docker-compose unpause：恢复web容器


docker-compose pull：拉取服务依赖的镜像


docker-compose push：推送本地镜像到 Docker 镜像仓库


docker-compose build：构建或重新构建服务


docker-compose rm：移除已停止的容器


docker-compose top：查看各个服务容器内运行的进程


docker-compose version：显示 Docker Compose 的版本号

验证一下是否安装

创建`docker-compose.yml`文件

执行docker-compose up -d # 在后台运行服务
启动成功

坑1：现在访问localhost:9004 应该打不开页面解决方案

docker exec -it gitlab /bin/bash

# 修改gitlab.rb
vi /etc/gitlab/gitlab.rb
## 加入如下
# gitlab访问地址，可以写域名。如果端口不写的话默认为80端口
external_url 'http://10.119.26.29'
# ssh主机ip
gitlab_rails['gitlab_ssh_host'] = '10.119.26.29'
# ssh连接端口
gitlab_rails['gitlab_shell_ssh_port'] = 9922

# 让配置生效
gitlab-ctl reconfigure

### 注意不要重启，/etc/gitlab/gitlab.rb文件的配置会映射到gitlab.yml这个文件，由于咱们在docker中运行，在gitlab上生成的http地址应该是http://10.119.26.29:9004,所以，要修改下面文件

# 修改http和ssh配置
vi /opt/gitlab/embedded/service/gitlab-rails/config/gitlab.yml

  gitlab:
    host: 10.119.26.29
    port: 9004 # 这里改为9004
    https: false


# 重启
gitlab-ctl restart
# 退出容器
exit

打开浏览器看下，恭喜搞定

jenkins配置启动

如何找初始密码

解决方案

进入容器 docker exec -it jenkins /bin/bash

查看初始密码 /var/jenkins_home/secrets/initialAdminPassword

我们按照提示安装推荐插件即可

插件镜像替换像上面查询初始密码一样,先进入容器

替换为
http://mirror.xmission.com/jenkins/updates/update-center.json

gitlab与jenkins关联

1. docker exec -it jenkins bash 进入jenkins容器
2. ssh-keygen -t rsa -C chrisyao0208@163.com # 一路回撤
3. cd ~/.ssh
4. cat id_rsa.pub
5. -   将生成的密钥`id_rsa.pub`复制粘贴到gitlab中`SSH Keys`设置秘钥