github actions

이제 프로젝트는 앱 런칭을 앞두고 QA를 진행하고있다. 이렇게 QA를 진행하다보니 알게된 것은 생각보다 다양한 기기에서 테스트하다보니 UI가 깨지는게 많다는 점이었다. 그러나 의외로 UI 깨지는 것을 쉽게 해결하기가 쉽지않았다. 아래와 같은 이유들 때문이었다. 특정 사이즈에서만 깨진다. 아래와 같이 화면이 좁아지면 UI가 깨진 다던가... 문제가 있었다. 반응형 사이즈 테스트를 해볼 수가 없다. 서버 API호출을 줄여 운영 비용을 줄이기 위해 네이티브 DB를 사용하기로 결정했었다. 사용자가 쓴 글, 좋아요 누른 글 등을 앱 내부 DB에 저장하게 하고, 로그인시 서버와 1회 통신을 통해 동기화하는 형태로 서비스를 구성했다. 이렇게 앱 내부 DB를 사용하는 곳이 늘어나다보니 이제는 브라우저로 배포된 서비스 ..

CICD를 구성하기전에 우선은 배포를 위한 서버 자원(S3, CloudFront, IAM)을 생성하고, AWS CLI를 사용해보자. S3만들기 클라우드 프론트를 통해 OAC설정을 할것이기에 ACL비활성화, 퍼블릭 엑세스 차단설정을 해도된다. CloudFront배포 만들기 원본 도메인으로 S3 버킷을 연결시켜주자. OAC설정하기 클라우드 프론트로만 S3에 접근할 수 있도록 S3의 정책을 변경해주자 S3에 파일을 업로드 하기 웹 콘솔에서 업로드 버튼 누르기 사실 업로드하는 방법은 간단하다. AWS 콘솔에서 업로드 버튼을 누르면 된다 허허 그런데 git에 push 할때마다, 직접 빌드하고 빌드한 파일을 업로드 하기에는... 우리는 너무 할일이 많고, 충분히 자동화시킬 수 있는 부분이다. 그래서 github a..

들어가며 네이버 부스트캠프의 그룹프로젝트 과정에서 진행했던 AlgoITNi의 배포전략, 선택한 이유, 방법들을 기록해두고자 한다. 프론트엔드에서 배포는 어떻게 이뤄지는가? 프론트엔드의 배포는 결국 html,css,js 정적파일을 서빙하면 끝이다. (SSR 제외) 좀더 세부적인 동작은 이전에 작성한 아래의 게시글을 참고해주면 좋을 것 같다. https://0422.tistory.com/312 프론트엔드 웹서버 직접 만들기 (1) - Content-Type, MIME 프론트엔드 개발을 해본 사람이라면 vscode의 live-server, webpack-dev-server, vite등등 다양한 도구를 사용해서 프론트엔드 서버를 띄워본 경험이 있을 것이다. 심지어 express를 사용한 서버에서도 static ..