공부로그

문제 프로젝트에서 JWT를 사용한 인증방식을 사용했다. 따라서, 어떤 요청의 헤더에는 'access_token', 'refresh_token' 이라는 key와 그 value값이 포함되어 있었다. 또한, FCM에 사용되는 토큰도 같은 형식으로 담겨 있었다. 하지만, 토큰이 있는지 확인이 필요한 요청들에 대해서 에러코드가 리턴되는 문제가 발생했다. 원인 SpringSecurity에서 permitall로 설정된 요청들에 대해서는 에러가 발생하지 않는데, hasRole로 설정되어 토큰 존재 여부가 필요한 요청들에 대해서는 토큰이 없다는 에러가 발생했다. 분명히 프론트엔드단에서 토큰을 담아서 axios 요청을 보냈는데, 자꾸 토큰이 없다는 문제가 나타난 것이다. 모든 요청들이 Nginx를 거쳐서 전달되었는데, N..

문제 Nginx에서 Vue 프로젝트 빌드 파일을 전달하도록 환경을 구성했다. 메인페이지가 잘 나오는 것(http://example.com)을 확인하고 하위 경로도 잘 나오겠지라고 생각했다. 하지만 Vue 라우터에 등록한 하위 경로(http://example.com/home 등..)에 접속했더니 404 에러가 나타났다. 원인 Vue가 SPA이기 때문이다. Nginx는 정적 컨텐츠를 전달할 때, root 디렉터리에서 파일의 존재 여부를 찾는다. 'http://{IP주소}:{포트번호}/mainpage' 로 요청을 보내고 nginx 설정에서 root 디렉터리를 '/usr/share/nginx/html' 이라고 했을 때, 해당 root 경로 안에서 mainpage.html 이라는 파일을 찾아 전달하려고 한다는 말..

이번 프로젝트를 진행하면서 프론트와 백엔드 CI 과정을 다시 경험했다. 그리고 이전 프로젝트에서 적용하지 못해서 아쉬웠던 부분을 개선해서 적용하게 되었다! 하지만 이전에 좋았던 부분을 적용하지 못한 부분도 있다..ㅎㅎ 이건 보완해서 다시 추가해놓겠다. 목표는? Vue로 만들어진 프로젝트를 EC2 서버에 올려보자! 근데 이제 CI를 곁들여서 ... 사용한 기술 스택 Docker 컨테이너로 Jenkins를 실행하고, 거기서 Vue 프로젝트를 빌드해 나온 결과물 dist 폴더를 scp로 EC2 서버에 전송할 것이다. 그리고 그 디레터리를 Docker 컨테이너에 Nginx 위에서 정적 파일을 제공할 수 있도록 한다. gitlab에 특정 브랜치에 푸쉬하면 해당 프로세스가 진행될 것이다. - Vue - EC2 - ..

상황 nginx컨테이너에 빌드된 파일을 배포했다. 나의 오류 분명 난 안틀렸는데 자꾸 'Welcome to NGINX' 페이지만 나타나고 Vue 페이지가 안나오는 것이 문제였다.  해결 과정 가장 먼저 든 생각은 nginx 가 reload되지 않아서 안먹힌다고 생각했다. 그래서 Dockerfile 마지막에 nginx를 재시작하는 명령어를 입력해서 다시 컨테이너를 실행했지만 실패했다. 두 번째로, 컨테이너를 실행시켜 접속 컨테이너의 bash를 실행했다. 가장 먼저 확인한 것은 작성한 Dockefile대로 dist 폴더에 들어있는 빌드파일이 잘 복사되었는지를 확인했다. 명령어를 입력해 본 결과 app 디렉터리에 모든 파일들이 복사되어 있음을 확인했다. 그 다음으로 의심되는 것이 nginx.conf 였다. ..

이걸 쓰는 이유는 CICD 환경을 구축하기 전에 그 복잡하고 귀찮음을 겪어보는 시간을 갖기 위해서이다. 직접 느껴보면 CICD를 왜 쓰는건지 이해가 잘 된다. 귀찮아도 해보자. (스크립트에 대한 설명이 빈약해보여 조금씩 추가하겠습니다) 🚩오늘의 목표 프론트와 백엔드로 설계되어있는 웹 서비스를 ec2 서버에 컨테이너화해서 직접 배포시켜보자(각각 실행)! 그리고 그 불편함을 깨닫자.. 정말 간단한 프론트와 백엔드를 직접 서버에서 실행해보는 과정을 진행하겠다. 모든 완성된 코드는 깃헙에 있다. https://github.com/yuzin9712/web-deploy-ec2 yuzin9712/web-deploy-ec2 프론트와 백엔드로 설계된 애플리케이션을 ec2 서버에 간단히 배포해보는 프로젝트. Contrib..