정적 사이트 배포를 위한 Surge 사용: 종합 가이드

정적 웹 사이트를 배포할 때 웹 앱 개발자는 항상 웹 사이트를 개선하기 위한 가장 최신의 가장 효율적인 도구를 검색합니다. 일반적으로 SSG(정적 사이트 생성기)는 수동으로 코딩된 작업과 완전한 CMS로 즉흥적으로 작동합니다. 이 설정은 서버 측 처리가 아닌 대부분의 웹 사이트 또는 웹 응용 프로그램 프로젝트에 적합합니다. 추세로 인해 개발자는 다양한 서버 엔드포인트를 처리하기 위해 webtask.io 프로그램으로 전환하고 있습니다. 웹 앱 개발의 중요한 추세와 함께 이 기사에서는 개발자가 정적 사이트 및 서버리스 웹 애플리케이션.

정적 사이트 생성기는 무엇입니까?

자세히 설명하면 State Site Generators를 사용하는 개발자는 HTML 전용 웹사이트를 생성하여 프로세스를 시작합니다. HTML 전용이기 때문에 사이트는 대부분 원시 데이터와 템플릿으로 실행됩니다. 언급한 바와 같이 원시 데이터는 "마크다운 파일"로도 분류됩니다. 더 나은 이해를 위해 마크다운 파일(링크: https://guides.github.com/features/mastering-markdown/)은 마크다운 언어의 방언을 사용하는 일반 텍스트 파일입니다. 일반 텍스트 서식에는 굵게, 기울임꼴, 들여쓰기, 머리글 및 표시를 포함하여 텍스트로 서식을 만들기 위한 텍스트 기호가 포함되어 있습니다.

동적 웹 사이트와 달리 이러한 파일은 상대적으로 프로그래밍 지식이 필요하지 않으며 가장 기본적인 웹 사이트 유형입니다. 따라서 사이트의 각 웹 페이지에는 모든 플랫폼의 모든 사용자에게 동일하게 표시되는 고정 웹 사이트 콘텐츠가 포함된 자체 HTML 파일이 있습니다. 결과는 라이브 서버로 전송되는 빌드입니다.

정적 사이트 대 동적 사이트

비교해서, 정적 웹사이트 클라이언트 측 HTML 및 CSS 코드 기반입니다. 클라이언트가 정적 서버 웹 사이트에서 요청하면 HTML 파일이 게스트 장치에 즉시 표시될 수 있는 사이트에 깔끔하게 패키징됩니다. 일부 인기 있는 정적 사이트 생성기는 다음과 같습니다. 지킬, Github 페이지가 지원하는 다음 보기. 반대로 동적 웹 사이트는 클라이언트 측 및 서버 측 스크립팅 언어에 의존합니다. 예를 들어 JavaScript (링크 : https://www.javascript.com), PHP (링크 : https : //www.php.net), ASP (링크 : https : //www.w3schools.com/) asp / webpages_intro.asp)는 "동적 서버 측"스크립트입니다. 설명으로 HTTP 동적 서버로 실행하면 파일이 브라우저로 전송됩니다. 동시에 생성기는 최종 사용자가 페이지를 호출 할 때마다 새 HTML 파일을 만듭니다.

서지 란?

Surge는 정적 웹 사이트 및 애플리케이션을 배포하고 호스팅하기위한 서비스입니다. 이를 사용하여 다음과 같은 정적 사이트 생성기로 빌드 된 프로젝트를 호스팅 할 수 있습니다. 개츠비.js, 지킬. HTML, CSS 및 클라이언트 측 JavaScript로 빌드된 모든 사용자 정의 프로젝트도 작동합니다. 무료 요금제는 거의 모든 정적 사이트에 최적이며 명령줄에 몇 번의 키 입력만으로 서비스 구성을 수행할 수 있습니다. 사용자 지정 SSL, 암호 보호 등과 같은 몇 가지 추가 기능을 추가하는 프리미엄 버전을 사용할 수 있습니다.

왜 Surge를 사용해야합니까?

Surge는 모든 프런트 엔드 웹 개발자가 사용해야 하는 매우 편리한 도구입니다. 매우 간단하며 몇 초 안에 정적 사이트를 온라인에 게시할 수 있습니다. 모든 웹 게시에는 명령줄에 대한 몇 가지 명령이 필요하며 가장 중요한 부분은 투자가 필요하지 않다는 것입니다. 또한 사용자는 프로젝트에 개인 도메인을 추가하고, 다른 사용자와 프로젝트를 공유하고, 404 오류 페이지를 만들어 클라이언트를 다른 웹 페이지로 안내할 수 있습니다. Surge에는 다른 인기 있는 정적 사이트 배포자에게는 없는 몇 가지 고유한 이점이 있습니다("Surge와 Github 페이지 비교" 참조).

Surge는 무료 서비스입니까?

위에서 암시한 바와 같이 Surge는 사용 비용이 필요하지 않습니다. 그러나 추가 비용을 기꺼이 투자하려는 사용자에게 더 많은 혜택을 제공하는 Surge Professional이 있습니다. 이 프리미엄 버전의 서비스는 월 $30부터 시작합니다. 특히, 추가 요금으로 전문적인 프로젝트를 무제한으로 만들고, 맞춤형 SSL을 보유하고, HTTPS로 보안 웹사이트를 구축할 수 있습니다. 또한 리소스를 공유하고 사이트 내에서 리디렉션을 개발하고 암호로 프로젝트를 보호할 수 있습니다.

소규모 또는 개인 웹 사이트를 만들기 위해 소스 파일을 게시하는 경우 무료 요금제로 충분합니다. 그러나 정기적으로 프로젝트 게시를 위해 Surge에 의존하는 사람에게는 Surge Premium도 현명한 선택입니다.

Surge 설치

Surge 설치 및 계정 설정은 매우 간단하고 직관적입니다. 새 터미널 창을 열고 다음 명령을 입력합니다.

npm install – 글로벌 서지

(참고 :이 단계에서는 Node 및 npm이 시스템에 이미 설치되어 있다고 가정합니다. 그렇지 않은 경우 공식 사이트에서 최신 버전을 설치할 수 있습니다. Node.js 웹 사이트.)

Node.js.website가 올바르게 설치되었는지 확인하려면 명령 줄로 이동하여 상태에 'node -v'를 입력하십시오.

처음 설정할 때 Surge에서 계정 설정을 요청합니다. 유일한 요구 사항은 이메일 주소와 암호를 제공하고 나중에 이메일을 확인하는 것입니다. 이 단계를 완료하면 Surge 계정으로 설정되고 해당 서비스에 배포할 준비가 됩니다.

사이트 배포

정적 웹 사이트를 Surge에 사용하려면 먼저 구현하려는 프로젝트 디렉토리의 파일 경로를 찾으십시오. 예를 들어 /Users/air/surge-test에 있는 프로젝트를 구현하겠습니다.

배포 할 디렉터리의 파일 경로를 알고 나면 터미널 창에서 다음 명령을 실행합니다.

발생

사용자 이름(즉, 이메일 주소)이 표시됩니다. 그런 다음 프로젝트의 파일 경로를 제공해야 합니다.

전체 파일 경로를 입력 한 다음 Enter 키를 누르십시오.

서지 프로그램은 임의의 단어를 사용하여 도메인 이름을 자동으로 제공합니다. 아직 사용하지 않은 경우 사용자 지정 도메인을 만들 수도 있습니다. 선택한 도메인 이름을 입력 한 다음 Enter 키를 누르십시오.

(참고: 입력한 사용자 지정 도메인 이름이 이미 사용 중인 경우 오류 메시지가 표시됩니다.
중단됨 – [에 게시할 수 없습니다. ]

배포가 완료되면 터미널에 성공 메시지가 표시됩니다. 프로젝트의 도메인 이름과 IP 주소는 라이브 배포에 액세스할 수 있는 위치를 보여줍니다.

웹 브라우저에 도메인 이름을 입력하면 이제 사이트가 라이브로 표시됩니다.

사용자 지정 도메인 이름 추가

CNAME 레코드 사용

기본적으로 Surge는 서비스에 배포하는 모든 웹사이트에 대해 사용자 지정 하위 도메인을 제공합니다. your-custom-domain.surge.sh처럼 보일 것입니다. 하위 도메인을 사용자 지정하고 선택할 수 있습니다(아직 사용하지 않은 경우). 모든 전문 프로젝트에 사용자 지정 도메인을 사용하고 싶을 것입니다.

이렇게하려면 도메인 공급자의 DNS 패널에 두 개의 새 CNAME 레코드를 추가해야합니다. 하나는 호스트 이름이 @이고 다른 하나는 호스트 이름이 www입니다. 두 CNAME 레코드는 다음 IP 주소를 가리 킵니다.

na-west1.surge.sh

A 레코드 사용

어떤 이유로 도메인 공급자가 CNAME 레코드를 허용하지 않는 경우 A 레코드를 대안으로 설정할 수 있습니다. A 레코드가 45.55.110.124의 IP 주소를 가리키도록 합니다.

사용자 지정 하위 도메인 사용

또한 사용자 지정 하위 도메인을 사용하여 sub.my-cool-site.com과 같은 Surge를 가리킬 수 있습니다. 그렇게 하려면 새 CNAME 레코드를 설정해야 합니다. 이것은 위의 동일한 na-west1.surge.sh IP 주소로 이어져야 하지만 이번에는 호스트 이름이 *가 됩니다. * 호스트 이름은 와일드카드입니다. 기본 도메인을 제외한 모든 하위 도메인이 유효하고 허용됩니다.

급증 프로그램은 이러한 DNS 변경 사항을 즉시 인식합니다. 다른 곳으로 전파하는 데 시간이 걸릴 수 있습니다. 그러나 일반적으로 24 – 48시간을 넘지 않습니다.

사용자 지정 도메인을 사용하여 프로젝트 배포

DNS 설정이 적용되면 프로젝트를 배포할 수 있습니다. 사용하려는 도메인을 지정해야 합니다. 그렇게 하려면 터미널에서 서지 명령을 실행하십시오. 다음과 같이 먼저 프로젝트의 파일 경로를 지정한 다음 사용자 지정 도메인을 나중에 지정합니다.

급증 파일 경로//프로젝트 a-cool-custom-domain.com

사용자 지정 도메인을 프로젝트에 바인딩

도메인을 프로젝트에 바인딩할 수 있으므로 배포할 때마다 도메인을 입력할 필요가 없습니다. echo 명령을 사용하여 다음과 같이 CNAME 파일로 보낼 수 있습니다.

echo a-cool-custom-domain.com> CNAME

Surge 프로젝트 공유

다른 Surge 사용자에게 게시 권한을 부여하려면 먼저 프로젝트를 게시해야 합니다. 그런 다음 명령줄에 추가 명령을 입력하여 이메일 주소로 공동 작업자를 추가합니다.

급증 – 추가 협력자@email.com

프로젝트에 초대되고 초대를 수락한 게스트는 이제 자신의 소스 파일을 동일한 도메인에 게시할 수 있습니다.

서지 프로젝트 나열

Surge를 사용하여 게시한 프로젝트를 보려면 이 간단한 Surge 명령을 명령줄에 입력하십시오. 이렇게 하면 모든 프로젝트 목록이 생성됩니다.

서지 목록

사용자 지정 404 오류 페이지 추가

기본 404 오류 페이지를 사용자 지정 빌드로 교체하려는 경우 새 404 파일을 배포할 준비가 되었을 때 Surge 프로젝트에 404.html 파일을 추가하기만 하면 됩니다.

.surgeignore 파일 생성

Git 생태계의 .gitignore 파일과 마찬가지로 Surge는 자체 무시 파일을 제공합니다. Surge가 배포 시 해제할 파일 및 디렉터리 목록을 설정할 수 있으며 이는 개발 프로세스 중에만 관련될 수 있는 파일을 제외하는 데 유용합니다. 완전히 비공개로 유지할 수 있는 모든 항목도 여기에 포함하는 것이 좋습니다.

이를 설정하려면 프로젝트 폴더의 루트에 .surgeignore라는 새 파일을 만듭니다. 이 파일에서 무시할 파일과 디렉토리를 나열할 수 있습니다. 몇 가지 일반적인 예로는 node_modules, bower_components 등이 있습니다. 사이트의 프로덕션 버전과 관련이 없는 특정 파일 형식을 무시할 수도 있습니다. 확장자(예: *.swp, *.psd 등) 앞에 *(와일드카드 기호)를 추가하면 됩니다.

Surge에서 사이트 제거

어떤 이유로 웹 사이트를 삭제하려는 경우에는 서지 분해 명령과 프로젝트 도메인을 사용하여 쉽게 할 수 있습니다.

서지 분해 your-domain.com

프로젝트 제거를 시도하기 전에 Surge 버전이 최신 버전으로 업데이트되었는지 확인하십시오.

Surge 및 Github 페이지 비교

Surge와 유사한 또 다른 인기있는 대체 정적 호스팅 서비스는 Github 페이지. 이 무료 서비스를 통해 사용자는 Github 리포지토리에서 개인 정적 사이트 프로젝트를 호스팅할 수 있습니다. Github Pages는 모든 수준의 웹 개발자들 사이에서 가장 높은 등급의 정적 호스팅 서비스 중 하나로 매우 잘 알려진 평판을 자랑합니다. github.io 도메인에서 만들 수 있는 "프로젝트 페이지 또는 사용자 및 조직 페이지"의 두 가지 유형의 페이지를 만들 수 있습니다. 물론 사용자 지정 도메인도 자유롭게 사용할 수 있습니다. Github는 상업적 목적의 프로젝트를 호스팅 서비스를 사용하여 게시하지 말 것을 명시적으로 권장합니다. 따라서 대규모 웹 사이트를 수용하지 못할 수도 있지만 Github 페이지는 비상업적 또는 개인 용도에 적합합니다.

프로젝트 페이지와 사용자 및 조직 페이지 사이에는 약간의 차이가 있습니다. 프로젝트 페이지는 마스터 및 "GH 페이지" 분기를 포함하여 여러 소스 위치에서 게시할 수 있습니다. 사용자 지정 도메인이 없으면 기본 게시 도메인은 https://입니다. .github.io/. 반면에 사용자 및 조직 페이지는 Github 리포지토리 아래의 마스터 브랜치에 있습니다. https:// 도메인으로 게시했습니다. .github.io.

Surge의 이점

Github Pages는 의심할 여지 없이 강력한 도구이지만 Surge는 Github Pages에도 없는 몇 가지 이점을 제공합니다. 이러한 이점 중 하나는 클라이언트 측 라우팅입니다. Surge 프로젝트 내에서 클라이언트가 존재하지 않는 경로를 요청하는 경우 클라이언트를 "백업" HTML 파일(200.html)로 리디렉션할 수 있습니다. 이는 Surge가 경고 404 오류를 표시하는 대신 대체 파일을 제공하기 때문에 유용합니다.

Surge의 또 다른 주목할만한 이점은 사용자가 사이트에 새로운 변경 사항을 몇 초 만에 배포할 수 있다는 것입니다. 위에서 설명한 것처럼 명령줄에 서지 명령을 입력하기만 하면 모든 변경 사항을 온라인에서 즉시 볼 수 있습니다. 테스트 실험 중에 특히 유용한 사용자 웹 사이트에 대한 간단한 편집은 관리하기가 더 쉽습니다. 웹 페이지를 즉시 새로 고치는 옵션 때문에 웹 브라우저에서 변경 사항을 보는 것이 더 눈에 띕니다. 또는 Github Page 사용자는 계속해서 온라인 인터페이스에 변경 사항을 적용하고 커밋하며 더 길고 지루한 프로세스로 어려움을 겪을 것입니다. 장기적으로 올바른 정적 사이트는 소프트웨어 개발자의 혼란스러운 시간을 방지합니다.

결론

결론적으로 Surge를 사용하여 정적 사이트를 배포하는 것은 개발 프로세스를 간소화하고 웹 사이트를 빠르게 시작하고 실행하는 데 도움이 되는 강력한 도구입니다. 숙련된 개발자이든 이제 막 시작한 개발자이든 Surge는 웹 사이트를 빠르게 구축하고 시작하는 데 도움이 되는 사용자 친화적이고 직관적인 플랫폼입니다.

초기 설정 및 구성부터 사이트 배포 및 관리까지 Surge는 웹사이트를 쉽게 관리할 수 있는 포괄적인 기능과 도구 세트를 제공합니다. 리드 생성 항상 원활하게 실행되는지 확인하세요. 강력한 자동화 기능과 유연한 구성 옵션을 갖춘 Surge는 정적 사이트를 빠르고 효율적으로 구축하고 배포하려는 모든 사람에게 탁월한 선택입니다.

전반적으로 정적 사이트를 배포하는 안정적이고 효율적인 방법을 찾고 있다면 Surge를 고려해 볼 가치가 있습니다. 직관적인 인터페이스, 강력한 기능 및 유용한 문서를 제공하는 Surge는 웹사이트를 한 단계 업그레이드하려는 모든 개발자에게 유용한 도구입니다. 따라서 이를 시도해보고 개발 프로세스를 간소화하고 사이트를 다음 단계로 끌어올리는 데 어떻게 도움이 되는지 알아보십시오.