操作系统:CentOS

部署环境:Docker

CI/CD工具:Jenkins

1.环境配置

安装Jenkins:Centos安装Jenkins

安装Docker:Centos安装Git、DotNet、Docker

2.Github创建仓库

https://github.com/longtaosu/Vue2DockerDemo

3.本地初始化Vue项目

初始化过程请参考:Vue + Element UI项目初始化

安装依赖

cnpm install

运行代码

npm run dev

4.将代码提交到Github

添加到本地暂存

git add .

添加注释

git commit -m "init"

提交代码

git push

现在回到Github,我们的代码已经完成了提交

5.配置Nginx

在项目中添加Nginx的配置文件

文件的具体内容请查看Github的源文件,主要核心配置为

    server {
listen ;
server_name localhost;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
location ^~/api/ {
rewrite ^/api/(.*)$ /$ break;
proxy_set_header Host $host;
proxy_set_header x-forwarded-for $remote_addr;
proxy_set_header X-Real-IP $remote_addr;
proxy_pass http://localhost:8080;
}
error_page /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}

Nginx监听本地的80端口,并将请求重定向到本地的8080端口(该端口在Vue的项目中配置)

6.编写Dockerfile和sh文件

6.1Dockerfile文件

Dockerfile文件内容:

 FROM node:lts-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
RUN cnpm install
COPY . .
RUN npm run build # production stage
FROM nginx:stable-alpine as production-stage
COPY config/nginx/nginx.conf /etc/nginx/nginx.conf
COPY --from=build-stage /app/dist /usr/share/nginx/html EXPOSE
CMD ["nginx", "-g", "daemon off;"]

第3行,先加载package*.json,配合第4、5行安装相关的依赖

第6行将Github代码复制,并配合第7行代码编译

第10到底12行配置Nginx

6.2setup.sh文件

该文件主要是对Docker的操作,包括镜像的编译,程序的容器部署等

 image_version=`date +%Y%m%d%H%M`;
echo $image_version;
# cd vue2docker
git pull --rebase origin master;
docker stop vue2docker;
docker rm vue2docker;
docker build -t vue2docker:$image_version .;
docker images;
docker run -p : -d --name vue2docker vue2docker:$image_version;
# -v ~/docker-data/house-web/appsettings.json:/app/appsettings.json -v ~/docker-data/house-web/NLogFile/:/app/NLogFile --restart=always
docker logs vue2docker;
#删除build过程中产生的镜像 #docker image prune -a -f
docker rmi $(docker images -f "dangling=true" -q)

将程序更新到Github

7.Jenkins配置

7.1创建一个【自由风格项目】

点击【确定】

7.2源代码管理

7.3源码管理

7.4构建触发器

7.5构建环境

7.6构建

点击【应用】 --> 【保存】

8.Jenkins

查看构建历史

蓝色表示构建成功(根据Jenkis的设置,Jenkins会每2分钟查询一次Github)

查看构建结果

Vue项目在Docker的自动化部署的更多相关文章

  1. 基于Jenkins,docker实现自动化部署(持续交互)

      前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...

  2. 基于Jenkins,docker实现自动化部署(持续交互)【转】

      前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...

  3. springboot docker jenkins 自动化部署并上传镜像

    springboot + docker + jenkins自动化部署项目,jenkins.mysql.redis都是docker运行的,并且没有使用虚拟机,就在阿里云服务器(centos7)运行 1. ...

  4. Jenkins+Docker+Git 自动化部署

    Jenkins+Docker+Git 自动化部署图文教程 https://blog.csdn.net/qq_38252039/article/details/89791247 前言: 通过几天的学习和 ...

  5. Python环境搭建、python项目以docker镜像方式部署到Linux

    Python环境搭建.python项目以docker镜像方式部署到Linux 本文的项目是用Python写的,记录了生成docker镜像,然后整个项目在Linux跑起来的过程: 原文链接:https: ...

  6. docker容器自动化部署(一)

    1.docker容器暴露多个端口 To expose just one port, this is what you need to do: docker run -p <host_port&g ...

  7. 从零搭建docker+jenkins 自动化部署环境

    从零搭建docker+jenkins+node.js自动化部署环境 本次案例基于CentOS 7系统 适合有一定docker使用经验的人阅读 适合有一定linux命令使用经验的人阅读 1.docker ...

  8. SpringBoot项目 使用Jenkins进行自动化部署 (gitLab管理项目)_

    1.部署服务器创建好对应文件夹和启动脚本 创建文件夹 mkdir /wdcloud/app/rps/rps-module-category 创建启动脚本 cd /wdcloud/app/rps/rps ...

  9. 7.使用jenkins+marathon+docker完成自动化部署

    1.前置条件 1)Docker开启TCP端口,CloudBees Docker Build and Publish plugin插件会向目标主机docker生成docker镜像 开启docker ap ...

随机推荐

  1. NX二次开发-UFUN发射线函数UF_MODL_trace_a_ray的用法

    今天是国庆节,放假休息懒得动,没有出去玩,在家研究一下发射线函数UF_MODL_trace_a_ray.小弟以前在软件公司混的时候,当时我做的那个项目就用到了UF_MODL_trace_a_ray,当 ...

  2. python入门 元组tuple (三)

    什么if while语句了 列表字典都太简单了 ,我直接跳过了, 开始写tuple了 增 元组格式是写在括号里,注意与列表(写在中括号里)的区别 tup1 = ('math', 'beijing', ...

  3. 3.RabbitMQ 第一个程序

    RabbitMQ消息服务器主要解决应用程序之间异步消息传输问题,传统的MQ分为点对点和主题与订阅,RabbitMQ使用Exchange(交换机)实现更加灵活的消息传递. 前面介绍过几个概念,Routi ...

  4. NPAPI插件开发新手容易遇到的问题

    在网上找了一个npdemo的例子,编译了一下在FireFox运行正常,在Chrome下就是不行,也没任何提示. 折腾了好久,最后发现是rc文件 支持语言编码问题 NPAPI插件开发详细记录:用VS20 ...

  5. ionic:创建 APP

    ylbtech-ionic:创建 APP 1.返回顶部 1. ionic 创建 APP 前面的章节中我们已经学会了 ionic 框架如何导入到项目中. 接下来我们将为大家介绍如何创建一个 ionic ...

  6. R:ggplot2数据可视化——进阶(3)

    Part 3: Top 50 ggplot2 Visualizations - The Master List, 结合进阶1.2内容构建图形 有效的图形是: 不扭曲事实 传递正确的信息 简洁优雅 美观 ...

  7. 12-MySQL-Ubuntu-数据表的查询-数据准备和基本查询(一)

    一,数据准备 创建数据库.数据表 -- 创建数据库 create database python_test_1 charset=utf8; -- 使用数据库 use python_test_1; -- ...

  8. 最短路(sp

    #include<stdio.h> #include<iostream> #include<queue> using namespace std; #define ...

  9. 23种常用设计模式的UML类图

    23种常用设计模式的UML类图 本文UML类图参考<Head First 设计模式>(源码)与<设计模式:可复用面向对象软件的基础>(源码)两书中介绍的设计模式与UML图. 整 ...

  10. TwainCapabilities

    Twain Capabilities 2013年10月15日 ⁄ 综合 ⁄ 共 6098字 ⁄ 字号 小 中 大 ⁄ 评论关闭 转自:http://blog.163.com/lvan100@yeah/ ...