个人笔记[docker+nginx+jenkins]部署vue项目_jenkins+vue+nginx+docker-程序员宅基地

技术标签: nginx  jenkins  docker  

个人买的阿里的突发性能服务器 最垃圾的那种纯自己练习用 废话不说了 直接进入正题
安装篇
(服务器只安装了docker,其他全是docker的容器)

1、docker(附上菜鸟的docker教程

#yum安装docker
sudo yum install docker
#启动docker
service docker start
#设置docker开机启动
systemctl enable docker
#查看docker是否安装成功
docker info 
#重启docker
sudo service docker restart

另外讲讲docker的一些命令

docker ps -a // 查看当前容器的状态

在这里插入图片描述

docker images  // 查看docker的镜像 如下图

在这里插入图片描述

docker stop/restart/start  容器名称/容器id
例:
docker stop nginx   // 停止容器名为nginx的docker容器  
docker rm -f 容器名/容器id  // 移除指定的容器
例:
docker rm -f nginx // 删除名为nginx的容器     
//  不要问我 -f   和后面-i  -itd等等的意思  我也不知道  去菜鸟查
docker run -itd --name 自定义容器名 -p 宿主机端口:容器端口 -v 宿主机文件/容器文件 docker镜像名
例:
docker run -itd --name nginx -p 80:80 -v /opt/web/docker/nginx/conf/:/etc/nginx/conf.d/ -v /opt/web/docker/nginx/nginx.conf:/etc/nginx/nginx.conf -v /opt/web/docker/nginx/logs:/var/log/nginx -v /opt/web/:/opt/web/ nginx:latest
/**
*  这一段比较长  解释一下   
*  docker使用一个镜像名为nginx  镜像tag为latest的镜像来运行容器  即nginx:latest
* 并且将宿主机的80端口映射到容器的80端口
* 再映射宿主机的/opt/web/docker/nginx/conf/文件到容器的/etc/nginx/conf.d/   后面几个 -v同理
* 作用是修改宿主机的这几个文件时  容器对应的映射地址同步修改
* -v /opt/web/docker/nginx/conf/:/etc/nginx/conf.d/(用来配置多个nginx文件用)
* -v /opt/web/docker/nginx/nginx.conf:/etc/nginx/nginx.conf  (nginx的默认配置文件)
* -v /opt/web/docker/nginx/logs:/var/log/nginx (nginx的日志)
*  -v /opt/web/:/opt/web/  (我的前端项目放在宿主机的/opt/web下  映射到容器的同一个地址)
*/

安装好docker以后,我们需要三个容器jenkins(自动化部署项目用,暂时只会前端的部署),nginx(配置代理)

1.1 docker 安装 jenkins(最新版)

docker pull jenkins:jenkins:lts  //  如果docker pull jenkins 下载的貌似版本还是挺低的
mkdir /opt/web  // 创建一个宿主机的项目地址  我是在opt/web   这个看个人习惯
#jenkins的用户id默认是1000 这里给上权限
sudo chown -R 1000:1000 web/  
#运行jenkins
sudo docker run -itd -p 8080:8080 -p 50000:50000 --name jenkins --privileged=true  -v /opt/web/:/opt/web/ jenkins:jenlins:lts

这个时候可以打开你服务器的地址加上:8080端口就可以打开jenkins了 这时候需要输入密码 密码在容器的**/var/jenkins_home/secrets/initialAdminPassword**

docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword

这里我就不贴图了,不想再来一次 输入密码以后创建管理员账户,然后选择默认安装到下一步就好
成功后应该是这样的(ps 正常市没有项目的 我这里已经新建了一个项目的)
在这里插入图片描述
先安装一个node的插件 打开 系统管理->插件管理->可选插件 搜索Nodejs安装在这里插入图片描述
接着全局配置 打开 系统管理->全局工具配置 这里需要配置好jdk、git和node,如下图 保存OK

jdk(需要Oracle的账户密码 百度应该有)

在这里插入图片描述

git

在这里插入图片描述

node(可以配置多个 自己选择版本备注好就行)

在这里插入图片描述
下面新建一个任务
点击新建任务
输入任务名选择自由风格 确定
接着重点配置 源码管理 这里输入项目的git地址 这时候要点击添加 设置github的账户密码
在这里插入图片描述
在这里插入图片描述
然后添加旁边就能看到自己的账户了,这时候选择账户就好
然后记得选择 Additional Behaviours 新增的时候选择检出子目录 这里记得是上面docker run 的时候配置的文件地址 我这里是这样的
在这里插入图片描述
接着继续 构建触发器选择 轮询scm 输入下面代码

H/5 * * * *

在这里插入图片描述
构建环境选择node这个 (这个选项只有安装了上面提到的nodejs插件才有)
在这里插入图片描述
接着构建 -> 执行shell (英文 Execute shell)

//这个应该不用解释了
cd /opt/web/vue_ts
npm i
npm run build

然后保存 ok 可以构建一个看看了 第一次会下载node什么的 比较慢
在这里插入图片描述

1.2 docker 安装 nginx(最新版)

# 下载最新镜像
docker pull nginx:latest
# 前面已经解释过了  唯一注意的就是最后一个文件映射 是自己自定义的项目地址 映射到nginx容器去 这样才能代理成功
docker run -itd --name nginx -p 80:80 -v /opt/web/docker/nginx/conf/:/etc/nginx/conf.d/ -v /opt/web/docker/nginx/nginx.conf:/etc/nginx/nginx.conf -v /opt/web/docker/nginx/logs:/var/log/nginx  -v /opt/web/:/opt/web/ nginx:latest

接着进行nginx配置
进入宿主机中上面映射的对应地址/opt/web/docker/nginx/conf/ 新建一个配置文件

server{
    
	 listen 80;
	 # server_name ip或者域名 ;
	 server_name www.baidu.com;
	 # root打包后的文件地址   vue正常打包生成的dist 根据项目配置来
	 root /opt/web/vue_ts/dist;
	 location / {
    
	     try_files $uri $uri/ @router;
	 }
	 location @router {
    
	    rewrite ^.*$ /index.html last;
	 }
}

然后设置默认的配置(附上菜鸟的详解)

user  nginx;
//这个根据服务器性能来配置
worker_processes  1;

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


events {
    
    worker_connections  1024;
}


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 off;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    server_names_hash_max_size 512;
    server_names_hash_bucket_size 64;
    autoindex   off;
    gzip  on;
    gzip_disable "msie6";
    gzip_vary on;
    gzip_comp_level 5;
    gzip_buffers 16 8k;
    gzip_min_length 50k;
    gzip_http_version 1.1;
    gzip_types text/xml application/x-javascript application/javascript text/javascript text/css text/plain image/jpeg application/json;

    include /etc/nginx/conf.d/*.conf;
    include /opt/web/docker/nginx/conf/*.conf;
}

然后重启nginx

docker restart nginx

大功告成 仅个人笔记使用

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44384581/article/details/111473239

智能推荐

Python-Django毕业设计安卓和悦少年文明礼仪监管APP(程序+LW)-程序员宅基地

文章浏览阅读199次。在文章信息管理页面,可以对文章标题、文章封面、学号、学生姓名、发布日期、审核回复、审核状态、审核等进行审核、详情、查看评论、修改、删除或审核等操作,具体的实现效果如图5.13所示。在积分申请管理页面,可以对文章标题、文章封面、申请分数、申请日期、学号、学生姓名、审核回复、审核状态、审核等进行详情、删除、审核等操作,具体的实现效果如图5.14所示。在活动信息管理页面,可以对活动名称、活动封面、活动地点、活动日期、发布日期等进行详情、修改、查看评论、删除或新增等操作,具体的实现效果如图5.15所示。

JPA:LocalContainerEntityManagerFactoryBean与LocalEntityManagerFactoryBean的区别_localcontainerentitymanagerfactorybean localentity-程序员宅基地

文章浏览阅读6.9k次。LocalEntityManagerFactoryBean:程序管理型:实体管理器是在程序直接向实体管理器工厂请求一个实体管理器时创建的。在这种情况下,程序负责打开或关闭实体管理器,并且在事务中控制管理器。这种类型最适合不运行于Java EE容器的独立程序。 LocalContainerEntityManagerFactoryBean:容器管理型:实体管理器由Java EE容器创建_localcontainerentitymanagerfactorybean localentitymanagerfactorybean

程序员面试金典:子串判断、 最大连续数列和_面试 字符串 子串判断-程序员宅基地

文章浏览阅读516次。1.子串判断题目描述现有一个小写英文字母组成的字符串s和一个包含较短小写英文字符串的数组p,请设计一个高效算法,对于p中的每一个较短字符串,判断其是否为s的子串。给定一个string数组p和它的大小n,同时给定string s,为母串,请返回一个bool数组,每个元素代表p中的对应字符串是否为s的子串。保证p中的串长度小于等于8,且p中的串的个数小于等于500,同时保证s的长度小于等于1000。测试样例:_面试 字符串 子串判断

python问题:icodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 148_python nicodedecodeerror: 'ascii' codec can't deco-程序员宅基地

文章浏览阅读2.5k次。在pycharm中执行python程序时,因为某些插件时候会报错UnicodeDecodeError: 'ascii' codec can't decode byte 0xe5 in position 148: ordinal not in range(128)这是因为python2.x的默认编码是ascii,而代码中可能由utf-8的字符导致,解决方法是在报错文件中设置utf-8。..._python nicodedecodeerror: 'ascii' codec can't decode byte 0xe5 in position 2

支持PD3.1 PD QC AFC 5-28V的 受电端快充协议芯片_pd3.1 28v转20v-程序员宅基地

文章浏览阅读5.3k次,点赞2次,收藏9次。USB type-c PD QC receiver quick charge protocol chip1、OverviewXsp01 is a USB Power Delivery (PD2.0 / PD3.0) of the Power supply end (decoy) protocol chip, with XSQ03 chip can support PD, QC2.0, QC3.0, Samsung AFC protocol, so that the adapter output appr_pd3.1 28v转20v

基于微信小程序体育馆运动场地预约系统设计与实现(php+mysql后台)-程序员宅基地

文章浏览阅读2k次,点赞18次,收藏22次。基于微信小程序体育馆运动场地预约系统设计与实现(php+mysql后台)毕设作品毕业设计成品,黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,程序员宅基地专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程,学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频;项目的界面和功能都可以定制,包安装运行!!!如果需要联系我,可以在CSDN网站查询黄菊华老师。

随便推点

通达OA 与中控考勤机同步 最优http方案 附源码_通达oa连接中控考勤-程序员宅基地

文章浏览阅读2.1w次,点赞3次,收藏9次。中控考勤机软件可以将考勤机记录实时下载到本地数据库里, 很让人恼怒的是考勤机软件经常与设备断开连接,断开还不会自动重连, 可考前太差了,之前的几种方案也都无从谈起了。 苦思之后,想起直接用考勤机ip访问有web页面。所以有了上面的代码。跨过考勤机软件。只要你的考勤机是中控系列并且能够使用考勤机IP打开web界面就可以使用下面方法,稳定、高效,强烈推荐!使用方法:1, 将代码总 19_通达oa连接中控考勤

VT调试器 X64_vt调试是用什么语言写的-程序员宅基地

文章浏览阅读7.6k次,点赞2次,收藏10次。想了很久还是发上来吧,烂在硬盘里面没用,共享既是进步~前排感谢在我学习Intel-VT技术困难的时候各位朋友的帮助Tesla.Angela有人吗?cvcvxkviphacksxppKalong 以及国外友人asamy以上排名不分先后这份代码在WIN7 64 打了补丁的情况下能正常工作 不打补丁需要对THREAD的结构体做个修改 才可以正常运行代码部分:这_vt调试是用什么语言写的

crmeb 多商户小程序配置_crmeb小程序配置-程序员宅基地

文章浏览阅读8.7k次。一、小程序下载并提交审核下载微信小程序代码位置:平台后台>应用>小程序1 首先需要填写这里的小程序信息然后在这里就可以下载,如果未开启直播要选择,否则会无法使用2、下载编译后的小程序代码没有配置小程序的需要先配置小程序点击下载小程序包 会下载打包好的小程序包到本地3、导入微信开发工具选择刚下载解压的小程序包导入到开发工具4.测试、查看数据是否正常加载。点击“购物车”,可正常授权登录,即配置正确。如出现报错等,检查:1…SSL证书是否安装正确,(浏览器输入https域_crmeb小程序配置

计算机组成原理-程序员宅基地

文章浏览阅读61次。电子模拟计算机由于精度和解题能力都有限,所以应用范围较小。

解决 wasm-ld: error: initial memory too small, 18319040 bytes needed-程序员宅基地

文章浏览阅读1.9k次。使用emscripten编码ffmpeg,编译报错wasm-ld: error: initial memory too small, 18319040 bytes neededemcc: error: '/home/ctx/emsdk/upstream/bin/wasm-ld -o /tmp/emscripten_temp_tjga3v5e/ffmpeg_g.wasm -Llibavcodec -Llibavdevice -Llibavfilter -Llibavformat -L/home/ctx/_wasm-ld: error: initial memory too small

redis(2):redis简介_redis是一个开源的、高性能的、基于键值对的缓存与存储数据库。-程序员宅基地

文章浏览阅读2.1w次,点赞7次,收藏10次。Redis是一个开源的、高性能的、基于键值对的缓存与存储系统,通过提供多种键值数据 类型来适应不同场景下的缓存与存储需求。同时 Redis 的诸多高层级功能使其可以胜任消息 队列、任务队列等不同的角色。 本章将分别介绍Redis的历史和特性,以使读者能够快速地对Redis有一个全面的了解。一、历史与发展 2008年意大利的一家创业公司Merzia[1] 推出了一款基于MySQL的网站实时统计系统 LLOOGG[2] ,然而没过多久该公司的创始人Salvatore Sanfilippo 便开始对MyS._redis是一个开源的、高性能的、基于键值对的缓存与存储数据库。

推荐文章

热门文章

相关标签