React 서버 연동

=>Client:https://github.com/ggangpae1/react_todo

 

-SOP (Same Origin Policy) 문제: CORS(Cross Origin Resources Sharing)설정
SOP:동일 출처 정책 - JS는 동일한 도메인의 데이터만 사용할 수 있음


server 와 client 를 나눠서 하는 이유
1. client 하고 server 를 하나로 해놓으면 monolithic 이라 하는데, 이러면 자격 영역도 나눠져야 함

2. 유지/보수 => 예전에는 대기업에서 하청을 줘서 개발시킴.

자바스크립트 애플리케이션에서 다른 도메인의 데이터를 사용하는 방법
-서버에서 특정 도메인은 접근이 가능하도록 설정: CORS설정
-클라이언트에서 자신의 로컬 서버에게 접근한 후 로컬 서버에서 외부에 접근 가능한 프로그래밍 언어로 데이터를 가져온 후 클라이언트에게 전달하는 방식
(보통의 회사는 2번쨰 방법을 함.왜냐 로컬 서버를 거쳐서 어떤 데이터를 어떻게 가져오는지를 다 파악할 수 있음 => 보안 측면에서 굉장히 뛰어남)

Proxy Pattern =>내가 작성한 코드가 돌아가는게 아니라 작성한 코드+ 원래 있는 코드로 돌아가게됨. React 에 저 사이트에 보내달라고 할 때 proxy 
Server Application을 내가 만들면 CORS 을 내가 설정할 수 있지만, 보통은 그런 경우가 거의 없어서 Open API 


Application Server

1.json 데이터를 만들어서 전송하는 것 :하나의 객체를 전송할 때 와 여러 개의 객체를 전송할 때

2.CORS 설정

3. 파라미터를 받아서 처리하는 방식
GET 방식
URL에 포함시키는 방식
Query String 으로 포함시키는 방식

POST 방식
파일이 없는 경우
파일이 있는 경우

오늘의 맹점. 어떻게 CORS 설정을 하는지 

 

 

 

 

0.외부에서 사용할 수 있는 RDBMS 설정

 

=>24시간 실행될 수 있는 컴퓨터에 포트포워딩을 해서 고정 IP 형태로 사용
=>클라우드 서비스 중에서 IaaS(Infra as a Service - 운영체제가 설치된 서버를 임대,AWS 에서는 EC2)를 이용하는 방식으로 가격이 가장 저렴

=>클라우드 서비스에서 제공하는 PaaS (Platform as a Service - 개발도구까지 임대)나 SaaS(Service as a Service - 애플리케이션을 임대) 형태의 서비스를 이용하는 것 - AWS 의 RDS

 

=>RDS나 EC2에 데이터베이스를 설치해서 개발하는 경우 처음에는 외부에서 접속할 수 있도록 개발을 하지만 마지막에는 VPC 내부에서만 접근할 수 있도록 수정을 해야 합니다.

 

접속

ssh -i pem 경로 ubuntu@IP주소

 

접속하고나서

설치: sudo apt-get install mysql-server

확인:mysql --version

접속: sudo mysql -u root -p (비번없음)

 

관리자 비밀번호 변경

use mysql;

alter user "root"@"localhost" identified with mysql_native_password by "비밀번호";

flush privileges;

 

외부 접속 허용

sudo vi /etc/mysql/mysql.conf.d/mysqld.cnf

 로 환경 설정 파일을 열어서 bind-address= 0.0.0.0 으로 설정

 

service mysql restart

 

외부에서 접속 가능한 유저 생성

mysql -u root -p

create database 데이터베이스이름

create user 이름@'%' identified by '비밀번호';

grant all privileges on 데이터베이스이름.

 

EC2에서는 보안 그룹 외부에서 사용 가능한 포트를 개방해주어야 합니다.

이렇게 만드는것과 RDS 를 만들어서 사용하는 것과의 차이 

=>RDS에서는 관리 비용이 들고, EC2에서 만들게 되면 관리 비용이 안듬.

 

