jenkins+docker+nginx+nodejs持续集成部署vue前端项目

目录
  • 前提:
  • 思路:
  • 步骤:
  • 配置nodejs工具
  • git代码文件目录如下
  • Dockerfile的文件内容
  • nginx.conf主配置文件的内容

最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录

这里我的环境是Jenkins+docker+harbor+nginx
部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤。

前提:

1安装好了jenkins, 2项目服务器以node形式加入Jenkins, 3项目节点安装docker 4代码里有包含Dockerfile
以及 nginx的相关配置文件

思路:

通过Jenkins拉去git仓库代码,利用nodejs打包编译vue资源,利用Dockerfile
构建业务镜像,提前准备好nginx的配置文件和自定义文件,上过上传harbor供其他节点下载使用。

步骤:

创建自由风格的jobs(用流水线也可以),这里步骤比较简单就不写流水线了

general处选择参数化构建 ,文本参数来定义每次构建的版本号

构建环境这里需要选择全局工具里配置的nodejs,用于编译打包vue

配置nodejs工具

(如下图),自动安装需要的版本即可。

​​构建处选择执行shell

#!/bin/bash
pwd
npm install
npm run build -- prerelease #编译项目
echo "npm finish "
echo $version
docker build -t nginx-agent:$version .
#部署和构建是一台
docker images
docker stop nginx-agent
docker rm nginx-test
docker run --name nginx-agent -p 8001:80 -d nginx-agent:$version
#部署和构建不在一台,或者多台构建,harbor
# docker tag nginx-agent:$version 192.168.80.133:8000/test/nginx-agent:$version
# docker push 192.168.80.133:8000/test/nginx-agent:$version
# ssh 192.168.80.** "docker pull 192.168.80.133:8000/test/nginx-agent:$version"
# ssh 192.168.80.** "docker stop nginx-agent;docker rm nginx-agent;docker start "
# ssh 192.168.80.** "docker run --name nginx-test -p 8001:80 -d 192.168.80.133:8000/test/nginx:$version"

我的环境是构建和部署都是在一台服务器,所以这里我没有用harbor,注释部分的代码段就是一个简单的部署在另外服务器,

保存job,准备开始构建!

git代码文件目录如下

这里查看三个文件的内容
Dockerfile : 用于构建docker镜像的文件
nginx.conf :用于替换镜像内默认的主配置文件
default.conf :用于替换镜像内默认的用户配置文件

Dockerfile的文件内容

root@jenkins test-agent]# cat Dockerfile
FROM nginx
COPY ./dist/index.html /app/
COPY ./dist/static/js /app/static/js
COPY ./dist/static/css /app/static/css
COPY ./dist/static/fonts /app/static/fonts
COPY ./dist/static/img /app/static/img
COPY ./nginx.conf /etc/nginx/conf/nginx.conf
COPY ./default.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

注意

这里如果你的前端文件也是区分目录的话,需要一个个单独步骤去复制,不然的话,docker的copy命令只会复制文件不会连同目录一起复制,会导致你镜像内的目录结构不一样,
nginx镜像默认是有两个文件,一个主配置文件nginx.conf 一个自定义配置文件default.conf
所以一般我们可以提前准备两个对应的配置文件,主配置文件一般多数项目可以公用,自定义文件可以根据具体的前端项目需求来编写,可能会涉及到server_name 和后端的转发,

nginx.conf主配置文件的内容

