지금까지 한 많은 기능 잘되는지 확인!

스크린샷 2026-07-01 오후 2.49.41.png

확인

서버에 올릴 웹과 디비를 만들어야한다

웹구조

web/ ├── app.py # Flask 서버 메인 코드 ├── Dockerfile # 컨테이너 빌드용 파일 ├── requirements.txt # 필요한 라이브러리 목록 (flask 등) ├── templates/ # HTML 파일들 (여기에 만드시면 됩니다) │ ├── index.html # 메인 페이지 │ ├── login.html # 로그인 페이지 │ ├── signup.html # 회원가입 페이지 │ └── qna.html # 문의 게시판 └── static/ # CSS, JS, 이미지 파일 └── style.css # 스타일 정의

웹 구조를 생성하고 파일작성

<aside> 💡

app.py

from flask import Flask, render_template

# Flask 앱 객체 생성
app = Flask(__name__)

# 각 페이지로 연결하는 길(Route)을 만듭니다.
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/login')
def login():
    return render_template('login.html')

@app.route('/signup')
def signup():
    return render_template('signup.html')

@app.route('/qna')
def qna():
    return render_template('qna.html')

# 이 코드를 실행하면 서버가 켜집니다.
if __name__ == '__main__':
    # host='0.0.0.0'은 외부 접속 허용, port=5000은 접속할 번호
    app.run(host='0.0.0.0', port=5001, debug=True)

</aside>

<aside> 💡

index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clover Web Portal</title>
    <!-- CSS 연결 -->
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <!-- 네비게이션 바 (공통) -->
    <nav>
      <a href="/">메인</a>
      <a href="/login">로그인</a>
      <a href="/signup">회원가입</a>
      <a href="/qna">문의하기</a>
    </nav>

    <!-- 메인 콘텐츠 (이 부분만 페이지마다 다르게) -->
    <div class="container">
      <h1>Clover Infrastructure Management</h1>
      <p style="text-align: center; font-size: 1.1em">
        ktcloud 기반의 인프라를 손쉽게 관리하세요.<br />
        클로버는 형님의 성공적인 클라우드 운영을 지원합니다.
      </p>
      <button class="btn-clover">인스턴스 현황 보기</button>
    </div>

    <!-- 푸터 (공통) -->
    <footer>&copy; 2024 KT Cloud Clover Project. All rights reserved.</footer>
  </body>
</html>

</aside>

<aside> 💡

login.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>로그인 | Clover Web</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <nav>
      <a href="/">메인</a>
      <a href="/login" style="color: #00e676">로그인</a>
      <a href="/signup">회원가입</a>
      <a href="/qna">문의하기</a>
    </nav>
    <div class="container">
      <h1>로그인</h1>
      <form>
        <input type="text" placeholder="아이디" required />
        <input type="password" placeholder="비밀번호" required />
        <button type="submit" class="btn-clover">로그인하기</button>
      </form>
    </div>
  </body>
</html>

</aside>

<aside> 💡

signup.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>회원가입 | Clover Web</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>
  <body>
    <nav>
      <a href="/">메인</a>
      <a href="/login">로그인</a>
      <a href="/signup" style="color: #00e676">회원가입</a>
      <a href="/qna">문의하기</a>
    </nav>
    <div class="container">
      <h1>회원가입</h1>
      <form>
        <input type="text" placeholder="사용할 아이디" required />
        <input type="email" placeholder="이메일 주소" required />
        <input type="password" placeholder="비밀번호" required />
        <button type="submit" class="btn-clover">가입 완료</button>
      </form>
    </div>
  </body>
</html>

</aside>

웹서버 실행

<aside> 💡

python3 app.py

</aside>