일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- 페이징
- 코드로배우는스프링웹프로젝트
- 친절한SQL튜닝
- 스프링부트핵심가이드
- resttemplate
- 자바편
- 스프링 시큐리티
- 자료구조와 함께 배우는 알고리즘 입문
- 서버설정
- 선형대수
- 티스토리 쿠키 삭제
- ㅒ
- 리눅스
- network configuration
- 자료구조와함께배우는알고리즘입문
- 네트워크 설정
- d
- /etc/network/interfaces
- Kernighan의 C언어 프로그래밍
- iterator
- baeldung
- 처음 만나는 AI수학 with Python
- 데비안
- GIT
- 알파회계
- 처음 만나는 AI 수학 with Python
- 이터레이터
- 목록처리
- 구멍가게코딩단
- 코드로배우는스프링부트웹프로젝트
- Today
- Total
bright jazz music
리액트 앱(ReactJs)와 엔진엑스(Nginx) 연동 본문
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;
}
}
'Framework > ReactJs' 카테고리의 다른 글
생활코딩: 리액트 프로그래밍 CRUD 기본 (0) | 2023.05.14 |
---|---|
리액트 앱과 백엔드 서버 연동 테스트4 (+ docker) (0) | 2023.04.09 |
리액트 앱과 백엔드 서버 연동 테스트3 (+ Nginx) (0) | 2023.04.09 |
리액트 앱과 백엔드 서버 연동 테스트 2 (0) | 2023.04.08 |
리액트 앱과 백엔드 서버 연동 테스트 1 (0) | 2023.04.08 |