내맘대로 개발일지

[iTerm2] 커스텀 하기

eulBlue — Thu, 19 Mar 2026 11:07:53 +0900

회사 맥은 커스텀 해놨는데 집에는 안해놨기 때문에

여기에 설정한거 정리해놓고 집가서 그대로 따라할 예정이다.

iterm2 설치하기

iTerm2 - macOS Terminal Replacement

iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website updated and optimized by HexBrain Sponsors

iterm2.com

cmd + , 눌러서 설정 들어가기

Theme : Dark

Tab bar location : Top

Status bar location Buttom 선택

Font: Osaka Regular-Mono 14pt

항상 글씨가 작아서 거북목했는데 좀 나아진것같아 기분이 좋다

Transparency : 1

Blur : Blur content behind the window 클릭 15

사실 블러 안줘도된다. 어차피 1 줘서 투명해보이지 않으니까 ..

New windows : 150 columns by 40 rows

Scrollback lines : Unlimited scrollback 클릭

Cluade Code 사용하다보면 긴 코드줄을 줄때 있는데 그때 초기화 되지않게 하기위함이다

Configure Status Bar 클릭

필요한거 밑으로 끌어서 보여줄거 고르고 / Auto-Rainbow : Automatic 해놓으면 알아서

알록달록하게 만들어준다

이제 터미널 작업

vi ~/.zshrc

#Oh My Zsh
export ZSH="$HOME/.oh-my-zsh"

plugins=(
    git
    zsh-autosuggestions
    zsh-syntax-highlighting
)

source $ZSH/oh-my-zsh.sh

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions

git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting

source ~/.zshrc

[Docker] 기본 명령어 이건 알아야 한다 ( + 리눅스 )

eulBlue — Wed, 18 Mar 2026 16:39:33 +0900

진짜 오랜만에 글을 쓰는데

요즘에는 AI 가 다해주다 보니까 딱히 .. 그리고

AI 로 학습하다 보니까 기록을 할게 없다보니 안쓰다 시피 하다가 정말 오랜만에 글을 써본다

최근에 도커로 배포하고 하는데 애를 너무많이먹고 .. AI 로만 딸깍 하다보니 다까먹어서

이래서 기록이 중요하다 하는구나~ 를 다시한번 새삼 깨닫는다.

1. Docker Compose (가장 많이 쓰는 배포 명령어)

최근 배포 메타는 단일 컨테이너보다 docker-compose.yml을 활용하는 경우가 대부분이다.

실행 (백그라운드)
Bash
```
docker compose up -d
```
정지 및 삭제
Bash
```
docker compose down
```
로그 확인 (실시간)
Bash
```
docker compose logs -f
```
컨테이너 재시작
Bash
```
docker compose restart
```

2. Docker 핵심 관리 명령어

도커 엔진의 상태를 확인하고 관리할 때 필수다.

실행 중인 컨테이너 목록 확인
Bash
```
docker ps
```
전체 컨테이너 목록 확인 (정지된 것 포함)
Bash
```
docker ps -a
```
컨테이너 내부 접속 (터미널)

Bash

docker exec -it [컨테이너_이름] /bin/bash

이미지 목록 확인
Bash
```
docker images
```
사용하지 않는 데이터 삭제 (용량 확보)
Bash
```
docker system prune -a
```

3. 필수 기초 리눅스 명령어

도커를 쓰려면 결국 리눅스 서버 환경에 익숙해져야 한다.

경로 이동 및 확인
- pwd: 현재 내가 위치한 절대 경로 출력
- cd [경로]: 해당 디렉토리로 이동
- ls -al: 현재 폴더의 모든 파일 목록 확인 (숨겨진 파일 포함)
파일 및 폴더 조작
- mkdir [이름]: 폴더 생성
- rm [파일]: 파일 삭제
- rm -rf [폴더]: 폴더 강제 삭제 (주의해서 사용)
- cp [원본] [대상]: 파일 복사
- mv [원본] [대상]: 파일 이동 또는 이름 변경
파일 내용 확인
- cat [파일명]: 파일 내용 전체 출력
- tail -f [파일명]: 파일의 마지막 부분을 실시간으로 감시 (로그 확인 시 유용)

[AWS] Jenkins 로 배포하기 [Spring]

eulBlue — Tue, 25 Nov 2025 11:22:40 +0900

[AWS] Jenkins 로 배포하기 [Node]

[Jenkins] EC2 안에서 설치하고 실행하기[EC2] 안에서 nginx 사용하기[AWS] 아무것도 모르는데 EC2 + Docker + MariaDB + nginx진짜 아무것도 모른다.개발만 해봤지 인프라 처음해본다.곁눈질도 안해봤고 해주는

