前端代码部署
前端代码部署的方式有很多,本文主要介绍以下几种:手动部署,docker
镜像部署,gitee + docker
自动部署。
上文已经实现了docker镜像部署,本文来实现gitee + docker
自动部署。
jenkins
下载
我们先来查询有哪些可安装的jenkins
镜像:
sql
docker search jenkins
我们使用第二个:
bash
docker pull jenkins/jenkins:lts
然后启动jenkins
:
bash
docker run -d -u 0 --privileged --name jenkins_container -p 49003:8080 -v /root/jenkins_container:/var/jenkins_home jenkins/jenkins:lts
- -d:表示在后台运行
- -u 0 :传入root账号ID(超级用户的ID是0),覆盖容器中内置的账号
- --privileged:赋予最高权限
- --name:给容器取名为jenkins_container
- -p:端口映射,将容器的8080端口映射到服务器的49003端口
- -v /root/jenkins_container:/var/jenkins_home :将docker容器内的目录/var/jenkins_home映射到服务器/root/jenkins_container目录上
运行完之后可以发现服务器/root/jenkins_container
目录下多了很多文件。然后我们需要去云服务器管理控制台配置安全组开放49003端口。
jenkins
安装
在我们电脑本地打开http://你的云服务器公网IP:49003
,我们可以看到以下界面: 根据上图提示地址获取密码(目录我们刚刚运行的时候已经做了映射):
bash
cat /root/jenkins_container/secrets/initialAdminPassword
选中"安装推荐的插件":
等待安装完成之后,就会进入到创建管理员页面:
输入用户名、密码、邮箱,保存并完成后,来到实例配置页面:
点击"保存并完成"。
jenkins
配置
我们先来安装配置SSH
插件,用来连接服务器的:
安装完成之后,来对SSH
插件进行配置:
拉到最下面,点击SSH Servers
下面的新增按钮:
输入该SSH server
名字、服务器地址、服务器登录用户名,服务器登录用户密码。
都填写好之后点击Test Configuration
,测试下服务器是否可以连接成功,配置正确之后点击"保存"。
然后我们来安装下node
插件:
安装好之后来配置一下:
项目部署
接下来我们来部署项目,新建一个项目:
输入我们源代码的地址,添加凭据(源代码登录平台的用户名和密码):
我们要在jenkins
上打包项目,所以选择好node
版本:
增加一个构建步骤,对我们的项目进行打包,关于docker
的配置文件Dockerfile
和nginx
的配置文件default.conf
,上文有详细的介绍前端项目部署-docker镜像部署:
增加一个构建步骤,打包项目镜像,启动容器:
保存后就可以构建我们的项目了:
如果构建过程中出错的话可以到控制台输出查看日志:
然后去云服务器管理控制台配置安全组开放8036端口。配置路径可见前端项目部署-手动部署
构建成功之后,就可以访问部署好的页面了http://x.xxx.xxx.xxx:8036/你的页面路由
自动部署
非生产环境每次部署的时候都要手动去点构建的话太麻烦了,我们可以结合gitee
的WebHooks
来实现代码推送的时候自动部署。
我们先来给jenkins
安装gitee
插件:
插件下载好之后,去到我们的项目配置中,触发构建器选择"Gitee webhook触发构建",后面的那个URL
需要记录下来,后续需要配置到gitee
的WebHooks
中的:
再往下拉去生成"Gitee WebHook 密码",然后保存:
再打开我们的源代码管理平台gitee
,来到"管理" -> "WebHooks" -> "添加webHook" :
输入原本在jenkins
保存的URL
和生成的"Gitee WebHook 密码":
点击添加之后,我们可以去改动点代码,然后推送,就可以发现webHook
被触发了:
jenkins
也触发了一次自动构建。