요 며칠동안 꼬여있던 SSL 설정을 해결해보려고 삽질을 했습니다. 아마존 라이트세일 로드밸런서를 사용해도 인증서 발급만 자동으로 해줄뿐, 아파치 서버 설정까지 만져주는것은 아니더군요. 그래서 결국 직접 전부 세팅하게 되었는데, 차후에 또 생길지 모를 일이니 기록하고자 합니다.

작업의 목적은 포트폴리오 사이트, 블로그, 새로만들 포럼 사이트를 각각 virtualhost로 지정해주고, SSL까지 적용하는 것입니다. 작업의 흐름은 아래와 같습니다.

  1. VirtualHost 80 적용.
  2. SSL 인증서 발급
  3. crontab을 이용한 자동 갱신 적용
  4. VirtualHost 443 적용
  5. http 접속을 https로 강제 리다이렉트 redirect
  6. the requested url was not found on this server 에러 발생 해결

 

1.VirtualHost 80 포트 적용

기본적으로 아마존 라이트세일에서 bitnami wordpress로 설치했다면, /opt/bitnami/apache2/conf/extra/httpd-vhosts.conf 파일을 통해서 virtualhost 적용을 하는 것이 편리합니다. 물론 /opt/bitnami/apache2/conf/httpd.conf에서 include /opt/bitnami/apache2/extra/httpd-vhosts.conf에 대한 주석을 제거해서 적용할 수 있도록 먼저 설정해줘야합니다. 아래 내용은 마지막에 또 다시 변경해줘야하므로, 중간과정으로 이해하길 바랍니다.

80포트로 접속했을 경우를 설정해주고 sudo /opt/bitnami/ctlscript.sh restart apache 명령으로 변경된 설정을 적용해줍니다.

2.Certbot-auto를 이용해서 SSL인증서 발급

sudo mkdir /opt/bitnami/letsencrypt 명령을 이용해서 폴더를 생성한 다음 그 곳( cd /opt/bitnami/letsencrypt )에서 아래 명령을 통해 certbot-auto를 다운로드 받고, 파일 권한을 변경해줍니다.

그다음 아래 명령으로 인증서를 발급받습니다. 저같은 경우엔 illustudio.co.kr / blog.illustudio.co.kr / forum.illustudio.co.kr 이렇게 세 차례에 걸쳐서 작업을 해줬습니다.

3.Crontab을 이용한 갱신 자동화

letsencrypt 인증서는 무료인 대신 90일마다 갱신을 해줘야합니다. 그래서 자동으로 갱신될 수 있도록 crontab 명령에 아래 내용을 추가합니다. 매월 초마다 새벽 3시마다 명령이 실행되고, 아파치가 재실행 됩니다. /opt/bitnami/letsencrypt라는 경로는 제가 certbot-auto를 설치한 경로이므로, 본인이 다른 경로에 설치했다면 맞는 경로로 변경해줘야합니다.

4.VirtualHost 443 포트 적용

SSL 인증서 설치까지 완료 됐으니 HTTPS 프로토콜을 사용할 수 있도록 443 포트 설정을 해줘야합니다. 사실, 이 과정까지 오기전에 라이트세일 인스턴스에서 https 443 포트도 사용할 수 있도록 설정해주는 것이 좋습니다. 기본적으로 80, 22, 443, 3306 포트는 사용할 수 있도록 설정하는 것이 관리상 편리합니다. 443 포트에 대한 설정은 아래와 같습니다. 이 부분도 중간과정입니다.

기본적으로 illustudio.co.kr의 경우만 해놨습니다. 이전 과정으로 심볼릭 링크를 걸어주는 방법이 있는데, 사이트가 여러개일 경우엔 그 방법으로 컨트롤 하기 어렵다고 생각되서, 이렇게 바로 발급된 링크를 연결해줬습니다.

여기까지 하고 나면, http와 https 둘다 연결이 될 수 있도록 설정이 된 상태입니다. 하지만, https로 강제로 사용할 수 있도록 설정해주기로 했습니다.

5. http 접속을 https로 강제 리다이렉트 redirect

RewriteRule을 검색해서 HTTP_POST나 SERVER_NAME으로 설정하는 방법도 있지만, 그냥 무식하게 해당 도메인으로 바로 연결해버렸습니다. 사실 포폴 사이트, 블로그, 포럼 셋다 전부 저런식으로 각각 설정해줘야했기때문에 상관 없을 것 같습니다. 여기까지하면, http로 접속해도 자연스럽게 그냥 https 프로토콜로 접속이 되는 것을 확인할 수 있습니다. 80포트에 대한 virtualhost 설정은 이것이 최종 결과물입니다.