8735.tistory.com

드디어 여기까지왔다....

마지막으로 Spring 서버를 무중단으로 해볼 예정이다.

기본적인 설정은 프론트를 배포하면서 다 해놓은 상태이다.

서버도 프론트와 동일하게 Pipeline 으로 만들고

스크립트를 작성해준다.

pipeline {
    agent any
    options { timestamps() }

    environment {
        PROJECT_NAME   = "PROJECT_NAME"
        GIT_URL        = "GIT_URL"
        GIT_BRANCH     = "GIT_BRANCH"
        CREDENTIALS_ID = "github_ssh"

        DOCKER_IMAGE   = "DOCKER_IMAGE:latest"

        BLUE_PORT      = "8080"
        GREEN_PORT     = "8082"

        NGINX_CONF     = "/etc/nginx/conf.d/default.conf"

        // sudo 비번 없이 실행 (sudoers 에 ec2-user NOPASSWD 설정 필요)
        SUDO           = "sudo -n"
    }

    stages {

        stage('Clone Repository') {
            steps {
                sh "git --version"
                git branch: "${GIT_BRANCH}",
                    credentialsId: "${CREDENTIALS_ID}",
                    url: "${GIT_URL}"
            }
        }

        stage('Build JAR') {
            steps {
                sh 'chmod +x ./gradlew'
                sh './gradlew clean build -x test'
            }
        }

        stage('Build Docker Image') {
            steps {
                sh """
                  echo "  build image: ${DOCKER_IMAGE}"
                  docker build -t ${DOCKER_IMAGE} .
                """
            }
        }

        stage('Blue-Green Deploy') {
            steps {
                script {
                    // 1) nginx 에서 현재 LIVE 포트(8080 or 8082) 확인
                    def currentPort = sh(
                        script: "grep -o '127.0.0.1:808[0-9]' ${NGINX_CONF} | head -n1 | sed 's/127.0.0.1://' || echo ''",
                        returnStdout: true
                    ).trim()

                    if (!currentPort) {
                        // 처음 셋업 시에는 8080 기준
                        currentPort = BLUE_PORT
                    }

                    echo "현재 LIVE PORT = ${currentPort}"

                    def bluePort  = currentPort
                    def greenPort = (currentPort == BLUE_PORT) ? GREEN_PORT : BLUE_PORT

                    def blueName  = "${PROJECT_NAME}-${bluePort}"
                    def greenName = "${PROJECT_NAME}-${greenPort}"

                    echo "BLUE  (현재 LIVE) : ${blueName} / ${bluePort}"
                    echo "GREEN(새 버전)   : ${greenName} / ${greenPort}"

                    // 2) 기존 GREEN 컨테이너 정리
                    sh """
                      echo "  기존 GREEN 컨테이너 정리: ${greenName}"
                      docker stop ${greenName} || true
                      docker rm   ${greenName} || true

                      # 예전에 쓰던 이름이 있으면 같이 정리
                      docker stop backend || true
                      docker rm   backend || true
                    """

                    // 3) 새 버전을 GREEN 포트로 먼저 기동
                    sh """
                      echo "  새 버전(${greenPort}) 기동: ${greenName}"
                      docker run -d \\
                        --name ${greenName} \\
                        --network host \\
                        -e SPRING_PROFILES_ACTIVE=prod \\
                        -e SERVER_PORT=${greenPort} \\
                        ${DOCKER_IMAGE}
                    """

                    // 4) GREEN 헬스체크 (/api 사용)
                    sh """
                      echo "  새 버전(포트 ${greenPort}) 헬스체크 시작"

                      for i in {1..30}; do
                        if curl -sf http://127.0.0.1:${greenPort}/api > /dev/null; then
                          echo "✅ 새 버전(포트 ${greenPort}) 헬스체크 통과"
                          exit 0
                        fi
                        echo "⏳ 대기중 (\$i)..."
                        sleep 2
                      done

                      echo "❌ 새 버전(포트 ${greenPort}) 헬스체크 실패"
                      echo "------ 컨테이너 로그 (${greenName}) ------"
                      docker logs ${greenName} || true
                      exit 1
                    """

                    // 5) nginx proxy_pass 808X → GREEN 포트로 변경
                    sh """
                      echo "  Nginx proxy_pass ${bluePort} → ${greenPort} 변경"

                      ${SUDO} sed -i 's/127.0.0.1:${bluePort}/127.0.0.1:${greenPort}/' ${NGINX_CONF}

                      echo "  nginx 설정 테스트"
                      ${SUDO} nginx -t

                      echo "  nginx reload"
                      ${SUDO} systemctl reload nginx
                    """

                    // 6) 옛날 BLUE 컨테이너 종료/삭제
                    sh """
                      echo "  기존 BLUE 컨테이너 정리: ${blueName}"
                      docker stop ${blueName} || true
                      docker rm   ${blueName} || true
                    """

                    echo "  blue-green 배포 완료 (LIVE PORT = ${greenPort})"
                }
            }
        }
    }
}

