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

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

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

2. 安装Docker

a.安装依赖软件包

kotlin 复制代码

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

b.添加 Docker CE 仓库

arduino 复制代码

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服务，并设置开机自启

bash 复制代码

sudo systemctl start docker
sudo systemctl enable docker

c.验证安装

css 复制代码

docker --version

二 . 使用nginx手动部署

1.在Docker中安装nginx镜像

docker pull nginx

2.查看安装好的镜像

arduino 复制代码

docker image ls

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

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

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

scp命令上传文件

ruby 复制代码

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

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

1.执行命令

ruby 复制代码

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.执行命令

bash 复制代码

docker pull jenkins/jenkins

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

arduino 复制代码

 mkdir -p /home/jenkins/workspace

3.启动jenkins容器

bash 复制代码

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进行配置

4.登陆jenkins

按照提示，我们进入到jenkins容器内部，进入到这个路径下查看密码

bash 复制代码

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

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

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

最终进入到主界面

五 . Jenkins配置##

1.配置Jenkins的密钥

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

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

bash 复制代码

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

生成密钥

arduino 复制代码

ssh-keygen -t rsa -C "root"

查看公钥

bash 复制代码

cat /root/.ssh/id_rsa.pub

将这段公钥放入gitlab、github或者gitee中

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

填入公钥

2.在Jenkins中安装插件

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

[Publish Over SSH ]
[SSH]
[Nodejs]

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

去生成access token，记得好好保存这个token，因为不能再次在github中查看。

4.在Jenkins中添加凭据

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

添加github的凭据，由于github的访问方式更改，在这里我们最好用acces token作为密码添加服务器的凭据

5.配置SSH

找到SSH remote host填入信息

找到SSH Servers填入信息

六 . 在github设置通知webhook

七 . 在Jenkins配置nodejs

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

2.找到Nodejs安装

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

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

配置源码管理

选择你要构建的分支

选中这两项

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

选择secret text这一项

复制之前保存的access token填入

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

增加构建步骤

arduino 复制代码

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

保存

2.点击立即构建

如图，已经构建成功

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

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

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

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

2. 安装Docker

二 . 使用nginx手动部署

1.在Docker中安装nginx镜像

2.查看安装好的镜像

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

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

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

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

1.执行命令

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

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

1.执行命令

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

3.启动jenkins容器

4.登陆jenkins

五 . Jenkins配置##

1.配置Jenkins的密钥

2.在Jenkins中安装插件

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

4.在Jenkins中添加凭据

5.配置SSH

六 . 在github设置通知webhook

七 . 在Jenkins配置nodejs

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

2.找到Nodejs安装

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