docker-compose部署jenkins+nginx前端项目

文件夹如下

ps:1.映射目录的时候可以有两种方式，（1）使用绝对目录，比如下面文件中的 ～/docker/ ;(2) 使用相对路径， ../docker 也行

一、compose

--docker-compose编排文件，包含所有项目

version: '3'

networks:
  nginx_network:
    external: true

services:                                      # 容器
  docker_jenkins:
    user: root                                 # root权限
    restart: always                            # 重启方式
    image: jenkins/jenkins:lts                 # 使用的镜像
    container_name: jenkins                    # 容器名称
    environment:
      - TZ=Asia/Shanghai         #设置时区
      - "JENKINS_OPTS=--prefix=/jenkins_home" ## 自定义 jenkins 访问前缀（上下文context）
    networks:
      - nginx_network   											#定义网络
    ports:                                     # 对外暴露的端口定义
      - 8080:8080
      - 50000:50000
      
    volumes:                                   # 卷挂载路径
      - ~/docker/jenkins_home/:/var/jenkins_home     # 挂载到容器内的jenkins_home目录
      - /usr/local/bin/docker-compose:/usr/local/bin/docker-compose #为了在jenkins容器中能执行docker-compose命令
      - /var/run/docker.sock:/var/run/docker.sock #为了在jenkins容器中能执行docker命令
      - /usr/bin/docker:/usr/bin/docker   #为了在jenkins容器中能执行docker命令
  
  docker_nginx_dev:                            # nginx-dev环境
    restart: always
    image: nginx
    container_name: nginx_dev
    ports:
      - 18001:18001
    networks:
      - nginx_network
    volumes:
      - ~/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf  #nginx的配置文件
      - ~/docker/html:/usr/share/nginx/html										#映射前端项目的存放文件目录
      - ~/docker/nginx/logs:/var/log/nginx   									#映射nginx日志存放目录

  docker_nginx_relese:                            # nginx-release环境
    restart: always
    image: nginx
    container_name: nginx_release
    ports:
      - 18002:18002
    networks:
      - nginx_network
    volumes:
      - ~/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf	#nginx的配置文件
      - ~/docker/html:/usr/share/nginx/html										#映射前端项目的存放文件目录
      - ~/docker/nginx/logs:/var/log/nginx										#映射nginx日志存放目录

  docker_nginx_prod:                            # nginx-prod环境
    restart: always
    image: nginx
    container_name: nginx_prod
    ports:
      - 18000:18000
    networks:
      - nginx_network
    volumes:
      - ~/docker/nginx/conf/nginx.conf:/etc/nginx/nginx.conf	#nginx的配置文件
      - ~/docker/html:/usr/share/nginx/html		#映射前端项目的存放文件目录
      - ~/docker/nginx/logs:/var/log/nginx。  #映射nginx日志存放目录

  docker_nginx_imgs:    
     # nginx_imgs   用于存储静态资源的目录，比如图片/视频等，通过ngixn进行路径代理
    restart: always
    image: nginx
    container_name: nginx_imgs
    ports:
      - 15002:15002
    networks:
      - nginx_network
    volumes:
      - ../nginx_img/conf/nginx.conf:/etc/nginx/nginx.conf
      - ../imgs:/usr/local/software/img
      - ../nginx_img/logs:/var/log/nginx

  docker_nginx_main:  #最外层的nginx代理
    restart: always
    image: nginx
    container_name: nginx_main
    ports:
      - 80:80
      - 443:443
    networks:
      - nginx_network
    volumes:
      - ~/docker/main_nginx/conf/nginx.conf:/etc/nginx/nginx.conf
      - ~/docker/html:/usr/share/nginx/html
      - ~/docker/main_nginx/logs:/var/log/nginx
      - ~/docker/ssl:/etc/nginx/ssl  #映射ssl证书文件夹

二、html

用来存放前端文件的目录，分为了三个环境

dev --对应的是development分支，测试环境的代码

release --对应仓库的release分支，预发布环境代码

pro --对应仓库master分支，production生产分支代码

三、imgs （静态资源文件夹）

