[ React,Nginx ] AWS EC2에 배포하기!

드디어 프로젝트가 막바지에 다다랐다 🥹 얼마나 이 순간을 기다렸는지..!!><

기다리고 기다렸던 배포 과정을 천천히 정리해보았다!

🕑 EC2 인스턴스 생성하기

AWS 에서 계정 생성 후 Free trier로 EC2 인스턴스를 생성했다. 흠 딱히..어려운 점은 없었고 중요한 부분이라면

• 인스턴스 생성시, Location 꼭 확인하기
• SSH에 접속하기 위한 키체인 만들기 => .pem / .pkk 형식의 인증서 파일을 만드는 건데 UNIX 계열은 .pem Window(with Putty) 는 .pkk 가 편리하다. 서로 변환이 가능하니 크게 신경 쓸 건 없다.
• 보안 그룹 설정하기 => 기본으로 443포트, 80포트는 ALL로 열어두고 SSH/FTP 접속을 위해 개발자들 IP만 따로 22포트와 21포트를 열어두었다.
• 용량 설정하기 => 최대인 30G까지 받으면 된다.

AMI는 자주 쓰이는 Ubuntu 로 선택했다.

🕝 EC2 연결하기

인스턴스 탭 > 마우스 우측버튼 클릭 > 연결로 들어가면 SSH 접속방법이 나온다.

ssh -i [프라이빗 키(.pem)경로] [AMI의 사용자 이름]@[인스턴스의 퍼블릭 DNS]

✔️ 어렵다면 하단에 예시 커맨드가 있으니 그대로 터미널 창에 입력해보자!

1. Root 계정 생성하기

접속이 됬다면 아래와 같이 Root 계정을 생성한다.

sudo passwd root

2. 설정 파일 수정

루트 계정을 생성했어도 바로 로그인되지는 않는다. SSH로 로그인하기 위해서는 아래와 같이 설정 파일을 수정해야한다.

$ vi /etc/ssh/sshd_config

// 파일에서 [[PermitRootLogin]] prohibit-password 찾아
// 주석을 제거하고 PermitRootLogin yes 로 수정한다.
// ssh 재실행

$ systemctl restart sshd

3. 유저 생성

root로 접속해서 배포할 수 있지만 보안상 좋지않다. 개인 유저를 생성해보자.

// 사용자 추가
$ useradd [-g 그룹명] 사용자명

// 사용자 패스워드 설정
$ passwd 사용자명

// sudo를 사용할 수 있도록 변경
$ sudo usermod -a -G sudo [사용자명]

// 사용자가 정상적으로 생성됬는지 확인
$ cat /etc/passwd

// 로그인 하기 
$ su - [사용자명]

🕖 배포하기

1. Node.js 설치하기

프로젝트 빌드를 위해 먼저 Node.js , npm, yarn을 설치한다.

그냥 apt-get 명령어로 설치하게되면 12.x 버전으로 설치되었다. 우리 프로젝트에서 사용하는 Node.js는 16버전이였으므로 curl을 이용하여 설치하였다.

(처음에 12버전을 설치해버리는 바람에 에러나서 좀 애먹었다..😅)

// 다른 버전을 설치하고 싶다면, 16말고 원하는 버전 숫자를 적으면 된다.

$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash
$ sudo apt-get install -y nodejs
$ nodejs -v 

✔️ 번외

1. LTS 버전 설치

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

2. Current 버전 설치

curl -fsSL https://deb.nodesource.com/setup_current.x | sudo -E bash -
sudo apt-get install -y nodejs

2. React 파일 빌드하기

그 다음 React 파일을 Build 해야한다.
나의 경우, 빌드를 진행한 후 서버에서 git으로 클론 받았는데 클론받고 서버에서 빌드를 진행해도 상관없다.

1. yarn build 나 npm run build 를 실행한다.
2. github에 올려둔다.
3. AWS 서버에 git을 설치한다.

$ sudo apt update
$ sudo apt-get install git
$ git --version
$ cd ~/.ssh
$ ssh-keygen -t rsa -C github계정 메일(example@github.com)
$ cat id_rsa.pub

id_rsa.pub 내용을 복사해서 github ssh key에 등록하고 프로젝트 파일을 클론한다.

3. Nginx 설치하기

Nginx 에 대해서 자세히 알고 싶다면 지혜님이 작성하신 블로그를 참고해도 좋을 것 같다.

지혜님의 Nginx글

3-1. Nginx 설치하기

먼저 Nginx를 설치한다.

$ sudo yum install nginx 

3-2. Nginx 설정하기 ⭐️

배포과정 중 가장 애먹은 과정이였다..(쭈륵)

1. 먼저 설정 파일에 접근한다.

$ sudo vi /etc/nginx/nginx.conf

설정 파일에 바로 build 파일을 연결 할 수도 있지만 일반적으로는 sites-enabled 디렉토리를 생성하여 여기서 여러 서비스를 등록하는 경우가 일반적이다.

2. 아래와 같이 코드를 추가한다.

user www-data;
...blah..blah..

http {

	...about ssl..whatever..
	...about.gzip..blahblah..

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
	(✏️ 코드추가 )include /etc/nginx/sites-enabled/*.conf;
}


...about mail...

3. 그리고/etc/nginx 안에 sites-available, sites-enabled 라는 두개의 파일을 생성한다.

$ sudo mkdir /etc/nginx/sites-available
$ sudo mkdir /etc/nginx/sites-enabled

4. sites-available 폴더에 프로젝트 전용 설정 파일을 생성한다.

sudo vi /etc/nginx/sites-available/myApp.conf

5. 파일에 아래와 같이 작성해준다.

server {
  listen 80;
  
  // 도메인이 있다면 추가, 없으면 안해도 됨
  [server_name yourdomain.com]
  
  location / {
    root [프로젝트 파일경로]/build;
    index index.html index.html;
    try_files $uri $uri/ /index.html;
  }
}

6. symlink 생성 => 두 폴더에 myApp.conf를 동기화

$ sudo ln -s /etc/nginx/sites-available/myApp.conf /etc/nginx/sites-enabled/myApp.conf

7. Nginx 설정 데스트 => 테스트시, 아래와 같이 뜨면 성공이다!

$ sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

8. Nginx 시작

$ sudo systemctl start nginx

다음글에서는 내가 겪은 에러를 정리해보고자 한다.(쥬륵,,)