3계층 아키텍처 실습(with. AWS)

웹 서버 - WAS - DB 이 3계층 아키텍처를 구성해 볼 것이다.

웹 서버 : nginx - React 프로젝트(프론트엔드)

WAS : Gunicorn , Django 프로젝트(백엔드)

DB : mySQL(AWS의 RDS 사용)

 

 

1. AWS에서 mySQL 데이터베이스를 생성한다..

 

2. nginx, gunicorn을 설치할 EC2 인스턴스를 각 1개 씩 해서 총 2개를 생성한다.

apt install python3-pip

 

3. 장고 models.py에서 data 클래스를 작성한다.

from django.db import models

# Create your models here.
class Data(models.Model):
    value = models.CharField(max_length=100)

 

4. 장고에서 settings.py부분을 수정한다.

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'web',              # DB 이름
        'USER': 'admin',            # 사용자 이름
        'PASSWORD': 'password',      # 설정한 비밀번호
        'HOST': '[엔드포인트]',             # DB 접속 IP
        'PORT': '3306',                  # 포트번호
        'OPTIONS': {
            'init_command': 'SET sql_mode="STRICT_TRANS_TABLES"'
        }
    }
}

 

5. migrate를 하면, mysql 클라이언트에서 확인 했을 때 장고에서 제공하는 DB 테이블들이 생성된 것을 볼 수 있다.

 

아까 models.py에서 만든 data도 잘 생성되었다.

 

 

gunicorn서버에 접속하면 다음과 같이 잘 출력되는 것을 확인할 수 있다.

 

 

---

프론트엔드 설정 및 백엔드와 연결

 

새로운 EC2 인스턴스를 만든다.

해당 인스턴스에 nginx를 설치하고 ip주소를 입력하여 접속되는 지 확인한다.

아래의 화면이 떠야한다.

아래부터는 백엔드와 연결하는 과정이다.

 

react 코드)

 

react 코드)  App.js에 입력할 내용

import React from 'react';
import './App.css';

function App() {
  const [datas, setDatas] = React.useState([]);
  React.useEffect(() => {
    fetch("http://[gunicorn IP:8000(포트번호) / 장고에서 urls.py에서 설정한 경로]", {
      method: "GET",
    })
      .then(res => {
        return res.json();
      })
      .then(res => {
        setDatas(res.result);
      });
  }, []);




  return (
    <div className="App">
      {datas.map((data) => {
        return <div key={data.id}>{data.value}</div>
      })}
    </div>
  );
}

export default App;

 

 

index.js에 적어야 할 내용..

react 코드)  빨간색 네모로 표시한 부분에 '<React.StrictMode>'를 주석처리를 해준다.

 

react 코드)  visual code - react 코드 작성하는 부분의 터미널에 아래의 코드를 입력하여 build를 한다.

npm run build

 

react 코드) build 후, 생기는 build 폴더...

 

 

nginx 서버) build 폴더만 따로 압축한 다음 nginx 서버로 옮긴 후, nginx의 /var/www/html에 build 파일의 압축을 푼다.

 

따라서 html 폴더에 들어있는 파일들을 확인하면 다음과 같다.

 

 

gunicorn 서버) gunicorn에서는 바인드를 해준다.

 gunicorn --bind 0.0.0.0:8000 config.wsgi:application

 

 

nginx 서버) nginx는 재시작

 

다시 nginx 서버의 IP로 접속한다.

 

그러면 해당 페이지에서 <f12>를 눌렀을 때 다음과 같이 'CORS policy' 오류가 뜨는 것을 확인할 수 있다.

 

 

gunicorn 서버) cors-headers를 gunicorn 서버에 설치해준다.

pip install django-cors-headers

 

gunicorn 서버) 장고의 settings.py의 INSTALLED_APPS에 'corsheaders'를 추가한다.

 

gunicorn 서버)  MIDDLEWARE에 'corsheaders.middleware.CorsMiddleware'를 추가한다.

 

gunicorn 서버) 그리고 MIDDLEWARE = [ ] 밑에 아래의 코드를 추가한다.

CORS_ORIGIN_WHITELIST = ['http://[nginx의 IP]']

 

 

nginx 서버) 장고 바인딩, nginx를 재시작한다.

systemctl restart nginx

 

 

다시, nginx 서버에 접속하면 오류가 뜨지 않고 화면이 잘 뜨는 것을 확인할 수 있다.

gunicorn 서버) gunicorn에서 바인딩 한 후 nginx 서버에 접속한 페이지를 새로고침하면 새로고침한 횟수만큼 { 'id' : 1, 'value': 'data01' }이 뜨는 것을 확인할 수 있다 (잘 연결됐다는 의미)

 

 

근데 또 문제는 ... 백엔드(gunicorn-django)서버의 주소가 여전히 노출된다는 점이다.

(아래 캡처본의 빨간 상자에 노출되어 있었다.)

 

 

이 부분 해결하는 것은 다음 게시글에 적도록 하겠다.

SSL인증서로 https로 접속하는 것도 .. 같이..