티스토리 뷰
$ 프로젝트 디렉토리 구조 설계하기
프로젝트 디렉토리 구조는 MVC 패턴으로 작성하기로 했다.
- 클라이언트 디렉토리 : 리액트
- 서버 디렉토리 : 메인 서버 파일 app.js / routes / Models(sequelieze cli 이용) / controller
추후 자세하게 적을 계획 + 그림도 추가
$ 리액트로 만든 싱글 페이지 애플리케이션의 static file을 사용자에게 제공할 수 있는 여러 가지 전략 알아보기
1 ) 서버 어플리케이션에서 클라이언트 static file을 사용자에 제공할 수 있다.(node.js + express)
express 모듈에서는 static 미들웨어를 활용해서 이미지 파일, js파일, css파일을 처리할 수 있다.
app.use(express.static(__dirname+ '../client'));
2 ) AWS S3 이용해서 클라이언트 static file을 사용자에게 제공할 수 있다.
1 ) 번 방법은 어렵다고 한다?
AWS S3은 파일을 저장할 수 있는 클라우드 서비스이다. S3 버킷은 파일을 담을 공간이다. 해당 공간에 빌드된 static file을 저장한다. 그리고 사용자가 이 버킷 주소로 접속을 하게 되면, 클라이언트 static file을 다운받게 된다. 사용자가 해당 파일을 다운로드하면, 클라이언트 static file을 저장하고 제공하는 S3의 역할은 끝이 난다. 그리고 사용자는 다운로드한 클라이언트 static file, 애플리케이션을 가지고 서버와 통신하는 과정을 거친다.