Docker方式部署Vue的dist包

Docker方式部署Vue的dist包

Linux部署Windows下Vue

Windows环境中的Vue依赖与Linux环境中的Vue依赖有差异。

Node.js 在Windows下和Linux下主要区别：安装方式不同，所支持的模块数量不同。某些模块的编译不同，从编码上来说，是一样的。

Windows版本的Vue + node_modules上传Linux系统，因为依赖不兼容的原因，会导致打包失败。

除非在联网环境中，npm install去安装Linux版本对应的node_modules，才能打包成功，即上传源代码到部署服务器才是有效的。

否则部署服务器只需要Windows下打包好的dist文件夹做部署使用。

创建镜像构建目录

mkdir -p /usr/local/projects/Vue
cd /usr/local/projects/Vue
mkdir -p dist
touch deploy.sh
touch Dockerfile
touch nginx.conf

Dockerfile

# 该镜像需要依赖的基础镜像
FROM nginx:stable

# 复制dist内容到站点
COPY dist/ /usr/share/nginx/html/

# 拷贝配置文件
COPY nginx.conf /etc/nginx/nginx.conf

# 指定维护者的名字
MAINTAINER yegetaier

nginx.conf

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
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;

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

    server
    {
      listen 80;
      # 部署服务器的IP，localhost会导致刷新404
      server_name 192.168.88.250;

      location / {
        root /usr/share/nginx/html;
        index index.html index.html;
        # 避免刷新404
        try_files $uri $uri/ /index.html;
      }
    }
}

deploy.sh

#!/usr/bin/env bash
# 初始化核心参数
# jenkins任务名
task_name='Vue'
# 镜像名
app_name='dist'
# 发布版本
version='latest'
dist_version='latest'
# harbor镜像仓库域名/IP地址
harbor_registry='192.168.88.250'
# Harbor镜像仓库
image_prefix='vue'
# 初始端口
INIT_EXPOSE=80
# 对外服务端口
EXPOSE=3001
# jenkins任务构建原路径
jenkins_jar_path='/usr/local/docker/jenkins/jenkins_home/workspace/'${task_name}
# 构建镜像路径
projects_path='/usr/local/projects/Vue'


# 停止删除容器
docker stop ${app_name}
echo 'stop container '${app_name}' success!'
docker rm ${app_name}
echo 'delete container '${app_name}' success!'


# 复制dist到指定目录
rm -rf ${projects_path}/dist
mkdir -p ${projects_path}/dist
cp -r ${jenkins_jar_path}/dist/.  ${projects_path}/dist


# 构建推送镜像
docker login --username=admin --password=admin http://${harbor_registry}

docker build -t ${image_prefix}/${app_name}:${dist_version} -f ${projects_path}/Dockerfile ${projects_path}/.
docker tag ${image_prefix}/${app_name}:${dist_version} ${harbor_registry}/${image_prefix}/${app_name}:${version}
docker push ${harbor_registry}/${image_prefix}/${app_name}:${version}


# 一键删除所有none镜像
docker rmi `docker images | grep none | awk '{print $3}'`
# 删除当前构建镜像
docker rmi ${image_prefix}/${app_name}:${dist_version}


# 运行容器
docker run -p ${EXPOSE}:${INIT_EXPOSE} --name ${app_name} -d ${harbor_registry}/${image_prefix}/${app_name}:${version}
echo 'run container '${app_name}' success!'

运行deploy.sh

运行 deploy.sh 脚本，实现Vue项目的dist包部署，以镜像+容器形式部署。

最终的镜像推送到Harbor仓库，Docker容器同时运行最终镜像，开启网站访问服务。