GitHub 페이지 및 Cloudflare를 통한 무제한 확장 및 무료 웹 호스팅

제 고객에게 엄청난 비용을 절약하고 웹사이트를 안전하게 보호하며 백업 기능이 내장된 비밀이 있습니다.

비밀: 나는 그들의 웹사이트를 정적으로 만든다. 그런 다음 GitHub에 저장 및 호스팅하고 Cloudflare를 사용하여 HTTPS를 통해 제공하고 빠르게 만듭니다. 내 고객은 도메인 이름에 대해서만 비용을 지불하지만 그들이 흥정한 것보다 훨씬 더 많은 것을 얻습니다.

왜 정적 콘텐츠인가?

정적 사이트는 서버 처리 시간이 필요 없기 때문에 놀랍도록 빠릅니다. 또한 git 저장소에서 정적 자산의 코드 기반을 커밋함으로써 변경 사항을 롤백하는 것은 단순히 이전 커밋으로 되돌리는 문제가 됩니다. 백업은 git push away이며 기본적으로 캐시에서 전체 웹사이트를 제공하므로 서버가 요청을 다시 처리할 필요가 거의 없습니다.

복잡한 UI를 구축하고 계십니까?

React와 같은 프론트엔드 프레임워크의 등장으로 HTML/CSS와 JavaScript만으로 마법 같은 경험을 만들 수 있습니다. 하지만 백엔드 로직을 프론트엔드에서 분리해야 하지만 Ruby on Rails도 이제 API 모드와 함께 제공됩니다.

웹사이트 구축 계약을 체결할 때마다 정적 사이트가 클라이언트의 요구를 충족하기에 충분한지 여부를 고려하며 많은 경우에 그렇습니다.

어떤 종류의 사용 사례를 염두에 두고 있는지 궁금하십니까? 엄청난! 정적 콘텐츠를 고려할 수 있는 몇 가지 상황에 대해 논의하고 이 접근 방식이 귀하와 클라이언트 모두의 시간을 절약할 수 있는 방법을 설명하겠습니다.

브로셔 웹사이트

브로슈어웨어 웹 사이트는 비즈니스에 대한 정보를 제공하기 위한 것이며 평생 동안 크게 변경되지 않습니다. 동적 응용 프로그램은 이러한 사이트에 대해 분명히 과도합니다. 이러한 사이트는 수년간 유지 관리되지 않고 업데이트가 거의 없기 때문에 일반적으로 해커가 해킹하기 쉬운 대상입니다.

정적 HTML 템플릿은 CMS 템플릿보다 훨씬 저렴하며 나중에 조정하기가 더 쉽습니다. 이러한 사이트를 업데이트하도록 요청받은 개발자는 특정 CMS에 대한 전문 지식이 필요하지 않습니다. 원칙적으로 저는 항상 브로셔웨어 사이트용 정적 웹사이트를 만듭니다.

보너스: 소규모 비즈니스는 매월 반복되는 호스팅 비용을 지불하지 않는 것을 좋아합니다. 물론 호스팅은 큰 비용이 들지 않지만 클라이언트는 도메인 외에는 비용을 지불하지 않아도 됩니다. 정말 좋습니다.

단일 페이지 애플리케이션

최신 프론트 엔드 프레임워크에 의존하는 훌륭하고 멋진 새 앱을 선보이고 있습니까?

귀하의 애플리케이션은 이미 대부분 정적입니다. 몇 가지 추가 단계를 수행하여 모든 서버 측 로직을 별도의 애플리케이션으로 분리하고 Cloudflare의 캐시에서 완전히 제공되는 앱의 이점을 최대한 활용하십시오.

귀하의 신청서는 항상 사용할 수 있습니다.

블로그

힘든 매도입니다. 사람들에게 정적인 사이트가 블로그에 사용될 수 있다고 확신시키기는 어렵지만 저를 읽으십시오.

블로그는 템플릿으로 렌더링된 콘텐츠에 불과합니다. 각 요청을 구문 분석하고 새 페이지를 렌더링하는 본격적인 애플리케이션이 필요하지 않습니다. 정적 사이트는 이 사용 사례에 적합합니다.

지킬을 생각해보자. Liquid 템플릿과 Markdown 콘텐츠를 제공하면 정적 웹사이트로 함께 결합됩니다. 즉석 처리가 필요하지 않으며 블로그가 갑자기 훨씬 빠르게 느껴집니다.

이 워크플로는 GitHub 페이지가 Jekyll 빌드를 지원하기 때문에 특히 유용합니다. 갑자기 블로그 게시물에 풀 리퀘스트가 포함될 수 있고 모든 콘텐츠가 버전 관리 내에 저장됩니다. 개발자가 아닌 사용자도 Stackedit를 통해 게시물을 게시하여 Markdown에 게시물을 기여할 수 있습니다.

