Google Ai Studio Builde에서 만든 프론트엔드 애플리케이션에서 서버에 데이터를 기록/관리하는 백엔드 서버 세팅하기
tech-document 2025.07.09 댓글 크리에이터요셉목차
본 글은 Google AI Studio Build에서 만든 앱을 웹서버에 올려서 사용하는 과정에서 앱 사용기록을 남기고 확인하기 위해 설정하는 과정입니다.
로그 정보를 기록하고 관리하는 기능은 Builder에게 요청하여 구현하였습니다.
필요요소
- MySQL
- Node.js 백엔드 서버
MySQL 설치
1. 서버에 mysql 설치하기
sudo dnf install mysql-server
2. mysql 시작하기
# MySQL 서버를 시작합니다.
sudo systemctl start mysqld
# 서버가 재부팅되어도 자동으로 시작되도록 활성화합니다.
sudo systemctl enable mysqld
3. mysql 초기 보안 설정
설치 직후에는 보안에 취약할 수 있으므로, 기본 보안 설정을 진행합니다. 아래 명령어를 실행하면 몇 가지 질문이 나타납니다.
sudo mysql_secure_installation
아래는 각 질문에 대한 권장 답변입니다.
- VALIDATE PASSWORD COMPONENT (비밀번호 강도 검증 설정): 'n' (아니오)를 입력하고 Enter를 누르는 것이 간단합니다. (강력한 비밀번호 정책을 사용하려면 'y'를 선택해도 됩니다.)
- New password (root 계정의 새 비밀번호 입력): MySQL의 최고 관리자(root) 비밀번호를 설정합니다. 반드시 강력한 비밀번호로 설정하고 잘 기억해두세요.
- Remove anonymous users? (익명 사용자 제거): 'y' (예)
- Disallow root login remotely? (외부에서 root 계정 접속 금지): 'y' (예) - 보안상 매우 중요합니다.
- Remove test database and access to it? (테스트 DB 제거): 'y' (예)
- Reload privilege tables now? (변경된 권한 즉시 적용): 'y' (예)
이 과정까지 마치면 MySQL 서버가 안전하게 기본 설정된 상태가 됩니다.
4. 데이터베이스와 사용자 생성
MySQL에 root 계정으로 접속합니다. (2단계에서 설정한 root 비밀번호를 입력해야 합니다.)
sudo mysql -u root -p
MySQL 프롬프트 (mysql>)에서 아래 SQL 명령어를 순서대로 입력합니다.
1) 로그를 저장할 데이터베이스 생성:
(이전 설명과 동일한 이름 사용)
CREATE DATABASE kcba_logs_db;
2) 애플리케이션이 사용할 사용자 계정 생성:
'사용할_비밀번호' 부분은 반드시 강력한 비밀번호로 변경해서 입력해주세요.
CREATE USER 'kcba_user'@'localhost' IDENTIFIED BY '사용할_비밀번호';
3) 생성한 데이터베이스에 대한 권한 부여:
새로 만든 'kcba_user'에게 'kcba_logs_db' 데이터베이스의 데이터를 읽고, 쓰고, 수정하고, 삭제할 수 있는 권한만 부여합니다.
GRANT SELECT, INSERT, UPDATE, DELETE ON kcba_logs_db.* TO 'kcba_user'@'localhost';
4) 변경사항 최종 적용
FLUSH PRIVILEGES;
5) 종료
MySQL 종료:
Node.js API 코드에 DB 정보 연결
백엔드 API 코드(server.js)에 방금 생성한 DB 접속 정보를 정확하게 입력합니다. 서버의 server.js (또는 index.js 등) 파일을 열어 아래 dbConfig 부분을 수정합니다.
// server.js 파일의 일부
// DB 연결 설정
const dbConfig = {
host: 'localhost', // 변경할 필요 없음
user: 'kcba_user', // 3단계에서 생성한 사용자명
password: '사용할_비밀번호', // 3단계에서 설정한 비밀번호
database: 'kcba_logs_db' // 3단계에서 생성한 데이터베이스명
};
// ... (이하 코드 동일)
파일을 수정하고 저장한 뒤에는, 실행 중인 Node.js 서버를 재시작해야 변경된 설정이 적용됩니다. (만약 pm2 같은 도구를 사용 중이라면 pm2 restart [앱이름] 명령어로 재시작합니다.) 이상의 과정을 모두 마치면, 웹 앱에서 발생하는 로그가 서버의 MySQL 데이터베이스에 안전하게 기록될 모든 준비가 완료됩니다.
아래 설명은 가장 일반적인 웹 기술 스택 중 하나인 **Node.js (Express 프레임워크)**와 **MySQL (데이터베이스)**를 기준으로 작성되었습니다. 만약 다른 기술(PHP, Python, 다른 데이터베이스 등)을 사용하신다면 세부적인 코드나 명령어는 달라질 수 있지만, 전체적인 과정과 원리는 동일하게 적용됩니다.
백엔드 서버 설정 전체 과정
서버 설정은 크게
- 데이터베이스 준비,
- API 프로그램 개발,
- 웹 서버 연동
세 단계로 나눌 수 있습니다.
1단계: 데이터베이스(DB) 준비
먼저 로그 데이터를 저장할 공간을 만듭니다.
MySQL 접속: 서버 터미널에서 MySQL에 접속합니다.
mysql -u [사용자명] -p
데이터베이스 생성: 로그를 저장할 전용 데이터베이스를 생성합니다. (이미 사용할 DB가 있다면 이 과정은 생략해도 됩니다.)
CREATE DATABASE kcba_logs_db;
데이터베이스 선택: 생성한 데이터베이스를 사용하겠다고 지정합니다.
USE kcba_logs_db;
로그 테이블(Table) 생성: 실제 로그 기록이 저장될 테이블을 만듭니다. 테이블의 각 컬럼(열)은 프론트엔드에서 보내주는 데이터 형식과 일치해야 합니다.
CREATE TABLE logs (
id INT AUTO_INCREMENT PRIMARY KEY,
timestamp DATETIME NOT NULL,
ip VARCHAR(45) NOT NULL,
event VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);- id: 각 로그를 구분하기 위한 고유 번호 (자동 증가)
- timestamp: 이벤트 발생 시각 (프론트엔드에서 전송)
- ip: 접속한 사용자의 IP 주소
- event: 기록할 이벤트 내용 (예: "로그인 (master)")
- created_at: 데이터가 DB에 저장된 시각 (자동 기록)
2단계: API 프로그램 개발 (Node.js & Express 예시)
프론트엔드의 요청(로그 생성, 조회, 삭제)을 받아서 1단계에서 만든 DB에 작업을 수행하는 프로그램을 만듭니다.
프로젝트 폴더 생성 및 초기화
mkdir kcba_log_api
cd kcba_log_api
npm init -y
필요한 라이브러리 설치
- express: API 서버를 쉽게 만들게 해주는 프레임워크
- mysql2: Node.js에서 MySQL DB와 통신하기 위한 라이브러리
- cors: 다른 주소(도메인)에서의 요청을 허용하기 위한 라이브러리 (필요시 사용)
npm install express mysql2 cors
API 서버 코드 작성 (server.js 또는 index.js 등으로 파일 생성)
아래는 전체 동작을 위한 예시 코드입니다. 실제 환경에 맞게 DB 접속 정보 등을 수정해야 합니다.
// server.js
const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');
const app = express();
const port = 3001; // 프론트엔드와 다른 포트에서 실행
// DB 연결 설정
const dbConfig = {
host: 'localhost', // 또는 DB 서버 주소
user: 'DB사용자명',
password: 'DB비밀번호',
database: 'kcba_logs_db'
};
// 미들웨어 설정
app.use(cors()); // 모든 cross-origin 요청 허용 (실제 운영 시에는 특정 도메인만 허용하는 것이 안전)
app.use(express.json()); // JSON 요청 본문을 파싱하기 위함
// API 라우터 설정
const apiRouter = express.Router();
// [GET /api/logs] - 로그 전체 조회
apiRouter.get('/logs', async (req, res) => {
try {
const connection = await mysql.createConnection(dbConfig);
const [rows] = await connection.execute('SELECT id, timestamp, ip, event FROM logs ORDER BY timestamp DESC');
await connection.end();
res.status(200).json(rows);
} catch (error) {
console.error('Error fetching logs:', error);
res.status(500).send('Server error');
}
});
// [POST /api/logs] - 새 로그 기록 생성
apiRouter.post('/logs', async (req, res) => {
const { timestamp, ip, event } = req.body;
if (!timestamp || !ip || !event) {
return res.status(400).send('Missing required log data');
}
try {
const connection = await mysql.createConnection(dbConfig);
const query = 'INSERT INTO logs (timestamp, ip, event) VALUES (?, ?, ?)';
await connection.execute(query, [timestamp, ip, event]);
await connection.end();
res.status(201).send('Log added');
} catch (error) {
console.error('Error adding log:', error);
res.status(500).send('Server error');
}
});
// [DELETE /api/logs] - 로그 전체 삭제
apiRouter.delete('/logs', async (req, res) => {
// !!주의: 이 기능은 master 계정으로만 접근 가능하도록 실제로는 인증 절차가 필요합니다.
try {
const connection = await mysql.createConnection(dbConfig);
await connection.execute('TRUNCATE TABLE logs'); // TRUNCATE가 DELETE보다 효율적
await connection.end();
res.status(204).send(); // No Content
} catch (error) {
console.error('Error clearing logs:', error);
res.status(500).send('Server error');
}
});
// 메인 앱에 라우터 연결
app.use('/api', apiRouter);
// 서버 실행
app.listen(port, () => {
console.log(`Log API server listening at http://localhost:${port}`);
});
API 서버 실행: 서버 터미널에서 아래 명령어로 API 프로그램을 계속 실행시켜 둡니다. (실제 운영 환경에서는 pm2 같은 프로세스 관리 도구를 사용하는 것이 좋습니다.)
node server.js
3단계: 웹 서버(Nginx 등) 연동 설정
마지막으로, 사용자가 웹앱으로 접속했을 때 웹 서버(Nginx 또는 Apache)가 /api/logs 요청을 2단계에서 만든 API 프로그램으로 전달하도록 설정해야 합니다. 이를 '리버스 프록시(Reverse Proxy)' 설정이라고 합니다.
아래는 Nginx 설정 파일에 추가할 내용의 예시입니다.
server {
listen 80;
server_name 도메인주소
# ... (기존의 프론트엔드 앱을 위한 설정)
location / {
root /var/www/html; # 프론트엔드 빌드 파일이 있는 경로
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
# ▼▼▼▼▼ [추가할 부분] ▼▼▼▼▼
# /api/logs 경로로 오는 모든 요청을
# http://localhost:3001 (API 프로그램 주소)로 전달합니다.
location /api/logs {
proxy_pass http://localhost:3001;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
# ▲▲▲▲▲ [추가할 부분] ▲▲▲▲▲
}
- Nginx 설정 파일 수정: 위 location /api/logs 블록을 examstaff.com의 Nginx 서버 설정 파일에 추가합니다.
- Nginx 재시작: 설정을 저장한 후, Nginx를 재시작하여 변경사항을 적용합니다.
sudo systemctl restart nginx
중요 보안 권장 사항
- 로그 삭제 기능 보호: 현재 예시 코드에서는 누구나 DELETE /api/logs를 호출하여 모든 로그를 지울 수 있습니다. 실제 운영 시에는 반드시 master 계정 인증을 거친 사용자만 이 API를 호출할 수 있도록 백엔드 코드에 인증 로직(예: JWT 토큰, 세션 확인 등)을 추가해야 합니다.
- DB 접속 정보: 예시 코드의 DB 접속 정보를 실제 파일에 직접 작성하는 대신, .env 파일과 같은 별도의 설정 파일로 분리하여 관리하는 것이 안전합니다.
이상의 과정을 모두 마치면, 웹 앱에서 로그 기능이 서버와 정상적으로 통신하며 동작하게 됩니다.
댓글