[개인프로젝트] 웹 만들기 총 정리

1. AWS의 RDS를 생성한다. (참고 글 : https://dongsu96.tistory.com/80 )

 

2. 새 DB(스키마)와 유저를 만든 후 해당 유저에게 모든 권한 부여

use mysql; 
create database 데이터베이스명;
create user '유저이름'@'%' identified by '비밀번호';
grant all privileges on 데이터베이스명.* to '유저이름'@'%';

 

3. 위 두개를 이용해 MySQL Connections 생성한다.

 

4. 필요 시 이미지를 보관 할 AWS S3 버킷을 생성 후 이용한다. ( 참고 글 : https://dongsu96.tistory.com/131 )

 

5. 팔로우, 좋아요와 같은 테이블은 중복된 값이 들어가면 안되는 컬럼을 쌍으로 묶어 unique 처리를 해준다.

 

6. 테스트 후 이상이 없다면, 참조하고 있는 테이블이 있는 경우에 한해서 "개발 마무리단계"에 외래키 설정한다. 

우측 On Delete도 CASCADE 처리를 한다. ( 참고 글 : https://dongsu96.tistory.com/93 )

 

7. 파이썬 가상환경을 만들고 접속 후, 필요한 모듈들을 설치하고 세팅한다.

( 참고 글 : https://dongsu96.tistory.com/47 )

 

8. flask 서버에서 rest api를 개발(설계)한다. 

 

9. 개발 시 작성한 코드들은 git repository (public)으로 올릴 것이기 때문에

중요 정보들은 config 파일에 작성 후 .gitignore에 추가해 올라가지 않게 한다. 사용할 때엔 import 해서 사용한다.  

class Config :
    HOST = ''
    DATABASE = ''
    DB_USER = ''
    DB_PASSWORD = ''

    PASSWORD_SALT = ''

    ### JWT 관련 변수 세팅 -> app.py 파일에서 설정해줘야 한다.
    JWT_SECRET_KEY = ''
    JWT_ACCESS_TOKEN_EXPIRES = False # False = 만료 없이 설정
    PROPAGATE_EXCEPTIONS = True # 에러가 나면 보여줄 것

    S3_BUCKET = ''
    S3_LOCATION = ''

    AWS_ACCESS_KEY_ID = ''
    AWS_SECRET_ACCESS_KEY = ''

 

10. 개발한 api들은 포스트맨을 이용해 테스트한다.

 

11. 이상이 없다면 서버를 배포하기 위해, 배포용 폴더를 생성 후 로컬에서 테스트 후에 serverless로 배포한다.

(참고 글 : https://dongsu96.tistory.com/119 )

 

12. 위에서 작성한 파일과 코드들을 복사해 배포용 파일에 옮긴 후 다시 배포한다.

이 과정에서 Docker Image로 배포할 수 있게 세팅을 하고 배포 자동화(CI/CD)하기 위해 git Actions를 이용한다.

( 참고 글 : https://dongsu96.tistory.com/156 )

 

13. 배포 과정, 통신 시 오류가 생긴다면 AWS CloudWatch에서 로그기록을 확인한다.

 

정상적으로 배포된 상태

 

14. React로 웹을 개발하고 필요 시 배포된 서버로 통신해 데이터를 주고 받으면 된다. 

---

사용 open api

1. 카카오 로그인

-> 카카오톡 프로필사진, 이름

 

2. aws rekognition(물체 탐지)

---

개발하는 동안 새로 배운것들, 생긴 이슈들과 해결 과정

 

1. localhost:3000 -> 서버 통신 시 CORS 에러 ( 참고 글 : https://dongsu96.tistory.com/198 )

 

2. AWS S3를 이용한 정적 웹 사이트 호스팅 ( 참고 글 : https://dongsu96.tistory.com/202 )

 

3. AWS IAM 계정이 두개 이상일 때 생긴 이슈 ( 참고 글 : https://dongsu96.tistory.com/225 )

 

4. 웹 -> 서버 통신 시 응답받은 jwt 토큰 사용, 만료하는 법 (참고 글 : https://dongsu96.tistory.com/226 )

 

5. 웹 -> 서버 통신 시 jwt 토큰 headers에 넣어 보내는 법 ( 참고 글 : https://dongsu96.tistory.com/230 )   

 

6. 로그인 x 유저가 로그인이 필요한 path로 못들어오게 막는 법 ( 참고 글 : https://dongsu96.tistory.com/231 ) 

 

7. 중요 정보 보호용 config파일과 같은 의미인 .env파일 사용법 ( 참고 글 : https://dongsu96.tistory.com/250 )

// 환경변수 사용 예시 `${process.env.REACT_APP_변수명}`
function detailPost(){
    axios.get(`${process.env.REACT_APP_URL}/posting/${postingId}`, 
        { headers: { Authorization: `Bearer ${jwtToken}`}})
        .then((res) => {
            let data = {...res.data.post[0]};
            setDetailPostInfo(data);

            if (res.data.tag.length == 0){
                return;
            }

            const formattedTags = res.data.tag.map((tag) => ` ${tag} `)
            setTagList(formattedTags);
        })
        .catch((e) => {
            console.log(e.response.data.error);
        });
  }