Skip to content

Test Deployment Environment

Jump to bottom
Lee Min Wook edited this page Mar 1, 2022 · 17 revisions

AWS EC2 💻

Type vCPU Memory(GiB)
t2.micro 1 1

EC2 Instance (Ubuntu Server 18.04 LTS) Settings

1. Nginx Setting

Nginx란?

  • 엔진엑스(Nginx)는 동시접속 처리에 특화된 웹 서버이다.

Nginx 사용한 이유?

  • 정적 파일을 처리하는 HTTP 서버역할
  • 클라이언트와 앱서버 사이를 중계하는 리버스 프록시 역할
  • EC2에 설치된 Jenkins와 테스트서버를 공격으로부터 보호 역할
  • https 이용 목적

기본 설치

sudo apt update
sudo apt install nginx
service nginx status
http://my-ec2-ip 을 통해 nginx 기본 화면 나온다면 성공

Nginx 설정

cd /etc/nginx/sites-available
vim default
Nginx 설정보기 

upstream react-dev{
   server localhost:90;
}

## 테스트 서버 http
server { 
   listen 80; 
   server_name www.react-dev.p-e.kr react-dev.p-e.kr;
   charset UTF-8;
   location / {
      proxy_pass http://react-dev;
   }

  error_page 404 403 /;
}

upstream jenkins{
   server localhost:8080;
}
## 젠킨스 http
server { 
   listen 80; 
   server_name www.jenkins.p-e.kr jenkins.p-e.kr;
   return 301 https://$host$request_uri;
}
## 젠킨스 https
server{
   listen 443 ssl; 
   
   server_name www.jenkins.p-e.kr jenkins.p-e.kr;
   charset UTF-8;
   
   location / {
        proxy_pass http://jenkins;
   }
   error_page 404 403 /;

  ssl_certificate /etc/letsencrypt/live/www.mw.r-e.kr/fullchain.pem;
  ssl_certificate_key /etc/letsencrypt/live/www.mw.r-e.kr/privkey.pem;
}

2. Jenkins Setting

Jenkins란?

  • 지속적인 통합(Continuous integration,CI)과 지속적 배포(Continuous delivery, CD) 환경을 구축하기 위한 도구이다. 빌드, 테스트, 배포 프로세스를 자동화 하여 품질과 개발 생산성을 높이 수 있다.

Jenkins 역할

  • CI를 통해 코드의 품질을 높이기
  • CD를 통해 프론트,백엔드 진행 상황 공유 및 이중 체크를 실제 배포 전 버그를 미리 찾기

기본 설치

apt-get update
sudo apt install openjdk-11-jdk
java -version
sudo wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list'
sudo apt-get install jenkins
service jenkins start
service jenkins status
http://my-ec2-ip:8080 을 통해 jenkins 화면이 나온다면 성공
Jenkins 설정보기 

pipeline {
    agent any
    tools{
        git "git"
    }
    environment { 
        SLACK_CHANNEL = '#프론트배포'
        MESSAGE = "${env.JOB_NAME} [${env.BUILD_NUMBER}] \n URL: ${env.BUILD_URL} \n BRANCH : $REF \n PUSHER : $PUSHER_NAME ($PUSHER_EMAIL) "
        SUCCESS_MESSAGE = "SUCCESSFUL: ${MESSAGE}"
        ERROR_MESSAGE = "FAILED: ${MESSAGE}"
        START_MESSAGE = "STARTED: ${MESSAGE}"
    }
    // stages 하위에는 stage가 있고
    // stage는 stpes로 나뉘어 작업을 한다.
    stages {
        stage("prepare"){
            steps{
                echo 'prepare'
                git branch: "${BRANCH}", credentialsId: "GIT_ACCOUNT", url: 'https://github.com/Book-Pie/FE.git'
                sh  'ls -al'
            }
        }
        // CD 시작
        stage('start') {
            steps {
                echo '=====================start====================='
                slackSend (channel: "${SLACK_CHANNEL}", color: '#FFFF00', message: "${START_MESSAGE}")
            }
        }
        // 리액트 빌드 시작
        stage('build') {
            steps {
                script {
                    try{
                        echo '=====================build====================='
                        sh 'ls -al'
                        sh "git checkout "
                        sh "sudo yarn install"
                        sh "sudo yarn build"
                    }catch(Exception e){
                        slackSend (channel: "${SLACK_CHANNEL}", color: '#FF0000', message: "${ERROR_MESSAGE}")
                    }
                }
            }
        }
        // 리액트 도커에 deploy 
        stage('deploy') {
            steps {
                script {
                    try{
                         echo '=====================deploy====================='
                         sh "ls -al"
                         sh "docker rm -f `docker ps -a -q`"
                         sh "docker rmi `docker images -q`"
                         sh "docker-compose up -d"
                    }catch(Exception e){
                        slackSend (channel: "${SLACK_CHANNEL}", color: '#FF0000', message: "${ERROR_MESSAGE}")
                    }
                }
            }
        }
    }
    post {
        success {
            slackSend (channel: "${SLACK_CHANNEL}", color: '#00FF00', message: "${SUCCESS_MESSAGE}")       
        }
        failure {
            slackSend (channel: "${SLACK_CHANNEL}", color: '#FF0000', message: "${ERROR_MESSAGE}")       
        }
    }
}

3. Docker Setting

Docker란?

  • 컨테이너 기반의 오픈소스 가상화 플랫폼이다.

Docker 사용한 이유?

  • 동일한 리액트 배포환경을 구성하기 위해 사용했습니다.

기본 설치

// 오래된 도커 버전은 삭제 후 새 버전으로 다운로드 하기위한 과정
sudo apt-get remove docker docker-engine docker.io containerd runc
sudo apt-get update
sudo apt-get -y install \
    apt-transport-https \
    ca-certificates \
    curl \
    gnupg \
    lsb-release

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

sudo add-apt-repository \
"deb [arch=amd64] https://download.docker.com/linux/ubuntu \
$(lsb_release -cs) \
stable"

sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io
docker -v
service docker start
service docker status
Docker 설정보기 

FROM nginx:latest

# Workdir 한줄로 이동되고, 없으면 디렉토리 만들고 이동 or RUN mkdir /app
WORKDIR /app
# 도커컨테이너 접속되어있는 상태입니다.
RUN mkdir ./build
ADD ./build ./build

# 도커 nginx 설정 파일 삭제
RUN rm /etc/nginx/conf.d/default.conf
# nginx 설정 파일 복사
COPY nginx.conf /etc/nginx/conf.d

CMD ["nginx", "-g", "daemon off;"]

Clone this wiki locally