2021-12-15 : AWS S3에 프론트 배포하기, GitHub Action (CI/CD)

[som-syom]

이제 프로젝트로 작업하던걸 배포했어야 했는데
이전부터 CI/CD 도 적용할겸 같이 진행을 해야겠다고 다짐만 했지만 이제서야 작업을 시작했다.

AWS S3 배포하기

멘토님께 조언을 구해본 결과 테스트용으로 먼저 구현해보면 알기 쉬울거라고 하셔서
테스트로 이전에 만들었던 react-som-calendar 를 배포해보도록 하였다.
배포한 사이트 : http://test-som-calendar.s3-website.ap-northeast-2.amazonaws.com/

[참고한 자료]

• https://fors.tistory.com/571
• https://blog.appleseed.dev/post/frontend-deploy-on-aws-1/
• https://velog.io/@wooreal/AWS-React-project%EB%A5%BC-AWS-EC2%EC%97%90%EC%84%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0with.-git-putty-nginx
• https://react-etc.vlpt.us/08.deploy-s3.html
• https://kingofbackend.tistory.com/126

GitHub Action 사용해보기 (CI/CD)

배포를 먼저 진행한 후에
(프로젝트에도 적용해볼) CI/CD 를 테스트해보고 싶었다.
단순히 GitHub 의 Action 을 사용하기로 했는데,
마침 좋았던게 슬랙에 어떤분이 CI/CD 에 대한 책을 읽고 독후감을 정리해서 올린게 참고가 많이 되었다.
다른 글에서도 보았지만 해당 레파지토리 내에 .github 폴더를 생성후 workflow 라는 폴더 안에
.yml 파일로 어떤식으로 Action 을 실행시킬지 작성하는 것이다.
독후감 자료에서 workflow 가 많이 만들었던 Makefile 과 비슷하다는 문장이 있었는데
다시 보니 맞는말같았다.
언제 이 Action을 실행시킬지도 설정이 가능했고 (PR이 올라왔거나, 닫히거나, 특정 브랜치에 push 되었을때 라던지)
어떤 과정을 실행시킬지도 자유롭게 세팅이 가능했다 (npm i 후에 npm build 등..)
그리고 다른 Action 기능을 쓰는 레파지토리를 보니 특정 폴더에 진입해서 실행하는 것도 가능했다.
이렇게 되면 우리 프로젝트처럼 front, back 이 같은 레파지토리에 있어도 따로 실행이 가능한 셈이다.
테스트는 간단하게 기본만 진행시켜봤다
Action 기록 : https://github.com/som-syom/som-react-calendar/actions/runs/1573796469
workflow 코드 : https://github.com/som-syom/som-react-calendar/blob/master/.github/workflows/deploy.yml

[참고한 자료]

• https://mighty-venus-d8a.notion.site/1f72f3d01ecd457b84c60b7298d09f15
• https://www.youtube.com/watch?v=36ozjlJfDWc&ab_channel=KenuHeo
• https://github.com/kenu/10ynews/blob/main/.github/workflows/deploy.yml
• https://github.com/woowacourse-teams/2021-jujeol-jujeol/tree/develop/.github/workflows

아직 테스트만 해본게 다고..
오늘은 api 수정 이것저것 하느라 진행하지 못했지만, 내일은 바로 배포할 수 있도록 테스트해볼 예정이다.