힐링 휴식 그리고 개발

고흥, 그리고 힐링

하루정도 — Thu, 19 Sep 2024 17:05:35 +0900

힐링 휴식 그리고 개발

안녕하세요! 여행 관련하여 처음으로 인사드리게 되었습니다. 그럼 시작하겠습니다.

이번 여름 휴가의 목적지는 고흥으로 정했습니다.

길찾기

저에게 있어 가장 중요한 여행 포인트는 숙소입니다.

보통 숙소를 먼저 알아보고 그 이후에 그 근처를 돌아다니며 현지의 음식을 먹고 구경할 거리가 있는지 찾아보는 편이에요.

그런 의미에서 이번에는 에어비앤비를 통해 정말 괜찮은 숙소를 찾을 수 있어서 정말 다행이었습니다.

서울에서 약 450km를 달려 도착한 곳은 고흥군 외나로도에 위치한 봉래면이라는 작은 마을이었습니다.

유명한 수산물 유튜버께서 몇번 언급한 나로도 수산물 회센터도 있었습니다.

외나로도 수협회센터

보통 바다쪽으로 여행을 많이 가기 때문에 현지의 수산물 센터에서 해산물을 구입해서 먹는 편이지만, 이곳은 근처의 횟집 또한 구성이 좋고 가성비 또한 괜찮았기 때문에 직접 구입해서 먹지는 않았습니다.

회센터 앞 순천횟집

제가 들린 곳은 순천횟집이었는데, 블로그 등에서 그나마 유명한 근처 횟집도 때마침 휴무였기 때문에 일단 들어가서 식사하기로 정했습니다.

<모듬회 小 구성>

병어회
농어회
민어회

회의 양은 둘이서 먹기에 적당히 많았으며, 기본 구성 반찬도 서울과 달라 신선하게 식사를 할 수 있었습니다. 맛있는 병어회는 말로만 들었지 실제로 비린맛이 하나도 없이 고소한 병어를 처음으로 먹어본 날이기도 했습니다.

숙소가 있는 언덕

숙소의 전경입니다. 언덕에 보이는 적벽돌이 아닌 우측에 위치한 별채로 예약했습니다. 이날 본채는 다른 가족분들이 예약을 하셨었습니다.

언덕에 위치한 곳이었기 때문에 숙소에서 보이는 바다 풍경은 그야말로 최고였습니다. 아마 제가 경험한 오션뷰 중에서는 최고라는 생각이 드네요!

숙소 앞 마당에서 본 풍경

언덕에서 바다 쪽으로 바라본 풍경입니다. 숙소의 식물들과 바다가 정말 잘 어울려서 기분이 좋아질 정도였습니다.

숙소 내부는 에어비앤비에서 더 자세하게 나와 있으니 참고하시면 될 것 같습니다.

그리고 이 날 낚시도 조금 즐겨봤습니다.

숙소 앞 도로

집 앞도 바다지만, 차가 많이 지나다녀서 위의 사진에서 보이는 갯바위 쪽으로 이동하여 했습니다. 낮고 완만한 갯바위라 생각보다 위험하지는 않았습니다.

평일이라 그런지는 모르겠지만, 고흥에서 저를 제외하고는 낚시하시는 분을 못봤네요.

원투대 하나만 가지고 왔을 뿐더러 초보이기 때문에 일단 던져봤는데 생각보다 활발한 입질에 깜짝 놀랄 정도였습니다.

보리멸

이날 잡힌 물고기는 다수의 보리멸과 복어였습니다. 좀 더 다양한 물고기를 보고 싶었지만 아쉬웠습니다. 낚시는 1시간정도 밖에 못했거든요. 낚시를 시작하자마자 날씨가 흐려지더니 비가 내리기 시작했습니다.

정말 낚시대를 던지고 1분 내외로 입질이 계속되었습니다. 그래서 짧은 시간이었지만 생각보다 많은 조과를 올릴 수 있었습니다.

보리멸 손질

잡은 보리멸은 이렇게 깔끔하게 손질해서 회로 만들어 먹었습니다. 탄탄하지 않은 식감이었지만, 부드러웠고 비린내가 없어서 괜찮았네요. 보리멸은 회도 뭐 괜찮지만 개인적으로 튀김으로 만들어 먹으면 훨씬 맛있을 것 같습니다.

이 밖에도 로컬의 음식집들도 괜찮았고 차로 조금만 이동하면 보이는 또다른 숙소들도 좋아보였고, 사람 손을 타지 않은 낚시 포인트들이 많았기에 아주 만족스러운 여행이었습니다.

마을에서는 낚시배를 운영하시는 분들도 많았기 때문에 좀 더 전문적으로 낚시를 즐겨보실 분은 배를 타는 것을 추천드리겠습니다.

저는 소소하게 집앞에서 낚시해서 잡아서 먹는 것을 좋아합니다

이 포스팅을 시작으로 더 세세하고 힐링하기 좋은 숙소를 더 모으려고 합니다. 읽어주셔서 감사합니다!

ZeroSSL을 통한 인증서 발급 가이드 - 까먹는 개발자

하루정도 — Fri, 6 Sep 2024 13:57:15 +0900

SSL 발급을 진행하는 사이트는 여러 곳이 존재하지만, 저한테는 사용하기 편하기 때문에 우선적으로 ZeroSSL 사이트를 통해 SSL 인증서 발급을 진행해보도록 하겠습니다.

https://zerossl.com/

Free SSL Certificates and SSL Tools - ZeroSSL

zerossl.com

해당 사이트의 가격 정보입니다.

[그림 1-1]

저는 Basic 플랜을 사용하기에 90일 인증서가 무제한이며, 1년 인증서는 3개 까지 발급이 가능합니다. 또한 무료로 사용하고자 하시는 분들은 Free 플랜을 사용하시면 되며, 3개의 90일 인증서를 사용하실 수 있습니다.

1. 인증서 발급

로그인을 하고 들어가시면 그림 [그림 1-2]처럼 Dasboard와 Certificates, Developer 항목을 볼 수 있습니다.

[그림 1-2]

인증서 발급은 좌측 상단에 보이는 New Certificate 버튼을 통해 진행할 수 있으며, 이미 발급된 인증서와 만료 예정인 인증서는 Certificates 메뉴에서 확인할 수 있습니다. 또한 만료 예정인 항목은 Renew 버튼으로 표시되며 새로 발급을 진행할 수 있습니다.

신규 인증서 발급은 아래와 같은 절차로 진행할 수 있습니다.

[그림 1-3]

New Certificate버튼을 누르고 나온 화면에서 발급을 원하는 도메인을 입력해줍니다. 저는 테스트용으로 구매해놓은 도메인을 입력했습니다. 입력 후 Next Step을 눌러 다음 화면으로 갑니다.

[그림 1-4]

다음 화면은 90일 또는 1년 인증서의 선택화면입니다. 사용 중인 플랜에 따라 알맞게 선택해주시면 됩니다. 위에서 설명한 것처럼 무료 플랜은 90일 인증서로 선택하시면 됩니다.

[그림 1-5]

다음 화면에서는 CSR & Contact 화면인데 그대로 Auto-Generate CSR이 활성화된 상태로 다음 단계로 넘어가도록 하겠습니다. 그 다음 화면은 현재 선택 가능한 플랜을 보여주는 화면이기 때문에 생략하도록 하겠습니다.

[그림 1-5]

이제 인증서에 대한 보유 인증절차가 진행됩니다. 방법은 Email, DNS, HTTP File Upload가 있으며, 해당 인증서로 구글이나 하이웍스같은 이메일을 보유하셨다면 간편하게 이메일 인증을 진행하시면 되지만, 저는 아무것도 없는 도메인이기 때문에 DNS로 진행해보도록 하겠습니다.

[그림 1-6]

DNS (CNAME) 라디오 버튼을 누르게 되면 [그림 1-6]과 같은 화면이 보입니다. 도메인을 발급 받은 사이트에서 해당 레코드를 추가하라는 내용입니다. 제가 도메인을 발급받은 사이트는 Godaddy이기 때문에 도메인의 DNS 관리 화면에 아래 [그림 1-7]과 같이 입력을 해보겠습니다.

[그림 1-7]

그림[1-6]에서 Name항목에는 _C59118D5AB312F29AEBB9F8E0AA21E70.forget-developer.com 을 넣으라고 보여지지만 실제로 레코드 입력 시에는 .forget-developer.com 부분을 제거하고 넣으셔야 등록이 될 것입니다. 값은 그대로 복사해서 넣어주시면 됩니다.

[그림 1-8]

마지막 화면입니다. 정상적으로 레코드를 입력하셨다면 Verify Domain버튼을 클릭하여 인증 결과를 확인하실 수 있습니다. 인증이 정상적으로 되었다면 아래 [그림 1-9]와 같이 인증서 생성중이라는 화면이 뜨게됩니다. 제 경험에 따르면 무료 플랜 사용일 경우 약 10~30분 정도의 시간이 걸렸던 것으로 기억됩니다. 추후 Basic 플랜을 사용했을 경우에는 약 1분 안쪽으로 생성되었습니다.

[그림 1-9]

[그림 1-10]

발급이 완료되었다면 [그림 1-10]과 같이 인증서를 다운로드 할 수 있습니다. 여러가지 서버 타입에 따른 포맷을 제공하지만 저는 보통 Default 포맷을 사용합니다. Default 포맷의 경우 다운로드 후 ca_bundle.crt, certificate.crt, private.key파일을 확인하실 수 있습니다.