문제는 여기서 블로그나 포폴사이트 게시글을 클릭했을때 the requested url was not found on this server 에러가 발생하는것을 발견해서 그 부분을 해결해주는 내용이 필요했습니다.

6.the requested url was not found on this server 에러 발생 해결

게시글을 눌렀을때 the requested url was not found on this server 에러가 발생하는 것은 이런식으로 해결해주었습니다. 역시 구글의 도움을 많이 받았습니다. 일요일 오후부터 끙끙 매고 여기까지 오는데 3일 정도 걸린것 같습니다. 모든 문제가 정상적으로 해결되었습니다. 443포트에 대한 virtualhost 설정도 이것이 최종 결과물입니다.

 

기존에 git에 저장해두었던 gulp 세팅이 되어있던 파일을 불러오는 과정에서 node-sass가 설치 되지 않는 문제가 발생한다.

주로
“user “root” does not have permission to access the dev dir”
라는 문구를 내뱉으며 문제를 일으키는데 아래 화면처럼 계속 권한이 없다는 말만 반복하면서 무한 루프에 빠져버린다. 그래서 권한을 주고 벼라별 짓을 다 해도 몇시간 동안 node-sass 설치에 실패했다.

구글을 아무리 뒤져도 답이 나오질 않아서 한참 해메며 포기할까 싶은 무렵 실낱같은 희망이 되어준 옵션이 하나 나타났다. –unsafe-perm

이를테면 이런식으로 사용하는 것이다.

이 옵션을 주면 위와같이 권한 문제로 무한루프에 빠지는 것을 해결 할 수 있다. 좀처럼 풀리지 않는 문제라 주말 내내 골치 썩고 이제는 포기하고 싶었는데, 자기전에 극적으로 해결이 됐다… 주말이 다 날아갔다는 이야기.ㅋㅋㅋ

추가적으로 node-sass를 설치하는 과정중에 컴파일 하는 과정이 있는데 이럴 경우 컴파일러가 없으면 “make g++ command not found” 오류를 내뿜는다. 이런 경우에는 구글에서 아래와 같은 답을 내어주었다.

sudo apt-get install build-essential g++

여기까지 해주고나니 기나긴 컴파일 과정을 거치고 난 후 정상적으로 모듈이 설치되고 작업환경이 완성됐다.

카페24 쇼핑몰 솔루션을 이용할 경우 SSL 보안인증서를 신청하면 무료로 설치가 가능합니다 (2018.2.7기준). 90일마다 새로 갱신된다는것을 보니 아마도 let’s encrypt를 이용하는 것으로 추측됩니다. 저도 현재 운영중인 블로그에 그렇게 적용해서 쓰고 있습니다. 참고 : 무료 인증서 설치 포스트

그런데 문제는 예상 밖의 곳에서 터졌습니다. https는 외부에서 끌어오는 이미지도 같은 보안 프로토콜이 적용 되어있어야 정상적으로 표현이 되는데, 현재 회사에서는 외부 이미지 호스팅(http)에서 이미지를 끌어다 쓰고 있다보니 모두 이미지가 정상적으로 노출 되지 않는다는 문제가 있었습니다. 자바스크립트를 통해 들어오는 경로를 모두 강제로 https로 변경해주는 스크립트를 제공하다보니 http://~ 로 불러오는 이미지가 전부 주소가 https:// 로 바뀌는 것이 원인이라는걸 파악했습니다. 통상적으로 보안프로토콜이 적용되는 사이트에서 이미지 소스를 삽입할때 프로토콜을 따로 명시하지 않도록 권고하고 있습니다. 예를 들어서 https://www.example.com/img.jpg 또는 http://www.example.com/img.jpg 라고 명시하지말고 그냥 //www.example.com/img.jpg 라고 명시하는걸 추천하고 있습니다.

하지만 카페24 쇼핑몰 솔루션에서 이미지를 이렇게 삽입할 경우엔 같은 https:// 프로토콜로 자동으로 변환해서 http://로 불러와야할 이미지도 무조건 https://로 붙어서 이미지가 전부 깨지는 겁니다. 잘못된 경로에서 호출하는 결과가 되는것이죠. 그래서 무척 고민하고 어찌할까 골머리를 싸매며 구글의 도움을 청했습니다. 제가 자바스크립트 실력이 미천해서 한참 검색하고 헤매다가 아래 포스팅을 참고하고 힌트를 얻었습니다.

