[AWS] Nginx를 이용하여 WebServer 띄우기

 

안녕하세요 이번 포스팅에는 Nginx를 이용하여

WebServer 띄우기를 해보겠습니다.

 

우선 Nginx는 간단히 말해서 경량화된 소프트웨어 웹서버 입니다.

Nginx는 Single-Thread로 동작하며 비동기 non-blocking I/O 이벤트 기반으로

요청을 처리합니다.

즉, 적은자원으로 효율적인 트래픽 처리가 가능합니다.

 

오늘 해볼건 Nginx가 React를 열어주는걸 해보겠습니다..

express를 실행할때는 nvm이나 Node가 필수였지만

Nginx는 Node가 필요없습니다. 단, build된 파일들만 Node가 필요합니다.

 

※ build된 파일 ? React 애플리케이션을 build하면, 애플리케이션의 소스 코드를

번들링하고 최적화하여 하나 또는 여러 개의 정적 파일로 생성됩니다.

정적파일의 예) index.html , bundle.js , main.css 등..

 

---

시작하기 앞서서 기본적으로 AWS CLI 로 진행할것이며, MAC 기준으로 진행됩니다.

$ aws configure

 

세팅이 되어있다고 가정하에 시작하겠습니다 ( 이전 포스팅 참조 ) 

 

 

## 키페어 생성 

 

$ aws ec2 create-key-pair --key-name [키 네임] --query 'KeyMaterial' --output text > pem이름.pem

 

> 위의 명령어는 AWS EC2에서 새로운 키페어를 생성하고, 이를 로컬 컴퓨터에 다운받는 명령어 입니다.

> [ --key-name ] 옵션은 새로 생성할 키페어의 이름을 지정하는 것입니다.

> [ -query ] 옵션은 출력값에서 원하는 정보를 추출하는 명령어 입니다.

> [ --output ] 옵션은 결과를 출력 형식으로 지정하는 것입니다.

 

이 명령어를 실행하면 새로운 키페어가 생성되고, 생성된 개인 키가 텍스트 형식으로 출력됩니다.

이 키를 'pem이름.pem'이라는 이름의 파일로 저장하게 됩니다.

이 파일은 나중에 EC2 인스턴스에 연결할 때 사용됩니다!!

 

$ chmod 400 pem이름.pem

 

위의 명령어를 통해 ( change mode / 400(권한모드) ) pem파일에 권한을 설정해줍니다.

 

 

## 보안그룹 설정

 

$ aws ec2 create-security-group --group-name [그룹이름] --description [그룹이름] 
--output text --query 'GroupId'

 

> 보안그룹을 생성하는 명령어 입니다. 

> [ --group-name ] : 그룹이름 지정

> [ --description ] : 이 보안그룹의 설명을 지정함

> [ --output ] : 출력 형식 지정

>  [ --query ] : 옵션은 출력값에서 원하는 정보를 추출하는 명령어 입니다.

 

AWS CLI에서 이 명령을 실행하면 지정된 설명과 함께 "그룹이름" 이라는 새 보안 그룹이 생성되고

새로 생성된 보안 그룹의 ID가 텍스트 형식으로 반환됩니다.

 

 

※ ' GroupId ' 는 설정할때 필요하니 따로 적어 놓으세요

$ aws ec2 describe-security-groups

밑으로 내리다보면 GroupId가 있습니다. 따로 적어놓으세요~!

 

 

## 보안그룹 규칙 생성

 

$ aws ec2 authorize-security-group-ingress --group-id [ GroupId ] --protocol tcp --port 22 --cidr 0.0.0.0/0

 

> [ authorize-security-group-ingress ] : 인바운드 규칙을 보안그룹에 추가 할 수 있는 명령

> [ --group-id ] : 인바운드 규칙을 추가할 GroupId

> [ --protocol ] : 프로토콜 유형을 지정하는 명령어

> [ --port ] : 인바운드 트래픽을 위해 열려는 포트 번호를 지정

( 저는 총 4번 진행, port 22 , 80 , 443 , 3306 )

> [ --cidr ] : 보안그룹에 액세스 할수 있는 CIDR 블록을 지정하는것, ( 0.0.0.0/0 : 모든 주소 IP 허용 )

 

 

## 인스턴스 시작 및 생성

 

 

$ aws ec2 run-instances --image-id ami-0e735aba742568824 --count 1 --instance-type t2.micro --key-name [키 이름] --security-group-ids [GroupId] --output text --query 'Instances[0].instanceId'

 

