Vue项目在Docker的自动化部署
操作系统: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的自动化部署的更多相关文章
- 基于Jenkins,docker实现自动化部署(持续交互)
前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...
- 基于Jenkins,docker实现自动化部署(持续交互)【转】
前言 随着业务的增长,需求也开始增多,每个需求的大小,开发周期,发布时间都不一致.基于微服务的系统架构,功能的叠加,对应的服务的数量也在增加,大小功能的快速迭代,更加要求部署的快速化,智能化.因此 ...
- springboot docker jenkins 自动化部署并上传镜像
springboot + docker + jenkins自动化部署项目,jenkins.mysql.redis都是docker运行的,并且没有使用虚拟机,就在阿里云服务器(centos7)运行 1. ...
- Jenkins+Docker+Git 自动化部署
Jenkins+Docker+Git 自动化部署图文教程 https://blog.csdn.net/qq_38252039/article/details/89791247 前言: 通过几天的学习和 ...
- Python环境搭建、python项目以docker镜像方式部署到Linux
Python环境搭建.python项目以docker镜像方式部署到Linux 本文的项目是用Python写的,记录了生成docker镜像,然后整个项目在Linux跑起来的过程: 原文链接:https: ...
- docker容器自动化部署(一)
1.docker容器暴露多个端口 To expose just one port, this is what you need to do: docker run -p <host_port&g ...
- 从零搭建docker+jenkins 自动化部署环境
从零搭建docker+jenkins+node.js自动化部署环境 本次案例基于CentOS 7系统 适合有一定docker使用经验的人阅读 适合有一定linux命令使用经验的人阅读 1.docker ...
- SpringBoot项目 使用Jenkins进行自动化部署 (gitLab管理项目)_
1.部署服务器创建好对应文件夹和启动脚本 创建文件夹 mkdir /wdcloud/app/rps/rps-module-category 创建启动脚本 cd /wdcloud/app/rps/rps ...
- 7.使用jenkins+marathon+docker完成自动化部署
1.前置条件 1)Docker开启TCP端口,CloudBees Docker Build and Publish plugin插件会向目标主机docker生成docker镜像 开启docker ap ...
随机推荐
- NOIp2018集训test-10-4/test-10-5 (联考四day1/day2)
这个day1稍微有点毒瘤吧?? DAY1 排列 以前总是把day1t1想太复杂了翻车,差不多往正解的方向想了一下感觉不可能这么复杂这可是noipday1t1啊一定有非常简单的方法然后翻车了?? 题目转 ...
- Linux命令(1):date
查看时间: date "+%Y-%m-%d %H:%M:%S" 参数说明: %n : 下一行 %t : 跳格 %H : 小时(00..23) %I : 小时(01..12) %k ...
- 移动端单选插件-jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- hdu多校第五场1006 (hdu6629) string matching Ex-KMP
题意: 给你一个暴力匹配字符串公共前缀后缀的程序,为你对于某个字符串,暴力匹配的次数是多少. 题解: 使用扩展kmp构造extend数组,在扩展kmp中,设原串S和模式串T. extend[i]表示T ...
- Linux date命令 crontab每个月最后一天
###使用date获取日期时间等 # 当前日期 openstack@ubuntu:~$ date 2019年 01月 15日 星期二 15:10:49 CST # 明天 openstack@ubunt ...
- delphi基础篇之项目文件
delphi基础篇之项目文件 program Teacher2018; uses Forms, Unit1 in 'Unit1.pas' {Form1}, Unit2 in 'Unit2.pa ...
- Unity 如何修改 particle system 的 start color 属性
代码如下: ParticleSystem ps = GetComponent<ParticleSystem>(); var main = ps.main; var color = Colo ...
- 如何在Spring Boot 中动态设定与执行定时任务
本篇文章的目的是记录并实现在Spring Boot中,动态设定与执行定时任务. 我的开发项目是 Maven 项目,所以首先需要在 pom.xml 文件中加入相关的依赖.依赖代码如下所示: <de ...
- java 判断int类型为空
int id = 10; if("0".equals(String.valueOf(id)) || "null".equals(String.valueOf(i ...
- springboot + ajax + mybatis 实现批量删除
实现思路: 1. checkbox全选获取批量删除的id数组 2. ajax以字符串的形式将id数组传给控制器 3. 控制器将字符串分割成List数组作为参数传给mapper 具体代码: 1. 前端代 ...