React app Amazon s3에 배포하기.
이번에 2주 동안 어드민 사이트를 개발 하게 되면서 Frontend 단에 있었던 문제나 해결 방법에 공유할까 합니다. 2주동안 가능할수 있었던 이유는 따로 대시보드 차트에 대한 페이지 가 따로 필요하지 않았고, 단순한 페이지 2개에 대해서 읽기, 쓰기, 수정에 대한 기능만 지원하면 되어서 2주 동안 개발을 완료할수 있었습니다.개발에 사용한 스펙의 경우에는
Design
coreuiFrontend 는
bootstrap
reactstrap
ReactBackend
Redux
Redux-thunk
Redux-logger
React-router
Node.jsDeploy
express
mysql
sequelize
Frontend: AWS s3 를 통해 static html 을 서빙하는 방식이런식으로 구성했으며, 지금은 Frontend에 배포에 대해서 설명할까 합니다. 이게 제일 쉽고, 제가 처음 하던 작업이라 메뉴얼 하게 한 부분도 몇개 있거든요.
Backend: docker + elastic beanstalk 을 통해서 배포하였습니다.
Requirements
- AWS 계정
- amazon console command
- coreui에서 제공하는 react 버전의 app https://coreui.io/react/
Steps
배포 과정은 간단합니다. AWS에서 호스팅 관련된건 다 지원해주고, react-scripts에서 build를 통해 static 페이지로 바로 나올수 있도록 지원해줘요.- AWS bucket 생성
- AWS bucket에 대해서 public으로 권한 변경
- static hosting 기능 켜기.
- frontend 프로젝트에서 npm run build 명령어 실행.
- aws s3 sync build/ s3://MY_BUCKET_NAME --acl public-read
AWS bucket 생성
$ aws s3 mb s3://mybucket
AWS bucket에 대해서 public으로 권한 변경
저는 여기서 약간 헷갈렸는데요.처음에 Bucket 생성후에 AWS console로 들어가서, 다음과 같이 세팅 했습니다. 일단
bucket에 대해서 Public 권한 추가.
AWS bucket static hosting 기능 켜기.
build 파일 생성하기.
$ npm run build
AWS S3 Bucket에 sync하기.
$ aws s3 sync build/ s3://MYBUCKET_NAME --acl public-read
이유는 잘 모르겠네요.
TIPS
deploy command
저의 경우에는 간단하게 deploy command를 package.json 에 추가해서 사용하고 있습니다. 일단은 간단하게 bucket이름을 static 하게 넣었고, 추후에 환경 변수로 빼거나 flightplan을 통해서 s3에 있는 bucket list중에 이름 규칙에 따라서 하나를 가져와서 배포하는 방식으로 변경할 것 같습니다. 사실 docker 안에 있으면 좋긴한데, 그렇게 되면 dev랑 production의 경우에 image가 달라질 것 같고, 불필요한 리소스가 사용 될것 같아서, 일단은 s3에 업로드 하는 방식으로 해결 했습니다.// package.json
{
...,
"deploy": "npm run build && aws sync build/ s3://mybucketname",
}
CORS 세팅하기.
지금 frontend의 경우에는 static 페이지로 서빙하고 있어서, 서버쪽 API를 이용시에 CORS (Cross-Origin Resource Sharing)를 세팅하지 않을 경우, API쪽에 접근이 불가합니다. 저의 경우에는 express에 cors 모듈을 추가해서 해결했습니다. 만약 안될 경우 docker에 nginx를 통해서 cors를 해결하는 방법을 사용할것 같아요.완료 페이지
완료 페이지라고 할것도 없이, 지금 호스팅 되고 있는 페이지에 첫번째 페이지를 캡쳐했습니다. 로그인의 경우에는 react-router로 PrivateRoute 구현해서 사용했습니다.
댓글 없음:
댓글 쓰기