feat: Node.js + Express 백엔드 추가
- server.js: Express 서버, 정적파일 서빙 + API 3개 - GET /api/greeting (랜덤 한국어 인사말) - POST /api/echo (에코 테스트) - GET /api/stats (서버 업타임/버전 정보) - 정적 파일을 public/ 디렉토리로 이동 - index.html에서 fetch로 API 호출하는 버튼 추가 - .gitignore, package.json 추가
This commit is contained in:
52
public/about.html
Normal file
52
public/about.html
Normal file
@@ -0,0 +1,52 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>소개 | 테스트 사이트</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<span class="logo">🌸 테스트 사이트</span>
|
||||
<a href="index.html" class="btn">홈</a>
|
||||
<a href="about.html" class="btn active">소개</a>
|
||||
<a href="contact.html" class="btn">연락처</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>소개 📖</h1>
|
||||
<p class="subtitle">이 프로젝트에 대해 소개합니다.</p>
|
||||
|
||||
<div class="card">
|
||||
<span class="badge">프로젝트 소개</span>
|
||||
<h2>coder-build-test</h2>
|
||||
<p>이 프로젝트는 Coder 환경에서 Gitea 레포를 거쳐 Coolify로 배포하는 파이프라인을 검증하기 위한 테스트 사이트입니다.</p>
|
||||
<p>빌드 스텝 없이 정적 HTML/CSS 파일로만 구성되어 있어, Coolify의 Static Site 배포 방식으로 바로 서빙할 수 있습니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>기술 스택</h2>
|
||||
<p>최대한 단순하게 구성했습니다.</p>
|
||||
<div class="tag-list">
|
||||
<span class="tag">HTML5</span>
|
||||
<span class="tag">CSS3</span>
|
||||
<span class="tag">Vanilla JS</span>
|
||||
<span class="tag">Gitea</span>
|
||||
<span class="tag">Coolify</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>배포 플로우</h2>
|
||||
<p>Coder에서 코드 작성 → Gitea push → Coolify가 감지하여 자동 배포 (또는 수동 트리거)</p>
|
||||
<div class="button-group">
|
||||
<a href="index.html" class="btn secondary">← 홈으로</a>
|
||||
<a href="contact.html" class="btn primary">연락처 →</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>배포 테스트 사이트 — Coolify + Gitea</footer>
|
||||
</body>
|
||||
</html>
|
||||
48
public/contact.html
Normal file
48
public/contact.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>연락처 | 테스트 사이트</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<span class="logo">🌸 테스트 사이트</span>
|
||||
<a href="index.html" class="btn">홈</a>
|
||||
<a href="about.html" class="btn">소개</a>
|
||||
<a href="contact.html" class="btn active">연락처</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>연락처 📬</h1>
|
||||
<p class="subtitle">궁금한 점이 있으면 연락주세요.</p>
|
||||
|
||||
<div class="card">
|
||||
<span class="badge">연락처</span>
|
||||
<h2>연락 방법</h2>
|
||||
<div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-label">GitHub</span>
|
||||
<span>github.com/2620227</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<span class="contact-label">Gitea</span>
|
||||
<span>gitea.bokdev.in/2620227</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>빠른 이동</h2>
|
||||
<p>다른 페이지로 이동해보세요.</p>
|
||||
<div class="button-group">
|
||||
<a href="index.html" class="btn secondary">← 홈으로</a>
|
||||
<a href="about.html" class="btn primary">소개 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>배포 테스트 사이트 — Coolify + Gitea</footer>
|
||||
</body>
|
||||
</html>
|
||||
101
public/index.html
Normal file
101
public/index.html
Normal file
@@ -0,0 +1,101 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>안녕하세요!</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
<span class="logo">🌸 테스트 사이트</span>
|
||||
<a href="/" class="btn active">홈</a>
|
||||
<a href="/about.html" class="btn">소개</a>
|
||||
<a href="/contact.html" class="btn">연락처</a>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<h1>안녕하세요! 👋</h1>
|
||||
<p class="subtitle">Coolify 배포 테스트용 샘플 사이트입니다.</p>
|
||||
|
||||
<div class="card">
|
||||
<span class="badge">API 테스트</span>
|
||||
<h2>랜덤 인사말</h2>
|
||||
<p id="greeting-text">버튼을 누르면 서버에서 인사말을 가져옵니다.</p>
|
||||
<div class="button-group">
|
||||
<button class="btn primary" onclick="fetchGreeting()">인사말 가져오기</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="badge">API 테스트</span>
|
||||
<h2>에코 테스트</h2>
|
||||
<p>텍스트를 입력하면 서버가 그대로 돌려줍니다.</p>
|
||||
<div class="input-row">
|
||||
<input type="text" id="echo-input" placeholder="텍스트를 입력하세요..." />
|
||||
<button class="btn secondary" onclick="fetchEcho()">전송</button>
|
||||
</div>
|
||||
<p id="echo-result" class="result-text"></p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<span class="badge">API 테스트</span>
|
||||
<h2>서버 상태</h2>
|
||||
<div id="stats-area" class="stats-grid"></div>
|
||||
<div class="button-group" style="margin-top:1rem">
|
||||
<button class="btn outline" onclick="fetchStats()">상태 조회</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer>배포 테스트 사이트 — Coolify + Gitea + Node.js</footer>
|
||||
|
||||
<script>
|
||||
async function fetchGreeting() {
|
||||
const el = document.getElementById('greeting-text');
|
||||
el.textContent = '불러오는 중...';
|
||||
try {
|
||||
const res = await fetch('/api/greeting');
|
||||
const data = await res.json();
|
||||
el.textContent = data.message;
|
||||
} catch {
|
||||
el.textContent = '오류가 발생했습니다.';
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchEcho() {
|
||||
const input = document.getElementById('echo-input').value;
|
||||
const result = document.getElementById('echo-result');
|
||||
if (!input) { result.textContent = '텍스트를 입력해주세요.'; return; }
|
||||
try {
|
||||
const res = await fetch('/api/echo', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ text: input }),
|
||||
});
|
||||
const data = await res.json();
|
||||
result.textContent = `서버 응답: "${data.echo}" (${data.length}자)`;
|
||||
} catch {
|
||||
result.textContent = '오류가 발생했습니다.';
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchStats() {
|
||||
const area = document.getElementById('stats-area');
|
||||
area.innerHTML = '<span style="color:#718096">불러오는 중...</span>';
|
||||
try {
|
||||
const res = await fetch('/api/stats');
|
||||
const d = await res.json();
|
||||
area.innerHTML = `
|
||||
<div class="stat-item"><span class="stat-label">업타임</span><span>${d.uptime}초</span></div>
|
||||
<div class="stat-item"><span class="stat-label">Node 버전</span><span>${d.nodeVersion}</span></div>
|
||||
<div class="stat-item"><span class="stat-label">플랫폼</span><span>${d.platform}</span></div>
|
||||
<div class="stat-item"><span class="stat-label">배포 시각</span><span>${new Date(d.deployedAt).toLocaleString('ko-KR')}</span></div>
|
||||
`;
|
||||
} catch {
|
||||
area.innerHTML = '<span style="color:#e53e3e">오류가 발생했습니다.</span>';
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
238
public/style.css
Normal file
238
public/style.css
Normal file
@@ -0,0 +1,238 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', 'Malgun Gothic', sans-serif;
|
||||
background: #f0f4ff;
|
||||
color: #1a1a2e;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
nav {
|
||||
background: #16213e;
|
||||
padding: 1rem 2rem;
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
nav .logo {
|
||||
color: #e2e8f0;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
nav a.btn {
|
||||
color: #a0aec0;
|
||||
background: transparent;
|
||||
text-decoration: none;
|
||||
padding: 0.45rem 1rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
nav a.btn:hover,
|
||||
nav a.btn.active {
|
||||
color: #fff;
|
||||
background: #0f3460;
|
||||
border-color: #4a5568;
|
||||
}
|
||||
|
||||
main {
|
||||
max-width: 720px;
|
||||
margin: 3rem auto;
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #16213e;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #718096;
|
||||
font-size: 1.05rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: #16213e;
|
||||
}
|
||||
|
||||
.card p {
|
||||
color: #4a5568;
|
||||
line-height: 1.7;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.card p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.4rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn.primary {
|
||||
background: #0f3460;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn.primary:hover {
|
||||
background: #16213e;
|
||||
}
|
||||
|
||||
.btn.secondary {
|
||||
background: #e2e8f0;
|
||||
color: #2d3748;
|
||||
}
|
||||
|
||||
.btn.secondary:hover {
|
||||
background: #cbd5e0;
|
||||
}
|
||||
|
||||
.btn.outline {
|
||||
background: transparent;
|
||||
border: 2px solid #0f3460;
|
||||
color: #0f3460;
|
||||
}
|
||||
|
||||
.btn.outline:hover {
|
||||
background: #0f3460;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #ebf8ff;
|
||||
color: #2b6cb0;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #f0f4ff;
|
||||
color: #4a5568;
|
||||
padding: 0.3rem 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.85rem;
|
||||
border: 1px solid #cbd5e0;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid #e2e8f0;
|
||||
color: #4a5568;
|
||||
}
|
||||
|
||||
.contact-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.contact-label {
|
||||
font-weight: 600;
|
||||
width: 70px;
|
||||
color: #2d3748;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.input-row {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.input-row input {
|
||||
flex: 1;
|
||||
padding: 0.55rem 1rem;
|
||||
border: 1px solid #cbd5e0;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.input-row input:focus {
|
||||
border-color: #0f3460;
|
||||
}
|
||||
|
||||
.result-text {
|
||||
margin-top: 0.75rem !important;
|
||||
color: #2b6cb0 !important;
|
||||
font-weight: 500;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: #f7fafc;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #718096;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: #a0aec0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
Reference in New Issue
Block a user