[AWS] S3 : 프로젝트 배포하기 (Zappa)

※ 개요 ※

→ DB : MySQL > 백엔드 연결

→ 백엔드 : PyCharm project > zappa로 배포

→ 프론트엔드 : React project > build 파일 AWS : S3 에 업로드

 

● 준비

》 S3 버킷 만들기 : 2023.03.15 - [분류 전체보기] - [Cloud] S3 : 버킷 내 객체 공유하기

[Cloud] S3 : 버킷 내 객체 공유하기

 

[ PyCharm Project 배포 ]

① Zappa 설치

》 AWS lambda 에 배포하는 도구

 

● 윈도우에서 kappa 설치

》 웹에서 kappa-0.6.0.tar.gz 다운로드

》 cmd 창에서 압축 해제

tar -zxvf [kappa 설치된 경로]

》 kappa 파일 변경

#setup.py
def open_file(fname):
	return open(os.path.join(os.path.dirname(__file__),fname), 'r', encoding='UTF8')

 

● pycharm - terminal 창에서 실행

》 kappa 설치한 경로로 이동

cd [kappa 설치 경로]

》 파일 설치

python .\setup.py install

》 pycharm project 경로로 돌아오기

cd [project 경로]

 

● zappa 설치

pip install zappa

 

② DB 엔진 변경

#settings.py
DATABASES = {
    'default': {
        'ENGINE': 'mysql.connector.django',		#기존 : django.db.backends.mysql
        'NAME': '[db명]',
        'USER': '[계정명]',
        'PASSWORD': '[비밀번호]',
        'HOST': '[AWS:RDS 엔드포인트]',
        'PORT': '3306',
        'OPTIONS': {
            'init_command': 'SET sql_mode="STRICT_TRANS_TABLES"'
        }
    }
}

 

③ 액세스 키 등록

● 액세스 키 발급

》 AWS 》 우측 상단 이름 클릭 》 보안 자격 증명 》 액세스 키 만들기 (.csv 파일 다운로드)

 

● Terminal 창에 입력 후 액세스 키 입력

aws configure

 

④ S3 업로드

》 PyCharm 관리자 권한으로 실행

 

● Terminal 창에서 실행

》 zappa init

》 What do you want to call this environment (default 'dev') : dev

》 What do you want to call your bucket? (default 'zappa-3ipsnz65v') : [ 내 S3 버 이름 ]

》 Where are your project's settings? (default 'config.settings') : config.settings

》 Would you like to deploy this application globally? (default 'n') [y/n/(p)rimary] : n

》 Does this look okay? (default 'y') [y/n] : y

 

● zappa_setting.json 파일 생성 확인

확인~

 

⑤ 배포

#배포하기
zappa deploy dev

#프로젝트 수정 시 업데이트
zappa update dev

 

 

☞ 확인하기 ~ ☜

》 배포 후 생성된 주소(api gateway)로 접속 시 장고 서버로 접속됨

#models.py
class Data(models.Model):		#저장된 db
    value = models.CharField(max_length=100)

#views.py
def read(request):
    datas = Data.objects.all().values()		#db에서 불러오기
    data_list = []
    for data in datas:
        data_list.append(data)

    context = {"result": data_list}
    return JsonResponse(context)

연결 성공~

 

 

[ React Project 배포 ]

① App.js 파일 설정

》 API Gateway 연결 (백엔드 연결)

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

function App() {
  const [datas, setDatas] = React.useState([]);
  React.useEffect(() => {
    fetch("[zappa deploy dev 후 나온 api gateway 주소]", {
      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;

 

② AWS : S3 업로드

● 프로젝트 build

npm run build

 

● build 폴더 업로드

》 AWS 》 S3 》 버킷 》 객체 》 업로드

 

 

☞ 확인하기 ~ ☜

》 업로드한 index.html 객체의 객체 URI 로 접속

연결~

 

※ cors 에러

》 PyCharm Project 에 whitelist 작성

#settings.py
INSTALLED_APPS = [
	...
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

CORS_ORIGIN_WHITELIST = [
    [프론트엔드에서 접속할 주소]
]