AWS - Flask / MySQL / react 배포

목표
- 온프레미스 및 클라우드 환경에서 서비스 인프라를 (자동) 구성
- 어플리케이션 코드를 자동으로 배포, 실행하는 환경을 구성

참고
backend - flask : https://github.com/Kwak-Minju/FIRSTSTEP_BE_AWS.git
front - react : https://github.com/Kwak-Minju/FIRSTSTEP_FE_AWS.git

#1 VPC 생성

VPC 구성 - Public Subnet 2개와 Private Subnet 2개를 생성

#2 RDS 생성

myRds - MySQL

user : admin pw : Password

퍼블릭 액세스 - 아니요

vpc 내부에서만 접속할 수 있도록 하기 위해

#2-1 BastionHost 인스턴스 생성

- BastionHost

Bastion 요새 라는 뜻으로 보안을 위해 고안된 호스트

외부와 내부 네트워크 사이에서 게이트 역할

#2-2 BastionHost 인스턴스와 RDS 연결

개발자가 workbench로 접속하여 db를 설정하고 관리하기 위해

#2-3 workbench를 통해 생성한 RDS 연결 후 스키마 생성

create database firststep;

use firststep;

CREATE TABLE `user` (
    `userId` int unsigned AUTO_INCREMENT NOT NULL ,
    `name` varchar(20)  NOT NULL ,
    `ID` varchar(16)  NOT NULL ,
    `password` varchar(300)  NOT NULL ,
    `phoneNumber` varchar(30)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `userId`
    )
);

CREATE TABLE `board` (
    `boardId` int unsigned AUTO_INCREMENT NOT NULL ,
    `userId` int unsigned  NOT NULL ,
    `title` varchar(30)  NOT NULL ,
    `content` varchar(1000)  NOT NULL ,
    `location` varchar(20)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `boardId`
    )
);

CREATE TABLE `comment` (
    `commentId` int unsigned AUTO_INCREMENT NOT NULL ,
    `userId` int unsigned  NOT NULL ,
    `boardId` int unsigned  NOT NULL ,
    `content` varchar(1000)  NOT NULL ,
    `status` varchar(10) default 'active' NOT NULL ,
    `createAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    `updateAt` timestamp default CURRENT_TIMESTAMP NOT NULL ,
    PRIMARY KEY (
        `commentId`
    )
);

CREATE TABLE `rent` (
		`rentId` int unsigned AUTO_INCREMENT NOT NULL,
		`boardId` int unsigned  NOT NULL ,
		`userId` int unsigned,
		`rent` varchar(10) default 'active' NOT NULL ,
		`rentAt` datetime,
		`returnAt` datetime, 
		PRIMARY KEY (
				`rentId`
		)
);

ALTER TABLE `board` ADD CONSTRAINT `fk_board_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

ALTER TABLE `comment` ADD CONSTRAINT `fk_comment_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

ALTER TABLE `comment` ADD CONSTRAINT `fk_comment_board_id` FOREIGN KEY(`boardId`)
REFERENCES `board` (`boardId`);

ALTER TABLE `rent` ADD CONSTRAINT `fk_rent_boardId` FOREIGN KEY(`boardId`)
REFERENCES `board` (`boardId`);

ALTER TABLE `rent` ADD CONSTRAINT `fk_rent_userId` FOREIGN KEY(`userId`)
REFERENCES `user` (`userId`);

#3 Flask 인스턴스 생성

포트범위 : EC2에서 5000 포트로 들어오는 요청을 받을 수 있게 설정

#3-1 RDS와 FlaskServer 인스턴스 연결

app.py 수정

def getCon():
  return pymysql.connect(host="<RDS 엔드포인트>", 
                     user="admin", password="Password", 
                     db="firststep",
                     charset="utf8",
                     port=3306,
                     cursorclass=pymysql.cursors.DictCursor)
...

if __name__ == "__main__" :
    app.run(host="0.0.0.0", debug=False)

user와 password 는 RDS 생성 시 설정한 정보로 입력

#3-2 Bitvise SSH Client 사용하여 flaskServer 인스턴스에 접속

sudo apt-get install python3

git clone <github url>

ubuntu@ip-10-0-10-203:~$ ls
FIRSTSTEP_BE_AWS

ubuntu@ip-10-0-10-203:~$ cd FIRSTSTEP_BE_AWS/

pip install flask

pip install -r requirements.txt

ubuntu@ip-10-0-10-203:~/FIRSTSTEP_BE_AWS$ flask run --host=0.0.0.0
 * Debug mode: off
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://10.0.10.203:5000
Press CTRL+C to quit

=> --host=0.0.0.0 : 옵션을 주지 않으면 인스턴스 로컬에 실행이되어 접근할 수 없어 외부로 실행되어야 함

**error

E: Unable to locate package python3-pip

- 해결 방법

sudo add-apt-repository universe 
sudo apt-get update 
sudo apt-get install python3-pip

#3-3 브라우저에서 접속

Not Found => 서버가 실행 중인 것

인스턴스 생성 시 인바운드 규칙에 5000 추가했기 때문에 연결 가능(인스턴스 생성 시 빼먹었다면 보안그룹에 가서 포트 열어주기!)

- postman을 통해 RDS와 연결 확인

#4 React

#4-1 S3 버킷 생성

firststep

#4-2 react 어플리케이션 코드 수정

flaskServer로 연결하는 axios url 을 flaskServer 퍼블릭주소:5000으로 변경

axios.get(`${process.env.REACT_APP_SERVER_URL}/board/detail/${boardId}/${sessionStorage.getItem('token')}`)
        .then(res => {
            console.log(res)
            
...

### .env ###
REACT_APP_SERVER_URL = http://52.78.120.29:5000 <= flask 퍼블릭주소

#4-3 react 어플리케이션을 빌드

User@DESKTOP-UDC737O MINGW64 /c/FirstStep_project/FIRSTSTEP_FE_AWS (main)
$ npm run build

> client@0.1.0 build
> react-scripts build

Creating an optimized production build...

...

#4-4 build 한 react app 파일을 S3버킷에 업로드