Java, Spring Boot, React 서버 생성 후 도메인 네임 연결 방법 (웹 서비스, war, 외장 톰캣, node.js, nginx, IpTime Port forwarding, 방화벽 설정) for window

spring boot, react 서버 생성 후 도메인 네임 연결 방법 (웹 서비스, war, 외장 톰캣, node.js, nginx, iptime, port 포워딩, 방화벽 설정) for window

이번에는 도메인네임(Domain name) 접속을 통하여 WebServer -> WAS까지 전반적인 web service의 인프라 구축에 대해 포스팅 해보았습니다. (초간단 주의)

 

먼저 도메인네임의 경우 무료로 iptime을 이용하는 방법도 있지만, 직접 호스팅 업체의 도메인을 구매하여 발급 받은 후 연결하였습니다. 

 

준비물은 다음과 같습니다.

프로젝트:

Spring Boot - API (API를 호출하여 동적으로 데이터를 주고 받을 때 사용하는 프로젝트)

React - Front (실제 웹사이트 화면 프로젝트)

 

Web서버 : Nginx

WAS서버: tomcat 8.5

도메인 네임: ex) http://dalbyutility.com/

 

프로젝트별 빌드 설정 

API 서버용 프로젝트 WAR build 합니다. 필자의 경우 gradle를 이용하였습니다. war build 관련해서 gradle 설정은 다음과 같습니다.

plugins {
    ...
    id 'war'
}

...

apply plugin: 'war'

bootWar.enabled = false
war.enabled = true

dependencies {
    ...
    providedRuntime 'org.springframework.boot:spring-boot-starter-tomcat'
}

 

 

Front node.js 프로젝트 파일을 build 하고 실행합니다.

# 빌드
npm run build

# serve 프로그램 install
npm insatll -g serve

# install 후 실행
npx serve -s build

serve는 build 폴더 기준으로 서버가 실행됩니다. 서버 실행 후 결과는 다음과 같습니다.

서버 실행

http://localhost:3000/ 접속확인

 

 

spring boot main메소드를 수정 해 줍니다. SpringBootServletInitializer 추상 클래스를 상속받고 아래 소스코드를 오버라이딩 하고 빌드 합니다.

@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder){
    return builder.sources(mainApp.class);
}

 

 

준비한 외장 톰캣의 webapps폴더 경로에 spring boot의 war 파일을 넣어줍니다. 그리고 server.xml 파일을 수정 후, 명령 프롬프트를 실행하고 설치된 톰캣 폴더로 이동합니다.

 

tomcat 설치 폴더의 conf 폴더로 진입하여 server.xml 파일을 수정 해 줍니다.

<Context docBase="war파일명" path="/" reloadable="false"/>

 

명령 프롬프트

# 톰캣의 bin 폴더 이동
cd path 

# window의 경우 startup.bat 실행
startup.bat

# 종료
shutdown.bat

 

톰캣 실행 후 webapps 폴더에 해당 API 프로젝트가 생성된 것을 확인 할 수 있습니다.

 

톰캣 webapps

 

실행중인 톰캣은 다음과 같습니다.

톰캣 실행

 

API서버 및 화면 프로젝트 설정이 완료됬다면, Nginx를 conf 파일을 설정 해 줍니다.

 

※주의사항: local PC에서 테스트하던 tomcat의 버전과 상이할 수 있습니다. 실제 local에서 테스트했던 tomcat 버전을 사용하여 tomcat WAS를 실행 해 주세요. 만약 버전 이슈나 다양한 오류로 서버 실행시 원할하게 진행되지 않으면 아래 gradle 코드 수정을 하여 bootWar를 이용하여 진행 해주시면 됩니다.

bootWar.enabled = true
war.enabled = false

 

bootWar의 war 파일을 이용하여 진행할 수 있습니다. 실행 방법은 다음과 같습니다.(내장톰캣)

java -jar warName.war

 

필자의 경우 spring 3.x.x 버전으로 톰캣 10.x version를 사용하였습니다.

 

 

Nginx 설정

server {
    listen 80;
    server_name dalbyutility.com www.dalbyutility.com;
    client_max_body_size 100M;
        
    proxy_set_header Host $host;
    proxy_pass http://localhost:3000/;
    proxy_redirect off;
        
}

위 내용은 해당 서버의  80번 port 사용하고, server_name: dalbyutility.com 도메인네임을 통해 들어왔다면 proxy_pass https://localhost:3000/ 로 해당 요청을 보내게 됩니다.(iptime DDNS를 이용한다면 해당 도메인 네임을 입력)

 

설정을 완료했다면 Nginx를 실행 해 줍니다.

# 실행
start nginx

# 종료
nginx -s stop

# or 작업관리자로 프로그램 종료

 

위 3개의 작업이 완료 됬다면 iptime과 방화벽 설정을 해 줍니다. (관리도구 클릭)

 

iptime 설정

iptime 포트포워딩

먼저 위 사진과 같이 웹 서버에서 설정한 80번 port를 실행중인 webservice ip에 포트 포워딩 규칙을 추가 해 줍니다.

iptime DDNS

iptime내에서 DDNS를 설정 할 수 있습니다. 필자의 경우 yunwebdns.iptime.org 로 설정 공인 IP 및 도메인 네임  yunwebdns.iptime.org 에 대한 요청를 처리하게 됩니다.

 

방화벽을 설정 (인 바운드 규칙 추가)

새 규칙 > 포트 체크

인바운드 규칙 추가

 

> TCP, 80 체크 빛 입력 > 계속 다음 진행

TCP, 80번 port

 

 

도메인 네임 설정

네임서버 DNS에 CNAME 레코드와 포트 포워딩 관련으로 내용을 추가 해 줍니다. 필자는 호스팅kr이라는 업체를 통해 도메인 네임을 구매하였습니다.

 

포워딩 설정

고정 포워딩

CNAME 설정

CNAME 설정

 

 

 

외부 접속 테스트

Web

웹 테스트

 

 

 

모바일

모바일 테스트