ORM(object Relation Mapping)

=>객체 지향 언어의 인스턴스와 RDBMS (NoSQL도 가능)의 row를 매핑시켜서 객체 지향 문법으로 데이터를 사용하는 프레임워크

=>SQL를 학습하지 않아도 되고 데이터베이스 변경이 소스 코드에 영향을 주지 않음

=>ORM에서는 instance 와 row 를 매핑시키고자 할 떄 데이터베이스 연결이 미리 되어 있어야 하므로 설정 파일에 반드시 데이터베이스 연결을 미리 작성해두어야 합니다.

 

 

  

 

1.Server Application 생성 및 설정

1)서버 애플리케이션 생성 - Django Application 으로 구현

-디렉토리 생성

 

-

 

 

3)실행해서 프로젝트 설정에 문제가 없는지 확인:python manage.py runserver

 

2.서버 애플리케이션과 데이터베이스 연동

1)model 생성 - 애플리케이션의 models.py 파일에서 수행

from django.db import models

class Todo(models.Model):
	text = models.CharField(max_length=100)
    created = models.DateTimeField(auto_now_add=True)
    checked = models.BooleanField(default=False)
    
    #이 method 을 오버라이딩 한 후 이 클래스의 인스턴스를 출력하면 호출
    def __str__(self):
    	return self.text

 

2)데이터베이스 변경 사항 적용

python manage.py makemigrations

 

python manage.py migrate

 

3)확인

=>데이터베이스 접속 도구에서 애플리케이션_테이블이름 으로 된 테이블이 있는지 확인

 

3.테이블을 관리자에 등록

=>데이터를 관리자 모드로 접속해서 쉽게 사용하기 위해서

 

1)관리자를 등록

python manage.py createsuperuser 명령을 수행하고 

 

 

2)admin.py 파일에 테이블 관련 클래스 (Entity)등록

 

3)프로젝트 실행하고 /admin으로 접속해서 샘플 데이터 추가

 

4.테이블의 전체 목록을 출력하기

1) 테이블 사용을 위한 Serializer(외부에 연동하기 위해서 사용할 인스턴스) 만들기

=>model은 테이블과 연동이고 Serializer 는 외부로 내보내기 위한 객체

 

 

2)전체 목록 보기 처리를 위한 메서드를 views.py 에 저장

 

3)

 

 

4)실행하고 확인:/todo 요청 전송

 

5.클라이언트 와의 연동

1) 클라이언트 프로젝트의 App.js를 수정해서 데이터 가져오기 수행

=>yarn add axios

 

2) App.js 수정

 

=>실행한후 CORS 에러 발생

 

3) Django 프로젝트를 수정

=>CORS 설정이 가능하도록 해주는 패키지 설치:django-cors-headers

 

 

6.react 에서 proxy 설정

=>package.json 파일에 proxy:"접근할 서버의 URL"

"proxy": "http://localhost:8000"

=>요청할 때 proxy 설정된 경로를 제외하고 요청

 

7.배포 방법

1)Infra를 임대해서 배포하는 방법

=>보안이 우수하고 비용이 저렴

 

2)Platform 이나  Service 를 임대해서 배포하는 방법

=>관리가 편리

=>비용이 높을 가능성이 높고, Vendor lockin(특정 벤더에만 적용이 되는 것)  문제 발생 가능성이 생김

Vendor Lockin 문제 떄문에 CNCF 기술 중에서 많이 사용되는 기술을 선택해서 사용

 

 

8.S3 를 이용해서 배포

1)S3 를 이용한 정적 웹 사이트 배포

=>S3 저장소 자체가 URL 로 접속할 수 있는 구조라서 정적 웹 사이트를 배포할 수 있습니다.

=>S3 설정을 변경해야 합니다.

 

2)웹 사이트를 배포할 수 있는 S3 버킷을 생성

=>생성할때 확인할 옵션은 [ACLS Enabled] 하고 [public access 접근 차단]을 해제하는것 입니다.

 

3)생성된 버킷의 권한 설정 수정