사실 저는 지금 이 포스트를 작성하기 위해 Stackedit를 사용하고 있습니다!

또한 블로그 게시물에 대한 댓글을 원할 경우 Disqus는 JavaScript 스니펫을 삽입하여 강력한 댓글 시스템을 제공합니다.

당신이 읽고 있는 이 페이지도 Disqus를 사용합니다.

GitHub 페이지

GitHub Pages는 프로젝트 페이지에 대한 GitHub의 답변이며 저장소에서 직접 정적 웹 사이트를 제공할 수 있습니다. GitHub 페이지는 사용자 정의 도메인을 지원하므로 Git에서 직접 배포하여 GitHub 페이지에서 정적 웹사이트를 무료로 호스팅할 수 있습니다.

GitHub 페이지에 배포.

충분한 이야기, 행동으로 봅시다!

저는 공개 API에서 파키스탄 루피의 현재 환율을 가져와 표시하는 단일 페이지 React 앱을 만들었습니다. 이것을 GitHub Pages에 배포해 보겠습니다.

먼저 새로운 GitHub 리포지토리를 생성해 보겠습니다.

GitHub 페이지는 gh-pages 라는 브랜치에서 제공되므로 내 프로젝트를 위해 하나 만들어 보겠습니다.

 $ git checkout -b gh-pages Switched to a new branch 'gh-pages'

사이트를 푸시해 보겠습니다.

 $ git remote add origin [email protected]:amingilani/price-check.git $ git push -u origin gh-pages Counting objects: 27, done. Delta compression using up to 8 threads. Compressing objects: 100% (25/25), done. Writing objects: 100% (27/27), 28.67 KiB | 0 bytes/s, done. Total 27 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To github.com:amingilani/price-check.git * [new branch] gh-pages -> gh-pages

그리고 우리는 끝났습니다! 이 시점에서 웹 사이트는 https://amingilani.github.io/price-check 에서 무료 SSL로 사용할 수 있습니다.

중요한 사항:

• GitHub 페이지는 프로젝트의 gh-pages 분기에서 index.html 파일을 제공합니다.
• 웹사이트는 USERNAME.github.io/REPOSITORY-NAME 에서 제공됩니다.

도메인 이름 사용자 지정.

GitHub에서 사이트를 제공하는 것은 괜찮지만 괜찮은 웹사이트에는 사용자 정의 도메인 이름이 필요합니다. 운 좋게도 GitHub를 사용하면 파티에 자신의 도메인을 가져올 수 있습니다!

먼저 특수 CNAME 파일을 만들고 여기에 도메인 이름을 배치하겠습니다. 이렇게 하면 GitHub에서 저장소로 라우팅할 도메인 이름을 알 수 있습니다.

 $ echo 'pricecheck.gilani.me' > CNAME $ git add . $ git commit -m 'Add a custom domain' ... $ git push ...

둘째, 하위 도메인 의 CNAME 이 USERNAME.github.io 에 있는 GitHub의 DNS를 가리키도록 합시다.

주의: apex 도메인에는 이것을 사용하지 마십시오 ! 도메인 루트에 CNAME 레코드를 추가하면 MX 및 TXT 레코드가 비활성화됩니다. 하위 도메인에만 사용하십시오. Apex 도메인은 나중에 설명합니다.

이 시점에서 웹 사이트는 HTTP의 사용자 지정 도메인에서 실행되어야 합니다.

중요한 사항:

• 기본 *.github.io 도메인은 HTTPS를 통해 제공됩니다.
• 우리의 사용자 정의 도메인 이름은 안전하지 않은 HTTP를 통해 제공됩니다.
• 이메일을 삭제하지 않으려면 apex 도메인에서 CNAME 레코드를 사용하지 마십시오 .

GitHub 페이지의 제한 사항:

• 저장소의 파일 크기는 1GB 미만이어야 합니다.
• 웹사이트의 파일 크기는 1GB 미만이어야 합니다.
• 월간 대역폭 제한은 100GB입니다. 우리는 나중에 이것을 우회할 것입니다.

apex 도메인을 사용자 지정 도메인으로 사용

이 제한을 해결하는 가장 쉬운 방법은 www 를 하위 도메인으로 사용하고 모든 HTTP 트래픽을 정점에서 www 로 리디렉션하는 것입니다. 내 예에서는 gilani.me 를 www.gilani.me 로 리디렉션하여 내 정적 사이트를 가리키지만 쉬운 방식으로 작업하는 것을 좋아하지 않습니다.

