관리 메뉴

bright jazz music

리액트 앱(ReactJs)와 엔진엑스(Nginx) 연동 본문

Framework/ReactJs

리액트 앱(ReactJs)와 엔진엑스(Nginx) 연동

bright jazz music 2023. 4. 6. 21:03

 

 

1. 서버에 노드 설치하고 버전확인

다운로드 및 설치

$ sudo apt install nodejs

 

버전확인

$ node -v

 

여기까지 잘 완료됐으면 노드 설치는 완료.

 

난 자꾸 이상한 오류가 나서 노드 홈페이지에서 압축 파일 받은 뒤 압축 풀고

#/etc/profile 파일의 맨 아래에 추가해 주었다.

#NODEJS
VERSION=v18.15.0
DISTRO=linux-x64
export PATH=$PATH:/usr/local/node-v18/bin

/etc/profile에 환경변수 등록해 주었다. 완료한 뒤 $ source /etc/profile을 하여 동기화 해주었지만 먹히지 않는다.

이상하게 우분투 데스크탑 버전은 환경변수 설정 후 재부팅 해줘야 한다.

 

2. npm 설치

위랑 비슷하게 설치 해줬는데 nodejs 패키지 설치하면 npm도 들어있다고 하네? 난 몰랐다. 어쨌든 했으니  걍 써놓는다.

$ npm -v

 

3. 기본 리액트 앱 생성

참고:https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app

 

$ npx create-react-app 프로젝트명

 

예) npx create-react-app my-app

: my-app이라는 리액트 프로젝트가 명령어를 입력한 경로에 생성된다.

나는 /usr/local 경로에서 위 명령어를 입력했으므로 /usr/local/my-app 디렉토리가 생긴다.

 

/usr/local/my-app 디렉토리 내에서

$ npm start

 

하면 3000번 포트로 뜬다.

 

ctrl+c 누르면 구동 종료

 

4. 리액트 프로젝트 빌드

배포하기 위해 프로젝트를 빌드한다.

/usr/local/my-app 디렉토리 내에서 아래의 명령어를 쳐준다.

 

$ npm run build

또는 $ npx run build

 

그러면 /usr/local/my-app 경로에 build 라는 디렉토리가 생성된다.

5. nginx와 설치하기

 

- 우분투의 경우 $ sudo apt install nginx 하면 자동으로 설치되었던 것으로 기억한다.

- 레드햇 계열은 /etc/yum.repos.d/ 디렉토리에 nginx.repo 파일을 만들고 repository를 설정해 준 뒤에,

sudo yum install nginx 해줘야 설치가 제대로 되었다. 내 경우.

 

어쨌든, 알아서 엔진엑스를 설치를 완료한다.

 

6. 만든 앱과 관련된 설정 만들기

엔진엑스가 빌드된 앱 설정을 읽어들여 띄워야 한다. 따라서 설정을 만들어준다.

 

$ cd /etc/nginx 로 이동

nginx.conf가 실제 nginx 설정 파일이다.

이 파일에서 site-enabled나 conf.d 아래의 파일을 include하여 읽어들인다.

 

* 주의. 아래 작업을 진행하기 전에 읽어주세요.

sites-available과 sites-enabled은 내가 임의로 생성한 디렉토리이다. 기본적으로 제공되는 디렉토리가 아니다. 관습적으로 생성한 디렉토리이며, sites-available은 연결 가능한 모든 설정을 작성한 파일이 보관되는 디렉토리이다. sites-enabled은 sites-available 설정 가운데 사용할 녀석만 심볼링 링크를 통해 만들어 보관해 놓는 디렉토리이다. nginx.conf 파일에서 설정을 불러 들일 때 sites-enabled에 존재하는 설정을 참조하도록 설정해 놓고, 사용하고 싶지 않을 경우 sites-enabled에서 해당 설정만 삭제해 주는 것이다. sites-available에 보관해 놓은 설정은 제거되지 않았으므로 다시 사용해주고 싶을 때 sites-enabled에 심볼릭 링크를 만들어 사용해 줄 수 있다.

 

- 우선 sites-available 디렉토리에 진입한다. 여기서 my-app의 설정 파일을 생성할 것이다.

- 설정 파일을 만든 뒤 site-enabled로 심볼릭 링크를 만들어 주면,

