Docker image related Settings

preface

In order to make project deployment, operation and maintenance more convenient, we adopted docker image packaging to optimize the whole process steps.

1.Download and install Docker

You can go to me directly to test the installation package, online download is very slow

2. Configure the Docker address

Af.***** com.cn (mirror address for the company)

3. Create a basic image

Create the pmsc-frontend-base folder (the folder name is customized).

Create dockerfile in pmsc-frontend-base (dockerfile is fixed name)

Edit the dockerFile file

FROM node:14.16. 0-alpine MAINTAINER User name User name @***.com SHELL ["/bin/sh"."-c"]

RUN echo 'Folder name 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 project git echo'set npm registry' && \
    npm config set registry http://af.****.com.cn/artifactory/api/npm/npm-down/ && \
    echo 'npm install' && \
    cd ~/repos/Branch name / &&npm i&&echo'clean' && \
    cd ~/ && rm -rf ./repos/ && \
    echo 'done! '
Copy the code

Echo ” is the comment content, which can be customized
Sed -i ‘s/dl-cdn.alpinelinux.org/mirrors. * * * *. Com. Cn/g’/etc/apk/repositories will switch repositories is the source of the company
Apk add git &&apk add nginx Install git packages and nginx packages
sed -i ‘s/nginx; /root; /g’ /etc/nginx/nginx.conf add nginx to nginx.conf; Replace the root;
Mkdir -p /run/nginx Creates an nginx directory
Mkdir -p /root/repos Creates the repos directory
CD /root/repos/ Switch to the repos directory
Git Clone Project Git address cloning project
NPM config set registry http://af. * * * *. Com. Cn/artifactory/API/NPM/NPM – down/use NPM source
CD ~/repos/ Branch name/Go to the branch folder
NPM I download dependencies
Rm -rf./repos/ Delete the repos folder

Add git and nginx to the project NPM cache.

Eg (Cloud related configuration of parking lot) :

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! '
Copy the code

After the basic image configuration is complete, upload the image

Switch to the current dockerfile directory

cd dockerfiles
cd pmsc-frontend-base
Copy the code

Compile image packaging

Docker build -t mirror address/PMSC frontend - base: * * * - * * * * * * * * * *. - no - cache/ / * * * - * * * * * * * * * * version number time eg: 0.0.1 PMSC frontend - prod and components
Copy the code

Mirror the login

Docker Login Image address// The company needs to provide the login account and password
Copy the code

Image upload

Docker push mirror address/PMSC frontend - base: * * * - * * * * * * * * * *Copy the code

Viewing an Uploaded Image

docker images
Copy the code

4. Create production mirroring software

Create the pmsc-frontend-prod folder (folder name is optional).

Create dockerfile in the pmsc-frontend-prod folder.

Edit nginx. Conf

Create a files folder in the pmsc-frontend-prod folder and then create the nginx.conf file

Nginx. conf to configure the routing address of the project, so that different projects can enter different main interface

# 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 404Location ~ initial routing address (? <path>/.*)? {root /root/repos/ address of the front-end package file; 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; }}Copy the code

Eg Parking cloud configuration:

# 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(? 
      
       /
      . *)? { 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; }}Copy the code

Edit dockerfile

FROM image address/Basic image name MAINTAINER user name Username@*****. Com. Cn COPY files/nginx.conf (address of the configured nginx.conf) /etc/nginx/conf.d/default.conf

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

ENV BRANCH dev // Custom branch

RUN echo 'Folder name image build' && \
    mkdir -p /root/repos && \
    cd /root/repos/ && \
    echo 'git clone repos'&&\ git clone project location &&\ echo'checkout branch' && \
    cd ~/repos/Git checkout $BRANCH && \ echo'npm install' && \
    cd ~/repos/Branch name / &&npm i&&echo'npm build' && \
    cd ~/repos/Branch name / && NPM run build && \ echo'clean node_modules' && \
    cd ~/repos/Branch name / && rm -rf node_modules && echo build done! CMD nginx -g'daemon off; '

Copy the code

Eg Parking lot cloud related configuration:

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

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; '
Copy the code

Uploading a Packed Image

Switch to the current dockerfile directory

cd dockerfiles
cd pmsc-frontend-prod
Copy the code

Compile image packaging

Docker build -t mirror address/PMSC frontend - prod: * * * - * * * * * * * * * *. - no - cache// ***-********** Version time eg: 1.0.1-20210604151866 PMs-frontend -prod is related to the component name
Copy the code

Mirror the login

Docker Login Image address// The company provides the account password
Copy the code

Image upload

Docker push mirror address/PMSC frontend - prod: * * * - * * * * * * * * * *Copy the code

Viewing an Uploaded Image

docker images
Copy the code

Image run (local view use)

docker run -p 8088:80-it --rm Image address/PKMSC -frontend-prod:***-**********Copy the code

When the upload is successful, we just need to “image address /pmsc-frontend-prod:*-********” to the backend, they can download and deploy

Complete configuration file directory

The Charts backend is provided, and K8S is deployed and used

Note: If the project adds a large number of new dependencies, you can rebuild the base image to speed up the operation

Docker image related Settings

Docker image related Settings

preface

1.Download and install Docker

2. Configure the Docker address

3. Create a basic image

Create the pmsc-frontend-base folder (the folder name is customized).

Create dockerfile in pmsc-frontend-base (dockerfile is fixed name)

Edit the dockerFile file

After the basic image configuration is complete, upload the image

Switch to the current dockerfile directory

Compile image packaging

Mirror the login

Image upload

Viewing an Uploaded Image

4. Create production mirroring software

Create the pmsc-frontend-prod folder (folder name is optional).

Create dockerfile in the pmsc-frontend-prod folder.

Edit nginx. Conf

Edit dockerfile

Uploading a Packed Image

Switch to the current dockerfile directory

Compile image packaging

Mirror the login

Image upload

Viewing an Uploaded Image

Image run (local view use)

Related Posts

NPM run dev error: missing script:dev

Tailwind CSS is (probably) overrated

Small program learning notes 1-image, swiper