> [ --image-id ] : EC2 인스턴스를 시작할 때 사용할 AMI(Amazon Machine Image)의 ID를 지정하는 옵션입니다.

( Ubuntu Server 20.04 LTS AMI(ID: ami-0e735aba742568824) )

> [ --count ] : 인스턴스를 count 뒤에 숫자만큼 시작합니다.

> [ --instance-type ] : 인스턴스 유형을 설정하는것입니다.

> [ --key-name ] : [키 이름] 이름의 인스턴스에 액세스 할수 있도록 설정하는것 입니다.

> [ --query 'Instances[0].instanceId' ] : 필드값을 추출하는데 Instance[0]째의 instanceId를 추출합니다 ( 문법같습니다 )

 

 

※ 아까 GroupId를 적어놓은것 처럼 생성된 InstanceId도 적어 놓으면 편합니다

$ aws ec2 describe-instances

 

※ PublicDnsName의 값을 뽑는방법! ( PublicDnsName : 인스턴스에 액세스하는 데 사용할수 있음 )

 

$ --query 'Reservations[*].Instances[*].PublicDnsName' --output text

 

 

$ aws ec2 describe-instances --instance-ids [ instance 아이디 ] --query 'Reservations[*].Instances[*].PublicDnsName' --output text

> instance 아이디를 기준으로 --query를 이용하여 PublicDnsName을 text 형식으로 출력함

 

> 결과 값으로 : **********.ap-northeast-2.compute.amazonaws.com 이 나왔습니다 ( 접속 주소 )

 

> 이제 ssh 접속할때 명령어는

$ ssh -i [ pem이름.pem ] ubuntu@**********.ap-northeast-2.compute.amazonaws.com

 

여기까지 키페어 설정, 보안그룹 설정, 규칙설정 , 인스턴스 시작 생성 을 해보았습니다. 정말 Nginx로 들어가겠습니다.

---

 

 

## Nginx 설치 및 시작

 

 

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


$ sudo systemctl start nginx
// 실행하게 되면 백그라운드에서 돌게 됩니다.

$ sudo systemctl status nginx 
// nginx 상태확인 ( active running 상태인지 )

 

 

### 설정 파일 열기

 

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

 

> Nginx는 설정파일을 잘다루는게 중요합니다.

 

설정파일을 열게 되면 잘 보셔야할게 [ Server {} ] 입니다.

 

server {
    listen 80
    // 80번포트 열겠다라는 뜻입니다.
    // express에서 app.listen같은 역할입니다.
    
    root /var/www/html
    // 이 루트안에 있는것만 보겠다 라는뜻입니다.
    index index.html
    // 이 디렉토리안에서 처음으로 바라보는 파일입니다. index를 바라보겠다 라는뜻입니다.
    server_name _;
    // 도메인 이름입니다.
    location / {
        try_files $uri $uri/ index.html;
        
        // 저희는 react만 할것이기 때문에 index.html 로 변경하였습니다.
        // router라고 보면됨 server 코드안에 location /  -> app.get('/',()=>{})
	    // " /a.html "-> try_files $a.html
    } 

}

 

## 만들어서 열어보기!

 

/home/ubuntu/www/index.html

$ cd~
$ mkdir www
$ vi index.html
$ insert mode
> 내용변경해주기
> esc 누른 후 " :wq! "

 

> 변경 하였다면 우리는 파일을 수정한것이기 때문에 서버를 restart 해야합니다.

> 그 전에, 자주쓰는 명령어를 소개해드리겠습니다.

 

$ sudo nginx -t
> 문법 체크를 해주는것입니다. 잘못된게 있다면 빨간색으로 뜰것입니다.
> linux환경으로 돌아가다보니 오타실수는 치명적입니다.

$ sudo systemctl status nginx
> nginx 상태 확인하는 명령어

$ sudo systemctl restart nginx
> nginx 재시작 하기

$ sudo systemctl stop nginx
> nginx 중지하기

$ sudo systemctl start nginx
> nginx 시작!

 

> 수정하였으니 restart 해주시면 됩니다.

 

 

## React 만들기

 

> create-react-app 을 통해 react project를 구성해줍니다.

 

$ scp -i [키값] -r [로컬경로] 계정@호스트:/home/ubuntu/www


$ scp -i [pem이름.pem] -r [~경로/build] 
ubuntu@*********.ap-northeast-2.compute.amazonaws.com:/home/ubuntu/www


$ npm run build

---

 

따로 수정하지 않았다면 , React 기본 index.html이 실행될것입니다.

 

감사합니다.