=>[권한]에서 bucket 정책에 내용 추가

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*",
                "s3:Put*",
                "s3:Delete*"
            ],

            "Resource": [
                "arn:aws:s3:::reactwebsitewang",
                "arn:aws:s3:::reactwebsitewang/*"
            ]
        }
    ]
}

 

=>CORS 설정 변경

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": ["Access-Control-Allow-Origin"]
    }
]

 

 

4)버킷을 웹사이트로 사용할 수 있도록 설정

=>[속성]으로 이동해서 가장 하단의 [ Static website hosting ] 으로 이동해서 [ 활성화 ]를 선택하고 시작 파일과 에러 파일의 이름을 결정(index.html 과 error.html로 설정)

 

5)버킷을 사용할 수 있는 유저 생성

=>IAM에 접속

=>S3에 작업을 할 수 있는 권한을 가진 사용자를 생성하고 csv 파일 생성

=> 권한설정에서 직접 정책 연결 설정에서 [s3 fullaccess] 체크하고 생성하면 됨

=>user생성된거 누르고 [access 키 만들기] 에서 CLI 누르고 생성하고 csv파일 다운로드 

 

6)AWS Command Interface 설치

https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/getting-started-install.html

 

 

7)사용자 등록

=>aws configure --profile 사용자이름

=>Access key와 Secret Access Key 등록

=>region과 format 등록

region은 Asia Pacific (Seoul) ap-northeast-2

format은 json

 

 

8)node 프로젝트 배포

=>빌드:npm run build

-실제 배포할 수 있는  애플리케이션이 생성됨

 

=>업로드

aws s3 sync ./build s3://버킷이름 --profile=등록한사용자이름

 

=>S3의 EndPoint에 접속하면 웹 페이지가 출력됩니다.

 

=>내용을 수정하면 빌드를 다시하고 업로드 하는 작업을 직접 수행해야 합니다.

 

 

9.Git Hub Action을 이용한 react 프로젝트 s3 배포 자동화

=>Git Hub에서 어떤 이벤트가 발생한 경우 자동으로 수행되는 동작을 정의하는 것이 Git Hub Action

기본적으로 .github/workflows 디렉토리 안의 yml 파일을 이용

 

=>프로젝트에 .github/workflows 디렉토리를 생성

 

=>생성된 디렉토리에 야믈 파일을 만들고 작성

#이름은 아무거나 상관없음
name: CI/CD react to AWS S3



#이벤트
#main 브랜치에 push가 발생하면 동작
on:
  push:
    branches:
      - main

