본문 바로가기
카테고리 없음

서버 옮기기 대장정(3) - 새 ec2에서 front, back 연결 확인하기

by socialcomputer 2025. 10. 4.
반응형

이제 데이터는 다 옮겼으니 ec2를 생성하고 백엔드와 프론트엔드를 도커컴포즈로 실행해 db와 연결이 되는지 확인해 볼 것이다. 

 

0. 깃허브액션을 사용한다면 모든 ipv4 tcp가 ssh(port22)로 접근 가능하도록 허용해줘야 한다. 

 ec2를 key가 있어야 접근가능하도록 하기 위해 인스턴스 생성시 키페어를 함께 생성해줘야 한다

 

1. 도커와 도커 컴포즈, git을 설치한다

ec2는 우분투로 생성했다. 

도커를 설치하기 전에 swap메모리를 할당해야 한다. ec2가 1g인가 2기가로 작아서 늘려줘야 도커가 중간에 멈추지 않는다.

sudo dd if=/dev/zero of=/swapfile bs=1G count=4

# swapfil을 루트(root) 사용자만 접근할 수 있도록 권한을 설정
sudo chmod 600 /swapfile

# 생성한 파일을 시스템이 스왑 공간으로 인식할 수 있도록 포맷
sudo mkswap /swapfile

# Swap 파일 활성화
sudo swapon /swapfile

# 스왑 메모리가 정상적으로 추가되었는지 확인
sudo swapon --show
free -h

# 시스템이 재부팅될 때마다 자동으로 스왑 파일을 활성화하도록 /etc/fstab 파일에 등록
# vi로 이 내용을 직접 추가해도 됨
echo '/swapfile none swap sw 0 0' | sudo tee -a /fstab

도커와 도커 컴포즈 설치

# 패키지 목록 업데이트 및 필요 도구 설치
sudo apt-get update
sudo apt-get install ca-certificates curl

# Docker 공식 GPG 키 저장소 설정
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc

# Docker apt 저장소 추가
echo \
  "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
  $(. /etc/os-release && echo "$VERSION_CODENAME") stable" | \
  sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

# Docker 엔진 및 Compose 설치
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
sudo 없이 docker 

# 명령어 사용 설정 (권한 부여)
sudo usermod -aG docker ${USER}

# 적용을 위해 반드시 SSH 접속을 끊었다가 다시 로그인해야됨
# 설치 확인
docker --version
docker compose version

 

깃 설치

sudo apt-get update
sudo apt-get install git

git --version

# (선택사항) 초기 이름 및 이메일 설정
git config --global user.name "Your Name"
git config --global user.email "youremail@example.com"

사실 front도 깃허브 액션을 사용했으면 git이 없어도 된다.

back은 깃허브 액션을 활용해서 푸시하면 도커이미지가 만들어지고 컨테이너가 돌아가게 해놨다.

변수는 settings > secret and variables 에서 Action > repository secrets 에 저장해뒀다.

일단 남의 코드를 깃허브에다 수정하기 좀 그렇기도 하고 front에 노출됐던 시크릿키, 도메인 변경등 수정해야 될 코드가 있어 git으로 가져와 수정하기로 했다. 

뭐든 변수로 저장해두는게 유지보수가 진짜 편해진다는걸 몸소 깨닫는다😭

 

2.  docker-compose.yml 파일에서 front와 back을 우선 변경해 둔다

version: "3"
services:
  frontend:
    image: dockerid/app-font:latest
    container_name: next_frontend
    ports:
      - "3000:3000"

  nginx:
    image: nginx:latest
    container_name: nginx_proxy
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    depends_on:
      - backend
      - frontend

  certbot:
    image: certbot/certbot
    container_name: certbot
    volumes:
      - ./certbot/conf:/etc/letsencrypt
      - ./certbot/www:/var/www/certbot
    entrypoint: "/bin/sh -c 'trap exit TERM; while :; do sleep 6h & wait $${!}; certbot renew; done;'"
    
  backend:
    image: dockerid/app-back:latest
    container_name: backend
    ports:
      - "8080:8080"
    environment:
      SPRING_PROFILES_ACTIVE: "prod"

certbot과 nginx는 아직 실행하지 말자 도메인 구매후 설정할때 할 예정

 

3. 백엔드와 RDS, S3가 잘 연결되는 지 포스트맨으로 테스트한다

  • 퍼블릭주소, ec2 ssh key, rds주소, s3엑세스키, (도메인주소) 등을 변경하고 이미지를 빌드후 컨테이너를 실행한다.
  • s3버킷명이 달려져, 파일 전체주소를 저장했던 db에 update와 replace명령어를 사용해 새 버킷명으로 변경했다. 

