[AWS] AWS RDS 인스턴스 동일 VPC 에서 여러개 사용하기(라우팅 테이블 설정)

AWS 2018. 5. 4. 00:00

문제상황


현재 AWS 프리티어를 가지고 포트폴리오용 프로젝트들을 서비스하는 중 DB 를 프로젝트별로 생성하여 사용하기 위해 2개의 자바프로젝트에는 Oracle DB를 생성하였고, 추가로 Node.js 프로젝트를 위하여 Mysql DB 인스턴스를 생성하려 하는 상황.

(참고로 AWS RDS에서는 한개의 Oracle DB 인스턴스에는 1개의 데이터베이스밖에 못올린다. Mysql 은 갯수제한이 없고 MS는 아마 40인 걸로 기억함...)


하지만 왜때문인지(멍청해서때문이지 뭐) 이틀 넘게 인스턴스 생성 삭제를 반복하며 지X를 했지만 Mysql 인스턴스에 외부접속이 안되는 상황...




- 동일한 VPC에 EC2와 RDS 모두 올리는 시나리오 사용




구글 자습서 :

https://docs.aws.amazon.com/ko_kr/AmazonRDS/latest/UserGuide/USER_VPC.Scenarios.html#USER_VPC.Scenario4


위 링크의 첫번째 시나리오를 가장 흔히 쓰는 방식


1. VPC 생성

EC2 와 RDS 들이 공통으로 포함될 VPC 한 개 생성(해당 vpc의 기본 서브넷 그룹 자동생성)


2. RDS용 보안그룹 생성

위에서 만든 VPC에 RDS 들이 포함될 보안그룹 생성(RDS는 아무나 접속할 수 없도록)


3. RDS용 보안그룹 인바운드 설정

위에서 만든 보안그룹에 인바운드 규칙 설정(아래같이 허용하고자 하는 ip/32 형식으로 적용. EC2에서는 접근 가능해야 하므로 아래 4번 이후 EC2용 보안그룹의 아이디를 추가해야 함)


4. EC2용 보안그룹 생성

동일 VPC에 EC2 가 포함될 보안그룹 생성


5. EC2용 보안그룹 인바운드 설정

위에서 만든 보안그룹에 인바운드 규칙 설정(일반적으로 서비스되는 부분이므로 80포트 개방 및 SSH 용 22포트 ip 설정)


6. 서브넷 생성

EC2 인스턴스와 각 RDS 인스턴스가 할당될 서브넷을 인스턴스 갯수만큼 생성.


역시 동일 VPC 내 생성하며, EC2용으로는 퍼블릭 서브넷으로 / RDS 는 VPC 외부에서 직접 접속할 일 없으므로 프라이빗 서브넷으로 설정


*퍼블릭 서브넷으로 설정시 자동으로 서브넷에 물린 라우팅 테이블에 0.0.0.0/0 주소가 인터넷 게이트웨이로 매핑되고, 프라이빗 서브넷으로 설정시 자동으로 블랙홀 처리됨(디도스 공격등에서 트래픽을 흡수하기 위함?)


*IPv4 CIDR은 0.0.0.0/24, 10.0.1.0/24 ... 같이 따로 설정해야 함


*가용영역은 상관 없음


7. 인스턴스 생성

이제 각각의 EC2 와 필요한 RDS 인스턴스를 생성하며 위에서 미리 생성해둔 VPC(모두 동일), 보안그룹(EC2와 RDS 분리), 서브넷 그룹(모두 동일), 서브넷(각각) 설정.

이때 RDS끼리는 가용영역을 통일해야 함(보안그룹이 같기 때문에 가용영역이 같아야 하는 것으로 추정)


8. 라우팅테이블 서브넷 연결

마지막으로 6번에서 퍼블릭으로 생성했던 EC2용 서브넷만 기본 라우팅테이블이 아닌 퍼블릭 서브넷이 명시적 연결되어있는 라우팅테이블로 (자동설정되어있지 않다면)설정하고, 나머지 RDS용 서브넷들은 VPC에서 설정한 라우팅테이블(기본 라우팅테이블)에서 "서브넷 연결" 탭에 각 프라이빗 서브넷들이 모두 등록된 것 확인. 등록되지 않았다면 등록해주어야 함.