2. 인증서 검증

앞서 진행한 https://ookm1020.tistory.com/8 글에서 https를 설정했을 때, 위에서 진행한 인증서가 적용되지 않았던 경우가 있었습니다. 이에 대해 인증서를 검증하는 방법을 공유해드립니다.

https://whatsmychaincert.com/

What's My Chain Cert?

Choose your software: Apache nginx Lighttpd stunnel titus Dovecot 2 Postfix Prosody Contribute config templates Postfix smtp_tls_security_level = may smtpd_tls_security_level = may smtpd_tls_key_file = /path/to/example.com.key smtpd_tls_cert_file = /path/t

whatsmychaincert.com

사이트에서 발급 받은 도메인을 입력하면 올바른지에 대한 정보와 올바르지 않을 경우 체인 인증서를 다운로드할 수 있게 해줍니다. 다운로드 받은 인증서를 다시 서버에 적용했을 때 SSL이 정상적으로 작동했습니다.

#마치며

제 글이 도움이 되었기를 바라며 문제가 있거나 궁금한 점이 있으신 분들은 언제든지 질문해주세요. 읽어주셔서 감사합니다 :)

한개의 EC2 인스턴스와 도메인으로 여러 개의 웹서비스를 하기 위한 프록시 설정 가이드 - 까먹는 개발자

하루정도 — Wed, 4 Sep 2024 18:04:30 +0900

하나의 인스턴스에서 다수의 웹서비스 및 API 서버를 나누어 운영하고 싶을 때 EC2 인스턴스의 프록시 설정 방법에 대해서 설명합니다.

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

필요한 만큼 이용할 수 있는 것은 물론 필요에 따라 몇 분 만에 확장 또는 축소할 수 있습니다. 자세히 알아보세요.

aws.amazon.com

기본적으로 AWS EC2와 Node.js Express 프로젝트가 준비된 상황에서 이 글을 참고해주시면 감사하겠습니다.

[그림 1-1]

AWS EC2는 [그림 1-1]대로 생성한 후, 아래의 명령어를 통해 환경을 세팅해줬습니다.

sudo apt-get update

sudo apt-get install nodejs

sudo apt-get install npm

이후 프로젝트를 생성합니다(프로젝트의 경로는 임의로 하셔도 무방합니다).

sudo su

npm install express-generator -g

express --view=ejs multi-proxy

express --view=ejs multi-proxy-sub

생성한 multi-proxy, multi-proxy-sub 프로젝트가 동작하는 지 확인하기 위해 [그림 1-2]와 같이 인바운드를 설정합니다.

[그림 1-2]

인스턴스의 아이피와 포트를 브라우저의 주소창에 입력하여 Express 웹서버의 동작 확인.

[그림 1-3]

인스턴스 접속 및 기본 설정을 해보지 않은 분은 https://ookm1020.tistory.com/4 글을 보시면 보다 상세한 설명을 보실 수 있습니다.

두 개의 프로젝트를 우선 동작시켜놔야 하기 때문에 PM2를 설치하겠습니다.

sudo npm install pm2 -g

pm2 start ./bin/www --watch

이제 생성한 각 프로젝트의 폴더로 이동하여 pm2 start 명령어를 통해 실행해줍니다. --watch 옵션은 코드가 변경되었을 때 자동적으로 서버를 재시작 해주는 옵션이니 참고바랍니다.

또한 Express 프로젝트의 기본 포트는 3000으로 되어 있기 때문에 제가 생성한 multi-proxy-sub의 www파일을 편집기를 통해 수정해야 합니다. 아래의 [그림 1-4]처럼 3001번 포트로 열리도록 코드를 수정해주었습니다.

[그림 1-4]

수정을 하셨다면 이제 pm2로 두개의 프로젝트를 실행하겠습니다. 각 프로젝트의 폴더로 이동하여 명령어를 입력합니다.

cd multi-proxy

pm2 start ./bin/www --watch

cd multi-proxy-sub

pm2 start ./bin/www --watch

아래의 명령어를 통해 [그림 1-5]와 같이 정상적으로 동작되고 있는지 확인할 수 있습니다.

pm2 list

[그림 1-5]

이제 브라우저의 주소창에 아이피+3000포트와 3001번 포트를 입력했을 때 두 개의 웹서버가 동작되는 것을 확인합니다. Express 옆의 프로젝트 명은 구분하기 쉽게 하기 위해 views/index.ejs에 임의로 텍스트를 추가했습니다.

[그림 1-6]

이제 도메인에 EC2를 연결합니다. 아래의 [그림 1-7]은 고대디 DNS 설정이며, @는 원래 도메인을 가리키고 sub는 서브도메인으로 지정한 것을 확인할 수 있습니다. 도메인의 정확한 연결에는 일정 시간이 필요할 수도 있으니 바로 안된다고 해도 최대 1일에는 정상적으로 동작하니 참고하여 주시기 바랍니다.

도메인이 제대로 연결되었는지 확인하기 위해 브라우저를 통해 확인합니다. 기존에 아이피+포트로 입력했던 것 대신 도메인+포트를 통해 확인하시면 됩니다.

개인이 사용할 것이라면 도메인+포트 형식으로 입력하면 문제가 없지만, 다수가 사용할 상황이라면 도메인만 입력했을 경우 원하는 서비스가 로드되는 것이 좋기 때문에 도메인 이름에 따라 라우팅되도록 nginx 프록시를 설정하도록 하겠습니다.

우선 nginx를 설치합니다.

sudo apt-get install nginx

설치가 완료되었다면 /etc/nginx/sites-enabled/default를 수정해주어야 합니다. 편하신 편집기를 통해 진행하시면 됩니다.