四、jenkins_home （jenkins映射文件夹，便于jenkins数据持久化）

五、mail

改文件夹最开始计划部署一台邮件服务的，后来发现太麻烦，便采用了免费的阿里云企业邮箱，该文件夹就弃用了，可忽略不计

六、main_nginx

第一层ngxin代理

— conf 对应nginx 的配置文件

— logs 对应存放nginx的日志文件

以下是ngixn.conf文件代码

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 on;
    #tcp_nopush     on;
    keepalive_timeout 65;
    gzip on;
    #dev环境
    server {

        #监听的端口
        listen 80;
        server_name blog.exmpale.com.cn exmpale.com.cn;  #监听一级域名exmpale.com.cn和二级域名 blog.exmpale.com.cn 因为一二级域名都解析的同一台服务器ip
        rewrite ^(.*)$ https://$host$request_uri;
    }
    server { 
        listen 443 ssl;
        server_name blog.exmpale.com.cn;
        include  ssl/exmpale.com.cn.ssl.conf;  #通过引入外部的文件来指定ssl证书配置 ssl目录下的 exmpale.com.cn.ssl.conf文件
        ssl_session_timeout 5m;

        location  ~ /dev/ { #对/dev/的路由进行代理到dev环境的二级代理上
            proxy_pass http://nginx_dev:18001;
        }
        location ~ /release/ { #对/release/的路由进行代理到dev环境的二级代理上
            proxy_pass http://nginx_release:18002;
        }
        location ~ /jenkins_home/ {  #对/jenkins_home/的路由进行代理到jenkins容器上
            proxy_pass http://jenkins:8080;
        }
        location ~ /imgs/ { #对/imgs/的路由进行代理到静态资源服务nginx_imgs上
            proxy_pass http://nginx_imgs:15002;
        }
        location / {   #代理到正式环境上
            proxy_pass http://nginx_prod:18000;
        }
     }
}

七、Nginx

通用的nginx代理配置

# nginx.conf 例：
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        on;
    #tcp_nopush     on;
 
    keepalive_timeout  65;
 
    gzip  on;

    #dev环境
    server {
            #监听的端口
        listen  18001;
        server_name  localhost;
        #设置日志
#        access_log  logs/dev.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/dev/dist/;
#               root  /home/html/dev/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }

    #sit环境
    server {
            #监听的端口
        listen  18002;
        server_name  localhost;
        #设置日志
#        access_log  logs/sit.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/release/dist;
#               root  /home/html/dev/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }

    server {
            #监听的端口
        listen  18000;
        server_name  localhost;
        #设置日志
#        access_log  logs/sit.access.log  main;
        
        #定位到index.html
           location / {
               #linux下HTML文件夹,就是你的前端项目文件夹
               root  /usr/share/nginx/html/pro/dist;
#               root  /home/html/dev/dist;
               #输入网址（server_name：port）后，默认的访问页面
               index  index.html;
               try_files $uri $uri/ /index.html;
           }
    }

 
#    include /etc/nginx/conf.d/*.conf;

   
}

八、nginx_img

静态资源代理文件

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 on;
    #tcp_nopush     on;

    keepalive_timeout 65;

    gzip on;

    #dev环境
    server {
        #监听的端口
        listen 15002;
        server_name localhost;
        #设置日志
        #        access_log  logs/dev.access.log  main;
        #定位到index.html
        location / {
            alias  /usr/local/software/img/;
        }
         # 图片防盗链
        #  location ~* .(gif|jpg|jpeg|png|bmp|swf)$ {
        #     valid_referers none blocked localhost;  # 只允许本机 IP 外链引用
        #     if ($invalid_referer){
        #       return 403;
        #     }
        #   }
    }
    #    include /etc/nginx/conf.d/*.conf;
}

九、service 后端服务对应的文件夹

十、ssl

ssl证书存放文件夹

# ssl on;
ssl_certificate  ssl/fullchain.cer;
ssl_certificate_key  ssl/exmpale.com.cn.key;

前端菜鸟一枚，写的不好的地方，欢迎各位大佬提出宝贵意见。