Windy Bay

IT/컴퓨터 > Web Development (3개의 글)

DigitalOcean 에 나의 도메인 연결하기

2020. 07. 11 IT/컴퓨터 > Web Development

이전 글들에서 프로젝트를 배포하는데 성공했는데, 사실 아직 이 단계에서는 우리가 흔히 보는 도메인이 아닌 IP 주소로밖에 접속할 수 없는 상태이다. 하지만 그런 상태로는 서비스를 할 수 없으니 도메인을 연결해주자. DigitalOcean에 Django 프로젝트 배포하기 (1) DigitalOcean에 Django 프로젝트 배포하기 (2) DigitalOcean에 Django 프로젝트 배포하기 (3) 도메인은 한국에도 여러 업체가 있지만 언제부턴가 godaddy.com에서만 구매하고 있다. Gabia에서 구매한 적도 있는데, 내가 설정을 잘못 한것인지 모르겠지만 www 가 붙지 않은 도메인을 기본으로 쓰고 싶은데 잘 안 되어서 이것저것 해보다가 godaddy 로 갈아타게 되었다. 개인적으로는 DigitalOcean 과도 깔끔하게 연동이 잘 되어 만족하면서 사용중. 일단 domain 을 구입하면 도메인 관리를 DigitalOcean 에서 하기 위해서 네임서버를 바꿔 주어야 한다. DigitalOcean 의 계정에 접속후 Networking 패널로 가 준다. 여기서 연결하고 싶은 도메인을 입력해 준다. 그후 도메인의 네임서버를 digitalocean의 서버로 변경해 주어야 한다. godaddy 의 도메인 관리 창에 가 보면 DNS(Domain Name System) 설정을 해 줄 수 있는 버튼이 있는데 그걸 눌러 준다. GoDaddy 자체에서 도메인을 연결해주기도 하는 모양이지만 그렇게 하면 DigitalOcean 에서 직접 관리할수 없는것같으니 그렇게 하지 않고 수동으로 네임서버를 입력해주자. 기본으로 설정되어있는 네임서버를 바꾸기 위해 change 버튼을 눌러 준다. 네임서버를 직접 입력할 수 있는 칸이 나오는데, 아래의 3개를 입력해 준다. 디폴트는 네임서버 쓸 수 있는 칸이 2개밖에 없는데 오른쪽 아래의 Add Nameserver 를 눌러서 하나 더 입력하면 된다. ns1.digitalocean.com ns2.digitalocean.com ns3.digitalocean.com 이렇게 네임서버를 바꿔 주면 도메인에 관련된 설정을 DigitalOcean 쪽에서 해 줄 수 있게 된다. 네임서버 변경은 시간이 좀 걸릴 수 있다. 대개는 1~2시간 내에 처리되는 것 같지만 공식적으로는 하루이틀까지도 걸릴 수 있다고 하는것 같다. 도메인이 DigitalOcean 의 네임서버에 연결되면 그 도메인이 우리 프로젝트의 IP로 연결되도록 DNS 레코드를 작성해 주어야 한다. 다시 DigitalOcean 의 계정으로 돌아와서 Networking 탭에서 연결해준 도메인을 클릭해 보면 여러 가지 DNS 레코드를 작성할 수 있는 탭이 보이는데, 이 중 A 레코드를 작성해 주면 된다. 도메인을 입력하면 바로 연결되게 하려면 (예를 들어 windybay.net) A 레코드에 @ 라고 입력해주고 'WILL DIRECT TO' 에 프로젝트의 IP 주소를 입력하면 된다. DigitalOcean 의 경우에는 Droplet 마다 IP 주소가 있으니 그것을 copy 해 주면 된다. 옆에 TTL 이라는 설정이 있는데 서버의 캐시 등과 관련된 설정이라고 한다. 일단 당장은 기본값인 3600으로 놔두면 될 것 같다. 이렇게 하면 windybay.net 으로 접속하면 프로젝트의 IP로 연결되게 된다. 하지만 홈페이지가 보이는 것이 아니고 nginx 기본 화면이 보일 것이다. 아직 nginx가 windybay.net으로 들어온 요청을 프로젝트 내의 디렉토리들로 연결할 수 있게 설정이 되지 않아서 그렇다. 도메인이 nginx 가 가리키는 디렉토리로 연결되게 하기 위해서는 서버 블록을 수정해 주어야 한다. 이전에 작성했던 서버 블록을 수정해 주자. (위에서 마지막 windybay는 각자 작업중인 프로젝트 이름으로 바꾸어야 한다) 이전에 작성했던 서버 블록에서 server_name이 droplet의 IP 주소로 되어 있을것인데, 이것을 새로 연결한 domain 으로 바꾸어 준다. 그리고 마지막으로 django 프로젝트의 settings.py 의 ALLOWED_HOSTS 에 도메인을 명기해 주어야 프로젝트에서 도메인 연결을 허용하게 된다. 이렇게 설정하면 windybay.net 에 프로젝트가 연결되어 홈페이지가 정상적으로 보이게 된다. 만약 이렇게 해도 정상적으로 보이지 않는다면 서버에 캐시로 저장된 이전 설정이 남아 있는 경우일 수 있다. 그 경우에는 shell에서 nginx 와 gunicorn 을 재시작하면 새로운 설정을 적용해줄 수 있다. www.windybay.net 으로 들어오는 트래픽을 windybay.net 으로 리디렉션해주는 것도 설정을 해 주려고 하는데 내용이 길어지는것 같아 검색 편의를 위해 별도의 포스팅으로 정리하기로..

블로그에 카카오톡 공유 버튼 만들기

2020. 02. 27 IT/컴퓨터 > Web Development