server {
    listen 80;
    server_name forget-developer.com;

    location / {
        proxy_pass http://172.31.5.123:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen 80;
    server_name sub.forget-developer.com;

    location / {
        proxy_pass http://172.31.5.123:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

위의 내용을 추가하고 nginx를 재시작 합니다.

sudo service nginx restart

이제 브라우저를 통해 확인하시면 해당 도메인 별로 각각의 서비스가 동작하는 것을 확인 할 수 있습니다.

만약 https연결을 하고 싶을 때는 아래의 예제를 통해 진행할 수 있습니다.

server {
    listen 443 ssl;
    server_name forget-developer.com;

    ssl_certificate /etc/ssl-keys/발급받으신 .crt파일;
    ssl_certificate_key /etc/ssl-keys/발급받으신 .key파일;
    ssl_protocols TLSv1.1 TLSv1.2;

    location / {
        proxy_pass http://172.31.5.123:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen 443 ssl;
    server_name sub.forget-developer.com;

    ssl_certificate /etc/ssl-keys/발급받으신 .crt파일;
    ssl_certificate_key /etc/ssl-keys/발급받으신 .key파일;
    ssl_protocols TLSv1.1 TLSv1.2;

    location / {
        proxy_pass http://172.31.5.123:3001;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

server {
    listen 80;
    server_name forget-developer.com sub.forget-developer.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

#마치며

제 글이 도움이 되었기를 바라며 문제가 있거나 궁금한 점이 있으신 분들은 언제든지 질문해주세요. 읽어주셔서 감사합니다 :)

GitHub과 Node.js Express를 이용한 자동배포 환경 만들기(feat. AWS-EC2, AWS CodeDeploy, AWS CodePipeline) 3편 - 까먹는 개발자

하루정도 — Wed, 14 Apr 2021 15:06:43 +0900

마지막 3편에서는 PM2와 CodePipeline을 활용하여 GitHub 저장소에 이벤트가 발생하면 자동으로 배포가 되는 과정에 대해서 설명하겠습니다.

https://aws.amazon.com/ko/codepipeline/

AWS CodePipeline | 지속적 통합 및 지속적 전달

AWS CodePipeline은 특정한 요구에 맞게 손쉽게 확장할 수 있습니다. 사전 구축된 플러그인 또는 자체 사용자 지정 플러그인을 릴리스 프로세스 중 원하는 단계에 사용할 수 있습니다. 예를 들면 GitHu

aws.amazon.com

1. CodePipeline 시작하기

AWS 서비스에서 CodePipeline 시작하기 페이지에서 <파이프라인 생성> 버튼을 클릭합니다.

[ 그림 1-1 ] CodePipeline - 시작하기

파이프라인 설정 선택에서는 이름을 입력하고 서비스 역할은 새 서비스 역할을 선택해주면 됩니다.

[ 그림 1-2 ] CodePipeline - 파이프라인 설정 선택

소스 스테이지 추가에서는 OAuth를 통해 GitHib과 연결할 수 있도록 버전 1을 선택했고, 인증 절차를 통해 연결을 해주시면 됩니다.

[ 그림 1-3 ] CodePipeline - 소스 스테이지 추가 1

연결을 했다면 아래 그림 처럼 본인의 저장소와 브랜치를 설정해주고, GitHub 웹후크를 선택한 후 <다음> 버튼을 클릭합니다.

[ 그림 1-4 ] CodePipeline - 소스 스테이지 추가 2

저는 Node Express기반 프로젝트를 사용하기 때문에 따로 빌드 스테이지는 추가하지 않았습니다.

[ 그림 1-5 ] CodePipeline - 빌드 스테이지 추가

배포 스테이지에서는 CodeDeploy를 선택했고, 2편에서 설정한 배포 애플리케이션 및 배포그룹을 선택했습니다.

[ 그림 1-6 ] CodePipeline - 배포 스테이지 추가

마지막 검토 화면에서는 설정한 내용들을 마지막으로 확인 후 <파이프 라인 생성> 버튼을 눌러 완료하시면 됩니다.

CodeDeploy와 CodePipeline이 정상적으로 작동하면 다음과 같이 배포 성공이라는 문구를 확인할 수 있습니다.

[ 그림 1-7 ] CodePipeline - 배포 성공

2. 배포 확인 및 PM2 설치

이제 연결된 GitHub 저장소에 push를 합니다. push를 하면 파이프라인 화면에서 정상적으로 배포 과정이 진행되고 있는 것을 확인할 수 있습니다.

[ 그림 2-1 ] 터미널

push를 하게 되면 [ 그림 2-2 ] 처럼 커밋 메세지 및 진행과정을 확인할 수 있습니다.

[ 그림 2-2 ] CodePipeline

예를 들어 html파일만 수정했다면 서버를 재시작하지 않아도 브라우저를 새로고침만 하면 반영이 되겠지만, 서버 코드를 수정했다면 재시작을 해주어야 반영이 됩니다.

따라서 EC2에 PM2를 설치하여 코드가 수정이 되면 자동으로 서버를 재시작하게 하겠습니다.

설치

sudo npm install pm2 -g

시작

pm2 start ./bin/www --watch

확인

pm2 list

--watch 옵션으로 서버를 실행했으니 코드가 수정되면 자동으로 서버 재시작을 해줄겁니다. 다시 저장소에 push를 해서 확인해보겠습니다.

서버 코드 수정 후 정상적으로 반영이 되는 것을 확인할 수 있습니다.

#마치며

제 글이 도움이 되었기를 바라며 문제가 있거나 궁금한 점이 있으신 분들은 언제든지 질문해주세요. 읽어주셔서 감사합니다 :)

G메일 명함 설정

하루정도 — Tue, 13 Apr 2021 17:20:50 +0900

1. 회사 G메일에 접속하여 아래 그림과 같이 상단의 <설정> 버튼 클릭

2. 클릭하면 나오는 메뉴에서 <모든 설정 보기> 버튼 클릭

3. 서명 부분에서 이미지 버튼을 클릭하여 명함 이미지 업로드

4. 업로드 후 서명 기본값 <명함>으로 선택 후 맨 하단의 <변경 사항 저장> 버튼 클릭하여 완료

GitHub과 Node.js Express를 이용한 자동배포 환경 만들기(feat. AWS-EC2, AWS CodeDeploy, AWS CodePipeline) 2편 - 까먹는 개발자

하루정도 — Mon, 12 Apr 2021 18:26:47 +0900

2편에서는 AWS EC2에 CodeDeploy를 이용하여 배포하는 방법에 대해 알아보겠습니다.

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

제조 AWS를 활용한 Siemens의 에너지, 의료 서비스, 제조 분야 혁신 Siemens가 AWS를 사용하여 어떻게 문화를 바꾸고 혁신을 장려하며 비즈니스 성과를 창출했는지 알아보세요. 자세히 알아보기 업종

aws.amazon.com

1. EC2 - IAM 역할 생성 및 적용

먼저 EC2에서 사용할 IAM 역할을 생성해야합니다. AWS IAM서비스로 이동하여 왼쪽 메뉴트리에 있는 역할 메뉴를 클릭합니다. 그리고 아래 [ 그림 1-1 ]에서 표시되어 있는 <역할 만들기>를 클릭합니다.

[ 그림 1-1 ] IAM -> 역할

역할만들기의 1페이지에서는 신뢰할 수 있는 유형의 개체 선택에서 default로 선택되어 있는 AWS 서비스가 클릭되어 있는 지 확인하고, 일반 사용 사례에서 EC2 항목을 선택한 후 다음 버튼을 누릅니다.

[ 그림 1-2 ] IAM - 역할 만들기 1페이지

역할만들기의 2페이지에서는 권한 정책을 검색하여 연결해주어야 합니다. 아래 3가지 항목을 검색해서 체크한 후 다음 버튼을 눌러주세요.

•AWSCodeDeployFullAccess

•AmazonS3FullAccess

•AWSCodeDeployRole

•CloudWatchLogsFullAccess

[ 그림 1-3 ] IAM - 역할 만들기 2페이지 정책 선택

역할만들기의 3페이지에서는 사용할 임의의 키와 값을 입력합니다.

[그림 1-4 ] IAM - 역할 만들기 3페이지 - 키, 값 입력

마지막 역할만들기의 4페이지에서는 역할 이름, 역할 설명 및 2페이지에서 선택한 정책들이 나와있는 지 확인하고 <역할 만들기> 버튼을 눌러 완료하시면 됩니다.

[ 그림 1-5 ] IAM - 역할 만들기 4페이지 - 역할 이름 및 설명 정책확인

이렇게 만들어 둔 EC2에서 사용할 IAM 역할 만들기가 완료되었습니다. 이 역할을 적용하기 위해 EC2 대시보드로 이동합니다.

EC2 리스트가 보이면 해당 인스턴스에서 마우스 우클릭을 하면 다음과 같은 메뉴가 보입니다. <보안 -> IAM 역할 수정> 을 클릭합니다.

[ 그림 1-6 ] EC2 대시보드 - IAM 역할 수정

IAM 역할 수정 페이지에서 IAM 역할 선택 드롭다운을 누르면 아까 전에 만든 <node-deploy-pipe-ec2-role>이 보입니다. 이것을 선택하고 저장 버튼을 누릅니다.

[ 그림 1-7 ] EC2 IAM 역할 수정

다시 EC2 대시보드 리스트로 돌아와서 해당 인스턴스를 선택하고 아래 보안 탭을 누르면 방금 전 수정한 역할이 반영되어 있는 것을 확인할 수 있습니다.

[ 그림 1-8 ] EC2 대시보드 - 보안 탭

EC2 역할 지정에 관해서는 최초에 EC2를 생성할 때 지정할 수도 있습니다. 다만 이미 EC2를 먼저 생성한 경우가 대부분이라 생각하기 때문에 이번에는 이미 만들어진 인스턴스의 역할을 수정하는 방식으로 진행했습니다.

2. CodeDeploy 역할 및 애플리케이션 생성

EC2의 역할은 이미 적용했으니 CodeDeploy에 적용할 역할도 만들어야 합니다. 다시 IAM 서비스 페이지로 이동해서 역할 만들기 버튼을 누릅니다.

[ 그림 2-1 ] IAM -> 역할

역할 만들기 1페이지에서 AWS 서비스, 일반 사용 사례에서 CodeDeploy, 아래 쪽 사용 사례 선택에서 CodeDeploy를 선택하고 다음 버튼을 누릅니다.

[ 그림 2-2 ] IAM - 역할 만들기 1페이지

역할 만들기 2페이지에서는 따로 검색하지 않고 default로 선택되어 있는 AWSCodeDeployRole을 확인할 수 있습니다. 다음 버튼을 누릅니다.

[ 그림 2-3 ] IAM - 역할 만들기 2페이지

역할 만들기 3페이지에서는 사용할 임의의 키와 갑을 입력하고 다음 버튼을 누릅니다.

[ 그림 2-4 ] IAM - 역할 만들기 3페이지

역할 만들기 4페이지에서는 역할 이름, 역할 설명 및 정책에 <AWSCodeDeployRole>이 선택되어 있는 지 확인 후 완료 버튼을 누릅니다.

[ 그림 2-5 ] IAM - 역할 만들기 4페이지

이렇게 CodeDeploy 배포 생성 시 사용할 역할 만드는 것을 완료했습니다. 이제 AWS 서비스의 CodeDeploy로 들어갑니다.

왼쪽 메뉴 트리에 있는 배포 > 시작하기 > 애플리케이션 생성 버튼을 누릅니다.

[ 그림 2-6 ] CodeDeploy - 배포 생성

사용할 애플리케이션 이름 입력 및 컴퓨팅 플랫폼 - EC2/온프레미스를 선택한 후 <애플리케이션 생성> 버튼을 눌러 완료합니다.

[ 그림 2-7 ] CodeDeploy - 애플리케이션 생성

애플리케이션이 생성되면 다음과 같은 페이지로 이동합니다.

[ 그림 2-8 ] CodeDeploy - 배포 > 애플리케이션 세부정보

CodeDeploy 애플리케이션 생성이 완료되었습니다.

3. CodeDeploy Agent 사용자 추가 및 설치

1, 2번 항목에서는 EC2와 CodeDeploy 각각의 항목에 대해서만 설정 및 생성을 했습니다. 이번에는 CodeDeploy에서 발생한 이벤트를 EC2가 수신할 수 있도록 CodeDeploy Agent를 설치합니다.

우선 사용자 추가를 위해 IAM 서비스의 그룹 페이지로 이동해서 <새로운 그룹 생성> 버튼을 누릅니다.

[ 그림 3-1 ] IAM - 그룹

그룹 이름을 입력하고 다음 버튼을 누릅니다.

[그림 3-2 ] IAM - 그룹 생성 단계 1

정책 연결에서는 아무것도 선택하지 않습니다. 추가로 인라인 정책을 입력하여 진행하겠습니다.

[ 그림 3-3 ] IAM - 그룹 생성 단계 2

마지막 검토 화면에서 입력한 정보들을 확인 후 그룹 생성 버튼을 눌러 완료합니다.

[ 그림 3-4 ] IAM - 그룹 생성 단계 3

단계 2 - 정책 연결을 생략했기 때문에 생성한 그룹을 클릭하여 권한 - 인라인 정책 생성을 클릭합니다.

[ 그림 3-5 ] IAM - 선택 그룹 세부정보

그룹 권한 설정에서 사용자 지정 정책 라디오 버튼을 선택하고 우측에 <선택> 버튼을 누릅니다.

[ 그림 3-6 ] IAM - 그룹 권한 설정

<선택> 버튼을 누르면 정책 검토 편집기가 나옵니다. 여기서 사용할 임의의 정책 이름을 입력하고, 정책 문서에 다음 코드를 복사하여 붙여넣은 후 <정책 적용> 버튼을 눌러 완료합니다.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "autoscaling:*",
                "codedeploy:*",
                "ec2:*",
                "lambda:*",
                "elasticloadbalancing:*",
                "s3:*",
                "cloudwatch:*",
                "logs:*",
                "sns:*"
            ],
            "Resource": "*"
        }
    ]
}

[ 그림 3-7 ] IAM - 정책 검토

정상적으로 정책이 적용되었다면 아래와 같이 권한 탭에 방금 생성한 정책 이름이 추가된 것을 확인할 수 있습니다.

[ 그림 3-8 ] IAM - 그룹 세부정보 > 권한 탭

다음 단계로 방금 생성한 <node-deploy-pipe-group> 그룹에 사용자를 추가해야 합니다. 아직 사용자를 만들지 않았기 때문에 먼저 왼쪽 메뉴트리의 사용자를 클릭하고 <사용자 추가> 버튼을 누릅니다.

[ 그림 3-9 ] IAM - 사용자 추가

사용자 추가 단계 1에서는 사용자 이름과 AWS 액세스 유형을 선택합니다.

[ 그림 3-10 ] IAM - 사용자 추가 단계 1

사용자 추가 단계 2에서는 그룹에 사용자 추가를 클릭하고 위에서 생성한 <node-deploy-pipe-group>를 선택합니다.

[ 그림 3-10 ] IAM - 사용자 추가 단계 2

사용자 추가 단계 3에서는 사용할 임의의 키와 값을 입력합니다.

[ 그림 3-11 ] IAM - 사용자 추가 단계 3

사용자 추가 단계 4에서 앞서 입력한 정보들이 제대로 되었는 지 확인 후 생성 버튼을 누릅니다.

[ 그림 3-12 ] IAM 사용자 추가 단계 4

생성이 완료되면 액세스 키 ID 및 비밀 액세스 키가 표시되고, 이 정보들을 .csv파일로 다운로드 받을 수 있는 화면이 나옵니다. 이 화면은 다시 나오지 않기 때문에 반드시 .csv을 다운로드 받아두시길 바랍니다.

이렇게 정상적으로 CodeDeploy에서 사용할 사용자 생성이 완료되었습니다.

이제 EC2에 원격 접속하여 CodeDeploy Agent를 설치해보겠습니다.

•awscli 설치

sudo apt install awscli

•aws configure 설정

sudo aws configure

AWS Access Key ID [None]: 다운로드 받은 .csv파일에서 Access key ID 항목 입력

AWS Secret Access Key [None]: 다운로드 받은 .csv파일에서 Secret access key 항목 입력

Default region name [None]: ap-northeast-2

Default output foramt [None]: json

•agent 설치파일 다운로드

wget https://aws-codedeploy-ap-northeast-2.s3.amazonaws.com/latest/install

•agent 설치파일 권한 추가

chmod +x ./install

•ruby 설치 ( agent 설치에는 ruby가 필요합니다)

sudo apt-get install ruby

•agent 설치

sudo ./install auto

• agent 설치확인

sudo service codedeploy-agent status

[ 그림 3-13 ] codedeploy-agent 실행중

•인스턴스 부팅 시 codedeploy-agent 자동시작

sudo vim /etc/init.d/codedeploy-startup.sh

#!/bin
sudo service codedeploy-agent restart

•스트립트 파일 실행권한 추가

sudo chmod +x /etc/init.d/codedeploy-startup.sh

이렇게 CodeDeploy Agent 사용자ㅑ 추가 및 설치 작업이 완료되었습니다.

4. 프로젝트 설정

우리는 1편(https://ookm1020.tistory.com/4)에서 이미 프로젝트를 배포한 바 있습니다. 따라서 프로젝트의 설치 과정은 생략합니다.

프로젝트의 root 경로에 아래 내용을 포함한 파일을 하나 생성합니다. 저는 이미 1편에서 git pull을 받아 프로젝트를 구성했기 때문에 로컬에서 작업 -> GitHub push -> EC2 pull 형식으로 반영했습니다.

•appspec.yml 파일추가

version: 0.0
os: linux
files:
  - source:  /
    destination: /home/ubuntu/build/

CodeDeploy가 배포하게 될 위치를 build폴더로 잡아두었기 때문에 해당 경로에 build 폴더를 생성합니다.

•build 폴더 생성

mkdir /home/ubuntu/build

이것으로 프로젝트 설정은 완료되었습니다.

5. CodeDeploy 배포 생성

EC2 생성 및 설정, CodeDeploy 애플리케이션 생성 및 IAM 설정까지 모든 준비가 완료되었습니다. 남은 작업은 EC2와 CodeDeploy를 연결해주는 일만 남았습니다. 조금만 더 힘내시기 바랍니다.

배포 생성에 앞서 기존에 생성한 EC2의 태그를 설정합니다. 이를 설정하는 이유는 배포 생성 시 CodeDeploy가 인스턴스를 식별할 때 이 태그를 이용하기 때문입니다. 물론 인스턴스 생성 시 설정할 수도 있지만, 우리가 진행하는 과정에서는 설정하지 않고 넘어갔기 때문에 지금 설정하는 것입니다.

AWS 서비스의 EC2 대시보드로 이동해 해당 인스턴스를 클릭하면 하단에 세부정보가 나오는데 그 중 태그 탭을 누릅니다.

[ 그림 5-1 ] EC2 - 대시보드 - 인스턴스 상세정보

태그 관리 버튼을 클릭하여 들어가면 태그를 입력할 수 있는 창이 나오고 사용할 임의의 키와 값을 입력한 후 저장하면 됩니다.

[ 그림 5-2 ] EC2 - 인스턴스 태그 관리

태그 설정이 끝났다면 다시 AWS 서비스의 CodeDeploy 페이지로 이동합니다.

CodeDeploy 애플리케이션은 이미 생성해두었습니다. 리스트에서 클릭합니다.

[ 그림 5-3 ] CodeDeploy - 애플리케이션 목록

애플리케이션의 상세화면에서 배포 그룹 생성을 클릭합니다.

[ 그림 5-4 ] CodeDeploy - 애플리케이션 상세정보

배포 생성화면에는 다양한 설정들이 있습니다. 우리는 기초적으로 필수적인 부분만 변경하도록 하겠습니다.

배포 그룹 이름과, 서비스 역할을 선택합니다. 서비스 역할은 앞서 IAM 서비스에서 CodeDeploy용으로 만들었는데 해당 태그 값이 리스트를 클릭하면 노출됩니다.

[ 그림 5-5 ] CodeDeploy - 배포 그룹 생성

배포유형은 Default 그대로 현재 위치를 선택합니다.

[ 그림 5-6 ] CodeDeploy - 배포 그룹 생성

환경 구성은 Amazon EC2 인스턴스를 체크하고, 위에서 EC2 인스턴스의 태그 값을 입력해놓았기 때문에 입력창을 클릭하면 리스트로 해당 인스턴스의 태그 값이 노출됩니다. 만약 리스트에 보이지 않는다면 다시 한 번 EC2 인스턴스의 태그 값을 확인하시길 바랍니다.

[ 그림 5-7 ] CodeDeploy - 배포 그룹 생성

로드 밸런서는 필수 값은 아니지만, 저는 일부러 비활성화를 해둔 상태입니다.

[ 그림 5-8 ] CodeDeploy - 배포 그룹 생성

배포 그룹 설정을 다 했다면 생성 버튼을 눌러 완료합니다.

완료했다면 다음과 같은 화면이 나올텐데 여기서 배포 생성 버튼을 누릅니다.

[ 그림 5-9 ] CodeDeploy - 애플리케이션 상세정보

배포 설정에서는 <애플리케이션을 GitHub에 저장> 항목을 선택합니다.

선택 후에는 GItHub과 계정을 연결해야 하는데, 미리 연결해둔 GitHub의 계정이 리스트에 노출됩니다.

처음 하시는 거라면 <GitHub 토큰 이름> 항목 아래에 있는 설명처럼 계정을 입력하면 <GitHub에 연결> 버튼이 활성화 되는데 이를 눌러 OAuth2 인증 절차를 거치면 연동이 됩니다.

그 다음 연동할 저장소의 이름을 입력하고 배포를 하고 싶은 커밋 ID를 입력하시면 됩니다.

[ 그림 5-10 ] CodeDeploy - 배포 설정

추가 배포 동작 설정에서는 배포 실패를 선택한 후 배포만들기를 눌러 완료하시면 됩니다.

[ 그림 5-11 ] CodeDeploy - 배포 설정

배포가 정상적으로 이루어지면 다음과 같이 화면에서 배포 성공이라는 문구를 확인할 수 있습니다.

[ 그림 5-12 ] CodeDeploy - 배포 성공

원격 접속을 하면 appspec.yml에서 지정한 경로에 성공적으로 배포가 되었음을 확인할 수 있습니다.

build 폴더로 이동해서 프로젝트를 실행하겠습니다.

cd build

npm install

npm start

브라우저를 통해 인스턴스의 IP 및 DNS로 접속을 하면 성공적으로 프로젝트가 실행됐음을 확인할 수 있습니다.

고생하셨습니다.

하지만 여기까지 한 것만으로는 저장소가 업데이트 되었을 때, 자동적으로 CodeDeploy가 EC2에 코드를 업데이트 해주지 않습니다. 이것을 하기 위해서는 CodePipeline을 이용해서 해결이 가능합니다.

CodePipeline은 3편에서 이어서 설명하도록 하겠습니다. 긴글 읽어주셔서 정말 감사합니다.

이 글은 jojoldu.tistory.com/281?category=777282 을 참고하여 작성되었습니다 :)

1) AWS로 배포하기 시리즈 - 1. Code Deploy 사용하기

