[nginx] React+TypeScript 배포 방법

전제사항

• nginx는 설치되어 있고 http의 root 항목의 빌드 디렉토리 설정을 제외한 기본적인 conf 설정이 되어있다는 전제로 글을 씁니다.
• curl 또한 설치된것으로 가정합니다. 만약 설치가 되지 않았다면 설치해주시길 바랍니다.
• 해당 배포 파일은 Nodejs 14 이상을 요구하는 배포파일로 20버전을 설치할 예정입니다.

Nodejs, npm 설치

curl -sL https://deb.nodesource.com/setup_20.x | sudo -E bash -
#nodejs 20버전 설치 사전 준비

apt-get update
#보통은 완료되고 apt-get update가 자동으로 되나 혹시모르니 한번더

sudo apt-get install -y nodejs

node -v
#출력값이 "v20.18.0" 나온다면 정상

sudo apt-get install npm
#npm도 설치

npm version
#npm 버전 확인

TypeScript 호환성 패키지 설치

npm install
npm run build
#설치 및 빌드를 통해 필요한 호환성 확인

npm install @types/react @types/react-dom @types/react-router-dom @mui/material @emotion/react @emotion/styled

#npm 이용해서 type 호환성 패키징 설치

빌드 재 작업

npm install
npm run build

Nginx 구성

http {
    include       mime.types;
    default_type  application/octet-stream;
    #types {
    	#application/javascript js mjs;
	#text/css css;
	#text/html html;
    #}

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;
    tcp_nopush     on;
    
    types_hash_max_size 2048;
    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;
	root   (리엑트 인덱스 위치)/dist;
        index  index.html index.htm;
	try_files $uri $uri/ /index.htm;

        access_log (엑세스 로그 생성 위치)/access.log;
	error_log (에러 로그 생성 위치)/error.log;
	#charset koi8-r;
    
    }