个人笔记[docker+nginx+jenkins]部署vue项目

个人买的阿里的突发性能服务器 最垃圾的那种纯自己练习用 废话不说了 直接进入正题
安装篇
（服务器只安装了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:jenlins: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

大功告成 仅个人笔记使用