AWS로 전체 시스템 구축해야 할 일이 생겨 AWS 배포 환경 시리즈를 시작합니다. 시리즈 과정은 CodeDeploy -> Code Pipeline -> ELB & Auto Scaling Group -> Beanstalk 으로 진행될 예정입니다. 저는 아래와 같은..

jojoldu.tistory.com

GitHub과 Node.js Express를 이용한 자동배포 환경 만들기(feat. AWS-EC2, AWS CodeDeploy, AWS CodePipeline) 1편 - 까먹는 개발자

하루정도 — Sun, 11 Apr 2021 10:53:38 +0900

1편에서는 AWS EC2에 Node.js Express 프로젝트를 배포하는 과정에 대해서 설명합니다.

https://aws.amazon.com/ko/

클라우드 서비스 | 클라우드 컴퓨팅 솔루션| Amazon Web Services

aws.amazon.com

http://github.com

GitHub: Where the world builds software

GitHub is where over 56 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and feat...

github.com

https://expressjs.com/ko

Express - Node.js 웹 애플리케이션 프레임워크

Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save

expressjs.com

기본적으로 AWS, GitHub Repository(저장소)와 Node.js Express 프로젝트를 생성한 상태에서 이 글을 참고하여 주시면 감사하겠습니다.

1. AWS EC2 생성하기

