A front-end CI/CD implementation

This article is a memorable record of my successful deployment.

But not tutorials, just make your own flow notes.

As a front-end, I am happy to finally learn to deploy my own project with Docker.

Install Jenkins

Create docker-comemage. yml in the /home/jenkins/ folder and type the following

version: '3'
services:
  jenkins:
    container_name: 'jenkins'
    image: jenkins/jenkins:lts
    restart: always
    user: jenkins:994
    ports:
    - "10050:8080"
    - "50000:500000"
    - "10051:10051"
    volumes:
    - /home/jenkins/data:/var/jenkins_home
    - /usr/bin/docker:/usr/bin/docker
    - /var/run/docker.sock:/var/run/docker.dock
Copy the code

Run docker-compose up -d

Printing container information

Run docker logs -f Jenkins

Get the following password: 52 af7e9aeb9f45fab9b357cd069a5ccd

When the browser accesses IP+ port, the following results are displayed

Click Next and select the plugins recommended by the community

Waiting for plug-in installation

Create a user

You will see a global address:

Jenkins installation completed

Plug-in installation

Git related plug-ins are recommended

• GitLab
• PAM Authentication Plugin: Permission dependent
• Matrix Authorization Strategy Plugin: Permission dependent
• Role-based Authorization Strategy: role-based Authorization Strategy
• LDAP: role related
• GitLab Authentication: GitLab related
• ThinBackup: Backs up Jenkins
• AnsiColor: Color output
• BuildWithParameters: Build parameters

Create GitLab using Docker

Create the docker-comemage. yml file in the /home/gitlab folder

version: '2.3'

