blogger

blogger - 구글 드라이브로 웹사이트 구축

11월 10, 2020

 웹사이트를 운영하기 위해 저렴하게 호스팅 할 수 있는 몇 가지 방법이 있습니다. 무료 호스팅을 이용하거나 구글 드라이브나 원드라이브를 이용해 사이트를 운영하는 방법입니다.

구글 드라이브를 이용하면 안정적인 서버 가동률을 보장받을 수 있으며 15GB 의 넉넉한 공간을 이용할 수 있습니다. 다만 PHP와 같은 서버 스크립트를 사용할 수 없고, HTML, CSS, Javascript, 이미지 파일만을 이용해 웹사이트를 구축해야 합니다.

먼저, 해야 할 일은 구글 계정을 만드는 것입니다. 계정이 없다면 계정을 하나 만들도록 하세요. 계정을 만들면 지메일, 구글 포토, 구글 드라이브를 포함하여 15GB를 무료로 이용할 수 있습니다.

구글 드라이브에 들어가서 폴더를 하나 만듭니다. 폴더의 이름은 도메인 이름이어야 하는데, 유효한 도메인 이름으로 지정해야 합니다. 예를 들어 사용할 도메인이 www.habonyphp.com이라면 이와 동일한 이름의 폴더를 만들어야 합니다. 폴더 이름이 도메인 이름이 됩니다.

두 번째로 해야 할 일은 폴더를 공유하는 것입니다. 해당 폴더의 마우스 오른쪽 버튼 -> 공유를 클릭하세요. 
 


“링크가 있는 모든 사용자로 변경”합니다. 웹사이트는 인터넷 공간의 모든 사용자가 볼 수 있어야 하므로 공개로 설정해야 합니다. 폴더를 만들면 기본 값이 “제한됨”입니다.


세 번째로 공유 설정한 폴더에 이미지, HTML, CSS, Javascript 파일 등 웹사이트에 필요한 모든 폴더와 파일을 업로드 하세요. index.html 파일이 없다면 index.html 파일을 만들도록 합니다.


index.html 파일이 없으면 “DriveToWeb” 에서 웹사이트를 찾지 못합니다. 

네 번째로 해야할 일은 “DriveToWeb”에 접속합니다. DriveToWeb 웹 주소는 https://drv.tw/ 입니다. DriveToWeb 는 구글 드라이브를 마치 호스팅 받는 것처럼 만들어 주는 곳입니다. 우리는 구글 드라이브를 통해 웹사이트를 연결할 것이므로 구글 드라이브를 선택합니다.


계정 선택할 창이 나타나면 연결할 계정을 선택하도록 합니다. DriveToWeb 에 액세스할 권한을 주어야 하므로 “허용”을 선택하세요.


앞서 말한 바와 같이 공유 설정한 폴더에 index.html 파일이 없으면 설정 값이 나타나지 않으니 반드시 index.html 파일을 만든 다음 DriveToWeb에 연결하도록 합니다.
 


계정 주소는 “https://{subdomain}-on.drv.tw/도메인이름" 형식입니다. 도메인으로 할 폴더는 몇 개를 만들어도 “https://{subdomain}-on.drv.tw/도메인이름” 형식으로 여러 개 나타나게 됩니다. 링크를 클릭했을 때 페이지가 정상적으로 뜬다면 거의 마무리한 거나 다름없습니다.

이제 도메인 DNS를 설정하는 일만 남았습니다. 위 링크를 포워딩해도 상관없지만 회사 홈페이지라면 DNS를 설정하는 게 보기에 좋고, 검색엔진에 등록하는 게 훨씬 유리합니다.

도메인 구입업체로 가서 도메인 레코드(DNS) 설정으로 들어갑니다. 생성된 drv.tw 계정 주소를 복사한 다음 CNAME 에 추가하세요. 예를 들어 https://subdomain-on.drv.tw/www.habonyphp.com 이면 subdomain-on.drv.tw를 복사한 다음 아래 그림처럼 CNAME 레코드에 추가합니다.


그리고 http://habonyphp.com 으로 접속한 사용자를 http://www.habonyphp.com 으로 리디렉션시켜주기 위해 CNAME을 하나 더 만들어 위 그림처럼 Value 값에 www.habonyphp.com 으로 작성합니다.