스크립트가 길어서 어려운데 간단하게 보면

포트를 8080 과 8082 를 번갈아가면서 새로운게 올라올때까지

기다렸다가 헬스체크가 끝나고나면 포트를 변경해 연결해주는 것으로 해서

실제 웹에서는 무중단처럼 느낄 수 있게끔 해주는 방식이다.

스크립트를 작성하고 다음은 nginx 를 수정해줘야한다.

server {
    listen 80;
    server_name _;

    root /var/www/frontend;
    index index.html;

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

    location /api/ {
        proxy_pass http://127.0.0.1:8082/;
        proxy_http_version 1.1;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_connect_timeout 5s;
        proxy_send_timeout    60s;
        proxy_read_timeout    60s;
    }

    gzip on;
    gzip_types text/plain text/css application/json application/javascript application/xml+rss;
    gzip_min_length 256;
}

ps aux | grep jenkins | head

jenkins ...

해당 명령어를 통해 Jenkins 가 어떤 계정으로 돌아가는지 확인하고

맨앞에 나오는 이름이 유저이름이다 나같은경우는 jenkins 였고

// 파일 열고
sudo visudo -f /etc/sudoers.d/jenkins

// 입력 하고
jenkins ALL=(ALL) NOPASSWD: /usr/bin/sed, /usr/sbin/nginx, /usr/bin/systemctl

// 문법 체크
sudo visudo -c

// 결과
/etc/sudoers.d/jenkins: OK

// 적용 테스트
sudo -n echo "sudo works"

// 결과
sudo works

해당 파일로 들어가서 해당 명령을 입력해준다.

이를 통해서 Jenkins 가 서버권한을 갖고 설정 파일을 건드릴 수 있게 된다.

이렇게해서 젠킨스가서 빌드를 실행해보면 무중단처럼 배포를 진행할 수 있게된다.

[AWS] Jenkins 로 배포하기 [Node]

eulBlue — Mon, 24 Nov 2025 10:52:07 +0900

[Jenkins] EC2 안에서 설치하고 실행하기

[EC2] 안에서 nginx 사용하기[AWS] 아무것도 모르는데 EC2 + Docker + MariaDB + nginx진짜 아무것도 모른다.개발만 해봤지 인프라 처음해본다.곁눈질도 안해봤고 해주는대로 떠먹어서 개발만 해봤다.근데

8735.tistory.com

이제 Jenkins 로 배포하는 연습을 해볼거다.

나는 Spring BackEnd 와 Vue FrontEnd 총 2개를 배포해야하는데

먼저 FrontEnd 먼저 배포하도록 하겠다!

Jenkins 설정 > Credentials

오른쪽 상단에 있는 톱니바퀴의 Jenkins 설정 누르고

Security 에 Credentials 누르고 나면

global

다음과 같은 화면이 있는데 여기서 (global) 버튼마냥 파란색버튼 있는데 눌러주면된다

Add Credentials

오른쪽 상단의 Add Credentials 버튼 클릭

SSH Username with private key

Kind 에서 SSH Username with private key 누르고나서

Private Key > Enter directly 누르면 Add 버튼이 보인다 클릭

젠킨스 터미널로 돌아가서

ssh-keygen -t ed25519 -C "jenkins" -f ~/.ssh/id_ed25519

cat ~/.ssh/id_ed25519.pub

// 결과
ssh-ed25519 ...

cat ~/.ssh/id_ed25519

// 결과
-----BEGIN OPENSSH PRIVATE KEY-----
...
-----END OPENSSH PRIVATE KEY-----

첫번째 결과는 깃허브에 가서 SSH 등록해주고

두번째 나온 결과를 Add 누른 화면에 Key 에 입력해주면된다.

그다음 Create 버튼 클릭

ssh -T git@github.com

// 결과
Hi {깃헙닉네임}! You've successfully authenticated, but GitHub does not provide shell access.

이런 결과를 반환받았다면 정상적으로 연결된걸 확인할 수 있다.

그다음 Node 를 확인해야하는데,

node -v
yarn -v

했을때 결과가 나오지 않는다면 설치해주면된다.

