Naver Cloud DB for MySQL설정과 react 설정

1) GitHub Token 발급 -> Settings - Developer settings -> New personal access token(classic)

 

2) Jenkins 관리 -> Plugins -> Avaliable plugins -> github integration 검색 -> Install

 

3) 설치 한 후 Jenkins 관리 -> Credential -> Stores scoped to Jenkins에 (global) 클릭

     -> Add Credentials 버튼 클릭

 

4) Kind : Secret text & Secret : Github Token & ID랑 Description은 원하는대로 주면 됨 !

 

5) Jenkins 관리 -> System -> GitHub Server 추가 -> Name은 원하는대로 & Credentials는 방금 만든 github_access_token2

 

6) 만들어둔 jenkins_github_webhook으로 가서 -> 구성 -> Pipeline 12번째줄 13번째줄 본인 것으로 수정 

pipeline {
    agent any
    
    tools {
        jdk 'openjdk-17-jdk'
    }
    
    stages {
        stage('Prepare') {
            steps {
                git branch: 'main',
                    credentialsId: 'github_access_token2',
                    url: 'https://github.com/yujung1339/jenkinsProject.git'
            }
            
            post {
                success { 
                    sh 'echo "Successfully Cloned Repository"'
                }
                failure {
                    sh 'echo "Fail Cloned Repository"'
                }
            }    
        }
        
        stage('Build Gradle Test') {
            
            steps {
                sh (script:'''
                    echo "Build Gradle Test Start"
                ''')

                dir('.') {
                    sh """
                    chmod +x gradlew
                    """
                }
                
                dir('.') {
                    sh """
                    ./gradlew clean build
                    """
                }
            }
            
            post {
                success { 
                    sh 'echo "Successfully Build Gradle Test"'
                }
                 failure {
                    sh 'echo "Fail Build Gradle Test"'
                }
            }    
        }
        
        stage('Docker Rm') {
            steps {
                sh 'echo "Docker Run Start"'
                sh """
                docker stop timecapsule
                docker rm -f timecapsule
                docker rmi -f timecapsule
                """
            }
            
            post {
                success { 
                    sh 'echo "Docker Rm Success"'
                }
                failure {
                    sh 'echo "Docker Rm Fail"'
                }
            }
        }
        
        stage('Bulid Docker Image') {
            steps {
                sh 'echo " Image Bulid Start"'
                sh """
                docker build -t timecapsule .
                """
            }
            
            post {
                success {
                    sh 'echo "Bulid Docker Image Success"'
                }

                failure {
                    sh 'echo "Bulid Docker Image Fail"'
                }
            }
        }
        
        stage('Docker Run') {
            steps {
                sh 'echo "Docker Run Start"'
                sh """
                docker run \
                  --name=timecapsule \
                  -p 80:8080 \
                  -v /docker_projects/aaaaa/volumes/gen:/gen \
                  --restart unless-stopped \
                  -e TZ=Asia/Seoul \
                  -d \
                  timecapsule
                """
            }
            
            post {
                success {
                    sh 'echo "Docker Run Success"'
                }

                failure {
                    sh 'echo "Docker Run Fail"'
                }
            }
        }
    }
}

 

7) GitHub Repository -> Settings -> Webhooks에 생성된 것 확인 가능

     -> PayloadURL에 맨뒤에 꼭 / 붙이기 !!! -> Disabled로 체크하기 !!!

 

---

[ Cloud DB form NySQL 서버 생성 방법 ]

 

1) Cloud DB form MySQL

 

2) 고가용성 지원 체크하면 돈이 너무 많이 나감, VPC랑 Subnet은 만들어둔거 사용, 데이터 스토리지 타입 : HDD

    DB Server 이름과 DB 서비스 이름은 원하는 걸로

    ( 안 돼서 DB-Server이름이랑 DB 서비스 이름 둘다 testdb로 다시 만듦)

 

3) %는 DB접근 아이피를 모든 아이피로 설정하겠단 의미, 기본 DB명과 Backup 파일 보관 기간은 알아서 !

    USER_ID와 USER 암호는 기억 잘 해두기 ! 

 

4) 최종확인

 

5) DB 관리 -> Public 도메인 관리 클릭 -> 해줘야지 Public 도메인 주소가 뜸 ! 지금은 미할당 상태 

    -> 이때 이 주소가 인텔리제이 applications.properties에 들어가는 주소임 !!!

---

 

[ ACG port 번호 열어주기 ]

1) Server -> ACG -> ACG 생성 -> port 번호 열어주기 -> 접근 소스 : 0.0.0.0/0 & 허용 포트 : 3306 -> 추가 -> 적용

---

[ MySQL Workbech ]

 

1) Connection Name : testdb / Hostname : Public 도메인 주소 / Port : 3306 /

    Username과 Password는 서버 생성할때 정한걸로

---

[ 인텔리제이에서 DB 연결하기 ]

 

1) applications.properties코드 수정 -> url, username, password 수정 !

spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://db-obijb-kr.vpc-pub-cdb.ntruss.com:3306/practicedb?serverTimezone=Asia/Seoul&characterEncoding=UTF-8
spring.datasource.username=user
spring.datasource.password=..

spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.format_sql=true
spring.jpa.show-sql=true
spring.jpa.properties.hibernate.show_sql=true

spring.servlet.multipart.max-request-size=30MB
spring.servlet.multipart.max-file-size=10MB
kr.bit.upload.path=upload

server.port=8080

 

---

FROM nginx:alpine
RUN rm -rf /etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/default.conf

