요구사항에 Ngnix에 프론트를 두고 Tomcat을 백에 둬라는 말이 잘 이해가 안갔었지만,,나름 뇌피셜로 멘탈 힘듦을 줄였다
먼저, Ngnix와 Tomcat을 나누는 이유는..아직까진 잘모르겠다. 리액트 웹 어플리케이션이 스프링부트와 같이 동작하려면 서버를 분리할 수 밖에 없는건가? 질문자체가 합당한지도 잘 모르겠지만 말이다..
나누는 이유는 잘 모르겠지만 나눠서 얻는 이점은 비동기적으로 여러 웹서버를 가질수있다? 정도로 이해했다.
그러니까 앞단에서, Ngnix에서 어떤 특정 도메인으로 요청이 오면 그에 맞는 서버로 리다이렉트 시켜주는 것이다.
배포 과정..
먼저 npm, npx, node 를 최신버전으로 우분투에 설치한다.
그리고 깃헙에서 프론트 리액트 어플리케이션을 가져온다.
npm i로 프로젝트에 npm 을 인스톨한다.
npm start로 서버를 테스트해본다.
버전이 안맞으면 인스톨부터 에러난다.
서버가 잘 실행되면 npm run build로 빌드한다.
1. npm npx 설치
$ sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.36.0/install.sh | bash
$ export NVM_DIR="$HOME/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
$ nvm ls-remote 다운로드할수있는버전확인
$ nvm install 16.0.0
$ npm i
버전확인
node -v
npm -v
npx -v이제 빌드 된것을 Nginx랑 연결시켜주면 된다
Nginx는 그냥 sudo apt install nginx 이거만하면 문제없이 되더라
인스톨하면 아마 자동으로 서버가 실행되는거 같다.
서버 들어가보면 Ngnix 안내문구가 뜬다
여기서 Ngnix 설정을 건들여서 빌드된 리액트어플리케이션으로 리다이렉트해주면 된다.
2. Ngnix 설치
sudo apt install nginx
server {
listen 80;
location / {
root /home/ubuntu/sidedish/frontend/build;
index index.html index.htm;
try_files $uri /index.html;
}
}
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx
sudo nginx -t문제점..
Nginx와 Tomcat의 8080을 어떻게 연결해줄까..아니면 질문이 리액트와 Tomcat을 어떻게 연결시켜줄까가 맞는걸까?
빌드해서 Ngnix랑 연결하면 자꾸 실패하고
빌드안하고 그냥 npm start해서 3000 포트로 연결해서 8080포트를 안쳐줘도 api로 연결할수는 있었다.
왜 Ngnix랑 연결하면 실패할까?
뭔가 설정을 더해주거나 수정해야할거같은데,,,,,내일 한번알아보자