: 상단의 서비스를 클릭하여 컴퓨팅 하위 목록의 < EC2 >를 클릭하여 아래와 같은 화면이 나왔다면 < 인스턴스 시작 >을 눌러 EC2의 생성을 시작합니다.

[그림 1-1 ] AWS > 서비스 > EC2 > EC2 대시보드

< 인스턴스 시작 >을 누르면 다음과 같은 화면이 나옵니다. Amazon Linux, Ubuntu, SUSE, Red Hat 등이 있지만, 이번 글에서는 Ubuntu로 진행하겠습니다. Ubuntu는 20.04 버전과 18.04 버전이 있는데 이 중에서 18.04 버전을 선택합니다. 그 이유는 추후에 설치 하게 될 code Deploy agent에 관련해서 20.04 버전은 지원하지 않기 때문에 그렇습니다.

[ 그림 1-2 ] EC2 대시보드 > 인스턴스 선택

여러가지의 인스턴스들이 있습니다. 상황에 맞게 알맞는 인스턴스를 선택하여 진행하시면 됩니다. 저는 프리 티어를 이용하기 위해 t2.micro를 선택했습니다. 인스턴스 세부구성이 있지만 글을 진행함에 따라 하나씩 설정하기 위해 바로 < 검토 및 시작 >버튼을 눌러 진행하겠습니다.

[ 그림 1-3 ]

선택한 인스턴스 및 OS 버전을 확인하고 < 시작하기 >버튼을 누릅니다.

[ 그림 1-4 ]

EC2에 원격 접속하기 위해 필요한 PEM키를 다운로드 받은 후 < 인스턴스 시작 >버튼을 눌러 인스턴스 생성을 완료합니다.

[ 그림 1-5 ]

정상적으로 생성이 완료되었다면 인스턴스 리스트에 실행중인 인스턴스가 보이게 됩니다.

[그림 1-6 ] EC2 인스턴스 > 인스턴스 메뉴

만약 인스턴스를 삭제하고 싶으면 리스트에서 마우스 우측버튼을 클릭 후, 나타나는 메뉴에서 < 인스턴스 종료 >버튼을 누릅니다. 성공적으로 종료되었다고 나오면 일정 시간이 지난 후에 리스트에서도 사라지게 됩니다.

[ 그림 1-7 ]

2. EC2 원격 접속하기

자 정상적으로 EC2도 생성이 되었고, SSH(Secure Shell Protocol)를 이용하여 원격 접속을 해보겠습니다(환경: Mac).

다운로드 받은 PEM 키는 Document/PEM키 안에 옮겨두었고, 터미널에서 해당 경로로 이동한 상태입니다. PEM 키가 위치한 곳에서 SSH를 이용하여 원격 접속을 시도합니다.

위에서는 ec2-deploy-pipe라고 PEM 키를 만들었지만, 삭제를 한 터라 다시 만들어서 현재는 node-deploy-pipe라는 .pem파일을 사용한 것이기 때문에 신경쓰지 말고 인스턴스를 생성할 때 작성하신 .pem 파일 이름으로 진행하시면 되겠습니다.

연결하기에 앞서 해당 .pem 파일에 권한을 주어야 합니다.

chmod 400 node-deploy-pipe.pem

ssh -i "node-deploy-pipe.pem" ubuntu@13.125.27.127

명령어를 입력하면 아래와 같은 경고가 나올 수도 있는데, 무시하고 yes를 입력하여 진행합니다.

아래 화면과 같이 나왔다면 성공입니다. 축하합니다 :)

[ 그림 2-1 ] EC2에 SSH를 이용하여 원격 접속한 화면

※ chmod 400 이란?

: chmod(change mod)는 파일의 권한을 변경할 수 있는 명령어입니다.

chmod [사용자] [그룹] [전체] [파일명] -> chmod [4] [0] [0] 라는 형식으로 작성되며, 400은 나만 읽기 권한이 있도록 설정한 것입니다.

위에서는 아이피 주소를 이용해서 원격 접속을 했지만, DNS를 입력해도 무방합니다. 인스턴스의 IP 주소 및 DNS는 인스턴스 ID를 클릭하면 나오는 요약 정보에서 확인하실 수 있습니다.

[ 그림 2-2 ] 인스턴스 요약 정보

3. EC2 웹서버 배포

접속을 하고 보니 서버는 정말 깔끔한 상태로 있습니다. 이제 express 프로젝트로 웹서버 구동에 필요한 것들을 설치해주도록 하겠습니다.

apt-get update부터 시작합니다.

1. apt-get update

sudo apt-get update

2. nodejs

sudo apt-get install nodejs

node --version

3. npm

sudo apt-get install npm

npm --version

4. git

sudo apt-get install git

git --version

4가지 항목을 다 설치했다면 우선 기본적인 Express 프로젝트 실행에 필요한 요소들은 다 갖추었습니다. Express Generator를 설치하여 인스턴스 자체적으로 프로젝트를 생성하는 방법도 있고, Git 저장소에서 클론을 받는 방법도 있습니다. 저는 Git 저장소에 기본적인 Express 코드를 만들어놓았기 때문에 클론을 받아오도록 하겠습니다.

git clone https://github.com/ookm1020/cli-test.git

매번 pull / push 등을 하기 위해서는 Git에 접근하기 위한 로그인 정보를 입력해야 합니다. 한 번이라면 괜찮지만 여러 번 반복되면 상당히 귀찮은 과정이기 때문에 클론 받은 폴더에서 Git Credential에 정보를 입력하고 store에 저장하도록 하겠습니다.

cd cli-test

git config --global credential.helper store

위의 명령어를 치고 pull 동작을 한 번 하게 되면 로그인 정보를 입력하게 되는데 이때 한 번 입력된 로그인 정보는 디스크에 남아 다음부터는 따로 묻지 않게 됩니다.

이제 클론 받은 프로젝트를 실행하겠습니다.

npm install

npm start

정상적으로 서버가 실행되었다면 이제 브라우저로 접속을 해봐야합니다. [ 그림 1-9 ]의 IP 주소와 DNS주소를 브라우저의 주소창에 입하면 됩니다. 하지만 인스턴스 생성 당시에 포트에 관한 설정을 전혀 건드리지 않았기 때문에 수정이 필요합니다.

아래의 보안그룹을 누릅니다.

[ 그림 3-1 ] 인스턴스 요약 > 보안 탭

접속이 안되는 이유는 아래 [ 그림 2-4 ]와 같이 인바운드 규칙이 22번 포트만 있기 때문입니다. 22번 포트는 이미 SSH 원격 접속 시 사용했던 포트입니다.

[ 그림 3-2 ] 보안그룹

