프론트엔드 - 백엔드 팀 프로젝트 중 통신관련 질문드립니다 ㅜㅜ

Question

안녕하세요 ! 현재 학부생 팀 프로젝트에서 '백엔드' 역할로 진행하는데 '프론트' 와의 협업에 있어 감을 못 잡겠는 부분이 있어서 이렇게 질문 드립니다ㅜㅜ현재 백엔드는 spring boot 사용중이며, 프론트는 react 사용중입니다.현재 백엔드쪽은AWS 로 EC2 (ubuntu) 에 저희 spring boot 빌드 파일을 올려놓았습니다.그 후에 프론트랑 통신을 위해서는, http-> https 변환과정이 필요하다고 하여 let's encrypt 를 활용해 nginx 에 ssl 적용 후 https://{domain}:8080/api~~까지 접속이 되는것까지 확인 한 상태입니다.근데 이 다음 작업을 어떻게 무엇을 해야하는 지를 모르겠습니다..ㅠㅠ 백엔드와 프론트 둘 다 초급자인 상황이라 프론트 분들이 데이터를 못가져오고 있다고 하는데,듣기로는 프론트 분들의 react 서버도 aws 에 올려놓아 통신이 이루어진다고는 하는데.. 이후 구글링을 해봐도 어떻게 진행되는건지 감이 안잡혀서 이렇게 질문드립니다 ㅜㅜ프론트 분들 세팅 작업을 제가 해 줄 수 있으면 해드릴 생각이라 (이걸 프론트 분들이 해야 할 세팅 작업 인지도 잘 모르겠습니다.)해드리고 싶은데 감이 잘 안잡히네요ㅜㅜ 어떻게 하면 될까요..? 부탁 드리겠습니다..!

코린이의청출어람 · Answer

추가로 좀 더 알아보니까 제가 진행했던 방식은 웹 서버를 두 개로 놓는것이 아닌, 하나로 했을 때의 방식인 것 같은데 맞나요..?ㅠㅠ

rockabyebaby · Answer

정보가 너무 부족합니다.포트가 막혀있는 것인지, CORS 문제인지, Nginx에서 reverse proxy 설정은 제대로 하셨는지, DNS 설정 문제일지... 원인은 다양하거든요.

Gear · Answer

세팅을 한 분이 다 하고 끝내지 말고, 두 분 다 관심 가지는 게 좋을겁니다.프론트엔드 개발자건 백엔드 개발자건 기본적인 개념은 알아야 한다고 생각합니다.몇 가지 방법이 있을 수 있으나, 제가 즐겨 하는 방식으로 설명 드리겠습니다.운영 서버에서는 Nginx를 사용하며, 프론트의 api 요청 uri가 /api로 시작하도록 합니다.가령 fetch(&#34;/api/user?id&#61;gear&#34;) 이런 식으로요./usr/share/nginx/html 디렉토리 내에 react 빌드 결과 복사boot server 실행*nginx 설정**[* boot server 실행 예시]gear&#64;cheongchool ~$ pwd /home/gear gear&#64;cheongchool ~$ ls app.jar application.yml gear&#64;cheongchool ~$ cat application.yml server: port: 8080 gear&#64;choengchool ~$ nohup java -jar app.jar &[** nginx 설정 예시]http로 접속 시 https로 redirectserver { listen 80; server_name cheongchooleoram.kr; return 301 https://$host; }https 접속 시# upstream 설정 upstream was { # was는 정해진 키워드가 아니고, 그냥 was로 이름 지은겁니다. server localhost:8080; # spring boot 서버가 같은 컴퓨팅 환경에서 8080 포트로 실행중이라 가정 # 만일 http://cheongchool2.kr:8080으로 제공 중이라면 server cheongchool2.kr:8080; 이 됐겠지요 } # https 서버 설정 (443 포트) server { listen 443 ssl; # 443 포트로 https 제공하기 위함 server_name cheongchooleoram.kr; ssl_certificate /etc/ssl/cheongchooleoram.kr/cert.pem; # 이 경로에 파일이 있다고 가정 ssl_certificate_key /etc/ssl/cheongchooleoram.kr/private.key; # 이 경로에 파일이 있다고 가정 location ^/api { # /api로 시작하는 요청이 올 경우 처리 rewrite ^/api(.*)$ $1 break; # 앞의 /api를 제거해줍니다. proxy_pass http://was; # 요청을 spring boot 서버에게 넘깁니다. } # 가령 /api/user라는 주소로 요청이 오면 /user라는 주소로 바꿔서 spring boot 서버에 넘깁니다. location / { # 그 외 모든 요청 root /usr/share/nginx/html; # 해당 경로에 react 빌드 결과가 있어야 합니다. index html; # /usr/share/nginx/html/index.html이 존재해야 합니다. try_files $uri /index.html; # 파일을 못 찾을 경우 index.html을 응답합니다. } }이렇게 하면 프론트엔드와 백엔드 모두 https://cheongchooleoram.kr로 제공하게 되니 SOP 같은 것도 잘 신경 안 써도 되겠지요.try_files $uri /index.html;을 한 이유:가령 /home이라는 경로로 접속했다고 가정해봅니다. 그러면 /usr/share/nginx/html/home이라는 파일 혹은 /usr/share/nginx/html/index.html이라는 파일을 찾을 것입니다.하지만 react 빌드 시 실제로 그런 파일은 만들어지지 않습니다. 리액트에서 경로에 따른 페이지를 라우팅하는 것은 요청된 주소를 보고 javascript로 처리하기 때문입니다.그러면 해당 경로로 접속 시 파일을 찾지 못해 제대로 된 페이지가 나오지 않을 것입니다.그래서 이런 설정을 하여 index.html을 응답할 수 있도록 한 것입니다.개발 시에는개발서버(webpack-dev-server 혹은 vite 등)의 프록시 설정을 해주면 됩니다.vite 설정 예시export default defineConfig({ // (기타 설정 생략) server: { proxy: { '/api': { // /api로 요청이 오면 target: 'http://dev.server.com:8080', // 8080 포트로 실행중인 개발 서버에 처리를 맡깁니다 rewrite: (path) &#61;> path.replace(/^\/api/, &#34;&#34;) // 단, 요청 uri의 맨 앞 /api는 제거해서 넘겨줍니다 } } } })

프론트엔드 - 백엔드 팀 프로젝트 중 통신관련 질문드립니다 ㅜㅜ

3개의 답변

기술 목록