웹사이트 검색

맞춤 도메인으로 앱 플랫폼에서 앱을 구축하고 배포하세요.


소개

개발자로서 우리는 종종 재미를 위해 또는 새로운 것을 배우기 위해 부업으로 프로젝트를 구축합니다. 이러한 프로젝트는 우리의 기술을 증명하는 역할도 합니다.

작업 증명이 있어야 합니다. 코드 외에도 사용자는 애플리케이션을 사용할 수 있어야 하며, 이를 위해 localhost:3000에만 있는 것이 아니라 링크를 통해 액세스할 수 있어야 합니다. 이를 위해서는 응용 프로그램을 배포하고 가독성을 높이고 쉽게 공유할 수 있도록 사용자 지정 도메인에 매핑해야 합니다.

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

필수 구성 요소

  1. 앱 플랫폼에 액세스하기 위한 DigitalOcean 계정.

  2. GitHub 계정.

  3. NameCheap 또는 유사한 플랫폼에서 사용할 수 있는 사용자 지정 도메인.

DigitalOcean 앱 플랫폼이란 무엇입니까?

App Platform은 개발자가 애플리케이션을 쉽게 빌드, 배포, 확장할 수 있도록 지원하는 완전 관리형 PaaS(Platform-as-a-Service)입니다. 인프라 관리의 많은 부분을 추상화하여 코드와 배포에 집중할 수 있도록 합니다.

GitHub 및 GitLab과 같은 git 공급자의 코드를 자동으로 분석 및 빌드하고 애플리케이션을 클라우드에 게시할 수 있습니다. DigitalOcean Container Registry 또는 Docker Hub에 이미 업로드한 컨테이너 이미지를 사용하여 게시할 수도 있습니다.

DDoS 완화, 자동 OS 패치, 수직 확장, HTTP 지원, 글로벌 CDN 및 도메인 지원과 같은 기능을 갖춘 앱 플랫폼을 사용하면 앱을 간단하게 게시하고 관리할 수 있습니다.

1단계 - 앱 플랫폼을 사용하여 배포

애플리케이션이 준비되면 monorepos, 컨테이너 이미지 또는 GitHub Actions를 사용하여 배포할 수 있습니다.

monorepo는 많은 프로젝트를 보유하는 버전 제어 코드 저장소입니다. 이러한 프로젝트는 서로 관련되어 있을 수 있지만 논리적으로 독립적이고 서로 다른 팀에서 실행되는 경우가 많습니다.

GitHub와 함께 App Platform을 사용하여 애플리케이션을 배포하는 방법을 살펴보겠습니다. 다음과 같은 간단한 hello world 코드가 포함된 index.html 파일이 있는 개인 GitHub 리포지토리가 있다고 가정해 보겠습니다.

<!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 페이지로 이동하여 Create App(앱 만들기)을 클릭합니다.

  • GitHub 계정을 연결한 다음, 소스 코드가 포함된 GitHub 리포지토리를 선택합니다.

  • Source Directory 필드에서 아래 이미지와 같이 소스가 포함된 폴더를 지정합니다. 데모 저장소는 루트 디렉토리의 index.html 파일로만 구성되어 있으므로 기본 /를 계속 진행합니다. 코드가 monorepo 구조를 따르는 경우 코드가 있는 특정 디렉터리를 선택해야 합니다.

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

  • 앱에 대한 리소스를 구성하고 Next(다음)를 클릭합니다. 이것이 당신이 볼 것입니다 :

  • 다음으로, 최종적으로 앱을 배포하기 전에 몇 가지 검사를 거칩니다. API를 사용하는 앱과 같이 더 복잡한 앱의 경우 환경 변수를 추가해야 할 수 있으며, 다음 페이지에서 환경 변수를 구성할 수 있습니다.

  • 다음 단계에서는 응용 프로그램의 이름을 편집하고 응용 프로그램이 배포될 리소스를 선택할 수 있습니다.

  • 그런 다음 다음을 클릭하여 청구, 위치 등과 같은 다른 앱 관련 정보를 볼 수 있는 검토 페이지를 봅니다. 그런 다음, 마지막으로 리소스 만들기를 클릭하여 앱을 배포합니다.

  • 이 작업은 몇 분 정도 걸립니다. 앱이 배포되면 URL에서 앱을 볼 수 있으며 개요 페이지의 기타 세부 정보를 볼 수 있습니다.

