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

학습/프로젝트

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

장동규 2022. 3. 19. 22:26

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

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 )

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

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

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;
  }
}