[프로젝트] Docker Nginx + React(SPA) + Spring Boot

더 좋은방법으로 개선해나갈 계획

 

Jenkins 사용 X

 

환경

 Synology 220+

 Docker 

 Spring Boot ( Gradle )

 React ( Npm, Node )

 

구성도

 Nginx ( 172.17.0.2 8080 )

 Node ( 172.17.0.4 3000 )

 Spring Boot ( 172.17.0.3 8081 )

 

Nginx Proxy를 통해

 Front End > Node

 Back End > Spring Boot

로 이동할 예정

 

준비작업

* 빌드 

 SpringBoot  Gradle Build ( Jar )

Project > Run As > RunConfigurations

Gradle Task > New Configuration

 

Add > bootJar , Workspace > Proect Select , Apply > Run

Build 확인 ( ./Project > build > libs )

 

Create-React-App로 생성된 React-Router-Dom(SPA)프로젝트  Build ( Npm Run Bulid )

npm Build ( ./Project > build )

Spring Boot에 대한 Dockerfile 작성

FROM openjdk:11

EXPOSE 8081

ADD build/libs/theMaple-0.0.1.jar theMaple-0.0.1.jar

ENTRYPOINT ["java","-jar","theMaple-0.0.1.jar"]

1. 받을 이미지 ( OpenJDK 11번전이 설치된 이미지 )

2. 컨테이너 포트 

3. 파일복사 ( args1 : 현재 디렉토리 파일, args2 : 컨테이너에 복사될 파일 )

4. Entrypoint ( 도커실행후 수행할 명령어 )

 

Nginx 프록시 설정에대한 default.conf 설정

server {
listen 8080;
listen [::]:8080;
#root /home/nginx/build;

server_name [Domain Name ]

  location = / {
        proxy_pass http://172.17.0.4:3000/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
  }
  location = /router1 {
        proxy_pass http://172.17.0.4:3000/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
  }

  location ~ .static/(js|css|media)/(.+)$ {
        proxy_pass http://172.17.0.4:3000;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
  }

  location /server {
    proxy_pass http://192.168.0.2:8081; #내부서버 
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_buffer_size          128k;
    proxy_buffers              4 256k;
    proxy_busy_buffers_size    256k;
error_page 405 = $uri;
  }
}

여기서 삽질을 2일함 

location = /  : 홈경로

 - 이때 Proxy pass는 Docker Container의 IP로 작성

 

*도커 컨테이너 IP확인법

docker network inspect [네트워크 이름]

또는

docker inspect [컨테이너 이름]

 

이후 IPAddress 확인

 

"Gateway": "172.17.0.1",
"IPAddress": "172.17.0.3",
 "IPPrefixLen": 16,
  "IPv6Gateway": "",

 

location = /router1 react router에서 사용됐던 경로모두 작성

 - location = / 에 사용과 동일하게 작성

 

*실패했던 내용

location = (/|/router1|router2) 실패

location / 실패

 

location ~ .static/(js|css|media)/(.+)$ : react-router를 빌드하고나면 static 경로가 생기는데 그걸 등록해주기 위함 

 - location = / 에 사용과 동일하게 작성

 

location /server : Spring boot 컨트롤러 패치를 다작성 

 - 컨트롤러마다 하나씩 추가

 

*실패내용

location /(server1|server2) 실패

 

이때 스프링부트로 연결할 주소는 Docker Ip가 아닌 내부서버의 주소로 작성

 

 

*시놀로지에 파일 이동

Dockerfile : gradle

springboot build jar : gradle > build > libs

default.conf : nginx > etc

npm build : node > [projectname] > build

*도커 이미지 준비

node 다운

nginx 다운

springboot 이미지 생성

###############synology putty 접속 #############

sudo -i

cd /volumn1/docker/gradle/build  #dockerfile 있는 경로

docker build -t [docker image name] . #도커이미지 생성

 

*컨테이너 생성

nginx

node

spring boot

 

*컨테이너 모두실행

이후 Node 컨테이너

 

cd /home/node/project/build/  #마운트 해줫던경로

serve -n

 

 

nginx 로그확인