위의 모든 단계를 따르면 응용 프로그램이 다음과 같이 표시됩니다. https://sea-lion-app-l8cvv.ondigitalocean.app/.

2단계: 응용 프로그램을 사용자 지정 도메인에 매핑Step 2: Mapping the application to a custom domain

이제 응용 프로그램이 성공적으로 배포되고 ondigitalocean.app 도메인이 있으므로 이 단계에서는 응용 프로그램을 사용자 지정 도메인에 매핑하는 방법을 살펴보겠습니다.

앱에 사용자 지정 도메인을 추가할 수 있는 두 가지 방법이 있습니다.

  1. 자동화 사용

  2. 제어판 사용

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

  • DigitalOcean Cloud에 로그인하고 도메인을 추가하려는 앱을 선택한 다음 설정 탭을 클릭합니다.

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

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

  • DigitalOcean의 이름 서버를 사용하거나 CNAME 공급자를 사용하여 사용자 지정 도메인을 추가할 수 있습니다.

  • DigitalOcean의 네임 서버를 사용하려면 ns1.linux-console.net, ns2.linux-console.net ns3.linux-console.net)을 복사하여 도메인 등록 기관의 네임 서버 레코드에 붙여넣습니다. 일반 도메인 등록 기관의 Point to DigitalOcean 이름 서버에 대한 자습서를 확인하여 인기 있는 등록 기관에서 DigitalOcean의 이름 서버로 도메인을 위임하는 방법에 대한 지침을 확인하십시오.

  • 도메인에 CNAME 레코드를 추가할 수도 있습니다. DNS 공급자가 DigitalOcean이 아닌 경우 해당 설명서를 참조하십시오. 복사 단추를 사용하여 ondigitalocean.app 별칭을 복사하고 DNS 공급자의 CNAME 레코드에 붙여 넣어 사용자 지정 도메인이 앱 플랫폼 앱을 가리키도록 합니다. 완료되면 도메인 추가 버튼을 클릭합니다.

도메인과 관련된 고급 설정에 대한 자세한 내용은 앱 플랫폼에서 도메인을 관리하는 방법에 대한 설명서를 참조하세요.

Namecheap에서 구매한 도메인 추가하기

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

  • Namecheap 계정에 로그인합니다. Domain List(도메인 목록)를 클릭하고 추가할 도메인을 선택한 다음 Manage(관리)를 클릭합니다.

  • 그런 다음 Advanced DNS(고급 DNS) 탭으로 이동하여 Add new record(새 레코드 추가)를 클릭합니다.

  • 그런 다음 DigitalOcean의 제어판으로 이동하여 아래 표시된 필드에서 링크를 복사합니다.

  • Namecheap에 붙여넣고 변경 사항을 저장하십시오.

그게 전부에요! 이제 응용 프로그램이 사용자 지정 도메인에 매핑되었습니다.

결론

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

사용자 지정 도메인은 고유하고 브랜드와 관련이 있기 때문에 검색 엔진에서 웹사이트 순위를 높이는 데 도움이 될 수 있습니다. 또한 사람들이 URL을 더 쉽게 기억하고 애플리케이션에 액세스할 수 있습니다.

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

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

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

  • 백업을 생성하여 데이터 손실을 방지하고 도메인 또는 사이트에 문제가 발생할 경우 신속하게 복구할 수 있습니다.

다음 단계

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

유용할 수 있는 리소스 목록은 다음과 같습니다.

  • 특수 문자가 포함된 도메인을 추가하려면 어떻게 해야 하나요?

  • DNS 사용법

  • 연결된 Let's Encrypt 인증서 때문에 도메인을 삭제할 수 없습니다.

관련기사: