AWS & Nginx (23/03/21)

Nginx

Nginx는 웹 서버의 일종입니다

오늘 포스팅은 로컬 환경에서 빌드(npm run build)를 진행해서 그 결과물을 서버에 띄우는 것을 목표로 하겠습니다

Nginx를 사용하는 이유 및 장점?

• 리버스 프록시

Nginx는 리버스 프록시 서버로 사용될 수 있습니다. 리버스 프록시란, 클라이언트와 서버 간의 통신을 중개하는 서버를 의미합니다. 클라이언트가 서버에 요청을 보내면, 리버스 프록시는 해당 요청을 받아서 서버에 전달하고, 서버로부터 받은 응답을 클라이언트에게 다시 전달합니다.

Nginx를 리버스 프록시로 사용할 경우, 일반적으로 다음과 같은 구성을 사용합니다. 클라이언트는 Nginx 서버의 IP 주소와 포트 번호를 사용하여 요청을 보냅니다. Nginx는 이 요청을 받아서, 해당 요청이 처리될 서버의 IP 주소와 포트 번호를 확인하고, 이 정보를 기반으로 서버로 요청을 전달합니다. 서버는 요청을 받아서 처리하고, 결과를 Nginx 서버에 전달합니다. Nginx는 이 결과를 받아서 클라이언트에게 전달합니다.

리버스 프록시를 사용하면, 여러 가지 이점이 있습니다. 예를 들어, 서버의 IP 주소나 포트 번호를 숨길 수 있고, 요청을 분산시키거나 로드 밸런싱을 적용할 수도 있습니다. 또한, 보안적인 이유로 서버와 직접 통신하는 것을 방지할 수도 있습니다. 이러한 이유로, Nginx를 리버스 프록시로 사용하는 경우가 많이 있습니다.

• Https

• Nginx 설치 및 시작

sudo apt-get update
sudo apt-get install nginx -y

// 웹서버 실행 ~ 백그라운드에서
sudo systemctl start nginx

// 실행 상태 확인
sudo systemctl status nginx
// Active: active (running)

*설치는 AWS 서버 원격 접속 상태에서 이루어져야 합니다

(http://ec2-52-78-181-122.ap-northeast-2.compute.amazonaws.com/)

이제 브라우저에서도 실행상태를 확인할 수 있습니다

• Nginx 설정파일 열기

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

• vi모드에서 설정파일을 다음과 같이 수정합니다

// 설정파일
server {
  // 80번 포트에서 실행중
  listen 80 default_server;

    
  // Nginx 디렉토리 & index 파일의 정의 ~ Nginx가 처음으로 바라볼 파일
  root /home/ubuntu/www;
  
  index index.html;
  
  // 도메인 이름은 아직 비워져있는 상태
  server_name _;
  
  // 라우터
  location / {
    // 정적파일에 대한 응답 ~ ex) naver.com => index.html
    try_files $uri $uri/ index.html;
  }
}

• index.html 파일을 생성합니다

// /home/ubuntu/www/index.html

cd ~
mkdir www
vi index.html

// 설정파일 수정에 대한 문법 확인하기
sudo nginx -t
// nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
// nginx: configuration file /etc/nginx/nginx.conf test is successful


// 수정 완료후 재시작
sudo systemctl restart nginx


// 그 밖에 자주 사용하는 명령어
sudo systemctl start nginx
sudo systemctl stop nginx

브라우저를 새로고침하고 방금 생성한 index.html이 잘 불러와지는지를 확인합니다

• 리액트 빌드

// ./front
npm create-react-app .
npm runt build

// Nginx 설정을 재수정합니다
sudo vi /etc/nginx/sites-available/default

server {
  ...
  root /home/ubuntu/www/build;
}

// scp -i [키값] -r [로컬경로] 계정@호스트:home/ubuntu/www
scp -i frontend.pem -r ./front/build ubuntu@ec2-52-78-181-122.ap-northeast-2.compute.amazonaws.com:/home/ubuntu/www

// 확인
ssh -i frontend.pem ubuntu@ec2-52-78-181-122.ap-northeast-2.compute.amazonaws.com