[배포-1] 프론트 배포하기

1. EC2 서버 만들기

    1-1. aws에서 ec2 클릭 -> 인스턴스 시작

    

 

 

     1-2. 이름 지정

 

 

 

 

 

    1-3. Os 지정

 

 

 

 

 

    1-4. 이름 지정

 

 

 

 

 

 

 

 

    1-5. 키 페어 생성 및 지정

키 페어 이름을 지정 후 키 페어 유형 : RSA, 프라이빗 키 파일 형식 : .pem 선택

 

 

생성한 키 페어 지정

   

   이 때 서버마다 각각 다른 키페어를 사용하는 걸 추천!

 

 

 

 

 

 

 

    1-6. 네트워크 설정 ( 방화벽은 직접 설정한 보안그룹으로 설정하는 걸 추천)

 

 

 

 

 

 

    1-7. 스토리지 용량 설정 ( 프리티어는 30GB 허용하니 30GB로 설정할 것)

 

 

 

 

 

    1-8. 인스턴스 생성

 

 

 

 

 

    1-9. 백엔드 서버를 포함한 nginx, jenkins 서버 생성

 

 

 

 

 

2. Putty 설정 후 SSH 접속하기

     2-1. putty 에서 IP주소 입력하기

IP주소는 아래 EC2의 퍼블릭 IPV4 주소를 입력하면 된다.

 

 

 

    2-1. puttygen 에서 .pem 파일을 .ppk 파일로 변환하기

빨간 박스 안에 Load 클릭

 

빨간 박스를 All Files 로 바꾸고 .pem 파일 클릭 후 열기

 

빨간 박스의 Save private key 클릭

.ppk 파일 저장

   

 

 

 

 

 

    2-2. putty 에서 SSH - Auth - Credentials 에서 private key 넣기

 

 

 

   2-3.  해당 서버 저장해놓기(필수 사항은 아니지만 추천)

IP주소와 Auth 설정을 끝낸 후 해당 서버를 따로 저장한 뒤 Load로 간편하게 불러올 수 있다.

   

 

    2-4. putty 에서 원격서버 연결하기

저장해논 서버를 Load 후 Open 버튼을 눌러 SSH 연결시도를 한다.

 

ubuntu 입력 후 엔터

 

이 와 같이 nginx용 서버,  jenkins용 서버,  백엔드용 서버를 SSH를 통해 연결한다.

 

 

 

3. jenkins 서버 세팅하기

 

   3-1. putty 창에 아래 명령어 입력

sudo apt update

sudo apt upgrade -y

sudo apt install openjdk-17-jdk -y

sudo apt install apt-transport-https ca-certificates curl software-properties-common -y

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

echo "deb [arch=amd64 signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

sudo apt update -y

sudo apt install docker-ce docker-ce-cli containerd.io -y

sudo systemctl start docker

sudo systemctl enable docker

sudo docker run -d -p 8080:8080 -p 50000:50000 --name jenkins --restart=always -v jenkins_home:/var/jenkins_home jenkins/jenkins:lts

 

 

 

   3-1. [Jenkins 서버주소]:8080 로 접속 후 비밀번호 입력

 

 

 

   3-2. Jenkins 비밀번호 확인 명령어

sudo docker exec jenkins cat /var/jenkins_home/secrets/initialAdminPassword

 

 

   3-3. Intall suggested plugins 선택

 

 

  3-4. 설치 실패한 플러그인이 있을 경우 성공할 때까지 다시 설치

 

 

 

   3-5. 사용자 계정 만들기

 

 

 

 

 

 

 

4. nginx 서버 세팅하기

   4-1. putty 창에 아래 명령어 입력

sudo apt update

sudo apt upgrade -y

sudo apt install nginx

sudo systemctl start nginx

sudo systemctl enable nginx

 

 

 

 

 

5. 백엔드 서버 세팅하기

   5-1. putty 창에 아래 명령어 입력

 

sudo apt update

sudo apt upgrade -y

sudo apt install openjdk-17-jdk -y

 

 

 

 

 

 

6. Jenkins 의 개인키와 공개키 생성 후 nginx, 백엔드 서버에 공개키 넣기

 

 

   6-1. 현재 실행중인 Docker 컨테이너 목록을 확인

sudo docker ps

 