#작업
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 코드 체크 아웃
        uses: actions/checkout@v3
        #위까지 동일
  
    #react의 경우
    - name: 리액트 빌드
      run: |
        npm install
        npm run build

      #IAM 사용자 등록-키를 직접 등록하면 AWS 계정 중지 됨
      #키를 등록할 때는 GITHUB의 키 설정 기능 이용
      #키 이름은 아무렇게나 설정하고 나중에 설정

      - name: AWS IAM 사용자 설정
        uses: aws-actions/configure-aws-credentials@v2
        with:
          aws-access-key-id: $ {{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secretaccess-key: $ {{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: $ {{ secrets.AWS_REGION }}

      #S3에 업로드
      - name: S3에 빌드한 내용 업로드
        run: aws s3 sync build/ s3://${{ secrets.AWS_S3_BUCKET }} --acl public-read
        env:
          AWS_ACCESS_KEY_ID : ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

 

=>깃허브에 레포지토리 생성하고 키 등록

- 키 등록은 [settings] 메뉴에서  [Secret and variables] 의 [Actions]에서 수행

[New Repository Secrets]을 선택해서 Key-Value 형태로 설정

 

 

=>코드를 주기적으로 올리는것을 CI 라고 하고 yml 파일로 만들어져서 코드를 올리면 자동으로 배포되는게 CD라고 합니다. 

 

=>제대로 작동지는지 확인하기 위해서는 react source code 와 git hub repository 연결

 

git init

git add .

git commit -m "front_cicd"

 

git remote add 이름 github주소

 

=>소스코드 push

git push origin 브랜치이름

 

10.CloudFront

1)개요

=>CDN(Content Delivery Network)

- 리소스 요청이 발생했을 떄 요청하는 위치에 따라 리소스를 전달해주는 분산 네트워크 시스템: 가까운 곳

git remote add origin 에서 Origin:콘텐츠를 소유하고 있는 곳

-콘텐츠를 요청할 때 Origin으로 부터 멀리 떨어져 있으면 콘텐츠를 사용하는데 시간이 오래 걸리게 됩니다

이를 방지하려면 동일한 컨텐츠를 여러 곳에 분산시켜놓고 가까운 곳에서 응답을 하도록 해야 합니다.

- Edge Location: Origin과 동일한 콘텐츠를 소유한 요청과 가장 가까운 곳

-사용자가 요청을 하면 캐싱을 해서 Edge Location에 보관을 한 후 다음 요청부터는 Edge Location에서 응답을 하도록 하는 것이 CDN이고 AWS의 CDN 서비스가 CloudFront

삼성이랑 LG 가 최대 고객이 된 이유가 CloudFront

 

CI/CD
Continuous Integration(지속적인통합 - 여러 개발자 또는 한 명의 개발자가 소스코드를 레포지토리에 지속적으로 업로드 해서 통합하는 것)

Continuous Deployment(배포) (Delivery 도 가능): Delivery 라고 할 때는 예전의 서버 형태의 배포를 의미하고 deploy라고 할 때는 대부분 Application을 배포

 

 

2)CDN적용

=>AWS의 CloudFront 서비스로 이동

 

=>배포 생성을 클릭하고 옵션을 설정

-Origin domain:버킷을 선택

 

http 에 인증서를 붙이면 자동으로 https로 변경되서 전달됨

 

GET 과 나머지를 나누는 이유가 CQRS 때문 

방화벽 쓰면 돈내야해유

바꿔놓기

 

=>배포가 성공하면 cloudfront endpoint 접속 가능

그러면 기존 S3 버킷의 EndPoint 로 접속하면 Bucket 을 만든 region에서 응답을 하지만 CloudFront 의 EndPoint 로 접속하면 가까운 Edge Location에서 응답을 하므로 응답속도가 빠름

 

11.EC2를 이용해서 배포

1)장점

=>비용이 저렴

 

 

2)단점

=>서비스 확장이 어려움

=>CI/CD구현이 어려움

 

3)EC2 준비

=>EC2 인스턴스를 생성: 메모리가 큰 것을 선택해서 설치

-탄력적 IP 부여: 고정 IP 처럼 사용하는 것이 가능

-EC2 인스턴스 접속 : 터미널에서 ssh -i 키페어파일경로 계정[ubuntu]@EndPoint(IP주소나 도메인 형식 - 접속할 수 있는 위치)

설치 기본단계(git 설치)

sudo apt-get install
sudo apt-get upgrade
sudo apt-install git

 

Node.js 설치방법

node.js 
node 설치 및 확인
패키지 정보 업데이트
sudo apt update
GPG key 등록
sudo apt install -y ca-certificates curl gnupg
sudo mkdir -p /etc/apt/keyrings
curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
저장소 등록
NODE_MAJOR=20
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
패키지 정보 업데이트
sudo apt update
설치 및 확인
sudo apt install -y nodejs
node -v

 

이렇게 뜨면 잘된거임

 

4)소스 코드 이전

=>git 이용하는 것이 편리

git clone https://github.com/ggangpae1/react_todo 

ls =>제대로 설치됬는지 확인

cd react_todo

 

npm install

=>git 에서 react projcect 받고나서 npm install 해야함. modules 팩이 존재하지 않기 때문

node app.js

 

=>EC2에다가 Node 를 설치

 

=>소스 코드 이전을 편리하게 하고자 하면 Git 설치

 

=>소스 코드 빌드해서 실행

 

=>도메인 연결이나