DevOps30일차 - AWS 프론트와 백엔드 연결

S3 를 통해 Front-end 사이트를 얻어오고, EC2 와 RDS를 통해 백엔드, DB 서버를 만들어 보았다.

만든 순서는 크게 다음과 같다.

• 프론트 초기 세팅
  • 리액트를 빌드한다.
  • S3 에 버킷을 생성
  • 빌드 결과물을 버킷에 넣는다.
  • 액세스 전부 허용, 정적 호스팅을 허용
  • 정책을 설정하여 객체에 GET 이 가능하도록 한다.
  • 프론트 사이트가 보여지는 지 확인한다.
• 백엔드 초기 세팅
  • 보안 그룹을 생성한다.
  • EC2를 생성한다.
  • EC2에 노드 서버를 넣고 실행한다.
  • 백엔드 서버에 접속이 되는 지 확인한다.
• 프론트엔드를 백엔드 서버와 연결한다.
  • RDS 와 백엔드를 연동한다.
  • RDS 생성
  • RDS에 대해 보안그룹의 인바운드를 설정한다. 백엔드 서버(EC2)는 ssh 에 대해 허용
  • 백엔드에 RDS 를 연동시킨다. (.env 환경변수에 설정)
• 프론트에서 백엔드에 요청하여 로그인을 해본다.

1. 프론트 초기 세팅

1.1 리액트를 빌드

# host 에 node 가 있다는 것을 가정하고 작성한다.
# 리액트 의존성 라이브러리를 설치한다.
$ npm i

# 리액트 결과물을 빌드한다.
$ npm run build

1.2. S3 에 버킷을 생성 (액세스 전부 허용)

1.2.1 빌드 결과물을 버킷에 넣는다.

1.2.2 정적 호스팅을 허용

1.2.3 정책을 설정하여 객체에 GET 이 가능하도록 한다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::simple-memo/*"
        }
    ]
}

1.3 프론트 사이트가 보여지는 지 확인한다.

2. 백엔드 초기 세팅

호스트 머신 설정

키 페어 설정

나중에 ssh 접근할 때 키 페어가 필요하다.

보안 설정

2.3 EC2에 노드 서버를 넣고 실행한다.

# 호스트의 서버 정보를 ec2 우분투에 넣는다.
$ sudo scp -i ~/.ssh/key.pem -r ~/test/projectSprint/sprint-aws/server  ubuntu@54.180.145.159:/home/ubuntu


# ec2 서버에 접속한다.
$ ssh -i key.pem ubuntu@ec2-54-180-145-159.ap-northeast-2.compute.amazonaws.com

# node 를 설치하는 과정이다.
$ sudo apt-get update

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

$ export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

$ nvm install --lts
$ sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
# 8080 포트로 서버 연결한다.
# server 를 빌드 및 실행한다.
$ cd server
$ npm install
$ sudo node app.js

2.4 백엔드 서버에 접속이 되는 지 확인한다.

서버 실행

서버 작동 확인

3. 프론트엔드를 백엔드 서버와 연결한다.

# 프론트 프로젝트에 백엔드 API URI 지정
# REACT_APP_API_URL=<API_URI>
REACT_APP_API_URL=http://54.180.145.159

• 프론트와 연동이 된 것을 확인한다.
  

4. RDS 와 백엔드를 연동

4.1 RDS 생성

테스트용이므로 가장 싸고 돈이 안나가는 옵션으로 설정한다.

MYSQL 선택

가격이 싼 프리티어로 선택

비밀번호 등 개인 설정

가격이 싼 t2.micro 선택

추후 돈 나갈 가능성이 있으므로.. 스토리지 자동 조정 활성화를 체크 해제했다.

기본값을 사용하면 된다. 쉽게 하려면 컴퓨팅 리소스 선택에서 'EC2 컴퓨팅 리소스 연결' 을 선택하면 된다.  선택하면 보안그룹을 사용자가 별도로 설정하지 않아도 알아서 설정이 되기 때문이다. 그러나 나는 공부용이기에 보안그룹을 직접 만들어주려 한다.

rds를 위해 보안그룹을 만들어주자

이제 생성하자

4.2 DB 서버의 보안 규칙 설정

4.2.1 인바운드

• 이전에 만들었던 EC2의 보안 규칙 (sg-017...cb2) 에 대해서 MYSQL 인바운드를 허용한다.
  

4.2.2 아웃바운드 규칙

- 모든 트래픽을 허용한다. (Private Network이기에 모든 트래픽을 허용하였다.)

4.3 백엔드에 RDS 를 연동시킨다. (.env 환경변수에 설정)

• EC2에서 mysql 로 접속되는 지 확인한다.

# AWS EC2 서버에 접속
$ ssh -i key.pem ubuntu@54.180.145.159
  ...
   Welcome to Ubuntu 22.04.2 LTS (GNU/Linux 5.15.0-1031-aws x86_64)
  ...

# mysql -u <MYSQL-USER-ID> -p --host <MY-SQL-HOST>
$ mysql -u admin -p --host database-2.cql3w7dt8kdv.ap-northeast-2.rds.amazonaws.com

# mysql 이 설치되지 않았다고 뜨면 mysql을 설치하고 다시 실행한다.
	$ sudo apt install mysql-client-core-8.0
	$ mysql -u admin -p --host database-2.cql3w7dt8kdv.ap-northeast-2.rds.amazonaws.com

# mysql 비밀번호를 입력한다.
Enter password: 
	...
	Welcome to the MySQL monitor.  Commands end with ; or \g.
	...
# EC2에서 접속이 되는 것을 확인했다.

• 백엔드 서버의 mysql 설정을 변경하고 서버를 실행시키자.

# backend의 .env 파일
DATABASE_HOST=database~~~.com
DATABASE_USER=admin
DATABASE_PASSWORD=myPassword
DATABASE_PORT=3306
PORT=8080

ec2 서버 실행

서버  GET "/" 확인

• 프론트에서 백엔드에 요청하여 로그인을 해본다.

로그인해보자

정상적으로 동작됨을 확인헀다.