광고 수익을 창출할 웹사이트 만들어보기 3-1(Flask 서버 github 소스 업로드]

일단 크게 3가지정도의 할일이 있다. 

지난편까지 일단 간단한 AI 이미지 생성기를 만들었다.

 

그 다음 차례는 

---

1. GitHub에 소스 올리기
   • 로컬 프로젝트를 깃(Git)으로 초기화.
   • GitHub에 새 레포지토리 생성.
   • 로컬 프로젝트를 GitHub 레포지토리에 푸시.
2. 로컬 환경에서 Flask 서버와 React 서버 테스트
   • Flask 서버 실행:
     • flask run 명령어로 서버 실행.
     • 서버 URL(예: http://127.0.0.1:5000) 확인.
   • React 서버 실행:
     • React 프로젝트 디렉토리에서 npm start로 서버 실행.
     • React 개발 서버 URL(예: http://localhost:3000) 확인.
   • Flask와 React 간 통신 테스트:
     • React에서 Flask 서버와 API 통신 확인.
3. AWS EC2를 사용해 두 서버 배포
   • EC2 인스턴스 설정:
     • AWS 콘솔에서 EC2 인스턴스 생성 (Ubuntu 추천).
     • SSH로 EC2 서버에 접속.
   • Flask 서버 배포:
     • Python, Flask, 필요한 패키지 설치.
     • Flask 서버 실행 환경 구축(예: Gunicorn, Nginx 사용).
   • React 서버 배포:
     • React 프로젝트 빌드(npm run build).
     • 빌드 결과를 Nginx 또는 Apache로 배포.
   • 도메인 연결 및 테스트:
     • EC2 인스턴스 퍼블릭 IP 또는 도메인 이름으로 두 서버의 배포 상태 확인.

좋다. 일단 첫번째 GitHub에 소스 올리기 부터 시작해보겠다.

---

올리기 전에 해야할 일이 있다.

소스코드 중 보안 점검을 해야한다.

 

이 과정을 하지않고 git에 올리면 누군가 내 API키를 몰래 써서 내 피같은 돈을 쓰게 만드니 말이다.

해결방법은 환경 변수로 관리하거나 .env 파일을 사용하는 건데 나는 파일형식으로 관리하겠다.

 

방법은 간단하다 .env파일과 .gitignore파일을 만들어서 관리하면 git에 업로드 되지 않는다.

 

일단 첫번째로 .env 파일에 저장된 값을 코드에서 불러오기 위해 python-dotenv 라이브러리를 설치한다.

pip install python-dotenv

 

 

.env엔

OPENAI_API_KEY=내 openAPI 키

 

.gitignore엔

# .gitignore
.env

 

App.py 에서 openapi 키 받는 부분엔

import os
from dotenv import load_dotenv

# .env 파일 로드
load_dotenv()

# OpenAI API Key 설정
openai.api_key = os.getenv("OPENAI_API_KEY")  # 환경 변수에서 API 키 불러오기

 

이런식으로 해놓으면 git에 올라갈때 내 키를 보관하고있는 .env파일은 빼고 올라간다.

 

일단 깃허브에 업로드하려면 아래의 과정을 따라야한다.

---

1. 깃(Git) 초기화

cd /path/to/your/project  # 프로젝트 폴더로 이동
git init                  # Git 초기화

Initialized empty Git repository in D:/emoji-generator/.git/라는 메시지는

Git 저장소가 성공적으로 초기화되었음을 의미한다.

이제 이 디렉토리에서 Git 명령어를 사용할 수 있게 된다.

 

2. gitignore 에 내용 추가

# 환경 변수 파일
.env

# Python 관련
__pycache__/
*.pyc
*.pyo
*.pyd

# Node.js 관련 (React 프로젝트)
node_modules/
build/

# 기타 시스템 파일
.DS_Store
.idea/
.vscode/

 

• venv/: Python 가상환경 폴더는 Git에 포함하지 않아야 합니다.
• .env: API 키와 같은 민감 정보를 담고 있으므로 제외해야 합니다.
• 캐시 파일: __pycache__/, *.pyc 등은 불필요한 Python 캐시 파일입니다.
• IDE 설정 파일: .idea/, .vscode/ 같은 개인 설정 파일은 제외합니다.
• 시스템 파일: .DS_Store는 macOS에서 생성되는 불필요한 파일입니다(Windows에서는 무시 가능).

3. 깃 스테이지에 파일 추가

git add .  # 현재 디렉토리의 모든 파일을 스테이징

 

 

깃 스테이지에 파일을 추가해보려는데 fatal 메세지가 발생했다.

이유는 안전한 디렉토리가 아니라는 뜻

fatal: detected dubious ownership in repository at 'D:/emoji-generator'
'D:/emoji-generator' is on a file system that does not record ownership
To add an exception for this directory, call:

        git config --global --add safe.directory D:/emoji-generator

 

친절하게 아래 어떻게 안전한 디렉토리가 되는지 커맨드도 알려준다.

그대로 해보자 

 

커맨드를 입력하고 git add를 해보니 뭔가 나오진 않지만 status 명령어를 통해 내 프로젝트의 현재 상태를 알수있다.

메시지 의미

1. On branch master:
   • 현재 master 브랜치에서 작업 중임을 나타냅니다.
2. No commits yet:
   • 아직 이 저장소에 **커밋(commit)**이 없다는 뜻입니다. (즉, 초기 상태)
3. Changes to be committed:
   • 스테이징된 파일들이 커밋될 준비가 되었다는 의미입니다.
   • 여기에는 다음 세 파일이 포함되어 있습니다:
     • .gitignore: Git 추적 제외 파일 설정.
     • app.py: Flask 애플리케이션 코드.
     • requirements.txt: Python 패키지 의존성 파일.

4. git commit -m "초기 커밋: "만능그림봇 프로젝트 업로드"

 

이제 준비단계는 끝났다.

실제 커밋 후 푸쉬를 진행하게 되면 업로드가 완료된다.

 

정리하자면 

 

1. git add

• git add는 "준비하기"
• 파일들을 "저장할 준비"를 하는 거다.

---

2. git commit

• git commit은 "저장하기"
• 이제 준비된 파일들을 진짜 "저장"하는 거다.

---

정리

• git add: "이 파일 저장할 거야!" 하고 골라내기.
• git commit: "이제 이 파일 진짜로 저장!" 하고 기록 남기기. 

정도가 되겠다.

 

아무튼 커밋해보자 . 

 

좋다 잘 커밋되었다.

Git 저장소에 안전하게 기록되었다.

 

5. GitHub에 레포지토리 생성

Git 저장소에 안전하게 기록된 커밋한 내용을 GitHub 원격 저장소에 업로드(push)하기 전

 

일단 깃 푸쉬 전에 GitHub에 레포지토리 생성를 생성해야한다.

 

깃허브에 로그인 한 뒤 New repository를 통해 레포지토리를 생성해야 한다.

 

• Repository name: 원하는 레포지토리 이름 입력.
• Description: 프로젝트 설명 (선택 사항).
• Public 또는 Private 선택.

 

레포지토리를 생성했다...!

이제 내 로컬에 있는 프로젝트와 github를 연결해줘야 한다.

 

6. 로컬 프로젝트와 GitHub 레포지토리 연결

GitHub에서 제공하는 명령어를 사용하여 로컬 프로젝트를 원격 레포지토리와 연결한다.

git remote add origin https://github.com/<your-username>/<your-repo-name>.git

 

나는 emoji-generator니까 내 username과 repo-name을 넣어주고 커맨드를 실행하면 

아무것도 안뜸

 

원격 레포지토리가 잘 연결되었는지 확인하려면 아래 명령어를 입력해보면 된다.

git remote -v

 

 

현재 git remote -v 명령어 결과를 보면 원격 저장소가 **origin**으로 연결되어 있다:

• Fetch와 Push 모두 https://github.com/haksa789/emoji-generator.git로 설정되었다.

이제 로컬 커밋된 내용을 GitHub에 푸시(push)하면 끝이다.

 

7. GitHub로 푸시

git push -u origin master

바로 푸쉬해 준다.

 

결과 

1. Enumerating, Counting, Compressing, Writing 단계가 완료됬다.
   • 로컬 커밋이 GitHub로 정상적으로 업로드되었음을 의미한다.
   • branch 'master' set up to track 'origin/master' 메시지:
     • 로컬 master 브랜치와 원격 origin/master 브랜치가 연결되었음을 나타낸다.
     • 이제 다음부터는 git push만 입력해도 푸시가 가능하다.

아까 github에 생성했던 레포지토리에 들어가보자.

잘 생성된 것으로 보인다.

 

 

.env파일도 안 들어가 있으니 APIkey가 유출될 일도 없다.

 

오늘 한 순서를 정리하자면 대략 

 

add(초기화,준비) - commit(정리) - 레포지토리 생성 - 로컬프로젝트와 레포지토리 연결 - push 정도다.

 

• git init (초기화)
  프로젝트를 Git으로 관리하기 시작.
• git add (준비)
  저장할 파일을 선택하고 스테이징.
• git commit (정리)
  변경 사항을 기록으로 저장.
• GitHub에서 레포지토리 생성
  원격 저장소를 준비.
• 로컬 프로젝트와 레포지토리 연결
  git remote add origin <URL>로 연결.
• git push (업로드)
  로컬에서 커밋한 내용을 원격 저장소에 업로드.

 

어렵지 않지만 처음할땐 이게 맞나 싶고 그렇다.

 

이제 다음순서는 리액트 업로드다 ^^

---

..다음편에서 끼속......