react nodejs 배포 문제

Question

안녕하세요 선배님들.제가 처음으로 리액트와 노드js를 배포를 해보려고 하는데요.일반적인 방법으로는 배포가 되지 않더라고요 이부분이 좀 힘드네요클라이언트 폴더에 있는 리액트를 빌드해서 나온 빌드 폴더를 카페24 가상서보호스팅을 받고있는 계정에 올리면 하얀 화면만 나오는데. 이부분은 서버와 연결이 되지 않아서 일까요??카페24 가상서버 호스팅의 포트를 3천번. 4천번 개방하고 서버 폴더도 같이 올려야 하는 걸까요?..리액트는 3천번 포트 서버는 4천번 포트를 사용하고 있습니다.아니면 빌드 폴더는 카페24 가상서버 호스팅에 올리고 서버 폴더는 카페24 노드js 호스팅 서버에 올려야 하는건지..어떻게 해야 할까요 복잡하기만 하네요 ㅠ

Gear · Accepted Answer

배포 과정을 예시로 설명해 드리겠으며, 알고 계실만한 부분도 그냥 설명드리겠습니다. 다만 저는 전문가가 아니므로, 제가 알려드리는 방법이 최선이 아니거나 잘못된 부분이 있을 수 있음을 알려드립니다. 따라서 전문가분들이 보시기엔 지적할 부분이 많을 수도 있습니다. 아래와 같은 가정을 합니다:가상서버 OS: Centos 7Nginx 사용Git 설치중단 배포무중단 배포를 하기 위해선 제 지식도 짧고 글이 길어지므로 중단 배포되도록 하겠습니다.배포 되는 동안 사용자는 서비스를 제대로 이용하지 못하며, 구성 방법에 따라 로그아웃 등이 될 수도 있습니다.Jenkins, Docker, Gitlab 등 미사용이 역시 제 지식이 짧고 글이 길어지므로 생략합니다서버 환경배포를 위해 prod 라는 계정을 사용한다고 가정하겠습니다.아래에서는 계속 prod라는 이름으로 설명드리지만, 원하는 이름으로 사용하시기 바랍니다.호스팅 서버 ip 주소를 123.123.123.123이라고 가정하겠습니다.ssh 포트는 1024 포트로 변경하여 이용한다고 가정하겠습니다.노드 서버는 4000 포트로 동작한다고 가정하겠습니다.api 연동은 클라이언트에서 /api로 시작하는 주소로 요청한다고 가정하겠습니다.예시)const userInfo = await fetch(`/api/user/${userId}`).then(res => res.json());특별한 경우를 제외하고는 prod 계정으로 진행한다고 가정하겠습니다.디렉토리 구성만일 일반적인 구성이 있다면, 제가 설명드릴 구성은 그렇지 않을 수도 있습니다. 좀 더 일반적이거나 좋은 구성이 없는지 찾아보시기 바랍니다./git/project-name 깃 원격 저장소(bare)를 위한 경로입니다. 아래에서 설명은 계속 project-name으로 쓰지만, 원하는 이름으로 하시기 바랍니다./home/prod prod 계정의 홈 경로입니다. 이 곳에 배포에 필요한 구성을 하겠습니다./home/prod/.pid 서버 프로그램 실행 시 pid를 기록할 경로입니다./home/prod/log 서버 프로그램 로그를 기록할 경로입니다.git 설치 및 repository 구성Centos에서는 yum install git 라고 하면 설치가 될 것입니다만, 안 된다면 아래 사이트의 안내를 따르시면 될겁니다.https://git-scm.com/download/linux git 설치 이후 원격 저장소 역할을 해줄 저장소를 만듭니다:sudo mkdir -p /git/project-name cd /git/project-name git init --bare client git init --bare server개발용 컴퓨터에서 원격 저장소는 다음과 같이 연결할 수 있습니다:git remote add prod ssh://prod@123.123.123.123:1024/git/project-name/client서버 폴더에서의 방법도 동일하므로 클라이언트 폴더에서의 구성만 예시로 보여드렸습니다Node.js 설치아래 사이트에서 파일 다운로드를 받습니다.https://nodejs.org/en/download/하단 installing Node.js via package manager 같은 링크를 클릭하여 다른 방법으로 설치할 수도 있겠으나 파일 다운로드로만 알려드립니다.직접 다운로드원하는 경로에서 아래와 같은 식으로 다운로드 링크를 통해 다운로드 받을 수 있습니다:curl -O https://nodejs.org/dist/v18.14.2/node-v18.14.2-linux-x64.tar.xz다운로드 후 파일질라 이용파일질라를 통해 옮겨주어도 됩니다.아마도 일반적으로는 /usr/local/lib 같은 경로에 두는 듯 하지만, 저는 정확하게 알지 못하므로 그냥 모두 홈 경로에 두고 있습니다.cd ~ curl -O https://nodejs.org/dist/v18.14.2/node-v18.14.2-linux-x64.tar.xz tar Jxvf node-v18.14.2-linux-x64.tar.xz mkdir node cd mv node-v18.14.2-linux-x64 node/node18 옵션으로 아래와 같은 추가 작업을 하실 수도 있습니다: (단, 이후 과정에서는 해당 추가 작업을 하지 않았다는 가정하에 진행하겠습니다.)cd node ln -s node18 default vi ~/.bash_profilevi는 텍스트 편집기로, 사용 방법을 모른다면 아래 간단한 설명[^1]을 보시거나 검색 해보시기 바랍니다. .bash_profile 내용은 아래쪽에:PATH=$PATH:$HOME/.local/bin:$HOME/bin export PATH와 같은 식으로 돼 있을텐데, 아래 내용과 같이 추가해준 뒤:PATH=$PATH:$HOME/.local/bin:$HOME/bin export NODE_HOME=$HOME/node/default PATH=$PATH:$NODE_HOME/bin export PATH재부팅 하거나 source ~/.bash_profile 명령어를 통해 적용시킬 수 있습니다. 이렇게 하면 어느 경로에서도 node 명령어를 실행할 수 있게 됩니다. 예) node --versionServer 배포 및 실행서버 앱 실행 및 배포 경로는 /home/prod/app/server라고 가정하겠습니다. 배포를 조금 쉽게 하기 위해 스크립트를 작성해보겠습니다:cd /home/prod mkdir deploy app log .pid cd deploy vi server.sh/home/prod/deploy/server.sh 스크립트 내용:#!/bin/sh # 변수 설정 DIR_APP=~/app/server LOG=~/log/server.log PID=~/.pid/server.pid NODE=~/node/node18/bin/node NPM=~/node/node18/bin/node BRANCH=$1 # 브랜치 생략 시 master로 기본값 설정 if [ -z $BRANCH ]; then BRANCH=master fi # 경로 생성 if [ ! -d $DIR_APP ]; then mkdir -p $DIR_APP # 깃 클론 git clone --branch $BRANCH --sngle-branch /git/project-name/server $DIR_APP fi # 깃 pull 및 의존성 설치 cd $DIR_APP git pull $NPM install # 서버 종료 if [ -f $PID ]; then kill $(cat $PID) rm $PID fi # 서버 실행 touch $LOG nohup $NODE server.js >> $LOG 2>&1 echo $! > $PID &다만, 서버 실행을 이처럼 하는 것보다는 pm2를 활용하면 좀 더 좋은 관리를 할 수 있을겁니다.~/deploy/server.sh master 실행을 통해 배포 및 실행을 하실 수 있을겁니다.NOTE: 단, 실행 전 실행 권한을 주는 것을 잊지 마세요 chmod +x ~/deploy/server.shClient 배포 및 실행클라이언트 빌드 경로는 /home/prod/job/client, 배포 경로는 /home/prod/app/client라고 가정해보겠습니다. 해당 경로로 배포하기 위해서는 nginx 설정을 건드려야 합니다배포를 조금 쉽게 하기 위해 스크립트를 작성해보겠습니다:cd /home/prod mkdir job cd deploy vi client.sh/home/prod/deploy/client.sh 스크립트 내용:#!/bin/sh # 변수 설정 DIR_JOB=~/job/client DIR_APP=~/app/client NODE=~/node/node18/bin/node NPM=~/node/node18/bin/node BRANCH=$1 # 브랜치 생략 시 master로 기본값 설정 if [ -z $BRANCH ]; then BRANCH=master fi # 경로 생성 if [ ! -d $DIR_JOB ]; then mkdir -p $DIR_JOB # 깃 클론 git clone --branch $BRANCH --sngle-branch /git/project-name/client $DIR_JOB fi # 깃 pull, 의존성 설치 및 빌드 cd $DIR_JOB git pull $NPM install $NPM run build # 배포 rm -rf $DIR_APP mkdir -p $DIR_APP mv $DIR_JOB/build/* $DIR_APP~/deploy/client.sh master 실행을 통해 배포 및 실행을 하실 수 있을겁니다.NOTE: 단, 실행 전 실행 권한을 주는 것을 잊지 마세요 chmod +x ~/deploy/client.shNginx 설치 및 설정설치아래 사이트에서 안내하는대로 설치하시면 됩니다: https://nginx.org/en/docs/install.html Centos7의 경우 아래 주소에서 설명하는대로 진행하시면 됩니다: https://nginx.org/en/linux_packages.html#RHEL설정기본적으로 설정파일은 /etc/nginx 경로에 있을 것입니다. 작업하는 파일은 git을 이용하거나 복사 등의 방법으로 백업해두시기 바랍니다 아래 과정은 모두 root 계정으로 진행해야 될 것입니다.Nginx 유저 설정vi /etc/nginx/nginx.confuser nginx;라고 적혀있는 부분을 user prod;라고 고쳐주시면 됩니다.고치는 이유: /home/prod/app/client 경로 권한이 prod이기 때문입니다.Nginx 서버 설정vi /etc/nginx/conf.d/default.conf내용은 다음과 같이 입력합니다:http로만 서비스할 경우upstream application { server localhost:4000; } server { listen 80; location ^~ /api { # 만일 서버에서 /api로 시작하는 주소로 요청을 받고 있다면 아래 rewrite 한 줄은 지워주시기 바랍니다. # 클라이언트에서는 /api/로 요청하지만 서버에서는 로만 서비스되고 있다는 가정 하에 작성한 것입니다. rewrite ^/api(.*)$ $1?$args break; proxy_pass http://application; } location / { root /home/prod/app/client; index index.html; } error_page 404 /index.html; }https로 서비스할 경우upstream application { server localhost:4000; } server { listen 80; return 301 https://$host$request_uri; } server { listen 443 ssl; # 아래 두 경로는 해당 경로에 인증서 파일이 있다는 가정하에 작성한 것입니다. ssl_certificate /home/prod/app/ssl/cert.pem; ssl_certificate_key /home/prod/app/ssl/cert.key; location ^~ /api { # 만일 서버에서 /api로 시작하는 주소로 요청을 받고 있다면 아래 rewrite 한 줄은 지워주시기 바랍니다. # 클라이언트에서는 /api/로 요청하지만 서버에서는 로만 서비스되고 있다는 가정 하에 작성한 것입니다. rewrite ^/api(.*)$ $1?$args break; proxy_pass http://application; } location / { root /home/prod/app/client; index index.html; } error_page 404 /index.html; }Nginx 실행 및 상태 확인nginx -t nginx 설정이 올바른지 확인합니다. Successful이라는 문구가 나와야 올바른 것입니다. systemctl status nginx nginx 서비스 상태를 나타냅니다.systemctl start nginx nginx 서비스를 실행합니다.systemctl reload nginx nginx가 실행중일 때 설정을 바꾸고나면 해당 명령어를 실행해 설정을 다시 불러오도록 합니다.위와 같은 설정들을 모두 마치고,개발자 PC에서 작업 후서버에 push 한 후에 서버에 접속해서 git push prod --all ssh prod@123.123.123.123 -p1024아까 작성한 /home/prod/deploy 에 있는 스크립트 중 적절한 스크립트를 실행하시면 됩니다.깃 훅을 이용하면, push만 해도 배포까지 자동화 할 수 있을 것입니다.[^1]:*i* 키를 통해 입력모드로 변경할 수 있습니다.하단에 -- 끼워넣기 -- 혹은 -- insert -- 같은 문구가 보인다면 입력모드인 것입니다.-- 바꾸기 -- 혹은 -- replace -- 같은 문구가 보인다면 insert 키를 눌러 전환해주시면 됩니다.입력모드에서 편집을 완료한 뒤 종료 방법은 esc 키를 눌러 명령모드로 진입할 수 있습니다.명령모드에서는 하단에 있던 -- 끼워넣기 -- 같은 문구가 사라져 있을겁니다.명령모드에서 :wq를 입력하고 엔터를 입력하시면 저장 후 종료하게 됩니다.w : 저장q : 종료무엇인가 문제가 생겨 저장 및 종료가 되지 않는다면 :q! 를 입력하시길 바랍니다.q!는 저장하지 않고 강제로 종료함을 의미합니다. 이렇게 종료한 경우 다시 작성하셔야 합니다.P.S. 저는 vi보다는 vim을 애용합니다. 사실 그 외에도 nano라든가 다른 텍스트 에디터도 있는데, 전 잘 모릅니다. vi는 설치 돼 있는데 vim은 설치 돼 있지 않는 경우를 몇 번 봤습니다. 그래서 vi로 알려드렸습니다. vim은 yum install vim 같은 식으로 설치가 가능할 것입니다.

Gear · Answer

nginx를 이용하여 보세요.아래 링크를 참고하여 구성해보세요https://velog.io/&#64;tlatjdgh3778/Nginx-proxypass-%EB%B0%8F-rewrite-%EC%84%A4%EC%A0%95가령 error_page 404 /index.html; 과 같이 페이지를 찾지 못한 경우 index.html이 보여지게 하는 것도 해야합니다.

react nodejs 배포 문제

2개의 답변

Q&A 목록