728x90
반응형
#spring.data.rest.base-path=/api
#spring.data.rest.basePath=/api
server.servlet.context-path=/api

React, SpringBoot 기반으로 웹서비스를  HTTP 프로토콜로 개발한 이후,   

SSL 인증서를 적용하여 HTTS 프로토콜 서비스를 하는 것을 설명/기록하고자 합니다.

 

크게 작업하여야 할 것은

  • Nginx에서  SSL 관련 키 파일, 인증파일, 서비스 포트 등을  conf 파일에 적용
  • React에서 SpringBoot API 호출할 때의 포트 변경 

으로 마무리될 수 있습니다.

 

하지만,  약간의 전제 조건들이 있습니다.

 

1. React 는 기본으로 3000번 포트를 사용

2.SpringBoot는 기본으로 8080 포트로, http 서비스 로 Embedded Tomcat서버로 구동

3. SpringBoot의  API는  context 경로( 예를 들면,  /api )가 지정되어 있어야  Nginx에서  React와 SpringBoot 모두를 Proxy할 수 있음.( <-  동일한  / 경로는  중복 설정되지 않기 때문.)

 

위의 전제 조건 중에서 1번과 2번은 기본으로 세팅되죠.  3번은  

#spring.data.rest.base-path=/api
#spring.data.rest.basePath=/api
server.servlet.context-path=/api

 

중 유효한 것을 적용합니다.  필자의 경우  SpringBoot가 2.6.12 임에도 인터넷 검색을 통한 지정하는 프로터피가 제대로 적용되지 않아  여러 개를 시도하다가 결국 최종적으로  마지막 형식이 제대로 동작한다는 것을 확인하였습니다.

 

위 HTTP환경에서 Nginx는 환경 구성은

server{
        server_name     www.yourdomain.com;
        location / {
                proxy_pass http://www.yourdomain.com:3000;
        }
        location /api {
                proxy_pass http://www.yourdomain.com:8080;
        }
}

 

이면 충분히 동작합니다.

이 때 React에서 SpringBoot로 API를 호출할 때는 

export const SERVER_URL='http://wwww.yourdomain.com:8080/api/';

 

으로 제대로 동작할 것입니다.

 


 

이제  HTTPS 서비스로 전환해 보겠습니다.

변경해야 할 부분은

    - Nginx의 configuration

    - React에서 API 호출하는 URI

의 2군데 입니다.

Nginx를 사용하기 때문에,  SpringBoot에서 SSL 적용에 따른 조치 사항은 수행하지 않습니다.

 

먼저 Nginx 의   conf 파일 내용 변경

server{
		listen				443 ssl;
        server_name     	www.yourdomain.com;
        ssl_certificate		certification.crt
        ssl_certificate_key	certification.key        
        
        location / {
                proxy_pass http://www.yourdomain.com:3000;
        }
        location /api {
                proxy_pass http://www.yourdomain.com:8080;
        }
}

 

로 2, 4, 5 줄을 추가해 준다, 다른 부분은 수정을 하지 않습니다.

 

그리고 React에서 API호출하는 URL를 변경합니다.

export const SERVER_URL='https://wwww.yourdomain.com/api/';

 

https로 표현하였고, 포트를 없앴습니다. 기본값이 443 사용.

 

 

 

다루어야 할 것이   3가지 요소이고( React, SpringBoot(Tomcat), Nginx)

URI, 포트, 프로토콜 및  Proxy 지정 등이 있어.

제대로 통신이 되지 않을 때  살펴보거나   디버깅할 때 조합의 경우의 수가 많습니다. 도움이 되길 바랍니다.

 

맨 앞단에, 브라우저의 URI  또는 API URI 를

Nginx에서 처리하는데

URI의 경우에 따라 처리(proxy: 위임, 돌리기)하는데,

https를 하면서 기본 포트가 변경되는 부분이 있다

 

가 주요 큰 흐름이고 이를 제대로 적용하면 됩니다.

728x90
반응형
728x90
반응형

해결하고자 하는 것

  • 한 개의 서버에서  2개 이상의 웹사이트(URL)을 운영
  • Flask/Python으로 제작된 Developer모드를  Deploy모드로 전환 - 1개의 사이트(URL)
  • 일반 정적(Static)인 자료인 1의 HTML 파일을 회사 내부자에게 서비스 - 또 다른 1개의 사이트(URL)

을 위해 Nginx를 도입해 보기로 합니다.

 

참조로  도메인 이름( server_name)은 DNS에서  설정해 주어야 한다.

주로 A Type  서버 도메인 이름을 등록하고,  IP는 Nginx가 설치된 서버의 값을 등록한다.

또는 virtual host를 설정하여야 한다.

또한,   CORS를  nginx에 설정해줘야,  클라이언트 프로그램에서 해당 도메인 존재 여부를 체크할 수 있다.

Nginx의 환경설정 후,  #nginx -s reload를 통해, 무중단 서비스 형태로   재시작/적용할 수 있다.

 

 

수행과정

우선,  nginx를 설치합니다.

yum install nginx

 

 

nginx의 기본설치 위치/경로/디렉토리는

/etc/nginx

입니다.

 

기본 설치 파일은 아래와 같습니다.