http://layout.habonyphp.com 과 같이 하위 도메인을 구성하고 있다면 CNAME 값 하나만 있으면 되지만 최상위 도메인이라면 CNAME 값 두 개가 필요합니다.


이렇게 해당 도메인에 CNAME 값만 입력해주면 한 계정으로 몇 개라도 연결할 수 있습니다. 다음 그림과 같이 공유 폴더를 여러 개 만들었고, 공유 폴더가 도메인 주소라면 아래 그림과 같이 CNAME 값 하나로 연결이 가능합니다.


결과적으로 하위 도메인 이름이 공유 폴더 이름이 되므로 유효한 도메인 이름이라면 개수에 관계없이 추가할 수 있습니다.


CDN 및 HTTPS 구성

사용자 정의 도메인을 CNAME에 연결하는 것 만으로 HTTPS 보안 프로토콜을 사용할 수 없습니다. 그리고 느리게 동작하는 게 단점이 됩니다. 이를 개선하려면 CDN을 이용하는 방법이 있습니다.

CDN은 DriveToWeb 에 대한 액세스 속도를 높일 수 있고, 보안 프로토콜인 HTTPS를 사용할 수 있는 CloudFlare(https://www.cloudflare.com) 를 이용하면 무료로 구성할 수 있습니다.

CDN을 사용하려면 먼저 사용자 정의할 도메인을 DriveToWeb 에 가리키도록 CNAME을 설정해야 합니다. 그런 다음 TXT 레코드를 추가하는데, TXT 이름을 CNAME 레코드와 동일하도록 설정하고, TXT 레코드의 값은 CNAME 레코드의 대상으로 설정하도록 합니다. 예를 들어 www.habonyphp.com 도메인이라면 아래와 같이 가리키도록 합니다.

CNAME Recode
Name Value
www  abcd-on.drv.tw

TXT Recode
Name Value
www  DRVTW=abcd-on.drv.tw


TXT 값은 DRVTW={username}-on.drv.tw 형식이어야 합니다. 아래 그림은 실제로 적용한 것으로 이해에 도움이 됩니다.


한 개 이상의 도메인을 drv.tw에 연결하려면 CNAME 개수만큼 TXT 레코드가 필요합니다.

CNAME Recode
Name    Value
www     abcd-on.drv.tw
getcss  abcd-on.drv.tw

TXT Recode
Name    Value
www     DRVTW=abcd-on.drv.tw
getcss  DRVTW=abcd-on.drv.tw



404 에러 페이지 구성

404 오류 페이지는 DriveToWeb 에서 준비한 오류 페이지를 출력합니다. DriveToWeb 오류 페이지가 지겹다면 사용자 지정할 수 있는 방법이 있습니다. HTML로 작성한 404.html 파일을 웹사이트의 루트 폴더에 배치하기만 하면 됩니다. 

반드시 404.html 파일은 index.html 파일이 위치하는 루트 폴더에 있어야 합니다.


Tag:

2 Comments

2 댓글

  1. 익명2022년 1월 5일 오후 5:40

    안녕하세요~
    전자책 초보입니다. 구글드라이브에 전자책(index.html)을 업로드 후 드라이브투웹으로 주소를 얻은뒤 한번은 재생이 되는데 그다음부턴 재생이 되지를 않습니다... 전자책은 동영상이 있는 전자책 퍼블리쉬입니다.. 조언을 구하고 싶습니다. 구글드라이브에 다른 무언가를 설치를 해야하는지, 아님 드라이브투웹 에서 다른걸 해야하는지 알고싶습니다.

    답글삭제
    답글
    1. 하보니2022년 1월 5일 오후 7:32

      DriveToWeb 은 정적인 웹사이트를 구축할 때 사용하는 것을 권장합니다.

      전자책이 PDF형식의 크기가 작은 파일이면 모를까 파일 크기가 크거나 스트리밍 같은 서비스에는 적합하지 않습니다.

      15분 이내의 영상이면 DriveToWeb를 이용하지 않고 공유 링크를 바로 연결하는 것을 권장합니다.

      삭제