sudo npm install -g yarn

나같은경우는 노드는 있어서 yarn 만 추가적으로 설치해줬다.

설정이 완료되었으니 다음으로 프로젝트를 등록해보도록 하겠다.

새로운 Item

새로운 아이템 클릭

Enter an item name 에 이름 적고

Pipeline 선택하고 OK 버튼 클릭

여기에 이제 스크립트를 작성하면되는데

pipeline {
    agent any
    options { timestamps() }

    environment {
        PROJECT_NAME = '{PROJECT_NAME}'                    // 예: my-frontend
        GIT_URL      = '{GIT_REPOSITORY_SSH_URL}'         // 예: git@github.com:ORG/REPO.git
        GIT_BRANCH   = '{BRANCH_NAME}'                    // 예: main, dev, release
        CREDENTIALS = '{CREDENTIAL_ID}'                  // Jenkins Git Credential ID (SSH Key or PAT)
        DEPLOY_PATH = '{DEPLOY_DIRECTORY}'               // 예: /var/www/my-frontend
        BUILD_CMD   = '{BUILD_COMMAND}'                  // 예: yarn build or npm run build
    }

    stages {

        stage('Clone Repository') {
            steps {
                sh "node -v"
                sh "git --version"
                sh "yarn -v || npm -v"

                git branch: "${GIT_BRANCH}", credentialsId: "${CREDENTIALS}", url: "${GIT_URL}"
            }
        }

        stage('Install Dependencies') {
            steps {
                sh 'yarn install || npm install'
            }
        }

        stage('Build') {
            steps {
                sh "${BUILD_CMD}"
            }
        }

        stage('Deploy') {
            steps {
                sh """
                    echo "  Deploying ${PROJECT_NAME} → ${DEPLOY_PATH}"

                    rm -rf ${DEPLOY_PATH}/*

                    cp -r dist/* ${DEPLOY_PATH}/ || cp -r build/* ${DEPLOY_PATH}/ || echo "⚠️ dist/build 폴더 없음"

                    # Optional: enable after visudo setup
                    # sudo systemctl reload nginx

                    echo "  Deployment completed!"
                """
            }
        }
    }
}

중괄호 처리한건 알아서 맞춰서 설정하면되고

여기서 중요한건 sudo systemctl reload nginx 인데

배포가 끝나면 자동으로 재시작 하기위함이다

이를 위해서 몇가지 설정이 필요한데

1. 권한추가
sudo chown -R jenkins:jenkins /var/www/{프로젝트명}
sudo chmod -R 755 /var/www/{프로젝트명}

2. visudo 열기
sudo visudo

3. 추가 후 저장
jenkins ALL=NOPASSWD: /usr/bin/systemctl reload nginx

이렇게해주면 이제 배포가끝나면 Nginx 가 재실행되면서 배포가 완료된다.

[AWS] 고정 IP 할당받기

eulBlue — Wed, 19 Nov 2025 10:39:11 +0900

[Jenkins] EC2 안에서 설치하고 실행하기

8735.tistory.com

지금 여기까지 했는데 처음엔 연습삼아 해보라더니

이걸로 그냥 다 쓰자고 하셔서 고정 IP 받고 .. 사용하게 생겼다.

그래서 이제 고정 IP 하는 방법을 해보겠다 ..

EC2 들어가서 왼쪽 목록의 네트워크 및 보안 > 탄력적 IP 로 들어간다

여기서 탄력적 IP 주소 할당 버튼 클릭

이대로 할당 누르고 나면 만들어지고

상세에 들어가서 탄력적 IP 주소 연결 클릭

인스턴스 연결해주면 끝

아이피 할당해주는건 아주 쉽고 간단해서 맘에든다 헤헤

리전당 IP 가 5개로 한정되어있기때문에 추가적으로 필요하면 요청하면 열어주기 때문에 참고하면 좋을것같다

[Jenkins] EC2 안에서 설치하고 실행하기

eulBlue — Wed, 12 Nov 2025 13:34:50 +0900

[EC2] 안에서 nginx 사용하기

[AWS] 아무것도 모르는데 EC2 + Docker + MariaDB + nginx진짜 아무것도 모른다.개발만 해봤지 인프라 처음해본다.곁눈질도 안해봤고 해주는대로 떠먹어서 개발만 해봤다.근데 이번에 기회가 생겨서 처음

8735.tistory.com

EC2 만드는것부터 해서 많이왔다 ..

이제 젠킨스만 설치하고 배포만 테스트해보면 끝난다.

sudo dnf update -y

젠킨스 설치 전에 시스템 업데이트 해주고 나서

자바를 반드시 설치해야한다.