제품 정보에서 상세이미지가 전부 깨지는것이 원인이었기때문에 , 해당 부분만 탐색해서 img 태그에 삽입되는 주소가 http://로 강제 적용해주는 소스를 삽입했습니다. 아래 내용을 보시면 어느정도 참고가 될 것 같습니다.

See the Pen add ‘http:’ script by 배현기 (@illustudio) on CodePen.

모든 이미지가 http://로 적용될 것은 아니기때문에 상세이미지가 표현되는 영역(prd-detail) 내에서만 img 태그를 골라서 http://로 강제 적용해주는 스크립트로 해결 할 수 있었습니다. 하지만, 또 별개의 상황이 벌어질 수 있기 때문에 이것이 완전한 해결책은 아닙니다. 그냥 임시방편 정도로 볼 수 있겠네요. 조금 더 세밀하게 조절하자면, 각각의 이미지 태그에 클래스를 적용해서 특정 클래스의 이미지만 http:// 프로토콜이 적용되는 식으로 스크립트를 바꿔 써도 괜찮을 것같습니다.

최근 회사에서 운영중인 메이크샵 솔루션을 카페24로 옮기는 과정을 경험했습니다.  메이크샵도 크게 부족한 솔루션은 아니지만, 운영하시는 분이 카페24가 더 친숙하다고 여기셔서 옮기기로 결정됐고, 저도 솔루션 이전은 처음 경험해본지라 시행착오가 많았습니다.

우선 솔루션을 이전할때 가장 큰 문제는 상품과 회원정보 이전입니다. 이 부분은 다른 분이 진행해주시긴 했지만, 엑셀 데이터를 활용해서 대규모 데이터 처리를 진행하는 것으로 확인됐습니다. 제가 담당했던 부분은 도메인 네임서버 이전건이었는데, 기존에 AWS나 기타 웹호스팅을 이용해서 직접적으로 컨트롤할 수 있었던 것과 달리 솔루션 업체의 가이드를 따라야하다보니 좀 답답한 부분이 많았습니다.

처음에는 포워딩이 아니라 왜 네임서버 이전을 하는가 의문이었는데, 관리의 주체를 아예 해당 솔루션으로 이전해주면 SSL 적용을 해준다는 장점이 있었습니다. 최근 구글에서 검색 우선순위를 SSL을 적용한 사이트에 유리하도록 정책을 펼치고 있기때문에, 가능하면 신청하는 것이 좋습니다. 하지만 프로토콜이 http에서 https로 변경되기때문에 외부 자바스크립트 플러그인을 활용하고 있거나, 네이버 웹마스터 도구, 소셜 로그인 등을 비롯해  html 태그중에 http라고 명시한 부분은 전부 https로 바꿔줘야하기때문에 번거로운 작업 과정이 수반되기는 합니다.

하지만 위와 같이 주소 앞에 “안전함”이라고 노출되는 만큼 사용자에게 보안측면에서 안정감을 줄 수 있다는 장점이 이런 번거로움을 상쇄시켜주는 요소가 될 것이라고 생각됩니다. 다시 본론으로 돌아가 네임서버를 이전하겠다고 신청하는 것 자체는 어렵지 않습니다. 카페24 관리자메뉴에서 해당 부분을 링크를 통해 안내해주고 있으며, 네임서버에 카페24에서 제공하는 내용을 기입하기만 하면 됩니다. 다만 시간이 무척 오래걸립니다. 24~48시간 정도 걸리는데, 저같은 경우엔 48시간이 꼬박 넘은것 같습니다.

개인적으로 웹호스팅이나 AWS와 같은 가상서버를 이용할때는 네임서버를 이전하더라도 간헐적으로 사이트가 접속되는 경우도 있었는데, 이번에는 전혀 접속이 되지 않는다는 것을 확인했습니다. 해당부분에 대해서도 카페24측에서 요청사항을 처리해줄때까지 대기해야하는게 아닌가 싶습니다. 네임서버가 이전되면 작업이 완료되는 것으로 생각합니다만, 그렇지 않습니다. 웹호스팅이나 서버를 직접 관리하는 경우엔 이런 부분을 사용자가 직접 만져줄 수 있지만, 카페24도 그렇고 메이크샵도 해당 부분에 대해서는 고객센터에 1:1 문의로 게시글을 남기는 것이 가장 처리가 빠릅니다.