services:
  redis:
    restart: always
    image: Redis: 6.2
    command:
    - --loglevel warning
    volumes:
    - redis-data:/data:Z

  postgresql:
    restart: always
    image: sameersbn/postgresql:12-20200524
    volumes:
    - postgresql-data:/var/lib/postgresql:Z
    environment:
    - DB_USER=gitlab
    - DB_PASS=password
    - DB_NAME=gitlabhq_production
    - DB_EXTENSION=pg_trgm,btree_gist

  gitlab:
    restart: always
    image: Sameersbn/gitlab: 14.4.1
    depends_on:
    - redis
    - postgresql
    ports:
    - "13800:80"
    - "13822:22"
    volumes:
    - gitlab-data:/home/git/data:Z
    healthcheck:
      test: ["CMD"."/usr/local/sbin/healthcheck"]
      interval: 5m
      timeout: 10s
      retries: 3
      start_period: 5m
    environment:
    - DEBUG=false

    - DB_ADAPTER=postgresql
    - DB_HOST=postgresql
    - DB_PORT=5432
    - DB_USER=gitlab
    - DB_PASS=password
    - DB_NAME=gitlabhq_production

    - REDIS_HOST=redis
    - REDIS_PORT=6379

    - TZ=Asia/Kolkata
    - GITLAB_TIMEZONE=Kolkata

    - GITLAB_HTTPS=false
    - SSL_SELF_SIGNED=false

    - GITLAB_HOST = 47.105.85.212
    - GITLAB_PORT=13800
    - GITLAB_SSH_PORT=13822
    - GITLAB_RELATIVE_URL_ROOT=
    - GITLAB_SECRETS_DB_KEY_BASE=long-and-random-alphanumeric-string
    - GITLAB_SECRETS_SECRET_KEY_BASE=long-and-random-alphanumeric-string
    - GITLAB_SECRETS_OTP_KEY_BASE=long-and-random-alphanumeric-string

    - GITLAB_ROOT_PASSWORD=xxxxx
    - [email protected]

    - GITLAB_NOTIFY_ON_BROKEN_BUILDS=true
    - GITLAB_NOTIFY_PUSHER=false

    - [email protected]
    - [email protected]
    - [email protected]

    - GITLAB_BACKUP_SCHEDULE=daily
    - GITLAB_BACKUP_TIME=01:00

    - SMTP_ENABLED=false
    - SMTP_DOMAIN=www.example.com
    - SMTP_HOST=smtp.gmail.com
    - SMTP_PORT=587
    - [email protected]
    - SMTP_PASS=password
    - SMTP_STARTTLS=true
    - SMTP_AUTHENTICATION=login

    - IMAP_ENABLED=false
    - IMAP_HOST=imap.gmail.com
    - IMAP_PORT=993
    - [email protected]
    - IMAP_PASS=password
    - IMAP_SSL=true
    - IMAP_STARTTLS=false

    - OAUTH_ENABLED=false
    - OAUTH_AUTO_SIGN_IN_WITH_PROVIDER=
    - OAUTH_ALLOW_SSO=
    - OAUTH_BLOCK_AUTO_CREATED_USERS=true
    - OAUTH_AUTO_LINK_LDAP_USER=false
    - OAUTH_AUTO_LINK_SAML_USER=false
    - OAUTH_EXTERNAL_PROVIDERS=

    - OAUTH_CAS3_LABEL=cas3
    - OAUTH_CAS3_SERVER=
    - OAUTH_CAS3_DISABLE_SSL_VERIFICATION=false
    - OAUTH_CAS3_LOGIN_URL=/cas/login
    - OAUTH_CAS3_VALIDATE_URL=/cas/p3/serviceValidate
    - OAUTH_CAS3_LOGOUT_URL=/cas/logout

    - OAUTH_GOOGLE_API_KEY=
    - OAUTH_GOOGLE_APP_SECRET=
    - OAUTH_GOOGLE_RESTRICT_DOMAIN=

    - OAUTH_FACEBOOK_API_KEY=
    - OAUTH_FACEBOOK_APP_SECRET=

    - OAUTH_TWITTER_API_KEY=
    - OAUTH_TWITTER_APP_SECRET=

    - OAUTH_GITHUB_API_KEY=
    - OAUTH_GITHUB_APP_SECRET=
    - OAUTH_GITHUB_URL=
    - OAUTH_GITHUB_VERIFY_SSL=

    - OAUTH_GITLAB_API_KEY=
    - OAUTH_GITLAB_APP_SECRET=

    - OAUTH_BITBUCKET_API_KEY=
    - OAUTH_BITBUCKET_APP_SECRET=
    - OAUTH_BITBUCKET_URL=

    - OAUTH_SAML_ASSERTION_CONSUMER_SERVICE_URL=
    - OAUTH_SAML_IDP_CERT_FINGERPRINT=
    - OAUTH_SAML_IDP_SSO_TARGET_URL=
    - OAUTH_SAML_ISSUER=
    - OAUTH_SAML_LABEL="Our SAML Provider"
    - OAUTH_SAML_NAME_IDENTIFIER_FORMAT = urn: oasis: names: tc: SAML: 2.0: nameid - format: transient
    - OAUTH_SAML_GROUPS_ATTRIBUTE=
    - OAUTH_SAML_EXTERNAL_GROUPS=
    - OAUTH_SAML_ATTRIBUTE_STATEMENTS_EMAIL=
    - OAUTH_SAML_ATTRIBUTE_STATEMENTS_NAME=
    - OAUTH_SAML_ATTRIBUTE_STATEMENTS_USERNAME=
    - OAUTH_SAML_ATTRIBUTE_STATEMENTS_FIRST_NAME=
    - OAUTH_SAML_ATTRIBUTE_STATEMENTS_LAST_NAME=

    - OAUTH_CROWD_SERVER_URL=
    - OAUTH_CROWD_APP_NAME=
    - OAUTH_CROWD_APP_PASSWORD=

    - OAUTH_AUTH0_CLIENT_ID=
    - OAUTH_AUTH0_CLIENT_SECRET=
    - OAUTH_AUTH0_DOMAIN=
    - OAUTH_AUTH0_SCOPE=

    - OAUTH_AZURE_API_KEY=
    - OAUTH_AZURE_API_SECRET=
    - OAUTH_AZURE_TENANT_ID=

volumes:
  redis-data:
  postgresql-data:
  gitlab-data:
Copy the code

Run docker-compose up -d and wait for the docker draw to complete.

Jenkins Permission Configuration

Matrix authorization

When selecting the security matrix, it is important to first give the current user ID to all permissions

Gitlab authorization

The corresponding is root, not simoon

Configuring a Security Domain

Create an application in GitLab

Check the API

RedirectURI: http://47.105.85.212:10050/securityRealm/finishLogin

Is address + / securityRealm/finishLogin Jenkins

After saving the application, you get the following

Apply ID to Jenkins

Management Center -> Network -> Outgoing request

Check the

At this point, the Gitlub authorization has been successful.

Jenkins is docking with Gitlab

Gitlab creates a private project

Create two private projects on gitLab as follows:

Configure Jenkins to read project permissions

Add credentials to Jenkins:

System Administration -> Credentials Management -> Add Credentials

Select SSH username with private Key

Create a private key pair for Jenkins and GitLab docking separately:

ssh-keygen -t rsa -b 4096 -C "[email protected]"
Copy the code

Then on Jenkins side type private key:

Configuration completion diagram:

Configure the public key on gitLab side:

Manage -> Deploy Key -> Create a Deployment key

