docker镜像相关设置

前言

为了项目部署和运维更加方便，我们采用docker镜像打包的方式，优化整个流程步骤。

1、下载安装docker

可以直接到我这里考安装包，线上下载很慢

2、配置docker地址

af.*****.com.cn（为公司提供镜像地址）

3、创建基本镜像

创建pmsc-frontend-base文件夹（文件夹名称自定）

在pmsc-frontend-base创建dockerfile文件（dockerfile为固定名称）

编辑dockerfile文件

FROM node:14.16.0-alpine

MAINTAINER  用户名  用户名@***.com.cn

SHELL ["/bin/sh", "-c"]

RUN echo '文件夹名称 image build' && \
    sed -i 's/dl-cdn.alpinelinux.org/mirrors.****.com.cn/g' /etc/apk/repositories && \
    apk add git && apk add nginx && \
    sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf && \
    mkdir -p /run/nginx && \
    mkdir -p /root/repos && \
    cd /root/repos/ && \
    echo 'git clone repos' && \
    git clone 项目git地址 && \
    echo 'set npm registry' && \
    npm config set registry http://af.****.com.cn/artifactory/api/npm/npm-down/ && \
    echo 'npm install' && \
    cd ~/repos/分支名称/ && npm i && \
    echo 'clean' && \
    cd ~/ && rm -rf ./repos/ && \
    echo 'done!'

• echo '' 中是注释内容，可自定义
• sed -i 's/dl-cdn.alpinelinux.org/mirrors.****.com.cn/g' /etc/apk/repositories 将repositories切换为公司的源
• apk add git && apk add nginx 安装git包和nginx包
• sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf 将nginx.conf 中nginx;替换成root;
• mkdir -p /run/nginx 创建nginx目录
• mkdir -p /root/repos 创建repos目录
• cd /root/repos/ 切换到repos目录下
• git clone 项目git地址 克隆项目
• npm config set registry http://af.****.com.cn/artifactory/api/npm/npm-down/ 使用npm源
• cd ~/repos/分支名称/ 进入分支文件夹
• npm i 下载依赖
• rm -rf ./repos/ 删除repos文件夹

以上是基础镜像配置，作用是添加git和nginx,加入项目npm的缓存。

eg（停车场云相关配置）:

FROM node:14.16.0-alpine

MAINTAINER  *** ****@****.com.cn

SHELL ["/bin/sh", "-c"]

RUN echo 'pmsc-frontend-base image build' && \
    sed -i 's/dl-cdn.alpinelinux.org/mirrors.*****.com.cn/g' /etc/apk/repositories && \
    apk add git && apk add nginx && \
    sed -i 's/nginx;/root;/g' /etc/nginx/nginx.conf && \
    mkdir -p /run/nginx && \
    mkdir -p /root/repos && \
    cd /root/repos/ && \
    echo 'git clone repos' && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmb.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pms.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmscmerchant-mobile.git && \
    git clone http://iris.*****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/portal.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmscmerchant.git && \
    git clone http://iris.*****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/tzg-app.git && \
    echo 'set npm registry' && \
    npm config set registry http://af.*****.com.cn/artifactory/api/npm/npm-down/ && \
    echo 'npm install' && \
    cd ~/repos/pmb/ && npm i && \
    cd ~/repos/pms/ && npm i && \
    cd ~/repos/pmscmerchant-mobile/ && npm i && \
    cd ~/repos/portal/ && npm i && \
    cd ~/repos/pmscmerchant/ && npm i && \
    cd ~/repos/tzg-app/ && npm i && \
    echo 'clean' && \
    cd ~/ && rm -rf ./repos/ && \
    echo 'done!'

基本镜像配置编写完成后，上传镜像

切换到当前dockerfile目录

cd dockerfiles
cd pmsc-frontend-base

编译镜像打包

docker build -t 镜像地址/pmsc-frontend-base:***-********** . --no-cache
// ***-********** 版本号时间 eg：0.0.1   pmsc-frontend-prod和组件名相关

镜像登录

docker login 镜像地址
// 需要公司提供登录账号和密码

镜像上传

docker push 镜像地址/pmsc-frontend-base:***-**********

查看上传镜像

docker images

4、创建生产镜像

创建pmsc-frontend-prod文件夹（文件夹名称自定）

在pmsc-frontend-prod文件夹创建dockerfile文件（dockerfile为固定名称）

编辑nginx.conf

在pmsc-frontend-prod文件夹下创建files文件夹，然后创建nginx.conf文件

nginx.conf作配置项目路由地址，使不同项目可以进不同主界面

# This is a default site configuration which will simply return 404, preventing    
# chance access to any other virtualhost.                                          
                                                                                   
