이제 도메인 주소를 입력하면 S3의 버킷으로 연결되어야 한다.

Route 53을 이용해서 연결시켜 보자.

AWS Console 에서 Route 53 메뉴로 이동한다.

호스트 존이 아무것도 없다면 Create Hosted Zone을 클릭하고 

있다면 해당 호스트 존을 클릭하면 된다.


호스트 존 이름은 버킷 이름과 같게 하면 된다. (www가 없는 버킷 이름)


다음과 같이 4개의 Record Set이 필요하다.

Record Set을 만들었다면 먼저 

NS와 SOA는 생성 되어있을 것이다.


A를 생성해보자 (Type)

CreateRecordSet 버튼을 누르면 다음과 같은 창이 오른쪽에 뜬다.

Name 에 아무것도 입력하지 않고

Type은 A - IPv4 Address로 설정한다.

Alias를 Yes로 변경한다.

그러면 다음과 같이 S3의 버킷이 보인다.

해당 버킷을 클릭해서 연결시켜준다.

Routing Policy는 simple

Evaluate Target Health는 NO로 설정한다.


이제 spiritlink.online 주소를 통해 S3 버킷 접속이 가능해 졌다.

www.spiritlink.online 주소를 통해 S3 버킷에 연결시켜보자.


CreateRecordSet 버튼을 클릭한 다음 Name에 www 를 입력한다.

그다음 똑같이 Alias를 Yes로 선택하고 S3버킷을 선택한다. 

* 주의 : www.spiritlink.online 버킷과 spiritlink.online 버킷은 별도이다.

www.spiritlink.online 주소를 입력하면 S3에서 spiritlink.online 버킷으로 연결되도록 처리가 필요하다.



Routing Policy 를 Simple로 선택하고

Evaluate Target health 를 NO로 선택한뒤 생성을 완료한다.


이제 다른 사이트에서 구매한 도메인에 연결시켜보자.

나는 가비아 에서 도메인을 구매했는데 다른 사이트도 이와 비슷하다.

도메인을 구매한 사이트에 도메인 정보로 들어가게 되면 도메인 네임 서버 주소를 입력하는 창이 있다.

여기에 NS 에 적혀있는 4개의 주소를 입력하면 된다.


1차, 2차, 3차, 4차 도메인 네임서버를 입력해 준뒤

몇분이 지나면 정상적으로 호스팅 되는것을 확인할 수 있다.

'프로그래밍 > AWS' 카테고리의 다른 글

윈도우 10 에서 WSL(Ubuntu)로 AWSCLI 실행하기  (0) 2019.02.24
AWS 웹사이트 호스팅 01 - Amazon S3 데이터 업로드  (0) 2018.09.10

AWS 에서 웹사이트를 호스팅 하기 위해서는 다양한 서비스의 조합이 필요하다.

그중에 웹사이트를 호스팅 하기 위해서 제일 먼저 필요한것은

js, html 등 작성한 코드, 리소스 들이다.

먼저 해당 리소스들을 업로드 해보자.


aws console에서 s3로 이동한다.


그뒤 버킷을 생성한다.

버킷 이름은 도메인 이름과 같게 설정하는게 좋다.

리전은 서울로 설정한다.

다음을 전부 넘기고 생성한다.


이렇게 생성한뒤 버킷 이름을 클릭하면 다음과 같은 창이 보인다.

업로드 버튼을 누른뒤 js 파일, html 파일 등을 업로드 한다.

파일 추가 버튼을 누르는것보다

마우스로 드래그 한뒤 드랍하는게 훨씬 편하다. (폴더 내의 파일들까지 알아서 업로드 할 수 있다.)


다음과 같이 파일이 업로드 되었다. 이제 웹사이트 호스팅을 시작해보자 (S3에서)

속성 탭으로 이동한뒤 정적 웹 사이트 호스팅을 클릭한다.

이 버킷을 사용하여 웹 사이트를 호스팅한다를 클릭한다.

그 뒤 위의 엔드포인트 옆 주소를 클릭한다.

그러면 403 Forbidden 이 출력된다.

읽기 권한이 할당되지 않아서 이러한 현상이 발생한다.

인덱스에 자신의 프로젝트 index.html을 입력해주면 된다.

버킷에서 권한 -> 버킷 정책 탭으로 이동한다.