- nginx.conf가 재기동 시 해당 심볼릭 링크를 읽는다.

 

* default 파일은 방해될 수 있으므로 지우는 게 좋다고 한다. 난 나중에 참고할지도 몰라서 default.bak으로 이름은 변경해 주었다.

 

/etc/nginx/sites-available에 my-app.conf (my-app의 설정파일)가 생성되었다.

#/etc/nginx/sites-available/my-app.conf

server {
        listen 80; #80 포트로 진입
        location / {
                root /usr/local/my-app/build; #build 디렉토리로 설정
                index index.html index.htm;
                try_files $uri $uri/ /index.htm;
        }
}

 

7. sites-enabled 디렉토리에 심볼릭 링크 만들어주기

 

이 파일을 /etc/nginx/sites-enabled 디렉토리에 심볼링 링크를 만들어 준다. 이 때 절대 경로를 사용하는 것이 좋다.

 

#절대경로를 사용한 올바른 방법
$ sudo ln -s /etc/nginx/sites-available/my-app.conf /etc/nginx//sites-enabled/my-app.conf

/etc/nginx/sites-enabled에 my-app.conf 에 대한 심볼릭 링크가 생성되었다.

 

주의.

아래와 같이 하는 경우 나처럼 오류가 발생할 수 있다. 심볼릭 링크를 너무 많이 사용했다는 오류이다.

#오류 사례
$ sudo ln -s ./my-app.conf ../sites-enabled/my-app.conf

#nginx 설정 테스트
$ sudo nginx -t

nginx: [emerg] open() "/etc/nginx/sites-enabled/my-app.conf" failed (40: Too many levels of symbolic links) in /etc/nginx/nginx.conf:60
nginx: configuration file /etc/nginx/nginx.conf test failed

#오류 사례이므로 절대 경로를 사용한 위의 명령어를 사용할 것

 

8. nginx 설정 테스트

 

$ sudo nginx -t

: 테스트를 수행하고 결과만 짧게 보여준다.

 

$ sudo nginx -T

: 테스트를 수행하고 include가 완료된 전체 설정파일 구성을 보여준다. 내용은 길어서 생략.

 

 

9. nginx 재기동

$ systemctl stop nginx

$systemctl start nginx

 

$nginx -s reload 명령어를 사용하면 엔진엑스를 종료하지 않고도 설정파일을 다시 읽어들인다. 그러나 귀찮아서 그냥 껐다 켰다. 아마 될 것이다.

 

10. 브라우저에서 확인하기

여기서는 로컬에서 모든 작업을 진행했기 때문에 localhost:80을 사용해서 구동을 확인하였다.

엔진엑스를 종료하면 앱도 꺼진다.

만약 서버가 다른 주소를 가지고 있다면 해당 서버의 주소와 포트를 사용해야 한다.

 

*** 위에서 해당 앱의 포트를 80으로 지정했기 때문에 3000번 포트는 작동하지 않는다.

리액트 기본 포트가 3000이라 헷갈리는 경우가 있다. ***

 

 

11. nginx.conf 파일 전문

worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

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

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##
        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##

        include /etc/nginx/conf.d/*.conf;
        
        #바로 이 지점에서 읽어들인다.
        include /etc/nginx/sites-enabled/*.conf;

}


#mail {
#       # See sample authentication script at:
#       # http://wiki.nginx.org/ImapAuthenticateWithApachePhpScript
#
#       # auth_http localhost/auth.php;
#       # pop3_capabilities "TOP" "USER";
#       # imap_capabilities "IMAP4rev1" "UIDPLUS";
#
#       server {
#               listen     localhost:110;
#               protocol   pop3;
#               proxy      on;
#       }
#
#       server {
#               listen     localhost:143;
#               protocol   imap;
#               proxy      on;
#       }
#}


                                                                                7,1-8          1%

 

 

12. 참고

#/etc/nginx/sites-available/front-app.conf
#build 디렉토리의 이름을 front-app으로 바꿔보았다. 빌드 디렉토리 명이 build가 아니더라도 된다.
server {
        listen 80;
        location / {
                root /usr/local/front-app;
                index index.html index.htm;
                try_files $uri $uri/ /index.htm;
        }
}

 

참고  https://codechacha.com/ko/deploy-react-with-nginx/

Comments