Jenkins+docker+nginx部署前端分离VUE项目

一.在docker安装nginx

1.查询镜像

docker search nginx

2.拉取镜像（此处我们获取排名第一的是官方最新镜像）

docker pull nginx

二.配置文件挂载到主机

1.新建宿主机目录如下

mkdir -p /home/data/nginx/{conf,html,logs}

2.创建nginx容器，注意最后的nginx是镜像名或者id

docker run -d --name mynginx -p 80:80 nginx

3.将nginx容器内部配置文件挂载到主机，为了方便修改；将容器内的nginx.conf与default.conf文件分别拷贝到主机/home/data/nginx和/home/data/nginx/conf下，分别执行

docker cp 容器ID:/etc/nginx/nginx.conf /home/data/nginx/
docker cp 容器ID:/etc/nginx/conf.d/default.conf /home/data/nginx/conf/

cp 命令代表复制
ef是我们nginx容器的ID,/etc/nginx/nginx.conf 是容器内部nginx.conf 路径

4.此时我们的目录结构是这样的

 5.停止nginx容器，并删除容器

docker stop mynginx
docker rm mynginx

6.重新创建容器，注意挂在的目录正确

docker run -d --name mynginx --restart=always -p 80:80 -p 443:443 -v  /data/nginx/nginx.conf:/etc/nginx/nginx.conf -v /etc/localtime:/etc/localtime:ro -v /data/nginx/logs:/var/log/nginx -v /data/nginx/html:/etc/nginx/html -v  /data/nginx/conf:/etc/nginx/conf.d --privileged=true nginx

7.测试

在容器的挂载 /home/data/nginx/html目录下创建index.html,内容随便写上hello nginx,

访问:http://ip:80

如果能正常打开hello nginx说明部署成功。

三.在jenkins安装vue打包插件NodeJs

 四.在全局工具配置中配置NodeJs

1.安装目录是我linux中安装的，也可以选自动安装

2.linux安装nodejs

wget https://nodejs.org/dist/v12.18.1/node-v12.18.1-linux-x64.tar.gz    // 下载
tar xf node-v12.18.1-linux-x64.tar.gz                                   // 解压
cd node-v12.18.1-linux-x64                                              // 进入解压目录

 3.修改环境变量

vim /etc/profile

4.加入环境变量

export PATH=$PATH:/root/node-v12.18.1-linux-x64/bin

5.立即生效

source /etc/profile

6.验证

五. jenkins创建项目，跟其它项目类似，以下只说明特别注意的地方

1.构建环境注意点，选配置的node

2. shell脚本

SERVER_NAME=btb-coffee-managevue
JENKINS_HOME=/var/lib/jenkins
PENSION_HOME=$JENKINS_HOME/workspace/$SERVER_NAME
HTML_BASE=/home/data/nginx/html

cd $PENSION_HOME

echo "执行build..."
npm run build:prod

echo "删除旧文件..."
rm -rf $HTML_BASE/

echo "创建文件夹..."
mkdir -p $HTML_BASE/

echo "移动文件..."
mv $PENSION_HOME/dist/* $HTML_BASE/

echo "重启nginx..."
docker restart mynginx

echo "部署完成！"

六.以上完成部署，另外就是配置nginx配置文件了，我这是前后端分离的配置文件，经供参考：

http节点内的内容

upstream test{
        	server 192.168.0.123;
        }

server {
        listen       80;
        server_name  192.168.0.123;

        access_log /home/data/nginx/logs;
        index index.html;

        location / {
           try_files $uri $uri/ @router;
           index  index.html index.htm;
       }
       location @router {
          rewrite ^.*$ /index.html last;
       }

        location ~ .*\.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) {
            root   /usr/share/nginx/html;
            expires 1d;
        }

        location /prod-api{
            proxy_pass   http://test/
         }
    }

测试：访问192.168.0.123:80   即可访问前端页面

192.168.0.123:80/prod-api   即可访问后端接口