고객센터에 전화는 하지 않는 것이 좋습니다. 전화받는 직원들이 기술지원 인력들이 아닌 관계로 잘못된 안내를 해줄 가능성이 있습니다. 제가 전화로 한 번, 게시판으로 한 번 문의를 넣었는데, 1:1 문의게시판에서는 즉각적으로 30분 이내에 조치가 이루어졌으나, 전화상으로는 도메인 소유자의 신분증을 보내달라는 잘못된 요청을 받았습니다. 이런 경우엔 가급적 1:1 문의 게시판에 화면 캡쳐를 비롯해 현재 상황을 상세하게 안내하는 것이 빠른 해결책을 얻을 수 있는 방법입니다.

아무튼 이번 경험을 통해 쇼핑몰 솔루션 이전이 무척 번거롭고 시간이 많이 소요되는 작업이라는 것을 경험했습니다. 솔루션을 한번 정하면 이토록 이전하는 것이 어려우니 처음에 잘 선택하는 것이 중요합니다. 개인적으로는 카페24도, 메이크샵도 별로 맘에 안드네요. 고도몰이 최근에 NHN이 인수했던데 어떻게 변했는지 좀 궁금합니다.

나중에 시간을 내서 고도몰 관리자 페이지도 한 번 만져봐야겠네요.

늘 그렇듯이 본업과는 좀 거리가 있는 것들에 흥미를 갖는 못된 습성(?)덕분에 요즘 장고(django)라는 파이썬 웹프레임워크를 공부하고 있습니다. 사실 이런 것들에 흥미를 갖는 이유는 어찌보면 현실 도피 내지 소소한 불만들에서 비롯됩니다. 워드프레스가 놀라운 사용자 편의성을 제공하기는 하지만, 사소한 것 하나를 고치더라도 무척 까다로운 기준에 부합해야한다는 것들이 불만으로 쌓이고 있다보니 쉽다는 이야기에 귀가 팔랑거려 장고를 공부하고 있습니다.

일단 각설하고 김석훈님이 쓰신 파이썬 웹프로그래밍이라는 책을 보고 간단하게 블로그를 따라서 만들어보고 있는데, 실수로 장고 2.0을 설치해버렸습니다. 책에서는 장고 1.7 버전을 기준으로 하고 있다보니 달라진 점들이 많습니다.

1.7 버전대만 해도 파이선 2.x 버전을 위해서 아래와 같은 호환성을 유지하려는 목적의 코드들을 일부러 삽입합니다. 하지만 장고 2.x에 들어와서는 파이썬 3.x 버전을 기본으로 사용하기  때문에 파이선 2.x를 고려할 필요가 없습니다. 그래서 아래와 같은 코드를 삽입하면 오류메세지를 출력합니다. 아래 호환성 처리 문장은 사용하지 않습니다.

이제 더이상 django.core.urlresolvers는 쓰이지 않습니다. 간단하게 django.urls로 변경되었습니다.

파이썬 2에 대한 호환성은 이제 더 이상 명시하지 않습니다. 아래 문구 삽입시에도 마찬가지로 오류메세지가 발생합니다.

urlpatterns를 사용하는 방법이 조금 달라졌습니다. 루트에 있는 urls.py에서 app에 있는 – 예를 들면 /blog/urls.py와 연결할때 쓰는 include의 사용법이 조금 달라졌습니다.  django.conf.urls는 django.urls로 간략해졌고 이제는 url 대신 path를 사용합니다. include에서 네임스페이스를 따로 넣지 않는다는 점도 차이점입니다.

또 다른 점을 보자면 include를 했을때 namespace를 명시해주지 않았기에 /blog/urls.py에서 새롭게 추가해줘야하는 부분과 정규표현식을 다뤘을때 다른 점이 있습니다. 달라진 점은 마찬가지로 django.urls가 쓰인다는 점과 path와 re_path로 구분되어서 정규표현식을 쓸때는 re_path 함수를 써야한다는 점이 다릅니다. 그리고 namespace 대신 app_name 이라는 것이 필요하게 되었습니다.

책에서 본 그대로 소스를 입력해서 결과가 나오질 않아서 오류메세지와 함께 django 2.0 document를 뒤져보니 이런 변화들을 적용해야 작동한다는 점을 알게 되었습니다. 아무래도 또 까먹을것 같아서 이렇게 정리해 놓습니다.

주로 참고한 부분은 하단에 링크되어있는 url dispatcher부분입니다. django documentation이 잘되어있다는 이야기는 여러번 들었습니다만, 언어의 장벽때문에 읽어볼 생각을 못해봤는데, 의외로 궁하면 통한다고, 목마른 놈은 우물을 파게 되어있네요 ㅎㅎ