一 . 首先我们需要准备一个云服务器，并且在上面安装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
三 . 将本地vue项目打包后的dist文件上传到服务器##
1.找到本地项目打包后到dist文件
2.将本地文件上传至服务器的/usr/share/nginx/html/目录(没有的话可以自己创建或者自定义路径，在后面启动容器时映射自定义路径就行)
在这里我使用的是可视化工具Termius，也可以使用scp命令
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进行配置
4.登陆jenkins
按照提示，我们进入到jenkins容器内部，进入到这个路径下查看密码
docker exec -it -uroot jenkins bash # -uroot 以管理员身份登入容器
cat /var/jenkins_home/secrets/initialAdminPassword
然后将密码填入，进入到jenkins服务台，如果是新手，建议选择“安装推荐的插件”
这边自己建议填入自己的用户名和密码，如果使用右下角的默认admin账户，在设置中可能会出现一些权限不够的问题。
最终进入到主界面
五 . 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中
我使用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环境变量
增加构建步骤
npm cache clear --force # 清理 npm 缓存
npm install --force
npm run build
echo "打包完成"
保存
2.点击立即构建
如图，已经构建成功
现在我们已经成功的可以在jenkins上打包文件，但是还没有做到在本地提交文件，自动推送到服务器，再继续增加构建后步骤
