使用docker+jenkins构建前端项目发布到nginx

1.准备环境

为了方便公司开发优化代码，不需要反复地将项目包发送给运维部署，我们对开发环境的前端项目利用jenkinsCI/CD进行自动化部署

需要两台服务器 一台jenkins 一台发布服务器,这里发布服务器 我直接使用开发环境的服务器 将admin界面与云计算展示界面部署上去

然后开始准备应用服务的部署

2.服务准备

2.1.nginx部署

首先在开发环境中利用docker部署nginx ，将nginx的发布页面路径映射到宿主机上，为了方便公司服务统一管理以及后期留存，统一使用docker-compose的方式部署

docker与docker-compose的安装方式自行百度

编写docker-compose.yaml文件

version: '3'

services:
  nginx:
    restart: always
    image: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - ./conf.d:/etc/nginx/conf.d
      - ./log:/var/log/nginx
      - ./html:/usr/share/www/html     

然后运行docker-compose文件

docker-compose up -d

这里我们可以看到刚才映射的nginx配置文件已经出现，我们修改一下nginx的配置文件，在conf.d下面创建nginx的子配置文件

vim zhanting.conf
server {
                listen  80;
                server_name  192.168.5.177;
location / {
        if ($request_filename ~* .*\.(?:htm|htmt|jpg|png|css|js|jpeg)$)
        {
           add_header Cache-Control "private, must-revalidate, no-cache, no-store, max-age=0";
        }
        root   /usr/share/www/html/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
location /api {
 proxy_pass       http://192.168.5.177:5000/manage;
}

}

然后保存退出，重启nginx容器，查看一下

docker ps -a

2.2.jenkins部署

这里我直接用公司本地环境的jenkins服务器，之前已经部署过可以参考jenkins部署文档