너굴의 개발주니어에서 시니어되기

지난번까지 보면

네이버 클라우드 플랫폼 micro 서버 만들기 - 포트 포워딩을 통해 공인 ip의 1089 포트를 내부 ip 22번 포트로 연결 - 접속 확인 

이후 단계는

ftp 연결 - jar 업로드 - jar 실행 - 웹페이지 확인 의 단계를 거칠 생각이다.

1. FTP 연결 

2.네이버 클라우드 플랫폼 공인IP 발급 방법

3. ACG(Access Control Group) 규칙 설정 / 네트워크 접근 규칙 설정

4. jar 업로드 및 실행

매번 윈도우 서버에서만 작업하다가

클라우드 플랫폼 & 리눅스 서버를 접하려니 삽질 하는게 많은 것 같다.

그래도 하나하나 배워나가면서 리눅스 서버와 클래우드 플랫폼에도 익숙해지면 언젠가는 다 도움이 될 것이다.

2019-03-01 네이버클라우드 micro 서버 이용하기 2_포트포워딩을 통해 원격접속 설정)

포스팅 하기 이전에 3.1절을 맞이하여 대한독립을 위한 순국선열의 숭고한 희생을 기억합니다. 

지난번 포스팅이후 간단한 원격접속 후 jar 배포를 하려고 했으나 일주일이라는 시간이 지나버렸다....

각설하고 

다음과 같이 네이버 클라우드 플랫폼을 통해 우분투를 설치한 micro 서버를 만들어봤다.