웹서버는 일반적으로 http = 80, https = 443을 사용하고 있습니다. 따라서 이 두 가지는 기본적으로 추가해주고 또한 제가 실행중인 프로젝트는 3001번 포트를 사용하고 있기 때문에 3001번 포트까지 개방하도록 하겠습니다. 따로 Express 프로젝트 포트 설정을 수정하시지 않았다면 여러분은 3000번 포트를 개방하시면 되겠습니다.

[ 그림 3-3 ] 인바운드 규칙 편집

[ 그림 2-5 ]와 같이 인바운드 규칙을 추가하였다면 이제 다시 접속을 시도해봅니다. 인스턴스의 아이피 또는 DNS뒤에 포트 번호를 붙여야 합니다.

< ex >

http://13.125.27.127:3001

http://ec2-13-125-27-127.ap-northeast-2.compute.amazonaws.com:3001

그리고 브라우저에 다음과 같은 화면이 출력이 되었다면 성공하신겁니다.

[ 그림 3-4 ] Express 기본 화면

4. 포트 Redirect

[ 그림 2-5 ] 에서 우리는 80, 443, 3001번 포트의 인바운드 설정을 했습니다. 기본적으로 포트를 따로 지정하지 않고 URL만 치고 들어왔을 때 default로 80포트로 접속이 됩니다. 따라서 사용자가 80포트로 접속을 했을 때 우리의 웹서버인 3001번 포트로 바라보게 한다면 URL에 위에서 처럼 포트를 명시해주지 않아도 됩니다.

인스턴스에서 아래 명령어를 입력합니다.

sudo iptables -A PREROUTING -t nat -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 3001

이제 URL에 3001번 포트를 명시하지 않아도 접속이 잘 되는 것을 확인할 수 있습니다.

redirect 포트의 리스트는 다음 명령어로 확인이 가능합니다.

sudo iptables -t nat -L --line-numbers

[ 그림 4-1 ] iptables 리스트

만약 해당 redirect 포트를 삭제하고 싶다면 다음 명령어를 입력합니다.

sudo iptables -t nat -D PREROUTING [number]

[ 그림 4-1 ] 에서 num이라는 항목이 있습니다. 이 항목을 위의 코드 [number]에 입력하면 됩니다.

삭제를 하고 리스트 명령어를 치면 지워진 것을 확인할 수 있습니다.

이렇게 AWS의 EC2 인스턴스 생성, 원격접속, 서버 세팅, 인바운드 편집 등 1차적으로 서버 배포에 대한 모든 항목들이 완료되었습니다.

다음 편에서는 AWS의 CodeDeploy를 활용한 배포에 대해서 진행해보겠습니다.

감사합니다 :)

트레이딩 뷰 차트 소켓데이터 적용하기 - 까먹는 개발자

하루정도 — Tue, 17 Nov 2020 15:08:05 +0900

트레이딩 뷰 차트 - Technical Analysis Charts for Reactjs (2 / 2)

TradingView Chart를 연동 create-react-app에 연동 시킨 후, 데이터 베이스와 소켓 데이터를 바인딩 시키기 위한 예제입니다.

준비사항

https://github.com/ookm1020/basic-tradingview.git

지난 1편에서 소켓 모듈을 설치했기 때문에 따로 업급은 하지 않겠습니다. 각 함수들에 것은 Jon Church님의 글에 자세하게 설명이 되어 있으니 참고하시면 됩니다.

시작하기 전에-

소켓 데이터 연결을 하기에 앞서, 업비트의 오픈API를 통해서 현재 체결되는 데이터를 소켓을 통해 받아오는 서버를 켜놓고 이 예제를 진행했습니다.

WebSocket을 이용한 업비트 시세 수신을 이용하여 가상 소켓 서버를 만드신 후, 진행하시면 원활하게 테스트가 가능합니다.

데이터 포맷

업비트에서 수신되는 실시간 매칭 데이터는 다음과 같습니다.

data: {
  acc_ask_volume: 614.8915618
  acc_bid_volume: 419.11867853
  acc_trade_price: 18943312506.64586
  acc_trade_price_24h: 83406758933.7941
  acc_trade_volume: 1034.01024033
  acc_trade_volume_24h: 4599.40064738
  ask_bid: "ASK"
  change: "FALL"
  change_price: 3000
  change_rate: 0.0001641587
  code: "KRW-BTC"
  delisting_date: null
  high_price: 18420000
  highest_52_week_date: "2020-11-16"
  highest_52_week_price: 18450000
  is_trading_suspended: false
  low_price: 18207000
  lowest_52_week_date: "2020-03-13"
  lowest_52_week_price: 5489000
  market_state: "ACTIVE"
  market_state_for_ios: null
  market_warning: "NONE"
  opening_price: 18275000
  prev_closing_price: 18275000
  signed_change_price: -3000
  signed_change_rate: -0.0001641587
  stream_type: "REALTIME"
  timestamp: 1605590707860
  trade_date: "20201117"
  trade_price: 18272000
  trade_status: null
  trade_time: "052507"
  trade_timestamp: 1605590707000
  trade_volume: 0.000132
  type: "ticker"
}

트레이딩 뷰 차트에 데이터 연결

실시간 소켓 데이터는 stream.js에서 관리합니다.

폴더 구조는 다음과 같습니다.

![스크린샷 2020-11-17 오후 2.30.49](/Users/lys/Documents/MD 문서/스크린샷 2020-11-17 오후 2.30.49.png)

실질적으로 stream.js에 작성되어 있는 updateBar 함수가 차트의 캔들을 업데이트를 해주는데 해당 함수를 따로 건드리지 않고 필요한 정보만 주입하는 방식으로 진행합니다. 수정 부분 - updateBar func, socket module

기존 require방식이 마음에 들지 않아 import방식으로 변경한 부분입니다.

// api/stream.js
import historyProvider from './historyProvider.js'
// we use Socket.io client to connect to cryptocompare's socket.io stream

// 업비트에서 수신할 가상의 소켓서버와의 연결을 위해 주석처리합니다.
//var io = require('socket.io-client')
//var socket_url = 'wss://streamer.cryptocompare.com'
//var socket = io(socket_url)

import socketClient from "socket.io-client";

// 로컬에 3001로 켜져 있는 가상의 소켓서버로 소켓을 연결합니다. 예제에서는 BTC코인의 시세만 반영하기 때문에 data=KRW-BTC로 지정했습니다.
const socket = socketClient(`http://localhost:3001?data=KRW-BTC`);

.
.
.

socket.on의 코드를 가상의 소켓서버와 채널을 맞추고 data를 업비트의 데이터 포맷에 맞게 변경합니다.

