返回顶部
首页 > 资讯 > 后端开发 > Python >docker封装vue项目并使用jenkins发布
  • 841
分享到

docker封装vue项目并使用jenkins发布

项目dockervue 2023-01-31 08:01:19 841人浏览 泡泡鱼

Python 官方文档:入门教程 => 点击学习

摘要

Vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。现在由于要上Docker,需要将vue项目和nginx打成一个镜像才行。 项目结构如下:./ ├── build │   

Vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。

现在由于要上Docker,需要将vue项目和nginx打成一个镜像才行。

 

项目结构如下:

./
├── build
│   └── build.js
├── config
│   └── index.js
├── dist
│   ├── index.html
│   └── static
├── index.html
├── package.JSON
├── README.md
├── src
│   └── App.vue
└── static

 

这里使用镜像nginx:1.17.8

登录服务器

创建目录

mkdir -p /data/nginx

 

nginx.conf

这个文件是从nginx:1.17.8拷贝出来的,并做了一定的优化,完整内容如下:

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

worker_rlimit_nofile 65535;
events {
    use epoll;
    worker_connections  1024;
}


Http {
    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;
    tcp_nodelay         on;
    keepalive_timeout   120;
    types_hash_max_size 2048;
    server_names_hash_bucket_size 128;
    client_header_buffer_size  32k;
    client_max_body_size 2048m;
    client_body_buffer_size 128k;
    proxy_connect_timeout 10;
    default_type        application/octet-stream;
    gzip on;
    gzip_min_length 1k;
    gzip_http_version 1.1;
    gzip_buffers     4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/x-javascript text/CSS application/xml application/javascript;
    gzip_vary on;

    proxy_redirect off;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For  $remote_addr;
    proxy_set_header X-Forwarded-Scheme  $scheme;
    proxy_set_header  X-Forwarded-Proto $scheme;
    proxy_send_timeout 90;
    proxy_read_timeout 90;
    proxy_buffer_size 4k;
    proxy_buffers 4 32k;
    proxy_busy_buffers_size 64k;
    proxy_temp_file_write_size 64k;
    proxy_next_upstream error timeout invalid_header http_500 http_502 http_503;
    server_tokens off;

    include             /etc/nginx/mime.types;
    include /etc/nginx/conf.d/*.conf;
}

 

default.conf

这个文件是从nginx:1.17.8拷贝出来的,为了适应vue,做了一定的改动,完整内容如下:

server {
    listen       80;
    server_name  localhost;
    charset utf-8;
    access_log /var/log/nginx/host.access.log main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

 

dockerfile

主要工作就是覆盖配置文件,拷贝dist包,并设置权限。

FROM nginx:1.17.8
ADD nginx.conf /etc/nginx/nginx.conf
ADD default.conf /etc/nginx/conf.d/default.conf
ADD dist /usr/share/nginx/html
RUN chown nginx:nginx -R /usr/share/nginx/html
EXPOSE 80
ENTRYPOINT [ "nginx", "-g", "daemon off;"]

 

/data/nginx完整目录结构如下:

./
├── default.conf
├── dockerfile
└── nginx.conf

 

将这3个文件拷贝到vue项目,使用docker build命令,就可以打包了。

 

创建代码目录

mkdir -p /data/code

安装组件,用于jenkins发布

yum install -y rsync lsof

 

由于有多个vue项目,每个vue项目的dockerfile都是一样的。因此,不需要将dockerfile提交到GitHub中,放到服务器的固定位置即可。

发布时,将dockerfile拷贝到目录即可。

 

环境介绍

gitlab版本:GitLab 社区版 10.5.1 

jenkins版本:2.219

服务器:Centos 7.6

 

由于jenkins服务器的操作系统为:centos 6.9,它不能安装docker,因此docker打包动作需要在服务器上面执行。

 

ansible分组

vi /etc/ansible/hosts

内容如下:

[test_vue]
192.168.28.34

 

ansible playbook

vi /opt/ansible/test/docker_vue.yml

内容如下:

---
 # 需要传入变量HOSTS,ENV,PROJECT_NAME,PORT
 # 分别表示: 主机,环境,项目名,端口
 - hosts: "{{ HOSTS }}"
   remote_user: root
   become: yes
   become_method: sudo
   # 声明变量
   vars:
     # 远程项目基础目录
     BASE_DIR: "/data/code"
     # 远程项目目录名
     PROJECT_DIR: "{{ ENV }}_{{ PROJECT_NAME }}_{{ PORT }}"
     # 完整的jenkins 项目跟路径
     JENKINS_DIR: "/data/jenkins_data/workspace/{{ JOB_NAME }}"
   tasks:
    #删除原来的包
     - name: delete directory
       file:
         path: "{{  BASE_DIR }}/{{ PROJECT_DIR }}/dist"
         state: absent
    #同步WEB静态文件到目标服务器
     - name: synchronous web static file
       synchronize:
         src: "{{ JENKINS_DIR }}/dist"
         dest: "{{  BASE_DIR }}/{{ PROJECT_DIR }}/"
    #复制nginx default.conf和dockerfile
     - name: copy nginx conf and dockerfile
       shell: \cp /data/nginx/* {{  BASE_DIR }}/{{ PROJECT_DIR }}/

    # 打包镜像
     - name: docker build
       shell: cd {{ BASE_DIR }}/{{ PROJECT_DIR }} && docker build -t {{ PROJECT_NAME }}:{{ BUILD_NUMBER }} .
    #删除之前的docker
     - name: docker rm image
       shell: docker rm -f {{ PROJECT_NAME }}
       ignore_errors: yes

    #启动docker
     - name: docker run image
       # 提前创建bridge网络:docker network create testnet
       shell: docker run -it -d --restart=always --name {{ PROJECT_NAME }} --network testnet --network-alias {{ PROJECT_NAME }} -p {{ PORT }}:80 {{ PROJECT_NAME }}:{{ BUILD_NUMBER }}
     - name: view port,Wait for 1 seconds
       shell: sleep 1;lsof -i:{{ PORT }}

由于1台服务器有多个vue项目,因此需要使用非80端口来映射。

 

新建job

新建一个job,名字为:test_vue,使用自由风格

1.png

 

 源码管理

1.png

 

 执行shell脚本

1.png

 

 完整命令如下:

ansible-playbook -v /opt/ansible/test/docker_vue.yml -e "HOSTS=test_vue JOB_NAME=${JOB_NAME} BUILD_NUMBER=${BUILD_NUMBER} ENV=test PROJECT_NAME=web_vue PORT=7000"

 

点击最下面的保存,最后点击构建即可

1.png

 

由于服务器运行的vue项目,映射的是非80端口,域名解析到这台服务器,是无法访问的。

因此需要使用Nginx转发一下即可。

server {
 listen 80;
 server_name vue.baidu.com;
 access_log /var/log/nginx/ vue.baidu.com.access.log main;
 error_log /var/log/nginx/ vue.baidu.com.error.log;
 location / {
        proxy_pass http://127.0.0.1:7000;
        proxy_set_header           Host $host;
        proxy_set_header           X-Real-IP $remote_addr;
        proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_connect_timeout 300s;
        proxy_send_timeout 300s;
        proxy_read_timeout 300s;
         # websocket support
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
 }
}

 


--结束END--

本文标题: docker封装vue项目并使用jenkins发布

本文链接: https://www.lsjlt.com/news/193656.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • docker封装vue项目并使用jenkins发布
    vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。现在由于要上docker,需要将vue项目和nginx打成一个镜像才行。 项目结构如下:./ ├── build │   ...
    99+
    2023-01-31
    项目 docker vue
  • docker封装nuxt项目使用jenkins发布
    vue项目可以打一个dist静态资源包,直接使用Nginx发布即可。但是nuxt项目无法像vue那样,可以打一个dist静态资源包。需要安装Node.js,并使用npm install 安装依赖包才行。 现在由于要上docker,...
    99+
    2023-01-31
    项目 docker nuxt
  • 如何使用jenkins一键打包发布vue项目
    这篇文章主要介绍如何使用jenkins一键打包发布vue项目,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!jenkins的安装Jenkins是一款开源 CI&CD 软件,用于自动化各种任务,包括构建、测试和部...
    99+
    2023-06-15
  • 使用jenkins一键打包发布vue项目的实现
    目录jenkins的安装安装更换端口号(默认运行在8080端口)基础配置发布vue项目安装插件-nodejs配置nodejs插件创建任务jenkins的安装 Jenkins是一款开源...
    99+
    2024-04-02
  • Docker使用Git实现Jenkins发布、测试项目的详细流程
    目录一、安装Docker二、创建自定义网络地址三、docker创建容器四、自定义镜像五、配置nginx反向代理六、项目上传到Git仓库七、使用Jenkins发布、测试项目一、安装Do...
    99+
    2024-04-02
  • 使用Docker部署打包发布springboot项目
    目录前言第一:环境第二:开始描述从搞项目到docker发布:第四:各种错误教训集合。前言 从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种问题,终于不负所望,一...
    99+
    2024-04-02
  • vue方法封装并使用
    Vue是一种流行的JavaScript框架,它将数据和UI进行了强大的绑定,并提供了许多有用的功能。在Vue应用程序中,您可能需要编写一些通用的方法,这些方法将在整个应用程序中使用。为了提高代码的可重用性和可维护性,最好将这些方法封装成Vu...
    99+
    2023-05-20
  • 如何使用Docker部署打包发布springboot项目
    这篇文章将为大家详细讲解有关如何使用Docker部署打包发布springboot项目,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。前言从安装docker到多种方式打包发布,编译,镜像,容器等问题,遇到种种...
    99+
    2023-06-29
  • 如何在vue项目中使用封装后的axios
    这篇文章给大家介绍如何在vue项目中使用封装后的axios,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。为什么要使用VueVue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试...
    99+
    2023-06-06
  • vue项目使用axios封装request请求的过程
    目录一、封装axios二、封装api 函数三、页面中使用一、封装axios 1.src 目录中新建utils文件夹2.utils文件中建立request.js文件 request....
    99+
    2023-05-17
    vue axios封装request请求 vue axios封装请求
  • 项目中使用Typescript封装axios
    目录写在前面基础封装拦截器封装类拦截器实例拦截器接口拦截封装请求方法取消请求准备工作取消请求方法的添加与删除取消请求方法测试测试请求方法测试取消请求写在最后写在前面 虽然说Fetch...
    99+
    2024-04-02
  • Vue如何使用Vuex封装并使用store
    这篇文章主要介绍“Vue如何使用Vuex封装并使用store”,在日常操作中,相信很多人在Vue如何使用Vuex封装并使用store问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue如何使用Vuex封装并使...
    99+
    2023-07-04
  • Vue项目打包并发布的完整步骤记录
    目录1、安装部署Nginx服务器。(类似Tomcat服务器)2、Vue项目打包。总结如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1、安装部署Ng...
    99+
    2024-04-02
  • vue封装第三方插件并发布到npm的示例分析
    小编给大家分享一下vue封装第三方插件并发布到npm的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!gitmentgit...
    99+
    2024-04-02
  • 怎么使用Docker组件开发Django项目
    本篇内容主要讲解“怎么使用Docker组件开发Django项目”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么使用Docker组件开发Django项目”吧!Docker 是一个开源的应用容器引...
    99+
    2023-06-19
  • Angular怎么编译打包并使用Docker发布
    这篇文章给大家分享的是有关Angular怎么编译打包并使用Docker发布的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。环境:Angular CLI: 11.0.6Angular: 11.0.7Node: 12....
    99+
    2023-06-15
  • 使用IDEA创建Web项目并发布到tomcat的操作方法
    目录Web开发1.web开发概述Tomcat安装配置安装Tomcat2.web开发环境搭建3.创建发布web项目Web开发 1.web开发概述 •学习web开发,需要先安...
    99+
    2024-04-02
  • Vue使用Vuex一步步封装并使用store全过程
    目录一、安装Vuex依赖二、一步步封装store1. main.js中全局引入store仓库(下一步创建)2. this.$store3. this.$store.state4. t...
    99+
    2023-01-10
    Vue使用Vuex Vuex封装 Vuex使用store
  • 怎么用Docker搭建Laravel和Vue项目的开发环境
    本篇内容主要讲解“怎么用Docker搭建Laravel和Vue项目的开发环境”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Docker搭建Laravel和...
    99+
    2024-04-02
  • Vue使用axios发送请求并实现简单封装的示例详解
    目录一、安装axios二、简单使用1.配置2.发送请求三、封装使用1.创建js封装类2.配置3.发送请求一、安装axios npm install axios --save 二、简单...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作