Jenkins 서버 bash쉘 .

 

빨간 박스가 컨테이너ID

 

 

 

 

 

 

 

   6-2. 컨테이너 내부에 들어가서 bash 쉘에 접속

 

sudo docker exec -it <컨테이너ID> /bin/bash

Jenkins 서버 bash쉘

 

 

 

 

 

 

   6-3. 개인키와 공개키를 생성한다.

ssh-keygen -t rsa -b 4096

 

 

 

 

 

 

   6-4. jenkins 서버의 공개키를 확인한다.

cat /var/jenkins_home/.ssh/id_rsa.pub

 

Jenkins 서버 bash쉘

 

 

 

 

 

 

   6-5. 백엔드서버와 nginx서버에 jenkins 서버의 공개키를 저장한다. (Ctrl + C 로 복사 후 마우스 우클릭하여 붙여넣기)

vi ~/.ssh/authorized_keys

 

 

7. ( Jenkins,  nginx,  백엔드 ) 3개 서버에 스왑메모리 설정하기

특히 ec2에서 Jenkins 서버는 1GB 메모리를 사용하기 때문에 파이프라인 실행 도중 먹통이 되는 경우가 많기 때문에 스왑메모리 설정하는 걸 추천

 

7-1. 스왑 파일 생성 ( bs : 블록크기, count : 블록 수 )

sudo dd if=/dev/zero of=/swapfile bs=128M count=16

 

 

7-2. 스왑파일 읽기 및 쓰기 권한 부여(rw)

sudo chmod 600 /swapfile

 

 

7-3. 스왑 영역 설정

sudo mkswap /swapfile

 

 

7-4. 스왑 공간에 스왑 파일 추가

sudo swapon /swapfile

 

 

7-5. 성공적으로 완료되었는지 확인하기

sudo swapon -s

 

 

7-6. 스왑 파일 활성화하기 ( 파일의 가장 하단에 해당 명령어 추가 )

sudo vi /etc/fstab

/swapfile swap swap defaults 0 0

 

 

 

7-7. 스왑메모리 확인해보기(swap 부분이 스왑메모리)

free -h

 

 

 

 

8. github에서 웹훅 토큰 생성

 

8-1. github 프로필에서 settings 클릭

 

 

 

 

8-2. 왼쪽 설정창에서 Developer settings 클릭

 

 

 

 

8-3. 왼쪽의 Tokens(classic) 클릭 후 Generate new token(classic) 클릭

 

 

 

8-4. Note 에 토큰 이름 지정,

Expiration은 실제 jenkins에 세팅하는 경우 No expiration 추천,

admin:repo_hook 둘 다 체크

 

 

 

 

8-5. 그렇게 토큰을 생성하면 다음과 같이 토큰 키가 나오는데 한번 나오고 다시 볼 수 없으니 따로 저장해둘 것

 

 

 

 

 

 

8-6. 다시 웹훅을 적용한 리포지터리에 들어가서 Settings의 Webhook 클릭

 

 

 

 

 

8-7. Add webhook 클릭

 

 

 

8-8. webhook 설정

Payload URL : [Jenkins IP주소]:포트번호/github-webhook/

Content type : 요청을 json으로 보낼지  urlencoded로 보낼지 선택( 일반적으로 json을 많이 씀 ) 

Which events would you like to trigger this webhook? : 어떤 경우에 webhook을 보낼건지 지정하는 것

 

 

 

 

 

8-9. webhook 생성 완료

 

 

 

 

 

 

 

9. Jenkins에서  웹훅을 사용하기 위한 설정

 

 

9-1. 프론트를 위한 파이프라인 생성

 

 

 

 

 

9-2. 파이프라인 생성 후 General 에서 Github project 에 프론트 코드가 담겨있는 깃허브 주소 입력

Trigger에는 Github hook trigger GITScm polling 체크 후 save 클릭

 

 

 

 

9-3. jenkins에서 credentials 추가

Username : 깃허브 닉네임

Password : 웹훅 토큰 

ID : 파이프라인 스크립트에서 해당 웹훅을 사용하기 위한 변수이름

 

 

 

 

 

10. 파이프라인 실행 전 jenkins 설정

10-1. Jenkins 관리 -> Plugins 

 

 

10-2. Plugins -> Available plugins -> nodejs 검색 후 플러그인 설치 

 

 

 

