React, nginx CI/CD

백엔드는 저번과 동일하지만 이번엔 프런트가 다르다.
정적 파일에서 리액트로 바뀌었다.

React jenkins

rsync 설치

sudo apt-get update
sudo apt-get install rsync

React jenkins script

pipeline {
    agent any

    environment {
        GIT_URL = git url
        NODE_VERSION = "MyNodeJS"
        NGINX_CONTAINER_NAME = "nginx"
        NGINX_WEB_ROOT = "/usr/share/nginx/html"
    }

    tools {
        nodejs "${NODE_VERSION}"
    }

    stages {
        stage('Checkout Code') {
            steps {
                git url: "${GIT_URL}", branch: "main"
            }
        }

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

        stage('Run Tests') {
            steps {
                script {
                    try {
                        sh 'npm test || echo "No tests specified"'
                    } catch (Exception e) {
                        currentBuild.result = 'UNSTABLE'
                        echo "Tests failed but continue: ${e}"
                    }
                }
            }
        }

        stage('Build') {
            steps {
                sh 'npm run build'
            }
        }

        stage('Deploy') {
            steps {
                script {
                    // Ensure the Nginx container is running
                    sh "docker rm -f ${NGINX_CONTAINER_NAME} || true"
                    sh "docker run -d --name ${NGINX_CONTAINER_NAME} -p 80:80 nginx"

                    // Copy the build output to the Nginx container
                    sh "docker cp build/. ${NGINX_CONTAINER_NAME}:${NGINX_WEB_ROOT}"

                    // Set appropriate permissions
                    sh "docker exec ${NGINX_CONTAINER_NAME} chown -R www-data:www-data ${NGINX_WEB_ROOT}"
                    sh "docker exec ${NGINX_CONTAINER_NAME} chmod -R 755 ${NGINX_WEB_ROOT}"

                    // Print the contents of the Nginx web root directory for verification
                    sh "docker exec ${NGINX_CONTAINER_NAME} ls -l ${NGINX_WEB_ROOT}"
                }
            }
        }
    }
}

깃허브 web hook 및 다른 설정은 이전과 동일하고 스크립트만 바뀌었다.

---

명령어 정리

nginx 에러 확인

sudo nginx -t

nginx 로그 확인

sudo tail -f /var/log/nginx/error.log

nginx 재시작

sudo systemctl restart nginx

---

mysql 외부에서 접속 안될 때 (500 error)

1. MySQL 사용자 권한 설정

MySQL 사용자에게 원격 접근 권한을 부여.

MySQL 컨테이너 내부로 접속
먼저, MySQL 컨테이너에 접속한다.

원격 접근 권한 부여
다음 명령어를 실행하여 root 사용자에게 원격 접근 권한을 부여합니다.

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' WITH GRANT OPTION;
FLUSH PRIVILEGES;

사용자와 호스트 설정을 확인하여 권한이 제대로 설정되었는지 확인한다.

SELECT user, host FROM mysql.user;

2. MySQL 설정 파일 수정

MySQL 설정 파일에서 bind-address를 0.0.0.0으로 설정하여 모든 IP 주소에서의 접근을 허용한다.

설정 파일 편집
mysql내부에서 파일 편집이 불가능해서 설정 파일을 호스트로 복사하여 편집했다.
파일 경로는 /etc/my.cnf였다

설정 파일을 호스트로 복사하여 편집

docker cp mysql-server:/etc/my.cnf /home/ubuntu/mysql-config/my.cnf

호스트에서 파일을 편집한다.

sudo nano /home/ubuntu/mysql-config/my.cnf

[mysqld]
bind-address = 0.0.0.0

cmd+x y enter를 해서 저장하고 나온다.

편집된 파일을 다시 컨테이너로 복사한다.

docker cp /home/ubuntu/mysql-config/my.cnf mysql-server:/etc/my.cnf

3. 방화벽 설정

AWS 인스턴스에서 MySQL 포트(3306)를 방화벽에서 허용하도록 설정한다.

UFW 방화벽 설정
방화벽을 활성화하고, MySQL 포트를 허용한다.

sudo ufw enable
sudo ufw allow [mysql port]/tcp
sudo ufw reload

4. MySQL 서버 및 컨테이너 재시작

설정을 적용하기 위해 MySQL 서버와 컨테이너를 재시작한다.

MySQL 서버 재시작
컨테이너 내부에서 MySQL 서버를 재시작한다.

docker restart mysql-server

5. 원격 접속 테스트

모든 설정이 완료된 후, 원격에서 MySQL 서버에 접속하여 설정이 올바르게 적용되었는지 확인합니다.

mysql -h [mysql container ID] -P [mysql port] -u root -p

---

메모

리액트 빌드 파일 경로
/jenkins/workspace/react-app/build

aws에 nginx설치하고 jenkins로 react 빌드해서 한참 걸렸다...