*즉, 각 서브넷은 라우팅테이블 규칙을 따로 설정한 경우 우선순위를 받아 적용되고, 따로 설정하지 않는 경우 VPC 기본 라우팅테이블 규칙을 암시적으로 따르게 되어있는데, 이때 따르는 라우팅테이블에 서브넷 규칙이 설정되어 있어야 함. 이 부분이 누락되어 이틀동안 헛짓했던 것!


VPC 라우팅 테이블

블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

[Angular2] How to use reactive form in angular2 앵귤러2 폼

Javascript/Angular2 2018. 4. 29. 04:57

문제상황


앵귤러2에 텍스트 에디터 플러그인을 붙여 써야하는 상황이 발생.

처음 고른 에디터는 nhn에서 만든 Toast ui editor(일명 tui editor) 이었지만 이의 앵귤러 버전인 ngx-tui-editor 가 빌드시에 가용 메모리를 모두 점유하는? 문제가 발생하여 좀 더 안정성 있는 에디터인 Froala editor를 사용하기로 결정.


https://www.froala.com/wysiwyg-editor/docs/framework-plugins/angularjs-2-4


하지만 Docs 를 읽는 도중에 Reactive Form 이라는 용어가 등장하여 앵귤러2 Form 에 대해 간단히 찾아보고 내용을 정리하고자 함


(기본 사용법으로 해도 되지만 이미 궁금증이 생긴 상황)




1. Reactive Form VS Template From


앵귤러 2에서 폼의 작동원리는 2가지 방법으로 나뉨.

하나는 템플릿 기반의 폼으로, 각 input 태그에는 ngModel 속성을 주고, form 태그에서 #참조변수명="ngForm" 으로 (폼값에)로컬레퍼런스를 걸어 ngSubmit에 인자로 넘기는 방식인데, 나중에 따로 포스팅하기로 하고 Reactive Form만 살펴봄기로 함.

즉, Template Form 은 폼 설정이 html 템플릿에 있다고 할 수 있음




2. 모듈추가


Reactive Form을 사용하기 위해서는 app.module.ts 파일에 "ReactiveFormsModule" 을 가져와야 한다.


app.module.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 
import { PostWriteComponent } from './components/post-write/post-write.component';
import { FormsModule, ReactiveFormsModule} from '@angular/forms';
 
import { HttpModule, RequestOptions } from '@angular/http';
 
