devlog

AWS EC2 인스턴스 만들기

프리티어 버전 사용 (스토리지 30GB까지 무료)

기본적인 서버를 구성할 것이기 때문에 모든 포트에 대해 접근 가능하도록 하고 보안 그룹에 특별한 설정을 하지 않았습니다.

새로운 키페어를 생성하시면 인스턴스가 시작됩니다.

키페어는 인스턴스에 접근하기 위해 필요하기에 보관에 주의를 기울이세요

생성후 인스턴스에 들어가서 연결 탭에 들어가면 콘솔로 접속하는 방법을 알려줍니다.

키파일을 다운 받은 위치에서 콘솔창을 엽니다.

그 후 키파일에 대해서 나에게만 읽기 권한이 있도록 접근 권한을 설정해 줍니다. 

chmod 400 test.pem

접근 권한 설정 후 아래 명령어를 적습니다.

** 부분은 인스턴스의 공개 ip 입니다.

ssh -i "test.pem" ec2-user@ec2-**-***-***-***.ap-northeast-2.compute.amazonaws.com

콘솔창에 아래의 내용이 나오면 접속된 것 입니다.

기본 소프트웨어 및 nginx, node, nvm, git 설치

//yum 업데이트 (자동 업데이터 겸 패키지 설치/제거 도구)
sudo yum update
//git 설치
sudo yum install git
//nginx 설치 amazon-linux-extras 이름 확인 (이곳에서 설치가능한 소프트웨어 목록확인 가능)
sudo amazon-linux-extras install nginx1
//nvm 설치 (인터넷 검색)
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
//nvm 활성화
. ~/.nvm/nvm.sh
//node 설치
nvm install node

깃에서 프로젝트를 가져옵니다.

ls 명령어로 현재 위치에 존재하는 폴더 목록을 확인하면서 cd 로 이동하시면 됩니다.

git clone {원격 저장소의 프로젝트 리포지토리 주소}
cd {프로젝트 폴더의 절대 경로}
npm install

정적 파일 번들링 및 build 경로 확인

CRA(creat-react-app)으로 만들었기에 run build 명령어를 통해 번들링했습니다.

그 후 build 폴더의 위치를 메모해둡니다.

아래와 같은 경로가 나올 것입니다.

/home/ec2-user/git폴더/build

//react 파일 배포 상태로 만들기
npm run build
//index 위치
cd build
pwd

Nginx 설정

하나의 웹 서비스만 배포할때

nginx의 설정 파일을 수정하도록 엽니다.

a 키를 누르면 수정 모드, 끝나면 esc 후 : wq 를 입력하면 저장 후 종료 , :q 저장안하고 종료 입니다.

sudo vi /etc/nginx/nginx.conf

server 부분에 root, index, try_files 부분을 추가, 수정 해줍니다.

server {
	listen 80;
    server_name _;
    root /home/ec2-user/git폴더/build/; //위에서 pwd로 찾은 경로 입력
    index index.html;
    try_files $uri $uri/ /index.html; //react의 router 때문에 추가
}

여러개의 웹 서비를 배포하기 위한 설정

nginx 설정 파일 수정

sudo vi /etc/nginx/nginx.conf

1. server { } 부분을 주석처리해줍니다.

2. server 블록 위에 include /etc/nginx/sites-enabled/(내가 서비스할 앱이름).conf; 를 작성합니다.

sudo mkdir /etc/nginx/sites-enabled

각 웹 서비스의 설정 파일들을 깔끔하게 관리하기 위해 사용

sites-enabled 디렉토리 내에는 각 웹 서비스의 설정파일들을 위치

하지만 이곳에 직접 파일을 작성해서 위치하지 않고 

sudo mkdir /etc/nginx/sites-available

sites-available 디렉토리에 작성 후 바로가기 링크를 이곳에 위치 시킬 예정 (굳이 안해도됨)

sudo vi /etc/nginx/sites-available/(서비스할 앱이름).conf

아래와 같이 설정

location 뒤에 쓴느 것은 Directive라 불리는 것으로 IP 주소 혹은 도메인의 뒷부분인 URI에 대응하는 부분

해당 URI와 매칭되는 경로로 접속이 시도되었을때 서비스할 내용을 정의

server {
	listen 80;
    location / {
    	root /home/ec2-user/git폴더/build/; 
    	index index.html;
    	try_files $uri $uri/ /index.html; 
    }
}

방금 생성한 설정파일의 바로가기 파일을 /etc/nginx/sites-enabled 폴더에 추가

sudo ln -s /etc/nginx/sites-available/(서비할 앱).conf /etc/nginx/sites-enabled/(서비스할 앱).conf

Nginx 테스트 및 실행

sudo nginx -t

syntax is ok

test is successfull 

두개의 문구가 출력되면 테스트 성공

chmod 711 /home/ec2-user

nginx가 build 디렉토리까지 접근할 때 거치는 디렉토리들에 대해 실행 권한 부여 (500에러 방지)

sudo systemctl enable nginx

ec2 인스턴스를 껐다가 다시 실행 했을때 nginx가 자동으로 실행되도록 설정

sudo systemctl start nginx //nginx 시작
sudo systemctl stop nginx //nginx 종료
sudo systemctl status nginx //nginx 상태 확인

이제 인스턴스의 공개 ip 주소로 접속하면 웹 페이지가 나올 것이다.