참고로 RDS가 요금이 커서 찾아보니 gp2보다 gp3가 요금이 덜 나온다고 해서 바꿔줬다.

그리고 kms로 복원한 스냅샷은 그 kms가 있어야 복사나 복원이 가능하다

그래서 다시 스냅샷을 aws/rds 키로 복사하고 복원했다. 왜냐하면 고객관리형 kms는 유료다

 

백엔드의 도커파일은 이렇다. 

FROM openjdk:17-jdk

WORKDIR /app

RUN rm -rf /app/*.jar

COPY build/libs/springbootapp-0.0.1-SNAPSHOT.jar app.jar

ENV TZ=Asia/Seoul

ENTRYPOINT ["java", "-Duser.timezone=${TZ}", "-jar", "app.jar"]

깃허브액션 deploy.yml이다

name: Build and Deploy Spring Boot Docker App

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest  # GitHub Action은 기본적으로 Ubuntu 환경에서 실행됨

    steps:
      # 1. Check out the repository
      - name: Checkout repository
        uses: actions/checkout@v2

      # 2. Set up JDK (Java 17 설치)
      - name: Set up JDK 17
        uses: actions/setup-java@v4
        with:
          java-version: '17'
          distribution: 'temurin'

      # 3. application-secret.yaml 생성
      - name: Generate application-secret.yaml with secrets
        run: echo "${{secrets.APPLICATION_SECRET_YAML}}" >> src/main/resources/application-secret.yaml

      # 4. gradlew wrapper에 실행 권한 부여
      - name: Add execute permission to gradlew
        run: chmod +x ./gradlew

      # 5. Gradle 빌드
      - name: Build with Gradle
        run: ./gradlew build --no-daemon

      # 6. Docker 빌드 DockerHub 푸시
      - name: Build Docker image
        run: docker build -t ${{ secrets.DOCKER_USERNAME }}/app-back:latest .

      - name: Log in to Docker Hub
        uses: docker/login-action@v2
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_ACCESS_TOKEN }}

      - name: Push Docker image
        run: docker push ${{ secrets.DOCKER_USERNAME }}/app-back:latest

       # 7. EC2에서 Docker compose 실행
      - name: Create pem key in github runner
        run: |
         echo "$EC2_SSH_KEY" >> ~/key.pem
         chmod 600 ~/key.pem
        env:
           EC2_SSH_KEY: ${{ secrets.EC2_SSH_KEY }}
      - name: Deploy Docker container on EC2, Remove image:<none>
        run: |
         ssh -o StrictHostKeyChecking=no -i ~/key.pem ubuntu@${{ secrets.EC2_IP }} "docker pull ${{ secrets.DOCKER_USERNAME }}/app-back:latest &&
         cd harudoyak &&
         docker compose down backend &&
         docker compose up -d backend &&
         docker image prune -f"

 

4. 이번엔 프론트까지 실행해서 연결이 되는지 확인해본다

  • 프론트의 axios 관련 파일에서 백엔드에게 요청을 보내는 곳이 있는데, 여기의 baseURL을 변경해줘야 한다.
  • s3엑세스키도 변경해줬다.

git clone으로 fornt 소스를 가져오고, 수정이 필요한 부분을 수정해줬다.

도커파일

# syntax=docker/dockerfile:1

# Step 1: Base image for building with Node.js 20.14.0
FROM node:20.14.0 AS base

# Step 2: Dependencies stage
FROM base AS deps
WORKDIR /app

# Install dependencies only when needed
COPY ./harudoyak/package.json ./package.json
COPY ./harudoyak/package-lock.json ./package-lock.json
RUN npm ci

# Step 3: Build the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY ./harudoyak/ ./

ENV NODE_ENV=production
# Build your Next.js application in standalone mode
RUN npm run build

# Step 4: Production image
FROM node:20.14.0-alpine AS runner
WORKDIR /app

# Copy the build artifacts from builder stage
COPY --from=builder /app/.next/standalone ./
COPY --from=builder /app/.next/static ./.next/static
COPY --from=builder /app/public ./public

ENV NODE_ENV=production
# Set environment variables
EXPOSE 3000


# Run the built application
CMD ["node", "server.js"]
 # 도커파일이 있는 곳에서 실행
 docker build -tag [도커이미지이름] .
 
 # 도커 컴포즈 파일이 있는 곳에서 실행
 docker compose up -d frontend

퍼블릭주소:3000 으로 들어가서 정상작동하면 완료다.

 

여기서 도커이미지이름이 변경된다면 그에 맞게 도커컴포즈파일에서 수정해줘야 한다.

참고로 파일 구조는

반응형

댓글

티스토리툴바