[NODEJS][NPM][YARN][WEBPACK] NodeJS Webpack + Haproxy + Apache Reverse Proxy 구성

1. 개요

  L4 장비 가격으로 인해 도입이 불가하여, Vmware - Haproxy 서버를 구성하게 되었다.

 구성 과정에서 Apache + NodeJS Webpack (React) 구성 단계에서 몇가지 발생하여 다음과 같이 정리해본다.

2. 구성도

  Haproxy (ke_prx_1) 1EA ->  Apache 2.4.52 Webserver 2EA -> NodeJS (React) 2EA 으로 통신 하는 구조이다.

3. 설정 정보

 1) Haproxy

#Haproxy


#----------------------------Front----------------------------------

frontend http_front_web
  bind *:80
  mode http
  
  acl route_web hdr(host) -i #{도메인}
  acl route_web_www hdr(host) -i www.#{도메인} 

  use_backend http_back if route_web
  use_backend http_back if route_web_www

  compression algo gzip
  compression type text/plain application/json application/xml

frontend https_front_web
  bind *:443 ssl crt #{인증서 PEM (PUBLIC + PRIVATE)}
  mode http

  acl route_web hdr(host) -i #{도메인}
  acl route_web_www hdr(host) -i www.#{도메인} 

  use_backend http_back if route_web
  use_backend http_back if route_web_www

  compression algo gzip
  compression type text/plain application/json application/xml

#----------------------------Back-----------------------------------
backend http_back
  balance roundrobin
  mode http

  option httpclose
  option forwardfor
  option httplog
  # option httpchk GET _cluster/health

  http-request set-header X-Forwarded-Host %[req.hdr(Host)]
  http-request set-header X-Forwarded-Port %[dst_port]
  http-request add-header X-Forwarded-Proto https if { ssl_fc }

  server web_1 172.16.30.20:80 check inter 3000 rise 2 fall 5
  server web_2 172.16.30.21:80 check inter 3000 rise 2 fall 5

backend https_back_mobis
  balance roundrobin
  mode http

  option httpclose
  option forwardfor
  option httplog
  # option httpchk GET _cluster/health

  http-request set-header X-Forwarded-Host %[req.hdr(Host)]
  http-request set-header X-Forwarded-Port %[dst_port]
  http-request add-header X-Forwarded-Proto https if { ssl_fc }

  server web_1 172.16.30.20:443 check inter 3000 rise 2 fall 5 ssl verify none
  server web_2 172.16.30.21:443 check inter 3000 rise 2 fall 5 ssl verify none

 2) NPM NodeJS (React) + Webpack Serve

  - webpack.config.js

    devServer: {
        historyApiFallback: true,
        port: 10080,
        host: "0.0.0.0"
    },

  - package.json  ( *매우 중요 --allowed-hosts all 또는 --alowed-hosts 정의)

"scripts": {
    "start": "webpack serve --open --hot --allowed-hosts all",
    "dev": "webpack",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prettier": "npx prettier --write ./src"
  }

 3) Apache 2.4.52 WebServer

LogFormat "%{X-Forwarded-For}i %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" proxy
# if https is used, make sure X-Forwarded-Proto is send
RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME}
RequestHeader set "X-Forwarded-SSL" expr=%{HTTPS}
SetEnvIf X-Forwarded-For (.*) REMOTE_ADDR=$1
SetEnvIf X-Forwarded-For (.*) REMOTE_IP=$1

RPAF_Enable       On
RPAF_ProxyIPs     172.16.30.54
RPAF_Header       X-Forwarded-For
RPAF_SetHostName  On
RPAF_SetHTTPS     On
RPAF_SetPort      On

################################################################################################
#                                     H_MOBIS                                                  #
################################################################################################
<VirtualHost *:443>
    ServerName ServerAlias #{도메인}
    ServerAdmin dr@drsoft.co.kr
    DocumentRoot /app/applications/#{도메인}
    <Directory "/app/applications/#{도메인}"
        <Limit GET POST OPTIONS>
            Order allow,deny
            Allow from all
        </Limit>
        <LimitExcept GET POST OPTIONS>
            Order deny,allow    
            Deny from all
        </LimitExcept>
    </Directory>
    SetEnvIf Remote_Addr "^::1$" dontlog
    SetEnvIfNoCase Request_URI "\.(gif)|(jpg)|(png)|(css)|(js)|(ico)|(eot)|(txt)$" dontlog  
    DirectoryIndex index.html index.htm
    
    RewriteEngine On

    CustomLog "|/app/applications/apache/bin/rotatelogs /app/applications/apache/logs/#{도메인}/access_ssl_log.%Y%m%d 86400" proxy env=!dontlog
    ErrorLog "|/app/applications/apache/bin/rotatelogs /app/applications/apache/logs/#{도메인}/err_ssl_log.%Y%m%d 86400"

    SSLEngine on
    SSLCertificateFile "/app/ssl/#{도메인}/cert.pem"
    SSLCertificateKeyFile "/app/ssl/#{도메인}/privkey.pem"
    SSLCertificateChainFile "/app/ssl/#{도메인}/chain.pem"
    SSLCACertificateFile "/app/ssl/#{도메인}/fullchain.pem"
   
    ProxyRequests Off
    ProxyPreserveHost On

    ProxyPass / http://172.16.30.20:10080/
    ProxyPassReverse / http://172.16.30.20:10080/
</VirtualHost>

4. 설정 정보

느낀점... 하면서 정말 ...너무 어렵다 .. 

아키텍처 자체는 쉬웠지만 구성하면서 NodeJS React Invalid Header 등의 오류가 발생할 때 대처 자료가 많지 않아 어려웠지만 대략적인 구조도를 알고 있기에 대처가 가능했다. 

※ React 사용시 allowed Hosts는 필수로 설정하자

 

 

https://babysunmoon.tistory.com/entry/React-Invalid-host-header-%EC%98%A4%EB%A5%98

[React] Invalid host header 오류

https://bytrustu.tistory.com/73

Invalid host header 오류