본문으로 건너뛰기

5.2. Front-End 실행

5.2.1. requirements​

  • NodeJS 설치(최신버전 권장)
  • NPM or YARN 설치(최신버전 권장)
  • Nginx 설치

5.2.2. 환경설정 수정 및 배포 스크립트 실행​

5.2.2.1. 디렉토리 구성​

  • config : 리액트 프레임워크 설정 디렉토리
  • .env : 나이파이 설정 파일
  • nginx-nifi-monitor-app-config.conf : nginx와 리액트 프레임워크를 연결하는 설정파일
  • package.json, package-lock.json, yarn.lock : 리액트 프레임워크 의존성 관리 파일
  • public : 리액트 관련 프레임워크
  • react-deploy.sh : 전체 실행 명령어가 담긴 배포 스크립트 파일
  • scripts, src : 리액트 프레임워크 소스코드 파일

5.2.2.2. .env 파일 설정 – 프로젝트 환경 설정​

vi .env

  • API_URL : 모니터링 서비스에서 사용하는 Back-End 서비스 API의 URL
  • API_PORT : API의 포트번호, 반드시 콜론(:)으로 시작해야 함

5.2.2.3. nginx 파일 설정​

vi nginx-nifi-monitor-app-config.conf

server {
    listen       18000;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html/scity-dlm-reactjs;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        expires -1;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
  • Front-End의 실행 포트를 변경하고 싶을경우 “listen 18000”에서 원하는 포트번호로 변경

5.2.2.4. 배포 스크립트 파일​

#!/bin/bash

# shellcheck disable=SC2034
ROOT_DIR=/usr/share/nginx/html
APP_DIR=scity-dlm-reactjs
NGINX_FILE=nginx-scity-react-app-config.conf
echo "> Starting..."
chmod +x ./env.sh && ./env.sh && cp env-config.js ./public/
echo "> Installing the dependencies"
if [ -d "build" ]
then
        rm -rf build/
fi
npm install
sleep 2
echo "> Building the project"
yarn build
sleep 2
if [ -d $ROOT_DIR/$APP_DIR ]
then
    echo "Directory $ROOT_DIR/$APP_DIR"
    sudo rm -rf $ROOT_DIR/$APP_DIR/*
else
    echo "Creating Directory $APP_DIR"
    sudo mkdir $ROOT_DIR/$APP_DIR
fi
sudo cp -r build/* $ROOT_DIR/$APP_DIR/
#NGINX Version 1.17.7
sudo cp $NGINX_FILE /etc/nginx/conf.d/
echo "> Restarting NGINX Server"
sudo systemctl restart nginx
sleep 1
echo ">>> DONE!"
  • 설정파일과 소스파일을 빌드한 뒤 실행하는 과정
  • env.sh 파일 및 nginx까지 자동으로 실행
  • ROOT_DIR : nginx와 연동을 위해 지정된 디렉토리
  • APP_DIR : nginx-scity-react-app-config.conf 파일의 location { root 의 /usr/share/nginx/html/{scity-dlm-reactjs}; } 값의 {scity-dlm-reactjs}와 동일
  • NGINX_FILE : 배포 디렉토리 내의 nginx 설정파일인 nginx-scity-react-app-config.conf의 이름과 동일
  • 나이파이정보 변경 후 실행 시 .env 파일 변경 후 react-deploy.sh 파일 실행
  • 실행 명령어

    ./react-deploy.sh