정말로 apex 도메인을 사용하려면 DNS 제공업체에서 ANAME 레코드를 설정할 수 있는지 확인하세요. 동일한 영역에 있는 다른 레코드를 무효화하지 않기 때문에 도메인과 A 레코드를 가리킬 수 있기 때문에 CNAME 레코드의 중간에 있습니다.

ANAME 없습니까? 마지막 옵션은 이를 지원하는 DNS 공급자로 변경하는 것입니다. Cloudflare를 입력하세요. Cloudflare는 ANAME 레코드와 동일한 apex 도메인에서 CNAME 병합을 제공합니다. 다음 섹션에서 Cloudflare를 다룰 예정이므로 지금 전환하는 것이 가장 좋습니다.

TLDR : Cloudflare의 무료 DNS로 전환하고 apex 도메인에 CNAME 을 설정합니다. 그들은 CNAME 이 작동하도록 하는 특별한 일을 합니다.

SSL 및 Cloudflare

포스트 스노든 시대에 오신 것을 환영합니다. 정부가 승인한 스누핑 및 해킹에 대한 모든 최악의 두려움이 확인되었으며 전 세계는 전송 및 저장 데이터를 보호하기 위해 분주히 움직이고 있습니다.

최신 웹 관리자는 웹사이트에서 혼합 콘텐츠 없이 최소한 SSL을 제공해야 합니다.

Google 크롬은 일반 HTTPS 웹사이트를 안전하지 않은 것으로 표시하고 Google 검색은 순위에서 HTTPS 웹사이트를 더 선호하기 시작했습니다. 프론트엔드 보안을 위한 더 많은 전략에 대해서는 나중에 논의하겠지만 지금은 SSL만 다룰 것입니다.

다행히 이제 Let's Encrypt가 있습니다.

비영리 단체이며 완전히 자동화된 인증 기관(CA)을 통해 제어하는 ​​모든 도메인에 대해 단기 90일 SSL 인증서를 프로그래밍 방식으로 발급할 수 있습니다. 사용하기 쉽습니다. 오픈 소스입니다. 이 프로젝트는 Mozilla와 Electronic Frontier Foundation을 비롯한 수많은 회사의 지원을 받습니다.

Cloudflare를 잘 활용하기

Cloudflare는 DNS, CDN 및 DDoS 보호 서비스입니다.

웹 사이트를 캐시하고 지리적으로 가까운 서버의 사용자에게 제공하여 웹 사이트를 더 빠르게 만듭니다. 웹 사이트가 엄청나게 인기를 얻더라도 대부분의 요청이 캐시에 도달하고 서버에 도달하지 않기 때문에 GitHub의 100GB 대역폭 제한 아래로 유지하는 추가 이점이 있습니다.

또한 Cloudflare는 범용 SSL이라는 서비스를 제공하여 CA 파트너로부터 무료 SSL 인증서를 발급하므로 HTTPS를 영원히 무료로 받을 수 있습니다.

왜 Cloudflare인가?

무슨 생각을 하는지 알아요. Gilani, 방금 Let's Encrypt가 얼마나 멋진지 알려주셨어요. Cloudflare에 대해 이야기하는 이유는 무엇입니까? 글쎄, 모든 것은 단순함으로 귀결됩니다.

정신적 연습으로 전 세계에 여러 Nginx 캐시 및 역방향 프록시를 설정하고 모든 유효한 SSL 인증서를 제공하고 가장 가까운 위치에서 사용자 웹 페이지를 제공한다고 상상해 보십시오.

결과적으로 원본 서버에 SSL 인증서가 없는 경우에도 SSL을 통해 웹사이트가 제공됩니다. 그러나 Cloudflare는 원본 서버에 추가하여 Cloudflare 서버까지의 연결을 보호할 수 있는 특별한 자체 서명 인증서를 제공합니다. 이것이 Cloudflare가 무료 플랜으로 제공하는 것이며 90일마다 인증서를 갱신할 필요도 없습니다.

프리랜서로서 나는 가능한 한 빨리 비즈니스를 위해 사이트를 구축하고 운영하기를 원하는 클라이언트를 얻습니다. 그들은 보안 문제, 최신 웹을 괴롭히는 문제 또는 전송 중 암호화를 이해하거나 신경 쓰지 않습니다. 일부 고객은 도메인 이름의 개념을 이해하는 데 어려움을 겪고 있으며 "단지 내 웹사이트를 계속 운영하기 위해" 15달러의 연회비를 지불해야 하는 경우 짜증이 납니다. 따라서 무료 호스팅 자체에서 실행되는 웹 사이트를 보호하는 역방향 프록시 클러스터에 비용을 지불해야 하는 이유를 설명하십시오.

Cloudflare SSL 설정