.
├── conf.d
├── default.d
├── fastcgi.conf
├── fastcgi.conf.default
├── fastcgi_params
├── fastcgi_params.default
├── koi-utf
├── koi-win
├── mime.types
├── mime.types.default
├── nginx.conf
├── nginx.conf.default
├── scgi_params
├── scgi_params.default
├── uwsgi_params
├── uwsgi_params.default
└── win-utf

 

 

 

nginx 실행 파일은

/usr/sbin/nginx

입니다.

 

실행 명령어는

systemctl restart nginx

 

 

수행을 확인해 보면

[root@springboot nginx]# ps -ef | grep nginx
root     16191     1  0 10:53 ?        00:00:00 nginx: master process /usr/sbin/nginx
nginx    16192 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16193 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16194 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16195 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16196 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16197 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16198 16191  0 10:53 ?        00:00:00 nginx: worker process
nginx    16199 16191  0 10:53 ?        00:00:00 nginx: worker process
root     17305 10460  0 11:15 pts/0    00:00:00 grep --color=auto nginx
[root@springboot nginx]#

로  여러개의 process (  fork)가 보여집니다. 9개가 뜨네요.

 

 

어떤 환경설정( nginx.conf )을 사용하여 구동되었는지는 

systemctl status nginx

를 통해 조회합니다.

 

[root@springboot nginx]# systemctl status nginx
● nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Wed 2023-12-06 10:53:06 KST; 23min ago
  Process: 16190 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 16186 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 16182 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 16191 (nginx)
   CGroup: /system.slice/nginx.service
           ├─16191 nginx: master process /usr/sbin/nginx
           ├─16192 nginx: worker process
           ├─16193 nginx: worker process
           ├─16194 nginx: worker process
           ├─16195 nginx: worker process
           ├─16196 nginx: worker process
           ├─16197 nginx: worker process
           ├─16198 nginx: worker process
           └─16199 nginx: worker process

Dec 06 10:53:06 springboot systemd[1]: Starting The nginx HTTP and reverse proxy server...
Dec 06 10:53:06 springboot nginx[16186]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Dec 06 10:53:06 springboot nginx[16186]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Dec 06 10:53:06 springboot systemd[1]: Started The nginx HTTP and reverse proxy server.
[root@springboot nginx]#

 

nginx의 구동은 /usr/sbin/nginx를 통해 하고 있으며, 9개의 프로세스를 통제하고 있으며, 

/etc/nginx/nginx.conf를 사용하고 있습니다.

 

/etc/nginx/nginx.conf의 내용을 살펴보면, 기본적으로...

더보기

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80;
        listen       [::]:80;
        server_name  _;
        root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

 

- 오류 로그 파일 :   /var/log/nginx/error.log

- 접근 로그 파일:   /var/log/nginx/access.log

- 서비스 포트 :  80

- 기본 서비스 파일 :    /usr/share/nginx/html

- 다중환경설정파일(들):   /etc/nginx/default.d/*.conf    에 두어야 함.

 

 

 

첫번째 URL 웹사이트를 적용해 봅니다.

/etc/nginx/www/help.llsollu.com/eznts.html

 

파일을 첫 페이지로 나타내고자 합니다.

   server {
        listen       80;
        listen       [::]:80;
        #server_name  _;
        server_name    help.llsollu.com
        #root         /usr/share/nginx/html;
        root           /etc/nginx/www/help.llsollu.com/
        index          eznts.html

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }

이에  상기처럼,   server_name,  root, index 를 변경하였으니,

제대로 동작하지 않음.  여전히  /usr/share/nginx/html/index.html이 나타남.

 

 

해결과정

그래서....

/etc/nginx/nginx.conf 파일에서

server_name, root. index를 주석처리 한 후,

/etc/nginx/conf.d/default.conf 파일을 만든 후

server{
        server_name     help.llsollu.com;
        location / {
                root   /etc/nginx/www/help.llsollu.com;
                index  eznts.html index.htm;
        }
}

와 같이 작성하니, 

제대로 동작함!!!!

 

즉 server {} 에 대한 정보를 nginx.conf에서 하는 것이 아니고, conf.d/default.conf 에서 하니, 제대로 적용되었음.

 

 

두번째,  동일한 서버에 있는 다른 웹 서비스(React:3000번 포트)를 띄우고자 합니다.

 

/etc/nginx/conf.d/default.conf 파일에,  내용을 추가해 줍니다.

# static html service
server{
        server_name     help.llsollu.com;
        location / {
                root   /etc/nginx/www/help.llsollu.com;
                index  eznts.html index.htm;
        }
}


# React service
server{
        server_name     webbiz.llsollu.io;
        location / {
                proxy_pass http://webbiz.llsollu.io:3000;
        }
}

 

 

결과

성공적으로 적용되어

help.llsollu.com    URL과    webbiz.lllsollu.io  URL의 웹페이지가,   한 개의 서버에서의 설정으로, 정상동작합니다.

 

 

😜

 

 

Nginx 에서 CORS 등록

 

                # CORS 설정
                add_header 'Access-Control-Allow-Origin' '*';
                add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
                add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';

                # OPTIONS 메소드에 대한 프리플라이트 요청 처리
                if ($request_method = 'OPTIONS') {
                    add_header 'Access-Control-Allow-Origin' '*';
                    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';
                    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
                    add_header 'Access-Control-Max-Age' 3600;
                    return 204;
                }

 

728x90
반응형

+ Recent posts