[root@jenkins docker]# cat nginx.conf
user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;
events {
    worker_connections  65535;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
    access_log  /var/log/nginx/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;
    #gzip  on;
    include /etc/nginx/conf.d/*.conf;
}

default.conf自定义配置文件如下

[root@jenkins docker]# cat default.conf
server {
        listen  80;
        server_name localhost; #如果有需要监听的域名,这里也需要修改
        location / {
                root  /app;
                try_files $uri $uri/ /index.html;
                index  index.html index.htm;
                }
        location /api {
			if ($request_method = 'OPTIONS') {
                        return 204;
                }
                rewrite  ^/api/(.*)$ /$1 break;
                #后端接口域名,这里需要根据你自己的具体后端来填写
                proxy_pass https://*****.com/;
        }}

一切准备就绪,开始构建查看效果

构建输出如下:

看输出已经成功,登录服务器查看是否有对应的镜像和容器

[root@jenkins docker]# docker images
REPOSITORY                       TAG          IMAGE ID       CREATED         SI
nginx-agent                      V4           af8b50d515f5   2 minutes ago   150MB
192.168.80.133:8000/test/nginx   V3           19186858893b   22 hours ago    141MB
[root@jenkins docker]# docker ps
CONTAINER ID   IMAGE                                COMMAND                  CREATED         STATUS                  PORTS                                                  NAMES
8b3e8ae77b88   nginx-agent:V4                       "/docker-entrypoint.…"   9 seconds ago   Up 8 seconds            0.0.0.0:8001->80/tcp, :::8001->80/tcp                  nginx-agent

容器已经成功启动,输入地址访问看是否正常

访问正常,搞定!

到此这篇关于jenkins+docker+nginx+nodejs持续集成部署vue前端项目的文章就介绍到这了,更多相关jenkins docker nginx node部署vue内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 基于Docker、Nginx和Jenkins实现前端自动化部署

    目录 前期准备 部署目标 Dcoker环境的搭建 连接云服务器 安装Docker环境 Docker安装Docker Compose Docker安装Nginx和Jenkins服务 安装Nginx和Jenkins Nginx和Jenkins目录编写 docker-compose.yml文件配置 nginx.conf文件配置 安装Jenkins插件 关联Jenkins和GitLab 生成密钥 新建项目 源码管理 构建触发器 结束语 前期准备 基于CentOS 7系统云服务器一台. 基于Vue-CLI

  • jenkins+docker+nginx+nodejs持续集成部署vue前端项目

    目录 前提: 思路: 步骤: 配置nodejs工具 git代码文件目录如下 Dockerfile的文件内容 nginx.conf主配置文件的内容 最近比较闲,尝试了一下docker部署业务测试环境的前端vue项目,作此记录 这里我的环境是Jenkins+docker+harbor+nginx部署,但是由于此项目以节点形式加入jenkins,构建和部署都在一台,所以没有用到harbor,但是生产环境可能部署和构建不在一台,会需要先推送到harbor,也有详细步骤. 前提: 1安装好了jenkins

  • 聊聊jenkins部署vue/react项目的问题

    目录 准备工作 1.安装参数化部署插件 2.安装好插件后,配置Nodejs环境 创建项目 构建 centOS安装jenkins 1.安装JDK 2.安装jenkins 3.配置jenkis的端口 4.启动jenkins jenkins安装请参考文末centOS安装jenkins. 准备工作 1.安装参数化部署插件 Git Parameter Plug-In git参数化构建,可选择分支.标签构建Extended Choice Parameter Plug-In 自定义参数化构建,可根据需要任意添

  • jenkins分环境部署vue/react项目的方法步骤

    vue/react部署请参考上一篇文章:https://www.jb51.net/article/238583.htm 项目开发正常都需要开发环境.测试环境.生产环境,每个环境部署都比较麻烦,可以使用jenkins自动化部署 1.安装自定义参数化插件 Extended Choice Parameter Plug-In 2.配置自定义参数 3.配置shell脚本 shell脚本内容 #!/bin/bash // 判断环境 if [ $env == "dev" ]; then url=&q

  • docker nginx实现一个主机部署多个站点操作

    在某站租赁的虚拟机快到期了,续费得花200多,想到在阿里云新买的服务器,不如把这个也转移过去.域名我就用真实的吧,大家别黑我网站就好了,谢谢各位了. 阿里云里面已经用部署了一个站点 用域名 www.dcssn.com 就能直接访问,我的想法是再用 www.xhxf119.com 指向这个主机,根据域名的不同去访问不同的服务. 首先 域名解析都要指向这个主机的ip 然后 www.dcssn.com的服务开启8080端口,docker run -p 8080:80 weian www.xhxf119

  • 关于Jenkins + Docker + ASP.NET Core自动化部署的问题(避免踩坑)

    本来没想着要写这篇博客,但是在实操过程中,一个是被网络问题搞炸了心态(真心感觉网络能把人搞疯,别人下个包.下个镜像几秒钟搞定,我看着我的几KB小水管真是有苦说不出),另一个就是这里面坑还是有一些的,写出来也是为了让大家避免重复踩坑 几个注意点: 下方shell命令绝大部分都需要管理员权限,所以如果你使用的用户不是root,则都要加上sudo 对于较复杂的命令我都提供了注释版和无注释版,无注释版是为了让你复制起来方便 准备工作 CentOS 7.x Docker Jenkins 一份支持 dock

  • nginx部署多前端项目的几种方法

    个人总结了3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置 基于端口配置 基于location配置 在正式开始之前,我们先来看一下nginx安装的默认配置文件: /etc/nginx/nginx.conf 文件 可以看到图中的:include /usr/nginx/modules/*.conf,这句话的作用就是可以在nginx启动加载所有 /usr/nginx/modules/ 目录下的 *.conf 文件. 所以,平时我们为了方便管理,可以在此目录下面定义自己的

  • vue前端项目打包成Docker镜像并运行的实现

    目录 vue前端项目打包成Docker镜像并运行 前端将vue打包成镜像发布 一.总体预览 二.打包配置 三.问题思考 vue前端项目打包成Docker镜像并运行 首先说明咱们的前端项目是基于Vue的,反向代理使用的是nginx 1.打包vue前端项目生成dist文件夹上传至服务器 新建一个文件夹,叫vueDockerTest,下面的文件都需要. cert是你存放ssl证书的文件夹,nginx.conf 是nginx的配置文件,dist是你打包的前端静态文件 2.修改Dockerfile文件 #

  • IDEA中Debug调试VUE前端项目调试JS只需两步

    目录 前言 第一步,找到jsdebug运行时 第二步.打断点.运行jsdubg项 结语 前言 有一个礼拜没发quarku+graalvm相关的内容了,因为博主在忙一个新的前端项目去了,从element-ui切换到antdv,也有很多新的东西需要一边啃文档一边输出,程序出现bug自是在所难免的,所以需要开发工具可以非常方便的debug程序. 在java开发中,debug就是一个debug启动按钮解决的事情,而在前端开发中,IDEA这个开发工具也提供了非常好用的jsdebug工具,博主的这个用法不是

  • Vue前端项目自适应布局的简单方法

    目录 一.单位尺寸 二.基于rem实现自适应布局 附:html5页面 的rem 布局适配方法 总结 一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:“root em”的缩写,是一个相对长度单位:rem单位作用于非根元素时,相对于根元素(html)字体大小,rem单位作用于根元素字体大小时,相对于其出初始字体大小. 说明: 谷歌浏览器,字体的默认大小是16px; 如果父元素item1的font-size=50px,那么子元素item2的1em=50px.

  • 如何利用Jenkins + TFS为.Net Core实现持续集成/部署详解

    前言 在前后端分离开发的项目当中为了避免重复构建发布,我们需要部署一个持续发布环境,而目前的开发环境服务器都是基于 CentOS 的,因此每次在本地发布之后还需要打包,上传,部署,十分繁琐.故这里采用了比较成熟的Jenkins 作为持续部署环境. 为了方便安装,我们这里使用了 Docker 来进行安装,至于 Docker 安装的步骤这里不在赘述,详情可以参考这一篇博文. 上面安装的是一个较老的版本,这里推荐参考Docker 官方文档来进行安装. 安装好 Docker 之后,拉取 Jenkins

随机推荐