다시 손을 더럽히자. 가장 먼저 할 일은 Cloudflare를 통해 모든 트래픽을 라우팅하도록 전환하는 것입니다.

그런 다음 Crypto에서 SSL 수준을 "전체"로 설정합니다.

혼합 콘텐츠 경고를 제거하려면 "자동 HTTPS 재작성"을 강제 실행합니다.

이 시점에서 저희 웹사이트는 HTTP와 HTTPS 모두에서 작동합니다. 도메인의 모든 항목에 대해 HTTPS를 강제 실행해 보겠습니다.

모두 완료되었습니다. 우리 웹사이트는 항상 Chrome에서 녹색 "보안" 등급으로 HTTPS를 통해 로드되어야 합니다.

최종 단어 및 보안 고려 사항

위에서 논의하지 않은 몇 가지 사항이 있으며 잠시 시간을 내어 몇 가지 사항을 명확히 하고자 합니다.

기민한 당신은 이 설정에 몇 가지 눈에 띄는 보안 문제가 있다는 점, 즉 다음과 같은 보안 HTTP 헤더가 없다는 점을 지적할 것입니다.

• Content-Security-Policy : 호스트의 화이트리스트에서 스크립트와 자산을 로드하고 인라인 js를 허용하지 않을 수 있습니다.
• X-Frame-Options : 웹사이트가 iframe에서 로드되지 않도록 합니다.

그리고 당신 말이 맞아. GitHub 페이지와 Cloudflare에서도 HTTP 헤더를 사용자 정의할 수 없습니다 . 그러나 HTML meta 태그를 사용하여 CSP를 설정할 수 있습니다.

다음을 웹 페이지에 삽입하기만 하면 됩니다.

 <meta http-equiv="Content-Security-Policy" content="default-src https:">

그러나 현재로서는 GitHub 페이지에 X-Frame-Options 헤더를 설정할 수 있는 실용적인 방법이 없습니다. 즉, 공격자가 웹페이지를 특수 제작된 iframe 에 로드하고 XSS 공격을 수행할 수 있습니다. 하지만 헌신적이라면 모든 민감한 작업에 대해 사용자에게 비밀번호 또는 2FA 토큰을 확인하도록 요청하거나 인증된 모든 요청에 ​​대해 CSRF 토큰을 전달하여 이 문제를 해결할 수 있습니다.

일부 사람들의 주요 관심사는 GitHub의 무료 공개 리포지토리를 사용하면 웹 사이트와 소스 코드를 포크하거나 다운로드하려는 모든 사람이 사용할 수 있다는 것입니다. 그래서 저는 여기서 우려가 잘못된 것이라고 생각합니다.

정적 콘텐츠는 사용자에게 제공되기 전에 스크립트로 컴파일되거나 처리되지 않는다는 점에서 소스 코드가 아닙니다. 사용자가 웹사이트를 가리키는 웹 크롤러를 실행하는 경우 웹사이트의 동일한 정적 사본을 얻게 됩니다. GitHub 리포지토리에서 코드를 호스팅하면 확실히 웹사이트 사본을 더 쉽게 다운로드할 수 있지만 아직 공개되지 않은 것은 노출되지 않습니다.

확장성, 무제한 확장성

이 기사에서 제시하는 아이디어는 소규모 애플리케이션의 무료 웹 호스팅에 국한되지 않습니다.

최신 JavaScript 프레임워크를 기반으로 프런트엔드 레이어를 구축하고 Firebase와 같은 대규모 클라우드 기반 BaaS(Backend-as-a-Service)에 연결하고 서버, 가동 시간, 또는 기타 인프라 관련 문제.

새로운 흥미진진한 웹 기반 게임을 만든다?! GameSparks를 확인하고 시작하십시오.

요약, 고백 및 링크

이 기사에서는 React 앱을 gh-pages 에 수동으로 게시한 것처럼 보이게 했습니다. 나는 그런 일을 하지 않았다. 저는 master 에서 작업했고 배포할 때가 되었을 때 빌드 스크립트를 시작하고 빌드를 gh-pages 로 푸시하는 npm run deploy 를 실행했습니다. 어떻게 작동하는지 보려면 내 저장소의 master 분기를 참조하십시오.

테이크아웃

장점:

• 즉각적인 배포
• 손쉬운 협업
• 안전한 호스팅 환경

주의 사항:

• HTTP 헤더에 액세스할 수 없음
• 웹사이트 사본을 쉽게 다운로드
• GitHub 지식 필요
• 기술 공급업체에 따라 다름

연결:

• amingilani/price-check에서 내 앱의 소스 코드를 찾을 수 있습니다.
• 이 앱은 pricecheck.gilani.me에 게시되어 있으며 무기한 사용할 수 있습니다.