이전 글 - 블로그에 SNS 공유버튼 만들기 블로그에 post 공유용 SNS 만드는 방법을 정리해 본다. 카카오톡은 다른 서비스처럼 그냥 url 링크만으로 처리가 되지 않고 따로 개발자 사이트에 가입해서 설정을 해 줘야 한다. #1. 카카오 개발자 계정 만들기 Kakao Developers 사이트에 가서 가입후 개발자 등록을 해 준다. #2. 내 애플리케이션 - 앱 만들기에 들어가 앱의 이름과 아이콘등 기본 설정을 해 주고 #3. 개발용으로 각종 키가 생성된다. Javascript 로 버튼을 구현하기 위해 Javascript 키를 복사해 두어야 한다. #4. 설정-일반-플랫폼 추가 에 들어가서 '웹' 을 선택하고 도메인을 입력해 준다. #5. '카카오링크' 라는 서비스를 이용해 링크를 걸어줄 것이다. 버튼이 들어가는 페이지의 <head> 안에 다음 스크립트를 추가해 준다. #6. 본문에는 다음과 같이 markup 을 만들어 주고, #7. 별도의 <script> 태그 안에 다음 내용을 추가해 준다. #8. 위에서 title, imageUrl 및 description 에 쓰여있는 |bs4process, |bs4imagepath, |full_url 필터는 이 블로그에 사용하기 위해 개인적으로 만든 Django custom filter들이라서 다른곳에는 적용이 불가능할 것이다. 해당 내용들을 각 페이지에 맞게 변경해 주면 되겠다. 위의 스크립트는 가장 기본적인 링크 기능만 구현한 것이고, 기타 카카오톡 창에 띄워 줄 여러가지 버튼을 만들 수 있는 옵션들이 있는데 카카오링크 개발 가이드를 참조하면 될 것 같다. 여담으로 카카오톡으로 전송한 링크를 모바일 환경에서 클릭해서 열면 항상 카카오톡 인앱 브라우저에서 열리는데, 검색해본 결과로는 유저가 기본으로 쓰는 브라우저에서 열리는 기능은 일부러 지원하지 않고 있다는 것같다. 인앱 브라우저에서 열리면 카카오톡의 다른 톡들을 볼 수 없어 불편하고 결국 주소를 복사해서 크롬 등에서 열게 되는데, 어차피 사용자가 딱히 인앱 브라우저를 선호할 이유가 없을것같고 괜히 번거롭기만 한데 이 점은 좀 개선해 주면 좋을것같다. 이상으로 블로그에 직접 SNS 공유 버튼을 만드는 방법을 정리해 보았다.

블로그에 SNS 공유버튼 만들기

2020. 02. 27 IT/컴퓨터 > Web Development

블로그의 글을 퍼갈 수 있는 공유 버튼 만드는 방법에 대해 공부한 내용을 정리해 본다. 요즘은 페이스북, 카카오톡같이 많이 쓰는 서비스들은 URL 만 긁어서 붙이면 알아서 보기좋게 링크를 만들어주는 경우가 많아서 활용도가 높지 않을것 같긴 하지만, 아이콘들이 약간의 장식적 효과도 있고 주소를 긁어 붙이는것보다 클릭 한번에 링크해주는게 편리한 점도 있으니 연습삼아 만들어 보았다. Pinterest 등 다른 서비스도 많지만 우선은 페이스북, 트위터, 네이버, 카카오톡 네개만 만들어 보았다. 요즘은 인스타그램이 대세라고 하는데 인스타는 일단 사진을 찍고 메세지를 작성하는 시스템 특성상 외부 링크를 바로 연결해주는 API는 일부러 제공하지 않는 것같다. 포스트를 바로 이메일로 보내는것은 SMTP를 이용해야 할 것 같은데, 이건 나중에 연구해보고 다시 올려야 할듯. 공유 링크는 2020년 2월 15일 기준. 우선 페이지에 버튼을 만들기 위해 html markup을 만들어 준다: #1. Facebook Facebook 은 https://www.facebook.com/sharer/sharer.php?u=공유할 URL 을 이용하면 간단하게 공유할 수 있다. 단순히 링크만 걸어도 공유에는 문제가 없지만, 전체 화면으로 창이 뜨면 모양이 예쁘지 않기 때문에 window.open() 을 이용해서 새 창에 띄워 주었다. 위의 는 Django template에서 현 page의 경로를 받아 오는 방법이다. 참고로 root 경로 이후의 경로만 표시하려는 경우 를 사용할 수 있다. 페이스북은 공유하려는 페이지에 open graph tag이 있으면 해당 내용을 읽어서 미리 보기를 만들어 주므로, 페이지의 <head> 안에 이를 넣어 주면 좋다. Open graph tag의 자세한 내용은 위의 링크에 들어가보면 나와 있는데, <meta> tag 을 이용해서 아래의 내용을 적어 주면 된다. #2. Twitter Twitter는 보낼때 기본 text와 URL을 같이 지정해줄 수 있다. https://twitter.com/share 경로에 파라미터로 text 와 url 을 적어 주면 기본 tweet 창에 미리 입력된 상태로 공유 창이 뜨게 된다. #3. Naver 네이버 역시 기본적인 방법은 같은데, 네이버는 URL을 encoding 해 주어야 한다. Encoding 하지 않고 그냥 raw URL로 링크하는 경우 제목이 깨지는 등의 문제가 발생한다. 자바스크립트 내장 함수인 encodeURI()로 인코딩한 주소를 링크해주면 된다. #4. Kakaotalk 카카오톡은 위와 같이 간단하게 링크를 걸 수가 없고 카카오 개발자 사이트 가입해서 key 를 받는 등의 절차가 필요하다. 카카오톡 버튼 만들기는 별도의 글로 정리하도록 하겠다. 링크-블로그에 카카오톡 공유 버튼 만들기

1 (current)