// 기존 코드
socket.on('m', (e) => {
 // here we get all events the CryptoCompare connection has subscribed to
 // we need to send this new data to our subscribed charts
 const _data= e.split('~')
 if (_data[0] === "3") {
  // console.log('Websocket Snapshot load event complete')
  return
 }
 const data = {
  sub_type: parseInt(_data[0],10),
  exchange: _data[1],
  to_sym: _data[2],
  from_sym: _data[3],
  trade_id: _data[5],
  ts: parseInt(_data[6],10),
  volume: parseFloat(_data[7]),
  price: parseFloat(_data[8])
 };

 // 변경 코드
 socket.on('/ticker', (e) => {
   console.log("match data: ", e);

      const data = {
     sub_type: parseInt(0, 10),
     exchange: "BITHUMB",
     to_sym: e.code.split("-")[1], // "BTC"
     from_sym: e.code.split("-")[0], // "KRW"
     // trade_id: _data[5],
     trade_id: "",
     ts: e.timestamp / 1000, // timestamp
     volume: e.trade_volume, // 거래량
     price: e.trade_price // 가격
   };

차트에서 원하는 형식에 맞게 소켓으로 수신된 데이터로 바꿔줍니다. (간단 구현을 위해 close와 volume만 바꿨습니다.)

function updateBar(data, sub) {
 var lastBar = sub.lastBar
 let resolution = sub.resolution
 if (resolution.includes('D')) {
  // 1 day in minutes === 1440
  resolution = 1440
 } else if (resolution.includes('W')) {
  // 1 week in minutes === 10080
  resolution = 10080
 }
var coeff = resolution * 60
 // console.log({coeff})
 var rounded = Math.floor(data.ts / coeff) * coeff
 var lastBarSec = lastBar.time / 1000
 var _lastBar

if (rounded > lastBarSec) {
  // create a new candle, use last close as open **PERSONAL CHOICE**

  // 기존 코드
  _lastBar = {
   time: rounded * 1000,
   open: lastBar.close,
   high: lastBar.close,
   low: lastBar.close,
   close: data.price,
   volume: data.volume
  }

  // 변경 코드
  _lastBar = {
   time: rounded * 1000,
   open: lastBar.close,
   high: lastBar.close,
   low: lastBar.close,
   close: data.price,
   volume: data.volume
  }

 } else {
  // update lastBar candle!
  if (data.price < lastBar.low) {
   lastBar.low = data.price
  } else if (data.price > lastBar.high) {
   lastBar.high = data.price
  }

  lastBar.volume += data.volume
  lastBar.close = data.price
  _lastBar = lastBar
 }
 return _lastBar
}

/ticker 채널에서 받아오는 데이터는 위에서 언급한 데이터 포맷입니다. 또한 거래소 이름을 BITUMB로 한 이유는 현재 트레이딩 뷰 측에서 승인이 되지 않은 거래소를 사용할 수 없기 때문에 임시로 지정했습니다.

따라서 다음과 같이 index.jsx의 symbol도 변경합니다.

import * as React from "react";
import "./index.css";
import Datafeed from "./api/";

function getLanguageFromURL() {
  const regex = new RegExp("[\\?&]lang=([^&#]*)");
  const results = regex.exec(window.location.search);
  return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, " "));
}

export class TVChartContainer extends React.PureComponent {
  static defaultProps = {
    symbol: "BITHUMB:BTC/KRW",
    interval: "1",
    containerId: "tv_chart_container",
    libraryPath: "/charting_library/",
    chartsStorageUrl: "https://saveload.tradingview.com",
    chartsStorageApiVersion: "1.1",
    clientId: "tradingview.com",
    userId: "public_user_id",
    fullscreen: false,
    autosize: true,
    studiesOverrides: {},
  };

  componentDidMount() {
    const widgetOptions = {
      debug: false,
      symbol: this.props.symbol,
      datafeed: Datafeed,
      interval: this.props.interval,
      container_id: this.props.containerId,
      library_path: this.props.libraryPath,
      locale: getLanguageFromURL() || "en",
      disabled_features: ["use_localstorage_for_settings"],
      enabled_features: ["study_templates"],
      charts_storage_url: this.props.chartsStorageUrl,
      charts_storage_api_version: this.props.chartsStorageApiVersion,
      client_id: this.props.clientId,
      user_id: this.props.userId,
      fullscreen: this.props.fullscreen,
      autosize: this.props.autosize,
      studies_overrides: this.props.studiesOverrides,
      overrides: {
        "mainSeriesProperties.showCountdown": true,
        "paneProperties.background": "#fff",
        "paneProperties.vertGridProperties.color": "#E6EFF4",
        "paneProperties.horzGridProperties.color": "#E6EFF4",
        "symbolWatermarkProperties.transparency": 90,
        "scalesProperties.textColor": "#AAA",
        "mainSeriesProperties.candleStyle.wickUpColor": "#336854",
        "mainSeriesProperties.candleStyle.wickDownColor": "#7f323f"
      }
    };

    Datafeed.onReady(() => {
      const widget = (window.tvWidget = new window.TradingView.widget(widgetOptions));

      widget.onChartReady(() => {
        console.log("Chart has loaded!");
      });
    });
  }

  render() {
    return <div id={this.props.containerId} className={"TVChartContainer"} />;
  }
}

※ 2 편은 업비트의 시세 수신 API를 이용해서 간단하게 최신시세를 반영하는 예제입니다. 승인 관련 문제때문에 BITUMB의 거래소 이름으로 진행했으며, 정상적으로 트레이딩뷰 측의 신청서를 통해서 인증을 받으신 분들은 자체 거래소 이름을 작성하시면 됩니다.

※ 요즘 정신이 없네요. 많은 분들이 2편을 요청하셔서 간략하게 나마 작성해봤습니다. 너무 간략하기는 하지만, 질문 사항 있으신 분들은 댓글 또는 방명록에 작성해주시면 최대한 답변해드리겠습니다 :)

예정 사항으로는 차트의 색상 변경 및 업비트 시세 수신 가상 소켓 서버 구현 등을 생각하고 있습니다. 여유가 생기는 대로 작성해보도록 하겠습니다.. ‍♂️

감사합니다.

이 글을 작성하기 위해 Jon Church님의 글 을 참고하였습니다.

트레이딩 뷰 차트 적용하기 - 까먹는 개발자

하루정도 — Wed, 10 Jul 2019 12:05:02 +0900

트레이딩 뷰 차트 - Technical Analysis Charts for Reactjs (1 / 2)

TradingView Chart를 create-react-app에 적용시키기 위한 예제입니다.

github : https://github.com/ookm1020/basic-tradingview

준비사항

트레이딩 뷰 차트 라이브러리
create-react-app

트레이딩 뷰 차트 라이브러리 신청하기

TradingView Technical Analysis Chart 신청에서 라이브러리 신청서를 작성합니다.

라이센스 계약서를 출력하여 마지막 장의 정보를 기입한 뒤 스캔하여 첨부합니다. (※ 정보 기입 시, WEB이란 항목에는 트레이딩 뷰 차트를 사용하려고 하는 도메인을 입력해야 합니다.)
위 신청서 폼에 있는 "귀하의 웹사이트 URL. 무료 라이브러리는 오로지 퍼블릭 용도만 허용됨" 칸에는 신청서에 작성한 도메인과 일치해야 합니다.
"귀하의 개인 (회사말고) GitHub 프로화일 링크목록"이란 칸에 자신의 GitHub 주소를 넣는 이유는 트레이딩 뷰의 저장소를 접근 가능하게 해주기 때문입니다.
신청 후, 약 1~2일 안에 기입한 메일로 답장이 옵니다. 절차는 까다롭지 않으며 신경써야 할 부분은 트레이딩 뷰를 사용하려고 하는 웹 어플리케이션의 URL이 퍼블릭 한 용도여야만 한다는 점입니다. (※ 트레이딩 뷰는 개인적인 사용, 취미, 연구 또는 테스트용으로는 라이브러리를 제공하지 않습니다. 다만, 개인 용도로 라이브러리가 필요하다면 유료 라이센스가 필요하며 비용은 연간 2년마다 15,000 달러가 청구된다고 합니다. )

프로젝트 구조

create-react-app의 구조에 charting_library폴더를 넣습니다.

TradingView에서 제공해주는 라이브러리를 다운로드 받으면 다음과 같은 폴더의 구조는 위와 같습니다. (charting_library)

차트 적용하기

public/index.html에 다음과 같이 라이브러리를 임포트합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>create-react-app</title>
    <script src="./charting_library/charting_library.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

src/App.js

import React from "react";

// TradingView 컴포넌트 임포트
import { TVChartContainer } from "./components/TVChartContainer/index";

import "./App.css";
import "./error.css";

function App() {
  return (
    <div className="App">
      <TVChartContainer />
    </div>
  );
}

export default App;

src/components/TVChartContainer

TVChartContainer 폴더 구조

src/components/TVChartContainer/index.jsx

import * as React from 'react';
import './index.css';
import Datafeed from './api/'


function getLanguageFromURL() {
    const regex = new RegExp('[\\?&]lang=([^&#]*)');
    const results = regex.exec(window.location.search);
    return results === null ? null : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

export class TVChartContainer extends React.PureComponent {

    static defaultProps = {
        symbol: 'Coinbase:BTC/USD',
        interval: '15',
        containerId: 'tv_chart_container',
        libraryPath: '/charting_library/',
        chartsStorageUrl: 'https://saveload.tradingview.com',
        chartsStorageApiVersion: '1.1',
        clientId: 'tradingview.com',
        userId: 'public_user_id',
        fullscreen: false,
        autosize: true,
        studiesOverrides: {},
    };

    componentDidMount() {
        const widgetOptions = {
            debug: false,
            symbol: this.props.symbol,
            datafeed: Datafeed,
            interval: this.props.interval,
            container_id: this.props.containerId,
            library_path: this.props.libraryPath,
            locale: getLanguageFromURL() || 'en',
            disabled_features: ['use_localstorage_for_settings'],
            enabled_features: ['study_templates'],
            charts_storage_url: this.props.chartsStorageUrl,
            charts_storage_api_version: this.props.chartsStorageApiVersion,
            client_id: this.props.clientId,
            user_id: this.props.userId,
            fullscreen: this.props.fullscreen,
            autosize: this.props.autosize,
            studies_overrides: this.props.studiesOverrides,
            overrides: {
                "mainSeriesProperties.showCountdown": true,
                "paneProperties.background": "#131722",
                "paneProperties.vertGridProperties.color": "#363c4e",
                "paneProperties.horzGridProperties.color": "#363c4e",
                "symbolWatermarkProperties.transparency": 90,
                "scalesProperties.textColor" : "#AAA",
                "mainSeriesProperties.candleStyle.wickUpColor": '#336854',
                "mainSeriesProperties.candleStyle.wickDownColor": '#7f323f',
            }
        };

        Datafeed.onReady(() => {
            const widget = (window.tvWidget = new window.TradingView.widget(widgetOptions));

            widget.onChartReady(() => {
                console.log('Chart has loaded!')
            });
        });
    }

    render() {
        return (
            <div
                id={ this.props.containerId }
                className={ 'TVChartContainer' }
            />
        );
    }
}

src/components/TVChartContainer/api/historyProvider.js

※ request-promise 모듈을 설치합니다.

npm install request-promise --save

var rp = require('request-promise').defaults({json: true})

const api_root = 'https://min-api.cryptocompare.com'
const history = {}

export default {
    history: history,

    getBars: function(symbolInfo, resolution, from, to, first, limit) {
        var split_symbol = symbolInfo.name.split(/[:/]/)
            const url = resolution === 'D' ? '/data/histoday' : resolution >= 60 ? '/data/histohour' : '/data/histominute'
            const qs = {
                    e: split_symbol[0],
                    fsym: split_symbol[1],
                    tsym: split_symbol[2],
                    toTs:  to ? to : '',
                    limit: limit ? limit : 2000, 
                    // aggregate: 1//resolution 
                }
            // console.log({qs})

        return rp({
                url: `${api_root}${url}`,
                qs,
            })
            .then(data => {
                console.log({data})
                if (data.Response && data.Response === 'Error') {
                    console.log('CryptoCompare API error:',data.Message)
                    return []
                }
                if (data.Data.length) {
                    console.log(`Actually returned: ${new Date(data.TimeFrom * 1000).toISOString()} - ${new Date(data.TimeTo * 1000).toISOString()}`)
                    var bars = data.Data.map(el => {
                        return {
                            time: el.time * 1000, //TradingView requires bar time in ms
                            low: el.low,
                            high: el.high,
                            open: el.open,
                            close: el.close,
                            volume: el.volumefrom 
                        }
                    })
                        if (first) {
                            var lastBar = bars[bars.length - 1]
                            history[symbolInfo.name] = {lastBar: lastBar}
                        }
                    return bars
                } else {
                    return []
                }
            })
}
}

src/components/TVChartContainer/api/stream.js

※ socket.io-client 모듈을 설치합니다.

npm install socket.io-client --save

// api/stream.js
import historyProvider from './historyProvider.js'
// we use Socket.io client to connect to cryptocompare's socket.io stream
var io = require('socket.io-client')
var socket_url = 'wss://streamer.cryptocompare.com'
var socket = io(socket_url)
// keep track of subscriptions
var _subs = []

export default {
 subscribeBars: function(symbolInfo, resolution, updateCb, uid, resetCache) {
  const channelString = createChannelString(symbolInfo)
  socket.emit('SubAdd', {subs: [channelString]})

  var newSub = {
   channelString,
   uid,
   resolution,
   symbolInfo,
   lastBar: historyProvider.history[symbolInfo.name].lastBar,
   listener: updateCb,
  }
_subs.push(newSub)
 },
 unsubscribeBars: function(uid) {
  var subIndex = _subs.findIndex(e => e.uid === uid)
  if (subIndex === -1) {
   //console.log("No subscription found for ",uid)
   return
  }
  var sub = _subs[subIndex]
  socket.emit('SubRemove', {subs: [sub.channelString]})
  _subs.splice(subIndex, 1)
 }
}

socket.on('connect', () => {
 console.log('===Socket connected')
})
socket.on('disconnect', (e) => {
 console.log('===Socket disconnected:', e)
})
socket.on('error', err => {
 console.log('====socket error', err)
})
socket.on('m', (e) => {
 // here we get all events the CryptoCompare connection has subscribed to
 // we need to send this new data to our subscribed charts
 const _data= e.split('~')
 if (_data[0] === "3") {
  // console.log('Websocket Snapshot load event complete')
  return
 }
 const data = {
  sub_type: parseInt(_data[0],10),
  exchange: _data[1],
  to_sym: _data[2],
  from_sym: _data[3],
  trade_id: _data[5],
  ts: parseInt(_data[6],10),
  volume: parseFloat(_data[7]),
  price: parseFloat(_data[8])
 }

 const channelString = `${data.sub_type}~${data.exchange}~${data.to_sym}~${data.from_sym}`

 const sub = _subs.find(e => e.channelString === channelString)

 if (sub) {
  // disregard the initial catchup snapshot of trades for already closed candles
  if (data.ts < sub.lastBar.time / 1000) {
    return
   }

var _lastBar = updateBar(data, sub)

// send the most recent bar back to TV's realtimeUpdate callback
  sub.listener(_lastBar)
  // update our own record of lastBar
  sub.lastBar = _lastBar
 }
})

// Take a single trade, and subscription record, return updated bar
function updateBar(data, sub) {
 var lastBar = sub.lastBar
 let resolution = sub.resolution
 if (resolution.includes('D')) {
  // 1 day in minutes === 1440
  resolution = 1440
 } else if (resolution.includes('W')) {
  // 1 week in minutes === 10080
  resolution = 10080
 }
var coeff = resolution * 60
 // console.log({coeff})
 var rounded = Math.floor(data.ts / coeff) * coeff
 var lastBarSec = lastBar.time / 1000
 var _lastBar

if (rounded > lastBarSec) {
  // create a new candle, use last close as open **PERSONAL CHOICE**
  _lastBar = {
   time: rounded * 1000,
   open: lastBar.close,
   high: lastBar.close,
   low: lastBar.close,
   close: data.price,
   volume: data.volume
  }

 } else {
  // update lastBar candle!
  if (data.price < lastBar.low) {
   lastBar.low = data.price
  } else if (data.price > lastBar.high) {
   lastBar.high = data.price
  }

  lastBar.volume += data.volume
  lastBar.close = data.price
  _lastBar = lastBar
 }
 return _lastBar
}

// takes symbolInfo object as input and creates the subscription string to send to CryptoCompare
function createChannelString(symbolInfo) {
  var channel = symbolInfo.name.split(/[:/]/)
  const exchange = channel[0] === 'GDAX' ? 'Coinbase' : channel[0]
  const to = channel[2]
  const from = channel[1]
 // subscribe to the CryptoCompare trade channel for the pair and exchange
  return `0~${exchange}~${from}~${to}`
}

src/components/TVChartContainer/api/index.js

import historyProvider from './historyProvider'
import stream from './stream'

const supportedResolutions = ["1", "3", "5", "15", "30", "60", "120", "240", "D"]

const config = {
    supported_resolutions: supportedResolutions
}; 

export default {
    onReady: cb => {
    console.log('=====onReady running')    
        setTimeout(() => cb(config), 0)

    },
    searchSymbols: (userInput, exchange, symbolType, onResultReadyCallback) => {
        console.log('====Search Symbols running')
    },
    resolveSymbol: (symbolName, onSymbolResolvedCallback, onResolveErrorCallback) => {
        // expects a symbolInfo object in response
        console.log('======resolveSymbol running')
        // console.log('resolveSymbol:',{symbolName})
        var split_data = symbolName.split(/[:/]/)
        // console.log({split_data})
        var symbol_stub = {
            name: symbolName,
            description: '',
            type: 'crypto',
            session: '24x7',
            timezone: 'Etc/UTC',
            ticker: symbolName,
            exchange: split_data[0],
            minmov: 1,
            pricescale: 100000000,
            has_intraday: true,
            intraday_multipliers: ['1', '60'],
            supported_resolution:  supportedResolutions,
            volume_precision: 8,
            data_status: 'streaming',
        }

        if (split_data[2].match(/USD|EUR|JPY|AUD|GBP|KRW|CNY/)) {
            symbol_stub.pricescale = 100
        }
        setTimeout(function() {
            onSymbolResolvedCallback(symbol_stub)
            console.log('Resolving that symbol....', symbol_stub)
        }, 0)


        // onResolveErrorCallback('Not feeling it today')

    },
    getBars: function(symbolInfo, resolution, from, to, onHistoryCallback, onErrorCallback, firstDataRequest) {
        console.log('=====getBars running')
        // console.log('function args',arguments)
        // console.log(`Requesting bars between ${new Date(from * 1000).toISOString()} and ${new Date(to * 1000).toISOString()}`)
        historyProvider.getBars(symbolInfo, resolution, from, to, firstDataRequest)
        .then(bars => {
            if (bars.length) {
                onHistoryCallback(bars, {noData: false})
            } else {
                onHistoryCallback(bars, {noData: true})
            }
        }).catch(err => {
            console.log({err})
            onErrorCallback(err)
        })

    },
    subscribeBars: (symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback) => {
        console.log('=====subscribeBars runnning')
        stream.subscribeBars(symbolInfo, resolution, onRealtimeCallback, subscribeUID, onResetCacheNeededCallback)
    },
    unsubscribeBars: subscriberUID => {
        console.log('=====unsubscribeBars running')

        stream.unsubscribeBars(subscriberUID)
    },
    calculateHistoryDepth: (resolution, resolutionBack, intervalBack) => {
        //optional
        console.log('=====calculateHistoryDepth running')
        // while optional, this makes sure we request 24 hours of minute data at a time
        // CryptoCompare's minute data endpoint will throw an error if we request data beyond 7 days in the past, and return no data
        return resolution < 60 ? {resolutionBack: 'D', intervalBack: '1'} : undefined
    },
    getMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
        //optional
        console.log('=====getMarks running')
    },
    getTimeScaleMarks: (symbolInfo, startDate, endDate, onDataCallback, resolution) => {
        //optional
        console.log('=====getTimeScaleMarks running')
    },
    getServerTime: cb => {
        console.log('=====getServerTime running')
    }
}

실행하기

npm start

데이터는 src/components/TVChartContainer/api/historyProvider.js의
```
const api_root = 'https://min-api.cryptocompare.com'
```
에서 과거 데이터를 불러오는 구조입니다.

최신 데이터는 src/components/TVChartContainer/api/stream.js
```
var socket_url = 'wss://streamer.cryptocompare.com'
```
에서 소켓으로 받아 적용하는 구조입니다.

[예제 결과]

※ 1 편은 트레이딩 뷰 차트 라이브러리 신청과 라이브러리를 이용한 샘플 예제를 실행시키는 것에 초점을 맞췄습니다. 이 예제를 통해 응용이 원활하신 분들은 과거 데이터 및 소켓 데이터를 커스텀하여 사용이 가능할 것으로 생각됩니다.

※ 2 편에서는 심볼변경과 과거 데이터 및 소켓데이터 연동을 올리도록 하겠습니다.

감사합니다.

이 글을 작성하기 위해 Jon Church님의 글 을 참고하였습니다.