디지털오션 앱 플랫폼에서 사용자 정의 도메인으로 앱 빌드 및 배포하기

튜토리얼
DNS

소개

개발자로서, 우리는 종종 새로운 것을 배우기 위해 또는 재미로 사이드 프로젝트를 진행합니다. 이러한 프로젝트들은 우리의 기술을 증명하는 역할도 합니다.

작업물의 증거가 있어야 합니다. 코드 이외에도 사용자들이 애플리케이션을 사용할 수 있어야 하며, 이를 위해서는 localhost:3000에서만 실행되는 것이 아니라 링크를 통해 접근할 수 있어야 합니다. 이를 위해 애플리케이션을 배포하고 사용자가 쉽게 공유하고 읽을 수 있도록 사용자 정의 도메인에 매핑해야 합니다.

이 글에서는 DigitalOcean App Platform을 소개하고, 몇 번의 클릭으로 애플리케이션을 배포하고 사용자 정의 도메인에 매핑하는 것이 얼마나 쉬운지 살펴볼 것입니다.

필수 준비물

  1. DigitalOcean 계정을 소유하여 App Platform에 접근할 수 있어야 합니다.

  2. GitHub 계정이 필요합니다.

  3. NameCheap 또는 유사한 플랫폼에서 사용 가능한 사용자 정의 도메인이 필요합니다.

디지털오션 앱 플랫폼이란?

앱 플랫폼은 개발자가 쉽게 애플리케이션을 구축, 배포 및 확장할 수 있도록 도와주는 완전히 관리되는 플랫폼 서비스(PaaS)입니다. 인프라 관리의 많은 부분을 추상화하여 코드 및 배포에 집중할 수 있습니다.

그것은 GitHub 및 GitLab와 같은 git 제공 업체에서 코드를 자동으로 분석하고 작성하며 응용 프로그램을 클라우드에 배포할 수 있습니다. 또한 이미 DigitalOcean Container Registry 또는 Docker Hub에 업로드한 컨테이너 이미지를 사용하여 게시할 수도 있습니다.

DDoS 방어, 자동 OS 패치, 수직 스케일링, HTTP 지원, 글로벌 CDN 및 도메인 지원과 같은 기능을 갖춘 App Platform은 앱을 게시하고 관리하기 쉽게 만듭니다.

단계 1 – App Platform을 사용하여 배포

응용 프로그램이 준비되면 monorepos, 컨테이너 이미지 또는 GitHub Actions을 사용하여 배포할 수 있습니다.

모노 저장소는 많은 프로젝트를 보유하는 버전 관리 코드 저장소입니다. 이러한 프로젝트들은 관련이 있을 수 있지만 종종 논리적으로 독립적이며 다른 팀에 의해 운영됩니다.

App Platform을 사용하여 GitHub를 통해 애플리케이션을 배포하는 방법을 살펴봅시다. 개인 GitHub 저장소에 index.html 파일이 포함된 간단한 hello world 코드가 있는 경우 다음과 같이 진행할 수 있습니다:

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello World</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <script>
    console.log("Hello, World!");
  </script>
</body>
</html>

GitHub를 사용하여 배포

  • Apps 페이지로 이동하고 앱을 만들기를 클릭합니다.

  • GitHub 계정에 연결한 다음 소스 코드가 포함된 GitHub 저장소를 선택합니다.

  • 소스 디렉토리 필드에는 아래 이미지에 나와 있는대로 소스가 포함된 폴더를 지정합니다. 데모 저장소는 루트 디렉토리에 index.html 파일만 있는 것이므로 기본값인 /을 사용합니다. 코드가 모노레포 구조를 따르는 경우, 코드가 있는 특정 디렉토리를 선택해야 합니다.

자동 배포를 선택하면 새로운 변경 사항을 푸시할 때 자동으로 다시 배포됩니다:

  • 앱에 대한 리소스를 구성하고 다음을 클릭합니다. 다음과 같은 화면이 표시됩니다:

  • 다음으로, 앱을 최종 배포하기 전에 일부 확인 절차를 거칩니다. API를 사용하는 등 보다 복잡한 앱의 경우, 환경 변수를 추가해야 할 수도 있으며 다음 페이지에서 이를 구성할 수 있습니다.

  • 다음 단계에서는 애플리케이션의 이름을 편집하고 앱이 배포될 리소스를 선택할 수 있습니다.

  • 그런 다음 다음을 클릭하여 리뷰 페이지를 보고 청구, 위치 등 다른 앱 관련 정보를 볼 수 있습니다. 마지막으로 리소스 생성를 클릭하여 앱을 배포합니다.

  • 몇 분이 걸릴 것입니다. 앱이 배포되면 개요 페이지에서 URL 및 기타 세부 정보를 확인할 수 있습니다.

위의 모든 단계를 따르면, 여러분의 애플리케이션이 다음과 같이 보일 것입니다: https://sea-lion-app-l8cvv.ondigitalocean.app/.