server {
        listen 80 default_server;
        listen [::]:80 default_server;
        # Everything is a 404    

        location ~ 初始路由地址(?<path>/.*)? {
                root /root/repos/前端打包文件所在地址;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location / {
                root /root/repos/portal/dist;
                add_header Cache-Control no-cache;
                try_files $uri $uri/ /index.html =404;
        }

        # You may need this to prevent return 404 recursion.
        location = /404.html {
                internal;
        }
}

eg停车场云配置:

# This is a default site configuration which will simply return 404, preventing    
# chance access to any other virtualhost.                                          
                                                                                   
server {
        listen 80 default_server;
        listen [::]:80 default_server;
        # Everything is a 404

        location ~ /pms/tzgapp(?<path>/.*)? {
                root /root/repos/tzg-app/webapp_tzgapp/webapp_tzgapp;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location ~ /pms/couponMobile(?<path>/.*)? {
                root /root/repos/pmscmerchant-mobile/dist;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location ~ /pms/merchantCoupon(?<path>/.*)? {
                root /root/repos/pmscmerchant/dist;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location ~ /pms/carParkMobile(?<path>/.*)? {
                root /root/repos/pmb/dist;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location ~ /pms(?<path>/.*)? {
                root /root/repos/pms/dist;
                add_header Cache-Control no-cache;
                try_files $path /index.html =404;
        }

        location / {
                root /root/repos/portal/dist;
                add_header Cache-Control no-cache;
                try_files $uri $uri/ /index.html =404;
        }

        # You may need this to prevent return 404 recursion.
        location = /404.html {
                internal;
        }
}

编辑dockerfile

FROM 镜像地址/创建的基础镜像名称

MAINTAINER  用户名  用户名@*****.com.cn

COPY files/nginx.conf（配置的nginx.conf所在地址） /etc/nginx/conf.d/default.conf

SHELL ["/bin/sh", "-c"]

ENV BRANCH dev // 自定义分支

RUN echo '文件夹名称 image build' && \
    mkdir -p /root/repos && \
    cd /root/repos/ && \
    echo 'git clone repos' && \    
    git clone 项目所在git地址 && \
    echo 'checkout branch' && \
    cd ~/repos/分支名称/ && git checkout $BRANCH && \
    echo 'npm install' && \
    cd ~/repos/分支名称/ && npm i && \
    echo 'npm build' && \
    cd ~/repos/分支名称/ && npm run build && \
    echo 'clean node_modules' && \
    cd ~/repos/分支名称/ && rm -rf node_modules && \
    echo build done!

CMD nginx -g 'daemon off;'

eg停车场云的相关配置:

FROM af.*****.com.cn/docker-pbg-local/pmsc-frontend-base:0.0.1

MAINTAINER  **** ****@*****.com.cn

COPY files/nginx.conf /etc/nginx/conf.d/default.conf

SHELL ["/bin/sh", "-c"]

ENV BRANCH dev

RUN echo 'pmsc-frontend image build' && \
    mkdir -p /root/repos && \
    cd /root/repos/ && \
    echo 'git clone repos' && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmb.git && \
    git clone http://iris.*****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pms.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmscmerchant-mobile.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/portal.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/pmscmerchant.git && \
    git clone http://iris.****.com.cn/atmosphere/microcomponent/frontend/pms-cloud/tzg-app.git && \
    echo 'checkout branch' && \
    cd ~/repos/pmb/ && git checkout $BRANCH && \
    cd ~/repos/pms/ && git checkout $BRANCH && \
    cd ~/repos/pmscmerchant-mobile/ && git checkout $BRANCH && \
    cd ~/repos/portal/ && git checkout $BRANCH && \
    cd ~/repos/pmscmerchant/ && git checkout $BRANCH && \
    cd ~/repos/tzg-app/ && git checkout $BRANCH && \
    echo 'npm install' && \
    cd ~/repos/pmb/ && npm i && \
    cd ~/repos/pms/ && npm i && \
    cd ~/repos/pmscmerchant-mobile/ && npm i && \
    cd ~/repos/portal/ && npm i && \
    cd ~/repos/pmscmerchant/ && npm i && \
    cd ~/repos/tzg-app/ && npm i && \
    echo 'npm build' && \
    cd ~/repos/pmb/ && npm run build && \
    cd ~/repos/pms/ && npm run build && \
    cd ~/repos/pmscmerchant-mobile/ && npm run build && \
    cd ~/repos/portal/ && npm run build && \
    cd ~/repos/pmscmerchant/ && npm run build && \
    cd ~/repos/tzg-app/ && npm run build && \
    echo 'clean node_modules' && \
    cd ~/repos/pmb/ && rm -rf node_modules && \
    cd ~/repos/pms/ && rm -rf node_modules && \
    cd ~/repos/pmscmerchant-mobile/ && rm -rf node_modules && \
    cd ~/repos/portal/ && rm -rf node_modules && \
    cd ~/repos/pmscmerchant/ && rm -rf node_modules && \
    cd ~/repos/tzg-app/ && rm -rf node_modules && \
    echo build done!

CMD nginx -g 'daemon off;'

上传打包镜像

切换到当前dockerfile目录

cd dockerfiles
cd pmsc-frontend-prod

编译镜像打包

docker build -t 镜像地址/pmsc-frontend-prod:***-********** . --no-cache
// ***-********** 版本号时间 eg：1.0.1-20210604151866   pmsc-frontend-prod和组件名相关

镜像登录

docker login 镜像地址
// 公司提供账号密码

镜像上传

docker push 镜像地址/pmsc-frontend-prod:***-**********

查看上传镜像

docker images

镜像运行（本地查看使用）

docker run -p 8088:80 -it --rm 镜像地址/pmsc-frontend-prod:***-**********

当上传成功后，我们只需将 ‘镜像地址/pmsc-frontend-prod:*-********’，给后端，他们就能自己下载部署了

完整配置文件目录

charts后端提供，k8s部署使用，暂不做介绍

备注：如果项目增加大规模新的依赖，可以重新打基础镜像，提升运行速度