Vue项目本地构建Docker镜像并自动部署到腾讯云

环境准备

Docker，Vue

配置文件部分

nginx.conf

#user nobody;
worker_processes 1;

# error_log /etc/nginx/logs/error.log;
# error_log /etc/nginx/logs/error.log notice;
# error_log /etc/nginx/logs/error.log info;

#pid logs/nginx.pid;

events {
    worker_connections 1024;
}


http {
    include 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 /etc/nginx/logs/access.log main;

    sendfile on;
    #tcp_nopush on;

    #keepalive_timeout 0;
    keepalive_timeout 65;

    #开启和关闭gzip模式
    gzip on;

    #gizp压缩起点，文件大于1k才进行压缩
    gzip_min_length 1k;
    
    # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
    gzip_comp_level 5;

    # 进行压缩的文件类型。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;

    #nginx对于静态文件的处理模块，开启后会寻找以.gz结尾的文件，直接返回，不会占用cpu进行压缩，如果找不到则不进行压缩
    gzip_static on;

    # 是否在http header中添加Vary: Accept-Encoding，建议开启
    gzip_vary on;

    # 设置压缩所需要的缓冲区大小，以4k为单位，如果文件为7k则申请2*4k的缓冲区 
    gzip_buffers 2 4k;

    # 设置gzip压缩针对的HTTP协议版本
    gzip_http_version 1.1;

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

default.conf

server{
    # 监听端口
    listen 8080;
    # 服务器名字
    server_name localhost;
    # 服务器index.html界面路径（dist的路径）
    location / {
        # dist文件夹的绝对路径
        root html;
        # html文件名
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
        autoindex on;
    }
    # 如果服务器需要跨域，设置跨域访问的路径（本服务器使用/api/路径访问位于3000端口的服务器）
    location /api {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://127.0.0.1:3000;
    }
}

dockerfile

FROM nginx
WORKDIR .
COPY ./nginx.conf /etc/nginx/nginx.conf
COPY ./default.conf /etc/nginx/conf.d/default.conf
COPY ./dist /etc/nginx/html/

docker_push.bat

set /p imageId=imageId:

docker tag %imageId% ccr.ccs.tencentyun.com/%镜像仓库地址% && docker push ccr.ccs.tencentyun.com/%镜像仓库地址%

docker_build.bat

npm run build && docker build -t %打包地址% . && docker login --username=%腾讯云用户名% ccr.ccs.tencentyun.com && docker images && docker_push.bat

腾讯云镜像仓库配置触发器

运行

直接运行docker_builder.bat即可