sudo dnf install java-17-amazon-corretto -y

젠킨스 저장소를 등록해주고 GPG 키를 추가해줘야하는데

sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo
sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io-2023.key

sudo dnf install jenkins -y

나는 8080 을 이미 사용중이라 8081 로 변경해줬는데

sudo mkdir -p /etc/systemd/system/jenkins.service.d

# 포트 8081로 설정
printf "[Service]\nEnvironment=\"JENKINS_PORT=8081\"\n" | \
  sudo tee /etc/systemd/system/jenkins.service.d/override.conf

여기까지 하면 이제 모든준비는 끝났고

테스트만 진행하면되는데

sudo systemctl daemon-reload
sudo systemctl restart jenkins

# 설정이 적용됐는지
systemctl cat jenkins | sed -n '1,120p' | grep -A2 -n "JENKINS_PORT"

# 8081 리스닝 중인지
sudo ss -lntp | grep 8081

# 로컬 응답 확인
curl -I http://127.0.0.1:8081/ || true

이제 정상적인 응답이왔다면 해당 경로로 접속해보면

키를 입력하라고 뜰꺼다.

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

해서 나온 키 복사해서 넣어주고

Install suggested plugins 클릭하면 이제 기본 세팅 완료

[EC2] 안에서 nginx 사용하기

eulBlue — Wed, 12 Nov 2025 08:32:28 +0900

[AWS] 아무것도 모르는데 EC2 + Docker + MariaDB + nginx

진짜 아무것도 모른다.개발만 해봤지 인프라 처음해본다.곁눈질도 안해봤고 해주는대로 떠먹어서 개발만 해봤다.근데 이번에 기회가 생겨서 처음부터 해보려고 하는데 진짜 아무것도 몰라서

8735.tistory.com

여기에 이어서 Nginx 를 추가적으로 설정해보려고 한다.

지금 내 EC2 안에는 프론트 + 백 + DB 가 같이있다. 테스트 서버라 다 뭉쳐있지만

원래는 이렇게 안한다는 점을 기억해두고 진행한다.

어제 nginx 백앤드 띄워놓고 오늘 다시하려고 하니 어디다가 만들어놨는지 기억이 안나더라.

그런 나를 위한 찾는 방법

sudo nginx -t

nginx: [warn] conflicting server name "_" on 0.0.0.0:80, ignored
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

해당 명령어를 통해서 내가 만든 파일이 어디있는지 찾을 수 있다.

일단 저기서는 백앤드만 띄우는 연습을 했어서 새롭게 conf 를 작성해보려고 한다.

기존꺼는 지우거나 하나만 남겨놓는 방식으로 진행한다.

sudo vi /etc/nginx/conf.d/{파일명}.conf

# ===============================
# FRONT + BACKEND SERVER
# ===============================

