프론트엔드 배포하기 (nginx + github) 및 실행

깃허브에서 프론트엔드 빌드 프로젝트 clone

• 프론트엔드 프로젝트를 빌드한 파일을 깃허브에 올린 후 클론하자.

# 디렉토리 만들기
mkdir fe

# 디렉토리 이동하기
cd fe

# 프로젝트 clone
git clone https://github.com/ejzl521/Board-FE-Build

---

nginx 설정하기

• 설치 가능한 패키지 업데이트

sudo apt-get update

• nginx 설치

sudo apt-get install nginx

• nginx 설정을 하기 위해 아래 명령어를 입력해서 수정 모드로 들어가자.

sudo vi /etc/nginx/sites-enabled/default

• listen 80
  • 80번 포트로 들어오는 요청을 받는다는 의미. 생략하면 알아서 80번으로 요청한다. -> http 기본 포트!
• location /
  • /... 으로 들어오는 요청이다. 모든 요청이 들어온다고 볼 수 있다.
• root
  • react 빌드 폴더의 위치지를 지정한다.
• index
  • 기본적으로 보여줄 페이지이다. react 빌드 폴더를 보면 index.html 파일이 있는 것을 알 수 있다.
• location /api
  • /api로 들어오는 요청이다. /api로 한 이유는 백엔드 프로젝트에서 모든 http 요청을 /api로 시작하게 만들어 뒀기 때문이다.
• proxy_pass http://localhost:8080
  • reverse proxy 설정이다.
  • /api 경로로 들어올 경우 http://localhost/api가 먼저 받은 후 reverse proxy로 설정된 http://localhost:8080/api express 서버로 연동한다!
  • http://localhost:8080/api는 백엔드 서버의 경로이다!

server {
        listen 80;
        location / {
                root /home/ubuntu/fe/Board-FE-Build;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
        location /api {
                proxy_pass http://localhost:8080;
        }
}

                                                                                                                                                                                                                                   78,2-9

---

실행해보기

• 아래 링크를 참고하여 백엔드 서버를 실행하자
• https://duckgugong.tistory.com/253

백엔드 서버 배포 및 실행

• nginx 실행 명령어는 아래와 같다.

sudo service nginx start

• 만약 nginx 설정을 다시하면 아래 명령어로 다시 시작하자

sudo service nginx restart

+++ 만약 500 에러가 뜨면!

• nginx 설정파일이나 build까지의 경로로 접근할 때 거치는 디렉토리들에 대해 외부에서의 실행 권한이 없어서 발생하는 문제일 가능성이 높다.
• home/ubuntu 아래 모든 파일의 권한을 열어주자

chmod 711 /home/ubuntu

• 그리고 ec2에 있는 public 도메인 주소로 접속을 해보자!