다음으로 네이버 클라우드 플랫폼에서 제공하는 가이드(http://docs.ncloud.com/ko/compute/compute-2-2-v2.html)를 따라 포트포워딩을 설정하고 푸티로 원격 접속을 할 수 있도록 설정 하였다.

먼저 포트 포워딩이랑

외부에서 내 서버로 접속 가능한 공인 아이피의 포트와 내 서버의 내부 아이피의 포트를 서로 연결하는 작업을 말하는 것이다. 

내 설정의 경우 내부 ip의 22포트(리눅스 원격접속 기본 포트) 와 외부에서 접근이 가능한 공인ip의 1089(내가 저정한 포트)로 접근을 하겠다는 내용이다.

다음으로 관리자 비밀번호 설정

관리자 비밀번호 확인팝업에서 이전에 서버 설정 부분에서 만들었던 인증키 파일 (xxxxx.pem) 을 선택하여 초기 관리자 비밀번호를 확인한다.

 -> 이 비밀번호 확인은 서버 설치시 기본적으로 설정해주는 기본 비밀번호를 확인시켜준다. 이후 서버 접속 후 관리자 root 비밀번호를 변경한 뒤에 확인 해도 초기 관리자 비밀번호만 알려준다. 

우분투이기에 푸티를 통해 접속을 시도 하였다.

공인 ip와 포트포워딩에서 설정했던 포트를 입력 후 접속한다.

맨 처음 root 접속 비밀번호는 위에 관리자 비밀번호 확인에서 확인한 비밀번호를 입력하면 위와 같이 접속 할 수 있다.

이후에는 관리자 비밀번호를 변경하는 것을 권장 하고 있다.

이렇게 간단하게 포트 포워딩 기능을 통해 내가 만든 micro 서버에 원격 접속을 시도 하였다.

이후에는 이제 ftp 설정, jar 복사, jar 실행 등을 통해 구현을 진행 해보겠다.

오늘은 간단하게나마 사용할 수 있는 웹 서버를 세팅 하고자 찾아보았다.

떠오르는 것은 

1. 닷홈

2. AWS

3. MS Azure

이렇게 떠올랐다.

1. 닷홈은 무료 웹 호스팅이긴 하지만..... 제약사항과 기존에 써봤던 방식 등으로 인해 일단 배제를 하였고,

2. AWS는 1년 무료 제공이지만... 일단은 한번 사용했기에 패스

3. MS Azure 같은 경우도 1년 무료 구독 크레딧을 주고 있기에 패스... 회사가 에저 파트너인데....테스트 용이나 무료 크레딧 같은건 안 주는 것 같다.

추가적인 검색을 통해 알아본 것은 

네이버 클라우드 서비스 (https://www.ncloud.com)

네이버가 클라우드 서비스를 시작했다는 것을 얼핏 들었지만 그 이후 찾아보지 않아 바로 생각나지는 않았다.

네이버 클라우드에서도 1년 무료 계정을 발급 한다는 것을 보고 바로 시도해보았다.

https://www.ncloud.com/support/notice/all/387

요지는 결제수단 등록 후에는 1년 간 micro 서버 사용량에 대한 비용을 무료로 제공한다. 1년뒤에는 비용 부과가 된다.

나는 일단 동접자, 데이터 사용량은 고려하지 않고, 외부에서 내가 만든 웹 어플리케이션을 사용 할 수 있으면 된다는 생각이기에 이용해보기로 하였다,

서버 구축에 대한 방법은 다른 클라우드와 거의 흡사하다.

1. 서버 이미지 선택 (OS 선택)

 -> Micro 서비스는 리눅스 계열(centos, ubuntu)만 사용가능

 -> ubuntu 16 64bit 선택

2. 서버 설정

 -> 1 core cpu, 1gb ram, 50gb hdd 

3. 인증키 설정

4. 네트워크 설정

 -> 이 부분은 추후 포트포워딩 작업과, 공인ip 등록 작업을 진행해야 된다.  그래야 외부에서 접근이 가능 하다.

이렇게 네이버 클라우드에 Micro 서버를 하나 구축 하였다.

접근까지 해보려고 했지만.... 오늘은 여기까지만 하고 다음에 더 진행하려고 한다.

다음 진행에는 

http://docs.ncloud.com/ko/compute/compute-2-2-v2.html

위의 가이드를 참고하여 포트포워딩, 네트워크 설정, putty 로 서버 접속을 진행 해보겠다.

일일커밋은 정말 어려운것 같다........

내가 게으른것이지만.....

오늘은 시간이 많이 않아 간단히 지난번에 구축한 프레임 위에 뽐뿌를 추가 시켰다.

뽐뿌 또한 크롤링 한 데이터를 json으로 재 구축 후 화면에 json 데이터를 다시 리턴 시켰다.

@PostMapping("ppomppuDataCall")
public @ResponseBody
JSONObject ppomppuDataCall() {
    /* json 객체를 담을 json 배열  */
    JSONArray jsonArray = new JSONArray();
    /* 최종 객체를 담을 json */
    JSONObject finalJsonObject = new JSONObject();

    try {
        //TODO 추후 DB가 구축된다면 DB에서 값을 가져오자
        File file = new File("C:/dev/txt/ppomppu.txt");
        String URL = "http://www.ppomppu.co.kr/zboard/zboard.php?id=ppomppu";
        Document doc = Jsoup.connect(URL).get();
        Elements elem = doc.select(".list_title");
        Collections.reverse(elem);

        for (Element anElem : elem) {
            /*새로운 JSON 객체 */
            JSONObject tempJsonObject = new JSONObject();

            int lastId = readFileId(file);

            Element elem1 = anElem.parent();
            Element elem2 = anElem.parent().parent().parent().parent().parent().parent().parent().child(0);

            String subject = elem1.text();
            String link = "http://www.ppomppu.co.kr/zboard/" + elem1.attr("href");
            String No = elem2.text();

            int sid = Integer.parseInt(No);
            if (sid > lastId) {
                System.out.println("sid =========" + sid);
                System.out.println("subject =========" + subject);
                tempJsonObject.put("sid", sid);
                tempJsonObject.put("subject", subject);
                tempJsonObject.put("link", link);
                jsonArray.add(tempJsonObject);
                //creatFileId(sid,file);
            }
        }
    } catch (IOException e) {
        e.printStackTrace();
    }

    finalJsonObject.put("ppompu", jsonArray);
    System.out.println(finalJsonObject);
    return finalJsonObject;

}

화면단에서는 

우선 뽐뿌 json 데이터를 리턴 받도록 ajax를 구축하고,

각 각 메뉴를 클릭시 기존에 리스트를 삭제하고, 새로 json 데이터 요청하고, 리턴 받은 json데이터를 가지고 다시 리스트를 그리게 구축 하였다.

<ul class="breadcrumbs">
    <li onclick="ruriwebBtnClick()">루리웹</li>
    <li class="separator">&nbsp;</li>
    <li onclick="ppomppuBtnClick()">뽐뿌</li>
    <li class="separator">&nbsp;</li>
    <li>기타 등등</li>
</ul>

function ruriwebBtnClick(){
    var $list_sector = $('#list_sector');
    $list_sector.html('');
    ruriwebDataCall();
}

function ppomppuBtnClick(){
    var $list_sector = $('#list_sector');
    $list_sector.html('');
    ppomppuDatacall();
}

function ppomppuDatacall() {
    $.ajax({
        type: 'post',
        url: "/ppomppuDataCall",
        error: onError,
        success: ppompuDataCall_onSuccess

    });
}

function ppompuDataCall_onSuccess(resultData) {
    $('#list_sector').html('');
    $(resultData.ppompu).each(function () {
        $('#list_sector').append("<button><span class=\"webname\">뽐뿌</span><br><span class=\"subject\">" + this.subject + "</span></button>")
    })
}

여기까지가 이전에 메일을 이용해서 구축해 놓은 단계이다.

이후 단계에는 우선 aws, azure 등을 알아봐서 내 서버를 간단하게 구축을 해볼 생각이다.

- 프로젝트 제작 동기

가장 먼저 이 프로젝트를 시작 하게 된건 단순하게 PS4를 싸게 구매하고 싶은 마음에 루리웹, 뽐뿌의 핫딜게시판을 들어가면서 시작 되었다.

하지만 싸게 판매한다는 제보 글은 매번 늦게 확인해서 이미 매진이 되었다. 이에 신규 게시물이 등록되면 알림을 주게 되고, 빠르게 게시글을 확인 하고 싶은 마음에 제작을 시작 하였다. 

웹 크롤링을 통해서 게시물을 확인하고 전달하는 모듈은 어렵지 않게 구현 하였지만 알림기능을 사용하게는 문제가 되었다. 

카카오톡 봇도 찾아보고, 인스타그램, 페이스북 메신저, 텔레그램 등 등 SNS 메신저를 우선적으로 찾아보았지만 간단하게 사용 할 수 있는 기능은 찾기 어려웠다.

차선책으로 찾은 것이 메일 전송이다. 

구글 GMail SMTP를 이용하여 메일을 전송하고 핸드폰에서 메일 어플의 알림을 통해 즉각 신규 게시물을 확인 할 수 있었다.

하지만 이 기능은 결국에는 나에게 필요 없는 메일(가비지)이 계속 늘어나게 되었고, 이에 메일이 아닌 웹 페이지를 통해 확인을 할 수 있도록 구현 하게 되었다.

- 프로젝트 환경

• Spring Boot 2.0
• Maven
• Thyemleaf
• vue
• jquery

<div class="offcanvas-wrapper">
    <!-- Page Title-->
    <div class="page-title">
        <div class="container">
            <div class="column">
                <h1>핫딜 모아모아</h1>
            </div>
            <div class="column">
                <ul class="breadcrumbs">
                    <li>루리웹</li>
                    <li class="separator">&nbsp;</li>
                    <li>뽐뿌</li>
                    <li class="separator">&nbsp;</li>
                    <li>기타 등등</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Page Content-->
    <div class="container padding-bottom-3x mb-2">
        <div class="row">
            <div class="col-lg-9 col-md-8 order-md-2">
                <div id="list_sector">

                </div>
            </div>

        </div>
    </div>

$(function () {
    ruriwebDataCall();
});
function ruriwebDataCall() {
    $.ajax({
        type: 'post',
        url: "/ruriwebDataCall",
        error: onError,
        success: onSuccess

    });
}
function onError(resultData) {
    console.log(resultData);
}
function onSuccess(resultData) {
    $('#list_sector').html('');
    $(resultData.ruriweb).each(function () {
        $('#list_sector').append("<button><span class=\"webname\">루리웹</span><br><span class=\"subject\">" + this.subject + "</span></button>")
    })
}

구글에 부트스트랩 리스트 템플릿 이라고 검색 하면 여러가지 템플릿이 나오지만 다 업무적인 리스트 템플릿이어서 맘에 안들었다. 

그래서 부트스트랩을 이용한 레이아웃만 사용하였고, 그 안에 리스트는 따로 에니메이션이 들어간 버튼 css 템플릿을 검색해서 찾게 되었다. 

<div id="list_sector"> 에 ajax를 통해 전달 받은 게시물의 json 데이터를 이용하여 리스트를 뿌려준다.

현재는 일반적인 jquery Ajax를 이용하여 구현하였지만, 추후 작업에는 vue를 이용하여 이를 스케줄을 추가 하고 화면을 계속 켜둔 상태에서도 자동으로 게시물이 리로드 되도록 구현해볼 생각이다.

위의 작업을 통해 현재까지 구현된 기능의 화면은 이렇게 나온다.

다음 작업으로는 뽐뿌 list 불러오기, 화면 전환, 제목 꾸미기 등이 될 것 같다.