다음과 같이 입력하면 된다.

모자이크 된 부분은 버킷의 이름이다.

적용이 정상적으로 완료되면 다음과 같이 보인다.


이렇게 처리가 완료되면 엔드포인트 주소를 클릭했을때

웹사이트가 호스팅 되기 시작하는것을 확인할 수 있다.


다음 글에서는 도메인과 연결을 시작해보자.

'프로그래밍 > AWS' 카테고리의 다른 글

윈도우 10 에서 WSL(Ubuntu)로 AWSCLI 실행하기  (0) 2019.02.24
AWS 웹사이트 호스팅 02 - Route 53 도메인 네임 서버 할당  (0) 2018.09.10

자바스크립트 코드를 작성하다 보면 객체 내에서 일부 데이터만 필요하고

나머지 데이터는 필요없는 상황이 많다.

이때 간단하게 오브젝트 내에서 필요한 데이터만 추출해 보자.


1. 배열 (Array)


let data = ["crong", "honux", "jk", "jinny"];
let [jisu,,jung] = data;
console.log(jisu, jung);

data의 배열 내에 4개의 이름이 들어가 있다.

jisu는 data의 0번째, jung은 data의 2번째 값을 받고있다.

1번째 값은 ,,으로 건너 뛰었다.

로그를 출력하면 crong, jk가 출력되는것을 확인할 수 있다.


2. 오브젝트 (Object)


let obj = {
    name : "crong",
    address : "Korea",
    age : 10
};

오브젝트 내에서 원하는 데이터를 뽑고싶다면

let {name, age} = obj;

이렇게 추출하면 된다.

name은 crong

age는 10이 들어있다.


만약 변수의 이름을 다르게 하고 싶다면

let {name:myName, age:myAge } = obj;

myName에 name의 값이 들어가게 되고

myAge에 age의 값이 들어가게 된다.


myName, myAge 변수를 사용하면 된다.


3. JSON 파싱


let news = [
    {
        "title" : "sbs",
        "imgurl" : "http://static.naver.net/1",
        "newslist" : [
            "[가보니] 가상 경주도 즐기고, 내 손으로 자동차도 만들고",
            "'갤럭시S8' 출시? '갤노트7' 처리 계획부터 밝혀야"
        ]
    },
    {
        "title" : "mbc",
        "imgurl" : "http://static.naver.net/2",
        "newslist" : [
            "Lerem ipsum dolor sit amet",
            "ipsum dolor sit amet"
        ]
    }
];

JSON 내의 데이터중 필요한 데이터만 추출해보자.


let [,mbc] = news;

JSON 배열 내의 데이터중 1번째 데이터를 mbc에 할당한다.

let {title, imgurl} = mbc;

title에 mbc의 title값이 담기고 imgurl에 mbc의 imgurl값이 담긴다.

console.log(title, imgurl);

출력하면 mbc와 url주소가 출력된다.


Destructuring을 이용해서

let [, {title, imgurl} ] = news;

바로 뽑아낼 수도 있다.


4. Event 객체 파싱


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
</head>
<body>
<ul>
    <div>            "Lerem ipsum dolor sit amet",
        "ipsum dolor sit amet"</div>
</ul>
</body>
</html>

HTML에 div 속성으로 다음과 같은 데이터를 삽입한다.


document.querySelector("div").addEventListener("click", function({type,target}){
    console.log(type, target.tagName);
});

argument로 객체 전체가 넘어오게 되는데

상당수가 필요없는 데이터 일때가 많다.

type과 target의 데이터만 필요할 경우 function의 파라미터에 { type, target }을 이용해서 해당 데이터만 추출한다.

console.log 를 통해 확인하면 해당 데이터만 전달 받는것을 확인할 수 있다.

'프로그래밍 > JavaScript' 카테고리의 다른 글

자바스크립트 배열 순회 (array loop)  (0) 2018.09.06
WebPack 빌드 및 사용하기  (2) 2018.08.21
Three.js 에서 jd 모델 사용하기.  (0) 2018.08.08
자바스크립트 모바일 브라우저 감지하기  (0) 2018.07.17
스파인 애니메이션 재생 문제 (Spine Animation)  (0) 2018.07.13

+ Recent posts

티스토리툴바