react / spring boot 프로젝트 배포 관련하여 질문을 드립니다! 조언 부탁드립니다. :)

Question

안녕하세요.프로젝트를 진행하다가 배포만 남아있는 상황입니다.저는 리액트로 앞단 쪽을 개발을 하였는데요.이제 배포만 남아있는 상황에서 그 프로세스에 대한 정확한 개념이 없어 질문을 드립니다.배포의 과정 중,프론트 개발자는 npm run build 같은 명령어로 빌드하여 얻어진 파일을 서버개발자에게 건네주기만 하면 되는건가요?서버 개발자는 그 파일을 index파일로 삼아 브라우저를 킨 사용자에게 건네주게 되는 그림이 맞는건가요?배포에 대한 전반적인 지식이 전무해서 질문을 드립니다.그리고 덧붙여 질문드리는 것은 모듈 번들러인 웹팩의 기능은 배포 과정 중 어디에 속하게 되는지, 그 효용에 대해 간단하게만 알려주시면 너무 감사드리겠습니다!!

selfless · Accepted Answer

정확하지 않을 수 있는데 느낌적인 느낌으로...Q1. 배포리엑트 로 코드 열심히 짜신거 빌드해서 파일 하나로 압축하고, 그 파일을 서버에 띄워야겠죠?npm start 하고 localhost:3000 로 접속하면 하면 로컬에서 보던 프로젝트를aws 서버에 배포하면 ${aws-의-ip-주소}:3000 하면 aws 컴퓨터에 띄워진 리엑트 프로젝트를 보게 되는거네요.Q2. 웹팩의 역할개발 처음 시작할 때, package.json에 필요한 dependency 적고npm install 하면node_modules/ 폴더에 개발에 필요한 라이브러리들 받아지잖아요?그걸 import해서 코드 짜는거구요.웹팩은 npm run build하면 저 위에 다운받은 라이브러리&#43;내가 짠 코드를 하나의 파일로 압축하는데,웹팩은 트랜스파일러라고왼쪽에 저 잡다한 확장자들을 오른쪽에 .js, .css, .jpg, .png로 변환하고ES7나 ES6로 쓰인 게 하위 브라우저에서 지원 안될 수 있으니 ES5로 문법 변환해서이렇게 한줄로 깔끔하게 압축시켜줍니다.이 main.chunk.js 파일 을 웹서버에 배포하는거죠.Q3. 기본 아키텍처client->Server로 요청을 보낼 때,웹 브라우저(크롬이든 파이어 폭스든)로 123.123.123.123:80으로 http request를 보내면,web server인 nginx가 123.123.123.123:80 이 요청을 리엑트 서버로 redirect해줍니다.react에서 백엔드로 요청 보낼 때, fetch를 쓰셨든 axios를 쓰셨든,GET localhost:8080 로 보내셨겠죠?그럼 이 요청을 다시 web server인 nginx가 잡아서 백엔드 서버인 스프링 부트(나 node.js) 로 보내구요.대략적으로 이런 흐름으로 웹 요청이 진행됩니다.만약 웹서버에서 요청이 어떤식으로 처리되는지 코드로 익히고 싶으시다면,도커를 설치하신 후,https://github.com/codingspecialist/Springboot-React-MySQL-NginX-Docker이 프로젝트를 클론 받으셔서docker-compose up -d로 실행하신 후,처리가 어떻게 진행되시는지 보시면 됩니다.대략적으로 코멘트를 남기자면book-frontend/Dockerfile 에FROM node:12.4.0-alpine as build WORKDIR /app ENV PATH /app/node_modules/.bin:$PATH COPY package.json /app/package.json RUN npm install --silent RUN npm install react-scripts&#64;3.0.1 -g --silent COPY . /app RUN npm run build # production environment FROM nginx:1.16.0-alpine COPY --from&#61;build /app/build /usr/share/nginx/html EXPOSE 80 CMD [&#34;nginx&#34;, &#34;-g&#34;, &#34;daemon off;&#34;]가 있는데, 윗 부분은 nodejs 설치 후, package.json 파일을 복사해서 npm run build해서 배포할 파일을 얻는 것이고,밑 부붙은 web server인 nginx를 설치해서, 위에서 얻은 배포 파일을 nginx/html에 기본 html파일로 저장해서localhost:80 으로 요청이 오면 리엑트 앱을 띄우는 코드입니다.

react / spring boot 프로젝트 배포 관련하여 질문을 드립니다! 조언 부탁드립니다. :)

1개의 답변

#webpack 목록