The gitLab configuration is complete

Configure warehouse options in the GitLab project

Enable publicly accessible deployment keys

At this point, Jenkins can pull the GitLab code.

Jenkins pulled the gitLab code

Create a task in Jenkins

In source control, select Git, enter the project address, and select the secret key to complete the configuration

Build the trigger

Click Advanced to generate the token

I’m going to use two things here, so let me copy them:

• webhookUrl
• Secret token

Webhookurl: http://47.105.85.212:10050/project/front-dev

Secret token: 96018aa86583eea327853bea1f386661

In the GitLab project, configure the WebhookURL and Secret Token

Settings -> Integration

Drop down to disable SSL authentication

At this point, we should see that webHook has been configured.

Add build operations to Jenkins

Select Build -> Execute shell in Jenkins

Then test the push in GitLab’s Webhook.

Push success will be displayed

And see a successful push on Jenkins’ project.

Configure the vue build file dockerfile

Dockerize Vue. Js App, there are about the configuration of dockerfile

Create a new Dockerfile file in your vue project and enter the following

# building
FROM node:10 as build-stage

LABEL maintainer="simoon"

Create a working directory
WORKDIR /app

Copy the current directory to the image
COPY . .
# install dependencies
RUN npm install
RUN npm run build

Copy the content to an nginx container
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
# run
CMD ["nginx"."-g"."daemon off;"]
Copy the code

Then create the.dockerignore file:

# Dependency directory
# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
node_modules
.DS_Store
dist

# node-waf configuration
.lock-wscript

# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
.dockerignore
Dockerfile
*docker-compose*

# Logs
logs
*.log

# Runtime data
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
pids
*.pid
*.seed
.git
.hg
.svn
Copy the code

Add a Dockerfile for the back-end project

# building
FROM node:10 

LABEL maintainer="simoon"

Create a working directory
WORKDIR /app

Copy the current directory to the image
COPY . .
# install dependencies
RUN npm install
RUN npm run build
# Exposed port
EXPOSE 12005
Public uploads static resources
VOLUME [ "/app/public" ]

Run the node name
CMD [ "node"."dist/server.bundle.js" ]
Copy the code

The backend also creates a.dockerignore file. I won’t repeat it here.

Write build shell scripts

In Jenkins’ Frontend project, do the following configuration

Add build parameters in general

The construction parameters are as follows:

#! /bin/bash

CONTAINER=${container_name}
PORT=${port}

echo  ${image_name}:${tag}

echo $CONTAINER -p $PORT: 80${image_name}:${tag}

RUNNING=${docker inspect --format="{{ .State.Running }}" $CONTAINER2 > /dev/null} # if [! -n$RUNNING]; then
	echo "$CONTAINER does not exit"
    return 1
fi

if [! -n $RUNNING]; then
	echo "$CONTAINER is not running" return 2 else echo "$CONTAINER is runing"
    # delete same name container
    matchingStarted=$(docker ps -a --filter="name=$CONTAINER" -q | xargs)
    if [ -n $matchingStarted ]; then
    	docker stop $matchingStarted
    fi
    
    matching=$(docker ps -a --filter="name=$CONTAINER" -q | xargs)
    if [ -n $matching ]; then
    	docker rm $matchingRun docker build --no-cache -t with dockerfile in the current directory${image_name}:${tag}Docker run -itd --name$CONTAINER -p $PORT: 80${image_name}:${tag}
Copy the code

If the build runs successfully, the following appears

At this point, you are ready to access the front-end project.

Back-end node project deployment

The back-end deployment is basically the same as the front-end.

Just change the shell script to look like this:

#! /bin/bash CONTAINER=${container_name} PORT=${port} echo ${image_name}:${tag} echo $CONTAINER -p $PORT:80 ${image_name}:${tag} RUNNING=${docker inspect --format="{{.state. RUNNING}}" $CONTAINER 2 > /dev/null} #  -n $RUNNING]; then echo "$CONTAINER does not exit" return 1 fi if [! -n $RUNNING]; then echo "$CONTAINER is not running" return 2 else echo "$CONTAINER is runing" # delete same name container matchingStarted=$(docker ps -a --filter="name=$CONTAINER" -q | xargs) if [ -n $matchingStarted ]; then docker stop $matchingStarted fi matching=$(docker ps -a --filter="name=$CONTAINER" -q | xargs) if [ -n $matching ];  Then Docker RM $matching # Docker build --no-cache -t ${image_name}:${tag}. # Docker run -itd --name $CONTAINER -p $PORT:12005 ${image_name}:${tag}Copy the code

That’s it. Deployment is complete.