@NgModule({
  declarations: [
  ],
  imports: [
    BrowserModule,
    HttpModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }
 
cs


필요 없는 부분은 뺏음. 

import { FormsModule, ReactiveFormsModule} from '@angular/forms';

부분을 추가하고 하단에 imports 시킨다.




3. 컴포넌트 파일에 Form 구조 작성


Reactive Form 에서는 html이 아닌 컴포넌트에서 직접 FormGroup 과 FormControl 을 설정해주어야 함.


post-write.component.ts

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component, OnInit } from '@angular/core';
 
import { FormGroup, FormControl } from '@angular/forms';
 
@Component({
  selector: 'app-post-write',
  templateUrl: './post-write.component.html',
  styleUrls: ['./post-write.component.css']
})
export class PostWriteComponent implements OnInit {
    postForm: FormGroup;
 
    constructor() {
        this.postForm = new FormGroup({
            'category': new FormControl(),
            'isNotice': new FormControl(),
            'title': new FormControl(),
            'content': new FormControl()
        });
    }
 
    ngOnInit() {}
    
    onSubmit(){
        console.log(this.postForm);
    }
 
}
 
cs


위와 같이 FormGroup 타입으로 폼값이 들어갈 객체를 생성해주는 동시에 FormControl로 프로퍼티를 지정해줌.

*onSubmit 함수는 아래에서 사용




4. html 폼 작성


html로 폼 테그를 짤 때에는 form 태그의 [formGroup]="컴포넌트에서생성한폼그룹객체" 와 input 태그의 formControlName 지시자만 잘 설정해주면 됨.

템플릿 기반 폼과는 달리 form 의 ngSubmit 이벤트 발생시 폼값을 html 에서 인자로 넘겨주는 것이 아니라, 이미 formGroup 과 formControlName 으로 바인딩되어있는 개체를 사용하기만 하면 된다.


post-write.component.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h1>글 작성</h1>
<form [formGroup]="postForm" (ngSubmit)="onSubmit()">
    <div>
        <label for="category">카테고리</label>
        <input type="text" name="category" formControlName="category">
    </div>
    <div>
        <label for="isNotice">공지사항으로 설정</label>
        <input type="checkbox" name="isNotice" formControlName="isNotice">
    </div>
    <div>
        <label for="title">제목</label>   
        <input type="text" name="title" formControlName="title">
    </div>
    <div>
        <textarea [froalaEditor] formControlName="content"></textarea>    
    </div>
    <button type="submit">Submit</button>
</form>
cs



[formGroup]="postForm"

부분과

formControlName="category"

같은 부분이 핵심이다.




5. 빌드 후 데이터 확인


이제 ng build 후 브라우저 개발자도구 창에서 데이터를 확인한다.



이렇게 적당히 값을 입력한 후



서브밋을 하면 콘솔로 폼 값이 찍혀 나온다.

value 키에 실제 값들이 들어있는 것을 확인가능!


















'Javascript > Angular2' 카테고리의 다른 글

[Angular2] Angular Life Cycle Hooks  (0) 2018.05.29
[Angular2] Service를 이용한 컴포넌트 간의 통신  (2) 2018.05.26
[Angular2] nginx 포트포워딩에 의한 앵귤러 서비스 url 경로문제  (0) 2018.04.13
블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

[Git] 자주쓰는 깃 명령어 모음

Git 2018. 4. 13. 03:37


git init

 현재 디렉토리를 git 저장소로 설정

 git status

 현재 add/commit 또는 새로 생성된 파일들의 목록 보기

 

 

 git config --global user.name [user name]

 사용자 이름 설정

 git config --global user.email [user email]

 사용자 이메일 설정

 git config --global --list

 설정값 확인

 

 

 git remote add [remote name] [remote url]

 별명(remote name)으로 원격지 주소 저장

 git remote rm [remote name]

 별명으로 원격지 주소 삭제

 git remote rename [remote name] [new name]

 별명 변경

 

 

 git fetch [remote name]

 원격저장소의 내용 가져오기(branch)

 git merge [branch name]

 브런치의 내용을 가져와 로컬에 병합하기

 git pull [remote name] [localbranch name]

 원격저장소의 내용 가져와 병합하기

 

 

 git add *

 stage에 모든 파일/폴더 추가(.으로 시작 제외)

 git add .

 stage에 모든 파일/폴더 추가(.으로 시작 포함)

 git add [file or folder]

 stage에 특정 파일/폴더 추가

 git reset HEAD [file name]

 stage에 올라간 특정 파일 내리기

 git commit -m [message]

 message와 함께 Head에 올리기

 git push [remote name] [localbranch name]

 로컬브런치 내용을 원격저장소로 업로드

 

 

 git push [server] tag [TAG]

 서버에 tag 전송

 git push [server] --tags

 변경된 모든 tag 전송

 git push [server] [L.B]:[R.B]

 서버에 로컬브런치를 리모트브런치 이름으로 저장

 git tag [TAG name]

 원격저장소에 태그 붙이기

 git tag

 태그 목록 보기

 

 

 git branch

 내가 현재 위치한 브런치 목록 보기

 git branch [branch name]

 원격저장소에 브런치이름으로 브런치 생성

 git branch -a

 모든 로컬브런치와 리모트브런치 확인

 

 

 git checkout [branch name]

 다른 브런치로 전환

 git checkout -b [branch name]

 브런치 생성 후 전환

 git checkout -- [file or folder]

 지정한 파일/폴더를 수정하기 이전 상태로 복원

 git checkout [id]

 원격저장소 기준 id에 해당하는 커밋으로 복원

 git checkout -f

 변경된 파일들을 Head의 상태로 복원

 

 

 git clean -f

 workspace에 있는 untracked file 모두 삭제

 

 

 git rm [file or folder]

 해당 파일을 workspace에서 삭제하고 stage에 등록

 git diff

 로컬저장소와 원격저장소의 차이 보기

 git remote

 원격저장소 확인

 git log

 현재까지 commit된 목록 확인


'Git' 카테고리의 다른 글

[Git] Changes not staged for commit (modified content, untracked content) 깃 서브모듈 인식 문제  (0) 2018.04.12
블로그 이미지

망원동똑똑이

프로그래밍 지식을 자유롭게 모아두는 곳입니다.

,

공지사항

글 보관함

달력

«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

티스토리툴바