RUN rm -rf /usr/share/nginx/html/*
COPY build /usr/share/nginx/html

EXPOSE 80
ENTRYPOINT ["nginx", "-g", "daemon off;"]

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        large_client_header_buffers 4 32k;
        root /usr/share/nginx/html;

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

---

[ 리액트 연동 ]

 

1) GitHub 새로운 Repository 생성  (=react_todo)

 

2)  /docker_projects/aaaaa/project경로에서 mkdir front -> cd front   

    -> /docker_projects/aaaaa/project/front에서 git clone https://github.com/yujung1339/react_todo.git

    -> mv react_todo/ .. : react_todo 디렉토리를 부모 디렉토리(..)로 이동 ( /docker_projects/aaaaa/project/react_todo )

    -> cd .. : 부모 디렉토리로 이동 ( 현재 경로는 /docker_projects/aaaaa/project )

    -> rm -rf front/ : front 디렉토리를 재귀적으로 강제 삭제 ( /docker_projects/aaaaa/project/front 디렉토리 삭제 )

• 처음에 /docker_projects/aaaaa/project/front 디렉토리를 생성하고, 그 안에 GitHub 저장소를 클론
• 클론된 저장소 디렉토리(react_todo)를 상위 디렉토리(/docker_projects/aaaaa/project)로 이동시킴
• 마지막으로, 중간 디렉토리인 front를 삭제

/docker_projects/aaaaa/project# mkdir front
/docker_projects/aaaaa/project# cd front
/docker_projects/aaaaa/project/front# 

/docker_projects/aaaaa/project/front# mv react_todo/ ..  
/docker_projects/aaaaa/project/front# cd ..

/docker_projects/aaaaa/project# rm -rf front/
/docker_projects/aaaaa/project# cd react_todo 

/docker_projects/aaaaa/project/react_todo#

 

3) 우분투 환경에 npm 설치 -> 🩷 apt npm install

 

4) Jenkins -> 새로운 item -> Pipeline

 

5) Jenkins 관리 -> Plugins -> Availavle plugins -> nodejs 설치 -> Installed plugins에 nodejs 있는지 확인 

 

6) 위에서 만든 Pipeline의 reacttest를 수정 -> GitHub project와 GitHub hook trigger for GITScm polling 체크 !

pipeline {
    agent any
    
    tools {
        nodejs "Node18" 
    }
    
    stages {
        stage('Prepare') {
            steps {
                git branch: 'main',
                    url: 'https://github.com/yujung1339/react_todo.git'
            }
            
            post {
                success { 
                    sh 'echo "Successfully Cloned Repository"'
                }
                failure {
                    sh 'echo "Fail Cloned Repository"'
                }
            }    
        }

        stage('React build') {  // react를 빌드하는 코드 적기
            steps {
                dir('.') { // gitlab의 forntend라는 branch에서
                    echo 'React build' // React build라 부르겠다.
                    sh 'npm install' // npm install을 실행하고 
                    sh 'CI=false npm run build' // npm run build를 실행한다.
                }
            }
        }

        stage('Dockerimage build') {
            steps {
                dir('.') {
                    sh ''' 
                    echo 'Dockerimage build for React' // Dockerimage build for react라고 부르겠다.
                    docker build -t docker-react:0.0.1 . 
                    '''
                }
            }
        }

        stage('Deploy') {
            steps {
                sh '''
                echo 'Deploy React'
                docker stop react
                docker rm react
                docker run -d -p 3000:80 --name react docker-react:0.0.1 

                '''
            }
        }
    }
}

 

7) Jenkins 관리 -> Tools -> 위에서 설치한 NodeJS installations 확인할 수 있음 !

     -> Name과 Version은 Pipeline script에서 설정한거랑 맞게 설정

tools { nodejs "Node18" } -> Pipeline script의 tools 이름을 사용 

 

8) iterm으로 돌아가서

    -> 🩷 docker ps -> 후 나오는 jenkins IMAGE의 CONTAINER ID를 입력

    -> 🩷 docker exec -it 4767d5ebabf4 /bin/bash -> Docker Container 내부로 들어가겠다는 의미 !

 

9) root@기본 디렉토리가 아닌 jenkins로 들어가고 싶음 ! 

   -> 🩷 cd workspace : 만약 workspace가 없으면 Jenkins 페이지에서 reacttest를 지금 빌드 ! -> 이때 에러 떠도 상관 없음

   -> Pipeline script 40번째줄에서 image를 뭐로 주겠다고 설정 해놨음 ! -> 🩷 docker build -t docker-react:0.0.1 . 

 

10)  도커 실행까지 ! -> 🩷 docker run -d -p 3000:80 --name react docker-react:0.0.1

 

11) 브라우저창에 공인아이피:3000 접속 

     -> 이때 혹시 Jenkins에서는 빌드가 됐는데 위에 주소로 접속이 안 된다면 ACG 설정 가서 3000번 포트 방화벽 설정 해주기 

 

---

[ Webhook 작업 -> Jenkins에서 자동 빌드 되도록 ]

 

1) GitHub Token 발급 -> Settings - Developer settings -> New personal access token(classic)

    위에 작업이랑 똑같이 하면 됨 !

---

 

[ react_todo Repository에서 src/App.js/38번째줄 ]

  const test = () => {
    axios.get("http://223.130.156.9:80/").then(function (response) {
      // 성공한 경우 실행
      console.log(response);
    });
  };

 

나중에 플젝할 때 포트번호는 상관 없으나 앞에 아이피 주소는 공인아이피주소로 넣기 !