10-3. Plugins -> Available plugins -> ssh agent 검색 후 플러그인 설치

 

10-4. Jenkins 관리 -> Tools 

Gradle 추가, NodeJs 추가(여기서 NodeJs는 22버젼 이하로 설치하는 걸 추천)

 

 

 

10-4. Jenkins 관리 -> Credentials -> Add Credentials 

Kind : SSH Username with private key 로 선택

ID : deploy_ssh_key 로 지정

Private Key : Enter directly 선택 후 아래 jenkins 서버에서 cat /var/jenkins/.ssh/id_rsa 명령어 입력 후 나오는 개인키 삽입

 

 

 

 

11. jenkins 파이프라인 스크립트 설정

 

11-1. 기존 생성한 파이프라인 클릭 -> 구성 -> 맨 아래 스크립트에 입력

pipeline {
    agent any

    tools {
        nodejs "NODEJS"  // Ensure the NodeJS tool is configured in Jenkins
    }

    environment {
        REPO_URL = 'https://github.com/DongHun3946/new_stockBurning_frontend'
        BRANCH = 'master'
        SSH_KEY = 'deploy_ssh_key'
        GITHUB_TOKEN = 'github_token'
        DEPLOY_PATH = '/var/www/html'
        BUILD_DIR = 'dist'
        SERVER_IP = '13.124.156.34'  // Nginx 서버 IP
    }

    stages {
        stage('Clone Repository') {
            steps {
                git branch: BRANCH, url: REPO_URL, credentialsId: GITHUB_TOKEN
            }
        }
        stage('Clean workspace') {
            steps {
                script {
                    // Clean the workspace by removing node_modules and yarn.lock
                    sh 'rm -rf node_modules yarn.lock'
                }
            }
        }
        stage('Install dependencies with Yarn') {
            steps {
                script {
                    // Install yarn if not already installed
                    sh 'npm install -g yarn'

                    // Install the dependencies using yarn
                    sh 'yarn install'
                }
            }
        }

        stage('Build with Vue CLI') {
            steps {
                script {
                    // Build the project using yarn
                    sh 'yarn build'
                }
            }
        }

        stage('Deploy to Nginx Server') {
            steps {
                sshagent([SSH_KEY]) {
                    script {
                        // 📌 Nginx의 기존 파일 삭제
                        sh """
                        ssh -o StrictHostKeyChecking=no ubuntu@$SERVER_IP 'sudo rm -rf $DEPLOY_PATH/*'
                        """
                        sh """
                        ssh -o StrictHostKeyChecking=no ubuntu@$SERVER_IP 'sudo chown -R ubuntu:ubuntu /var/www/html'
                        ssh -o StrictHostKeyChecking=no ubuntu@$SERVER_IP 'sudo chmod -R 755 /var/www/html'
                        """
                        // 📌 빌드된 파일 전송
                        sh """
                        scp -o StrictHostKeyChecking=no -r $BUILD_DIR/* ubuntu@$SERVER_IP:$DEPLOY_PATH/
                        """

                        echo "✅ Deployment to Nginx server was successful."
                    }
                }
            }
        }
    }

    post {
        always {
            echo 'Frontend deployment process finished.'
        }
        success {
            echo '✅ Frontend deployment completed successfully!'
        }
        failure {
            echo '❌ Frontend deployment failed.'
        }
    }
}

 

 

 

 

12. 도메인 구매 및 설정

 

 

12-1. 원하는 도메인명 검색 후 구매

 

 

 

 

12-1. DNS 설정에서 설정 후 저장

타입 : A

호스트 : www

값 : nginx 서버 IP주소

TTL : 제일 작은 값

 

 

 

 

13. nginx 설정

 

13-1. /etc/nginx/sites-available 폴더로 이동

cd /etc/nginx/sites-available/

 

 

 

13-2. default 파일 수정하기

sudo vi default

 

 

 

13-3. default 파일 수정하기

server_name {도메인 이름} {nginx IP주소}

try_files $uri $uri/ /index.html

 

 

13-4. nginx 재시작 및 테스트

sudo systemctl restart nginx

sudo nginx -t

 

 

 

13-5. jenkins 파이프라인 스크립트 실행하기

 

 

 

 

 

 

결과

www.stockburning.shop  으로 접속