공부로그

문제 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 - ..

정말 프로젝트해볼 때 맨날 봤던 이슈다. 그치만 맨날 찾아본다. 그래서 이번엔 정리해본다^^.. 상황 8080번 포트에서 실행 중인 프론트가 8081번 포트에서 실행 중인 서버로 게시물을 작성해 POST 요청을 보냈다. 이슈분석 그리고 원인 예상은 했지만, 안나오길 바랬던 이슈가 나타났다. 바로 CORS 에러이다. 저번에는 S3에 저장된 이미지를 캔버스에서 활용할 때 비슷한 문제가 나타났다. 정말 많이 봤다. CORS가 무엇인지 잠시 살펴보면 좋을 것 같다. CORS가 뭔데? 해결방법 package com.web.backend.controller; import com.web.backend.dto.PostSaveRequestDto; import com.web.backend.dto.PostsResponseD..

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