nginx+vue构建docker image

• 首先使用前端工具vscode进行打包

  npm run build
  

• 将得到的dist文件夹压缩上传到服务器

• 在服务器解压dist文件

• 编写Dockerfile

  FROM nginx
  MAINTAINER jenkins@qq.com
  COPY dist/  /usr/share/nginx/html/
  COPY nginx.conf /etc/nginx/conf.d/default.conf
  #开启内部服务端口 cicd-demo 项目端口
  EXPOSE 31000
  

• 编写nginx.conf

  server {
      listen       31000; #与dockerfile文件内部设置端口一致即可
      server_name  localhost;
  
      #charset koi8-r;
      access_log  /var/log/nginx/host.access.log  main;
      error_log  /var/log/nginx/error.log  error;
  
      location / {
          root  /usr/share/nginx/html;
          index  index.html index.htm;
          try_files $uri $uri/ /index.html;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   /usr/share/nginx/html;
      }
  }
  

• 编写构建镜像脚本run.sh

  #!/bin/bash
  #服务名称
  SERVER_NAME=sat-operationalcloud-web-api
  #得到前两天的镜像
  DOCKER_IMAGES=`docker images --filter=reference=${SERVER_NAME}'*'|grep -v grep | awk '{print $3}'`
  
  #删除镜像
  docker rmi -f ${DOCKER_IMAGES}
  
  TIME=`date "+%Y%m%d%H%M"`
  IMAGE_NAME_START=sat-operationalcloud-web-api:${TIME}
  docker build -t ${IMAGE_NAME_START} .
  
  #harbor项目地址
  HARBOR_ADDRESS=10.81.22.192:9090/sat/
  #项目地址
  SERVER_ADDRESS="${HARBOR_ADDRESS}${IMAGE_NAME_START}"
  #新镜像打标签
  docker tag ${IMAGE_NAME_START} ${SERVER_ADDRESS}
  #上传到harbor
  docker push ${SERVER_ADDRESS}
  

• 运行run.sh 构建镜像，如果run.sh没有执行权限，服务权限

  chmod +x run.sh