使用Docker+Ngnix+Jenkins实现自动化部署Vue项目

550 阅读4分钟

一 . 首先我们需要准备一个云服务器,并且在上面安装Docker

1. 登陆云服务器:使用SSH或其他远程连接工具登录到云服务器

2. 安装Docker

a.安装依赖软件包

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

b.添加 Docker CE 仓库

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

c.安装 Docker CE:运行以下命令来安装 Docker Community Edition:

sudo yum install docker-ce

d.启动docker服务,并设置开机自启

sudo systemctl start docker
sudo systemctl enable docker

c.验证安装

docker --version

二 . 使用nginx手动部署

1.在Docker中安装nginx镜像

docker pull nginx

2.查看安装好的镜像

docker image ls

截屏2024-03-07 17.53.31.png

三 . 将本地vue项目打包后的dist文件上传到服务器##

1.找到本地项目打包后到dist文件

截屏2024-03-07 10.08.37.png

2.将本地文件上传至服务器的/usr/share/nginx/html/目录(没有的话可以自己创建或者自定义路径,在后面启动容器时映射自定义路径就行)

在这里我使用的是可视化工具Termius,也可以使用scp命令

截屏2024-03-07 10.18.38.png

scp命令上传文件

scp /path/to/local/file username@server_ip:/path/to/remote/directory

四 . 从nginx镜像启动容器并映射服务器中的文件到nginx目录

1.执行命令

docker run -d -p 8080:80 -v /usr/share/nginx/html/dist/:/usr/share/nginx/html --name webtest nginx:latest

2.在浏览器用服务器的IP加映射后的端口访问网站是否已经正常运行

五 . docker拉取jenkins镜像,进行初始化的一些配置

1.执行命令

docker pull jenkins/jenkins

2.在宿主机创建挂载目录

 mkdir -p /home/jenkins/workspace

3.启动jenkins容器

docker run -uroot -d --restart=always --privileged=true  -p 9001:8080 \
 -v /home/jenkins/workspace/:/var/jenkins_home/workspace \
 -v /var/run/docker.sock:/var/run/docker.sock \
-v /usr/bin/docker:/usr/bin/docker \
 --name jenkins jenkins/jenkins:latest

可以看到jenkins容器已经在运行, 映射的端口是9001,在浏览器使用 服务器ip:9001可以访问jenkins进行配置

截屏2024-03-08 11.38.02.png

4.登陆jenkins

按照提示,我们进入到jenkins容器内部,进入到这个路径下查看密码 截屏2024-03-08 11.40.11.png

 docker exec -it -uroot jenkins bash # -uroot 以管理员身份登入容器
 cat /var/jenkins_home/secrets/initialAdminPassword

然后将密码填入,进入到jenkins服务台,如果是新手,建议选择“安装推荐的插件”

截屏2024-03-08 11.48.18.png

这边自己建议填入自己的用户名和密码,如果使用右下角的默认admin账户,在设置中可能会出现一些权限不够的问题。

截屏2024-03-08 11.58.44.png 最终进入到主界面

截屏2024-03-08 13.48.22.png

五 . Jenkins配置##

1.配置Jenkins的密钥

因为我们需要在gitlab、github或者gitee上去拉取代码,所以需要在这里配置。

生成的密钥的时候确保你已经在Jenkins容器内部,不在的话可以重新执行命令

docker exec -it -uroot jenkins bash # -uroot 以管理员身份登入容器

生成密钥

ssh-keygen -t rsa -C "root"

查看公钥

cat /root/.ssh/id_rsa.pub

将这段公钥放入gitlab、github或者gitee中 截屏2024-03-08 13.58.50.png

我使用github做演示,进入github,点击自己的头像,选择settings —— SSH and GPG keys

截屏2024-03-08 14.01.25.png 填入公钥

截屏2024-03-08 14.03.54.png

2.在Jenkins中安装插件

部署vue项目需要安装的插件如下

  • [Publish Over SSH ]
  • [SSH]
  • [Nodejs]

截屏2024-03-08 14.11.09.png

3.github生成access token,依旧点个人头像进入Settings

截屏2024-03-08 14.59.53.png

截屏2024-03-08 15.00.46.png 去生成access token,记得好好保存这个token,因为不能再次在github中查看。 截屏2024-03-08 15.03.02.png

4.在Jenkins中添加凭据

因为访问github和远程服务器都需要账号密码,因此我们需要在这里添加

截屏2024-03-08 15.04.07.png

截屏2024-03-08 15.04.59.png 添加github的凭据,由于github的访问方式更改,在这里我们最好用acces token作为密码 截屏2024-03-08 15.05.33.png 添加服务器的凭据

截屏2024-03-08 15.07.30.png

5.配置SSH

截屏2024-03-08 15.59.08.png

找到SSH remote host填入信息

截屏2024-03-08 15.59.58.png

找到SSH Servers填入信息

截屏2024-03-08 16.16.14.png

截屏2024-03-08 16.17.45.png

六 . 在github设置通知webhook

截屏2024-03-08 16.32.15.png

截屏2024-03-08 17.30.04.png

七 . 在Jenkins配置nodejs

1.在首页点击左侧系统管理——全局工具配置

截屏2024-03-08 17.34.22.png

2.找到Nodejs安装

截屏2024-03-08 17.35.29.png

八 . 新建一个自由风格的任务

1.配置项目 填入项目地址

截屏2024-03-08 17.42.50.png

配置源码管理

截屏2024-03-08 17.42.50.png 选择你要构建的分支

截屏2024-03-08 17.44.11.png 选中这两项

截屏2024-03-08 17.44.43.png

在Use secret text(s) or file(s)这个里面添加凭据

截屏2024-03-08 17.45.41.png

选择secret text这一项

截屏2024-03-08 17.48.14.png

复制之前保存的access token填入

截屏2024-03-08 17.48.34.png

选中这一项,自动生成node和npm环境变量

截屏2024-03-08 17.49.05.png

增加构建步骤

截屏2024-03-08 17.49.50.png

截屏2024-03-08 17.50.39.png

npm cache clear --force # 清理 npm 缓存
npm install --force 
npm run build
echo "打包完成"

保存

2.点击立即构建

如图,已经构建成功

截屏2024-03-08 18.00.58.png

现在我们已经成功的可以在jenkins上打包文件,但是还没有做到在本地提交文件,自动推送到服务器,再继续增加构建后步骤