단계 2: 애플리케이션을 사용자 정의 도메인에 매핑하기

이제 애플리케이션이 성공적으로 배포되었고 ondigitalocean.app 도메인을 가지고 있는 상태이므로, 이 단계에서는 사용자 정의 도메인에 매핑하는 방법을 살펴볼 수 있습니다.

앱에 사용자 정의 도메인을 추가하는 두 가지 방법이 있습니다:

  1. 자동화 사용

  2. 제어판 사용하기

이 기사에서는 제어판을 사용하여 사용자 정의 도메인을 구성하는 방법을 살펴볼 것입니다.

  • 디지털오션 클라우드에 로그인하고 도메인을 추가하려는 앱을 선택한 다음 설정 탭을 클릭합니다.

  • 그런 다음, 도메인 오른쪽에있는 편집 링크를 클릭한 다음 도메인 추가 버튼을 클릭합니다.

  • 아래 텍스트 필드에 도메인 이름을 입력하기 시작하면 사용자 정의 도메인을 추가할 수있는 두 가지 옵션이 표시됩니다.

  • 디지털오션의 네임서버를 사용하거나 CNAME 공급자를 사용하여 사용자 정의 도메인을 추가할 수 있습니다.

  • DigitalOcean의 네임 서버를 사용하려면 도메인 등록기의 네임 서버 레코드에 복사하여 붙여넣기하십시오 (ns1.digitalocean.com, ns2.digitalocean.com, ns3.digitalocean.com). 인기있는 등록기에서 DigitalOcean의 네임 서버로 도메인을 위임하는 방법은 일반 도메인 등록기에서 DigitalOcean 네임 서버로 포인트하기 튜토리얼을 확인하십시오.

  • 도메인에 CNAME 레코드를 추가할 수도 있습니다. DNS 제공업체가 DigitalOcean이 아닌 경우, 지침을 확인하십시오. 커스텀 도메인을 App Platform 앱에 지정하기 위해 DNS 제공업체의 CNAME 레코드에 ondigitalocean.app 별칭을 복사하여 붙여넣으십시오. 완료되면 도메인 추가 버튼을 클릭하십시오.

도메인 관련 고급 설정에 대한 자세한 내용은 App Platform에서 도메인 관리하는 방법 문서를 참조하십시오.

Namecheap에서 구매한 도메인 추가

위 단계를 따라서 모든 플랫폼에서 구매한 사용자 정의 도메인을 추가할 수 있습니다. 이 예제에서는 Namecheap에서 구매한 도메인의 설정을 구성하는 방법을 살펴보겠습니다.

  • Namecheap 계정에 로그인하세요. 도메인 목록을 클릭한 후 추가하려는 도메인을 선택하고, 관리를 클릭합니다.

  • 그런 다음 고급 DNS 탭으로 이동한 후 새 레코드 추가를 클릭합니다.

  • 그런 다음, DigitalOcean의 컨트롤 패널로 이동하여 아래에 표시된 필드에서 링크를 복사합니다.

  • 이를 Namecheap에 붙여넣고 변경 사항을 저장합니다.

이제 애플리케이션이 사용자 정의 도메인에 매핑되었습니다.

결론

이 기사에서는 DigitalOcean을 사용하여 애플리케이션을 배포하고 사용자 지정 도메인을 관리하는 방법을 배웠습니다.

사용자 지정 도메인은 브랜드와 관련성이 높고 독특하기 때문에 웹사이트의 검색 엔진 순위를 높이는 데 도움이 될 수 있습니다. 또한 사람들이 URL을 기억하고 애플리케이션에 접근하는 데 더 쉽게 만들어 줍니다.

다음은 사용자 지정 도메인에 대해 따라야 할 몇 가지 모범 사례입니다:

  • SSL/TLS 보안을 보장하여 데이터를 암호화하고 안전한 연결을 제공함으로써 SEO를 개선합니다.

  • 문제를 감지하고 사용자에게 최적의 성능을 유지하기 위해 도메인 상태를 정기적으로 모니터링합니다.

  • 데이터 손실에 대비한 백업을 생성하고 도메인이나 사이트에 문제가 발생할 경우 빠른 복구를 가능하게 합니다.

다음 단계

어떤 이유로 앱을 중단하기로 결정한다면, 앱을 삭제하기 전에 사용자 정의 도메인을 제거해야 합니다. 도메인을 제거하려면 제어판으로 이동하여 앱을 클릭한 다음 설정을 클릭하십시오. 그런 다음 도메인 오른쪽의 편집 링크를 클릭하고 세 점(…) 메뉴 항목을 클릭한 다음, 도메인을 제거하기 위해 도메인 제거를 클릭하십시오.

도움이 될 수 있는 자료 목록은 다음과 같습니다:

Source:
https://www.digitalocean.com/community/tutorials/deploy-apps-with-custom-domain