Linux(Ubuntu) React Web Service 시작하기(서버 설정, Node.js, React, Linux, Nginx, SSL, FTP, 방화벽 설정)

Linux(Ubuntu) React Web Service 시작하기(서버 설정, Node.js, React, Linux, Nginx, SSL, FTP, 방화벽 설정)

이번에는 Linux(Ubuntu)를 이용하여 React Web Service를 구축하는 방법에 대해 포스팅하도록 하겠습니다.

저번에 포스팅 했던 도메인 연결 및 SSL 설치방법에 대한 내용을 참고 해 주시면 더욱 쉽습니다!

 

※ 참고 포스팅 ※

React 도메인 연결

https://dalbyutility.tistory.com/50 

Java, Spring Boot, React 서버 생성 후 도메인 네임 연결 방법 (웹 서비스, war, 외장 톰캣, node.js, nginx, Ip

 

 

 

SSL 설치 방법

https://dalbyutility.tistory.com/55

유료 SSL 인증서 신규 설치, 유료 도메인 네임, 웹 서버 Nginx를 이용하여 웹페이지 HTTPS 적용하기(Re

 

준비물은 다음과 같습니다.

OS: Linux(Ubuntu)

FRONT: React project

FileZilla: FTP tool

 

설치에 대한 용이함을 위해 관리자 계정(root)으로 로그인 합니다.

su root

 

Node.js 설치

linux 서버에 node.js를 설치합니다. 필자의 경우 18.20.2 version를 설치하였습니다.

먼저 node를 설치하기 전에 필요한 유틸리티를 설치합니다.

 

vim, curl, nvm 설치(nvm을 이용하여 node를 설치 하였습니다.)

apt install vim
apt install curl

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

 

 

nvm의 설치 항목을 체크합니다.

nvm list

 

nvm list 확인

nvm

만약 설치가 됬는데 확인이 안 된다면, 다운받은 소스를 다시 적용합니다.

source ~/.bashrc

 

해당 node.js 버전을 다운로드 합니다.

nvm install [버전]

ex) 
nvm install v18.20.2

 

설치된 node 버전을 확인 합니다.

node -v

node.js 버전

 

node.js가 정상적으로 설치되었다면 다음 FTP 설정을 진행합니다.

 

FTP 설정

먼저 vsftpd를 다운로드 합니다.

apt-get install vsftpd

 

다운로드 완료 후 nano 또는 vim 사용하여 해당 내용을 수정하고 저장합니다.

nano /etc/vsftpd.conf

vim /etc/vsftpd.conf

 

해당 파일의 주석을 해제 합니다.

local_enable=YES
write_enable=YES

주석 해제

 

 

vsftpd 서비스를 재시작 합니다.

service vsftpd restart

 

실행 체크

service vsftpd status

 

해당 linux 서버의 폴더 권한을 줍니다.

chmod -R 777 [폴더 경로]

ex)
chmod -R 777 /home/root/test

 

 

방화벽 설정

방화벽 유틸리티를 설치합니다.

apt install firewalld

 

FTP 21번 port를 개방합니다.

firewall-cmd --zone=public --add-port=21/tcp --permanent

 

방화벽을 다시 읽습니다.

firewall-cmd --reload

 

현재 모든 방화벽 상태를 체크합니다.

firewall-cmd --zone=public --list-all

방화벽 체크

 

Nginx 설치

Nginx 설치합니다.

apt install nginx

 

설치가 완료되었다면 /etc/nginx/sites-available/default 경로의 default 파일에 server 설정을 수정합니다.

필자의 경우 FileZilla 툴을 이용하여 진행하였습니다. 

 

default 파일의 설정은 다음과 같습니다.

	# HTTP server
    server {
	listen 80;
		server_name dalbyutility.com www.dalbyutility.com;
		
		add_header 'Access-Control-Allow-Origin' '*';
		add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
		add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
		
		
		return 301 https://dalbyutility.com$request_uri;
		
		location / {
			root   html;
		}
	}
    
    # HTTPS server
    #
    server {
        listen       443 ssl;
        server_name dalbyutility.com www.dalbyutility.com;

		# ssl
		ssl_certificate ssl/dalbyutility_com__bundle.pem;
		ssl_certificate_key ssl/dalbyutility_com__rsa.key;
		
		ssl_protocols TLSv1.2;
		ssl_ciphers 'HIGH:!aNULL:!MD5';

		# Other SSL settings (optional but recommended)
		ssl_prefer_server_ciphers on;
		ssl_session_cache shared:SSL:10m;
		ssl_session_timeout 10m;
		
		# sessin cache size
		#ssl_session_cache shared:SSL:50m;
		
		# session timeout
		#ssl_session_timeout 60m;
		
		# TLS protocol
		#ssl_protocols TLSv1.1 TLSv1.2;
		
		# ssl_ciphers
		#ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;
		
		# server
		#ssl_prefer_server_ciphers on;
		
		# OCSP
		#ssl_stapling on;
		
        location / {

			add_header 'Access-Control-Allow-Origin' '*';
			add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
			add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
			proxy_pass http://localhost:3000;
			proxy_set_header Host $host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_set_header X-Forwarded-Proto $scheme;
        }
    }

 

443 port에 SSL 인증서를 적용시켜줍니다.

 

default 파일에 추가로 도메인 접근이 아닌 IP 자체 접근시 404 페이지로 return 해주는 코드를 추가로 작성 해 줍니다.

server {
	listen 80 default_server;
	listen 443 default_server;
	ssl_certificate ssl/dalbyutility_com__bundle.pem;
	ssl_certificate_key ssl/dalbyutility_com__rsa.key;
	return 404;
}

위 코드를 추가하면 IP로 접근시 404 페이지를 반환하게 됩니다. 

 

React, Nginx 새로고침 문제

그리고 nginx 사용시 서버 빌드 후 root url (/)은 문제 없지만, root(/)가 아닌 해당 웹 페이지에서 새로고침 시 404 에러가 발생하게 됩니다. 이 문제에 방지하기 위해 다음 nginx에서 404 발생시 root url로 이동하는 코드를 추가로 작성 해 줍니다.

 

먼저 proxy_pass를 사용하지 않았다면 아래 코드를 추가 해 주고

location / {
    try_files $uri /index.html;
}

 

proxy_pass를 사용했다면 아래 코드를 추가 해 주시면 됩니다.

location / {
    proxy_redirect off;
    proxy_intercept_errors on;
    recursive_error_pages on;
    proxy_pass http://localhost:3000/;
    error_page 404 = @rewrite_proxy;
}

location @rewrite_proxy {
    rewrite ^/(.*)$ /index.html?$1 break;
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
}

 

 

Nginx 방화벽 자동설정 ufw
Nginx 프로필 허용 Nginx Full로 진행하면 80, 443 동시 오픈됩니다.

ufw allow 'Nginx Full'

 

방화벽 변경사항 적용

ufw reload

방화벽 상태확인

ufw status

 

 

Nginx 테스트

nginx -t

 

 

Nginx 시작

systemctl start nginx

 

 

Nginx 중지

systemctl stop nginx

 

 

Nginx 재시작

systemctl restart nginx

 

 

React 프로젝트 실행

Nginx까지 작업이 마무리 되었다면 React 프로젝트를 FTP를 이용하여 build된 파일을 복사한 후 실행 해 줍니다.

 

build된 파일이 위치한 곳으로 이동하여, node.js React 실행 커맨드를 입력합니다.

npx serve

 

 

마지막으로 실제 도메인 네임에 접속시 결과는 다음과 같습니다.

 

 

테스트 결과

테스트 결과