server {
    listen 80;
    server_name _;

    # -------------------------------
    # FRONTEND (React/Vue/Next etc.)
    # -------------------------------
    # 빌드된 dist 경로 (Docker로 배포했을 경우 Nginx 루트 또는 /var/www)
    root /var/www/{프로젝트명};
    index index.html;

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

    # -------------------------------
    # BACKEND (Spring Boot running in Docker)
    # -------------------------------
    location /api/ {
        proxy_pass http://127.0.0.1:8080/;
        proxy_http_version 1.1;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        # 안정성 향상용 옵션
        proxy_connect_timeout 5s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    # -------------------------------
    # GZIP (선택)
    # -------------------------------
    gzip on;
    gzip_types text/plain text/css application/json application/javascript application/xml+rss;
    gzip_min_length 256;
}

이후 :wq ( Write + Quit ) 하면 탈출할 수 있다.

만약 프론트 접근이안된다면 프로젝트에서 빌드는 했는지 확인해보자.

안했다면 npm install + npm build

내가 깜빡하고 안하고 빌드안돼서 놀랐기 때문이다 ㅎ

sudo mkdir -p /var/www/{프로젝트명}
sudo rsync -av --delete dist/ /var/www/{프로젝트명}/

파일을 nginx 루트로 복사하고

sudo nginx -t
sudo systemctl reload nginx

nginx 를 재시작해주면 된다.

curl 로도 확인해보고 실제 웹 도메인영역에 입력해서도 테스트해보면 된다.

이제 EC2 가 꺼지고 재기동되면 nginx, docker, mariadb 다 같이 죽어버리니까

sudo systemctl enable --now nginx
sudo systemctl enable --now docker
sudo systemctl enable --now mariadb

docker run 할때 --restart unless-stopped 추가해주자

+ 기본적인 명령어들을 적어두려고 한다.

필요해서 매번 찾아보는것도 귀찮고 이정돈 외워둬야할것같기도하다.

// nginx 파일 수정 할때 -> i 누르고 고치고, :wq 해서 저장
sudo vi /etc/nginx/conf.d/default.conf

// nginx 재실행
sudo systemctl reload nginx

[AWS] 아무것도 모르는데 EC2 + Docker + MariaDB + nginx

eulBlue — Tue, 11 Nov 2025 11:26:14 +0900

진짜 아무것도 모른다.

개발만 해봤지 인프라 처음해본다.

곁눈질도 안해봤고 해주는대로 떠먹어서 개발만 해봤다.

근데 이번에 기회가 생겨서 처음부터 해보려고 하는데 진짜 아무것도 몰라서 처음부터 끝까지

기록을 좀 해놓으려고 한다. 해당 페이지에서 다 해놓으려고 한다.

나처럼 아무것도 모르면 따라하면 될것같다 ㅎ

1. EC2 생성하기

보통 Amazon Linux 를 선택하는 것 같다

테스트용 서버로 구축할꺼라서 싸게싸게 잡는것이 필수

키체인은 없으면 새 키 페어 생성을 통해서 만들면 된다.

0.0.0.0/0 으로 하면 털려서 요금폭탄 맞으니까 반드시 보안그룹을 설정할 수 있도록 하자

테스트용이라 40 정도로만 잡고 늘리는건 되는데 줄이는건 안된다고 들어서 보수적인게 좋은것같다

2. 접속하기

chmod 400 /{경로}/*.pem

이건 반드시 해줘야하는데 보안상 위험하니까 400 으로 막아버려주고

경로를 입력할때는 중괄호는 빼고 ... 입력하면된다 ㅎㅎ

키는 진짜 절대 무슨일이 있어도 잃어버리면 안되니까 모아놓도록 하자

ssh -i /{경로}/{키체인이름}.pem {사용자이름}@{자동 할당된 IP 주소 퍼블릭 IP}

EC2 만들고 상세 페이지로 넘어가면

여기서 필요한 정보들은 다 보일꺼다 맞춰서 입력해주면 접속완료!

   ,     #_
   ~\_  ####_        Amazon Linux 2023
  ~~  \_#####\
  ~~     \###|
  ~~       \#/ ___   https://aws.amazon.com/linux/amazon-linux-2023
   ~~       V~' '->
    ~~~         /
      ~~._.   _/
         _/ _/
       _/m/'

접속완료하면 이런 귀여운 새가 마주해준다.

이 다음부터가 걱정되는건데 힘내서 함 해보자고

3. 깃 설치하기

깃 레포지토리를 클론해와야하니까 먼저 깃 설치해주시고

sudo yum install git -y

나는 비공개 레포지토리라서 ssh 접속이 필요해서 키 만들어줘야한다 :(

ssh-keygen -t ed25519 -C "이메일"

Enter file in which to save the key (/home/ec2-user/.ssh/id_ed25519): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /home/ec2-user/.ssh/id_ed25519
Your public key has been saved in /home/ec2-user/.ssh/id_ed25519.pub
The key fingerprint is:
SHA256:...
The key's randomart image is:
+--[ED25519 256]--+
|     .o      . oE|
|    o. .     .o..|
|   . oo .   o .. |
|    o+.=   . +.. |
| . .+=o S . o =. |
|  =.=..o o   = ..|
|.=.. o.       o .|
|+ .o.          o |
| .+B*.          .|
+----[SHA256]-----+

대충 엔터 갈겨주면 키가 생성된다.

그다음 키를 확인해야 등록하니까

cat ~/.ssh/id_ed25519.pub

해주면 이제 키를 확인할 수 있는데 이거 복사해서 깃에 등록해주고

클론 해주면 레포지토리 복사는 끝

3. MariaDB 설치하기

sudo yum install mariadb105-server -y
sudo systemctl enable mariadb
sudo systemctl start mariadb

세개의 명령어를 입력해주면 mariaDB 설치는 완료

sudo mysql -u root

입력했을 때

Welcome to the MariaDB monitor.  Commands end with ; or \g.
Your MariaDB connection id is 3
Server version: 10.5.29-MariaDB MariaDB Server

Copyright (c) 2000, 2018, Oracle, MariaDB Corporation Ab and others.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MariaDB [(none)]>

다음과 같이 뜬다면 일단 설치하고 접속하는거 까지는 완료된 상태이다.

나갈때는 \q 헤헤 ..

원격으로 들어가기 위해서 user 설정이 필요한데

CREATE USER 'root'@'{IP}' IDENTIFIED BY '{패스워드}';
GRANT ALL PRIVILEGES ON *.* TO 'root'@'{IP}' WITH GRANT OPTION;
FLUSH PRIVILEGES;

이렇게 하면 생성 완료

4. PM2 설치

이제 pm2 를 설치해야하는데 애는 Node 가 필요해서 먼저 설치해줘야한다

curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

sudo npm install -g pm2

일단 설치만 해놓고 추가적인 설정은 Docker 띄우고 나서

마저 진행하도록 하자

5. Doker 설치

sudo yum update -y
sudo yum install -y docker
sudo systemctl enable --now docker
sudo groupadd docker            # docker 그룹이 없는 경우 만듦
sudo usermod -aG docker ec2-user

sudo mkdir -p /usr/libexec/docker/cli-plugins/
sudo curl -SL https://github.com/docker/compose/releases/latest/download/docker-compose-linux-$(uname -m) \
  -o /usr/libexec/docker/cli-plugins/docker-compose
sudo chmod +x /usr/libexec/docker/cli-plugins/docker-compose
docker compose version

여기까지하면 이제 필요한 설치는 다 한것같고 ..

두근두근 실제 띄우기 시간이다.

6. 컨테이너 띄우기

우선 나는 서버가 Java Spring 이라서 JDK 를 설치해줘야한다.

sudo dnf install -y java-17-amazon-corretto

자바버전은 자신의 환경에 맞게 설치를 해주고

dokerfile 을 작성해주면된다.

chmod +x ./gradlew
./gradlew clean bootJar -x

하면 이제 JAR 빌드파일을 만들어주고나서

sudo docker build -t {클론받은폴더명} .

그다음에 이미지 빌드해주면

[internal] load build definition from Dockerfile
...
naming to docker.io/library/{프로젝트명}

뭐 이런식으로 쭉 실행된다.

docker run -d --name {컨테이너명} \
  -p 8080:8080 \
  -e JAVA_TOOL_OPTIONS="-XX:MaxRAMPercentage=70 -XX:+UseContainerSupport -XX:+UseG1GC" \
{프로젝트명}

이렇게하면 이제 도커가 뜨는데 성공한다.

docker ps

를 실행해보면 내가 만든 컨테이너가 띄워져있으면 성공!

7. nginx 설치하기

이제 도메인을 nginx 를 설치하고 띄울 준비를 해보자

sudo dnf install -y nginx
sudo systemctl enable nginx
sudo systemctl start nginx

설치를 완료하고나면

sudo nano /etc/nginx/conf.d/bsms-backend.conf

입력하고나면 이제 .conf 입력할 수 있게 변하는데

server {
  listen 80;
  server_name _;

  location /api/ {
    proxy_pass http://127.0.0.1:8080/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_read_timeout 120s;
    proxy_connect_timeout 5s;
    proxy_send_timeout 120s;
  }

  location = / {
    return 200 "OK - Nginx is running\n";
    add_header Content-Type text/plain;
  }
}

작성하고

sudo nginx -t
sudo systemctl reload nginx

저장하면 기본적인 설정은 완료되는 듯 하다.

이제 curl 로 확인해보면 정상적인 응답이 내려오는지 확인해볼수도 있고

퍼블릭 IP 로 들어가면 OK - Nginx is running 뜨면 엔진엑스 설정은 끝난듯하다.

[RN] Storybook 연결하기

eulBlue — Wed, 9 Jul 2025 16:27:28 +0900

테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

storybook 사용하는 방법을 작성해보도록 하겠다.

진짜 ChatGPT 에게 2일을 넘게 물어봤는데 안된다고만하고 그짓말만 쳐서

진짜 삽질이란 삽질은 다하고 구글링을 통해 열심히 뒤져서

겨우겨우 완성했다 ..

나는 CLI 환경에서 개발을 하고있고

스토리북은 8.5 버전을 사용했으니 참고 부탁한다.

Storybook 8.5

Accessibility at your fingertips

storybook.js.org

npx storybook@latest init

을 해주면 .rnstorybook 을 만들어준다.

하고나면 이런 폴더가 생길건데, 이제 컴포넌트들은 stories 에 넣어놓고

사용하면된다. 해당 컴포넌트들은 기본예제로 같이 생성된다.

// metro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const path = require('path');
const withStorybook = require('@storybook/react-native/metro/withStorybook');
const defaultConfig = getDefaultConfig(__dirname);
const { assetExts, sourceExts } = defaultConfig.resolver;

/**
 * Metro configuration
 * https://reactnative.dev/docs/metro
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...sourceExts, 'svg'],
  },
};
// set your own config here  

const finalConfig = mergeConfig(defaultConfig, config);

module.exports = withStorybook(finalConfig, {
  // Set to false to remove storybook specific options
  // you can also use a env variable to set this
  enabled: true,
  // Path to your storybook config
  configPath: path.resolve(__dirname, './.rnstorybook'),

  // Optional websockets configuration
  // Starts a websocket server on the specified port and host on metro start
  // websockets: {
  //   port: 7007,
  //   host: 'localhost',
  // },
});

요고 그대로 가져다가 쓰고

"storybook-generate": "sb-rn-get-stories"

package.json 을 확인해보면 scripts 쪽에 이런게 있을것이다.

이걸 실행하게되면 자동으로 .stories.tsx 파일들을 수집해준다고 한다.

이러고 이제

yarn ios

yarn android

를 해주면 끝~

해당 화면은 이런식으로 조절해가면서 쓰면된다.

import StorybookUIRoot from './.rnstorybook';
...

const SHOW_STORYBOOK = __DEV__ && true;

...

const App = () => {
	...
    if (SHOW_STORYBOOK) {
    	return <StorybookUIRoot />;
  	}
    ...
    
    return (
    	...
    )
}

[RN] gorhom 바텀시트 사용하기

eulBlue — Mon, 23 Jun 2025 15:09:28 +0900

테스트 환경

"react": "19.0.0",
"react-native": "0.79.2"

gorhom 이 가장 많은 바텀시트 사용량을 보이길래 이걸로 작업을 진행했다.다른곳에서도 사용하기에 컴포넌트 분리시켜놓고 커스텀가능하게끔 만들어놨다.

import React, {forwardRef, useMemo} from 'react';
import {default as GorhomBottomSheet} from '@gorhom/bottom-sheet';
import {SHADOWS} from '~styles/shadows';

export type BottomSheetProps = {
  children: React.ReactNode;
  snapPoints?: (string | number)[];
  enablePanDownToClose?: boolean;
  onChange?: (index: number) => void;
};

/*
 * 반드시 사용하는 부모 뷰에서
 * <GestureHandlerRootView style={{ flex: 1 }}></GestureHandlerRootView>
 * 로 감싸줄 것
 */

export const BottomSheet = forwardRef<GorhomBottomSheet, BottomSheetProps>(({children, snapPoints, onChange, enablePanDownToClose}, ref) => {
  const memoizedSnapPoints = useMemo(() => snapPoints ?? ['80%'], [snapPoints]);

  return (
    <GorhomBottomSheet
      ref={ref}
      snapPoints={memoizedSnapPoints}
      onChange={onChange}
      enablePanDownToClose={enablePanDownToClose}
      style={SHADOWS.BOTTOM_SHEET}
      containerStyle={{
        zIndex: 2,
      }}
      activeOffsetX={[-999, 999]} activeOffsetY={[-5, 5]}
    >
      {children}
    </GorhomBottomSheet>
  );
});

여기서 가장 중요한게 activeOffsetX activeOffsetY 다 ....

진짜 애들때문에 고생이란 고생은 다했는데 ..

저거 없으면 바텀시트안에서 안드로이드에서 횡스크롤 ( 가로스크롤 )이 안된다.

이유는 바텀시트가 터치이벤트를 가져가버리기 때문에 안의 요소의 스크롤 터치가

안먹는 이유인데 저걸 통해서 터치이벤트를 구분해서 작업하는것이다 ..

바텀시트쪽 사용 방법은 다음과 같다.

<BottomSheet
      ref={ref}
      snapPoints={['13%', '60%']}
      onChange={onChange}
    >
      <Category />
      <Switch options={['おすすめ順', '口コミ数順', '距離順']} selected={'おすすめ順'} setSelected={() => {}}/>
      <Divider />
      <BottomSheetScrollView
        contentContainerStyle={styles.container}
        showsVerticalScrollIndicator={true}
        keyboardShouldPersistTaps="handled"
        style={styles.container}
      >
        <Title />
        {
          Array.from({length: 10}).map((_, i) => (
            <Contents key={i}/>
          ))
        }
      </BottomSheetScrollView>
    </BottomSheet>

snapPoints 를 통해서 바텀시트의 높이를 지정해줄수있는데

const onChange = (index: number) => {
    console.log(index)
  }

를 통해서 바텀시트의 높이값을 트래킹 할 수 있다.

0 : 초기상태

1 : 살짝 올라온상태 ( 코드상으론 13% 이 될것이다. )

2 : 최대 상태 ( 코드상으론 60% 이상이 될것이다. )