Ubuntu_Server_08. Jenkins 설정- Front 서버 ( Git + Vue + Nginx + Docker)

• 목표
  • 1. Ubuntu Docker 다운로드
  • 2. Jenkins > Plugin, Docker Plugin Install
  • 3. Jenkins > New Item > Freestyle Project 생성 (API Server Setup 비슷하므로, 스킵. Script 만 추가)
  • 4. Dockerfile, Nginx.conf 생성하여, Git Repository 에 넣기 
  • 5. Jenkins에서 Git Clone을 해서 (이때 위치 >  /var/lib/jenkins/workspace), 만들어진 파일을 Docker Build, Run
  • 6. Build Now

 

 

• Ubuntu Docker 다운로드

# Terminal > Docker Install 

## 우분투 시스템 패키지 업데이트
sudo apt-get update

## 필요한 패키지 설치
sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common

## Docker의 공식 GPG키를 추가
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -

## Docker의 공식 apt 저장소를 추가
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"

## 시스템 패키지 업데이트
sudo apt-get update

##  Docker 설치
sudo apt-get install docker-ce docker-ce-cli containerd.io

 

 

 

 

• Jenkins > Plugin> Docker Plugin > Install ( 총 4개)
  • [Docker, Docker Commons, Docker Pipeline, Docker API] 설치

 

 

 

• Jenkins > New Item > Freestyle Project 생성 (API Server@ Jenkins 비슷하므로, 스킵. Script 만 추가)

 

## 기본 레이아웃, Execute Shell

if docker ps -a --format "{{.Names}}" | grep "{컨테이너 이름}"; then
    echo "Stopping Original..."
    docker stop {컨테이너 이름}
else
    echo "Not Found."
fi

docker build -t {사용할 이미지 이름} .
docker run -d -p 7001:7001 --name {컨테이너 이름} --rm {사용할 이미지 이름}

=================================예제=================================
## Example

if docker ps -a --format "{{.Names}}" | grep "docker-front-container"; then
    echo "Stopping Original..."
    docker stop docker-front-container
else
    echo "Not Found."
fi

docker build -t docker-front-image .
docker run -d -p 7001:7001 --name docker-front-container --rm docker-front-image

 

 

• Dockerfile, Nginx.conf 생성하여, Front - Git Repository 에 넣기 

 

# Dockerfile

# Use an official Node.js runtime as the base image
FROM node:19.6 AS build

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json to the working directory
COPY package.json ./

# Install app dependencies
RUN yarn install

# Copy the rest of the project files to the working directory
COPY . .

# Build the Vue app
RUN yarn  build


# Use Nginx as the base image
FROM nginx:latest


# Remove the default Nginx configuration
RUN rm -rf /etc/nginx/conf.d/*

# Copy the custom Nginx configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy the built Vue app from the previous build stage to the Nginx web root
COPY --from=build /app/dist /usr/share/nginx/html

# Expose the port that the app will run on
EXPOSE 7001

# Define the command to run the app
CMD ["nginx", "-g", "daemon off;"]

 

 

# nginx.conf

server {
    listen 7001;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

 

 

 

• Jenkins에서 Git Clone을 해서 (이때 위치 >  /var/lib/jenkins/workspace), 만들어진 파일을 Docker Build, Run

# 위에서 작업한, Execute Shell

## 이미 가동중 > 종료, 가동 X > skip
if docker ps -a --format "{{.Names}}" | grep "docker-front-container"; then
    echo "Stopping Original..."
    docker stop docker-front-container
else
    echo "Not Found."
fi

## Docker build
docker build -t docker-front-image .

## Docker run @ 7001:7001
docker run -d -p 7001:7001 --name docker-front-container --rm docker-front-image

 

 

 

• Jenkins > Build Now > 192.168.153.113:7071 (접속ip: 7071)에서 프론트 작업 가능