カスタムドメインを使用してDigitalOcean App Platformにアプリを構築およびデプロイする

チュートリアル
DNS

はじめに

開発者として、私たちは趣味や新しいことを学ぶために、しばしば副業でプロジェクトを構築します。これらのプロジェクトは、私たちのスキルの証明にもなります。

あなたは仕事の証拠を持つべきです。コードに加えて、ユーザーはあなたのアプリケーションを使用できる必要があり、そのためにはlocalhost:3000だけでなく、リンクを通じてアクセスできる必要があります。これを達成するためには、アプリケーションをデプロイし、カスタムドメインにマッピングして、より読みやすく、簡単に共有できるようにする必要があります。

この記事では、DigitalOcean App Platformを紹介し、アプリケーションのデプロイからカスタムドメインへのマッピングまで、わずか数回のクリックでどれほど簡単であるかを示します。

前提条件

  1. DigitalOceanアカウントを持って、App Platformにアクセスします。

  2. GitHubアカウント。

  3. カスタムドメインはNameCheapまたは同様のプラットフォームで利用可能です。

DigitalOcean App Platformとは何ですか？

App Platformは、開発者がアプリケーションを簡単に構築、デプロイ、およびスケールできる完全に管理されたプラットフォーム・アズ・ア・サービス（PaaS）です。これは多くのインフラ管理を抽象化し、コードおよびデプロイメントに集中できるようにします。

それは、GitHubやGitLabなどのgitプロバイダからコードを自動的に解析して構築し、アプリケーションをクラウドに公開することができます。また、すでにDigitalOcean Container RegistryやDocker Hubにアップロードしたコンテナイメージを使用して公開することもできます。

DDoS対策、自動OSパッチ適用、垂直スケーリング、HTTPサポート、グローバルCDN、ドメインサポートなどの機能を備えたApp Platformを使用すると、アプリケーションの公開と管理が簡単になります。

ステップ1 – App Platformを使用したデプロイ

アプリケーションが準備できたら、monorepos、コンテナイメージ、またはGitHub Actionsを使用してデプロイできます。

モノリポは、多くのプロジェクトを保持するバージョン管理されたコードリポジトリです。これらのプロジェクトは関連しているかもしれませんが、通常は論理的に独立しており、異なるチームによって運営されています。

アプリプラットフォームを使用してGitHubでアプリケーションをデプロイする方法を見てみましょう。プライベートなGitHubリポジトリに、以下のシンプルなHello Worldコードを含むindex.htmlファイルがあるとします:

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を使用してデプロイ

  • アプリのページに移動し、「アプリを作成」をクリックします。

  • GitHubアカウントを接続し、ソースコードが含まれているGitHubリポジトリを選択します。

  • ソースディレクトリフィールドで、以下の画像に示すようにソースが含まれているフォルダを指定します。デモリポジトリはルートディレクトリにindex.htmlファイルのみで構成されているため、デフォルトの/を使用します。コードがモノレポ構造に従っている場合は、コードがある特定のディレクトリを選択してください。

自動デプロイを選択すると、新しい変更をプッシュするたびに自動的に再デプロイされます:

  • アプリのリソースを設定し、「次へ」をクリックします。これが表示されます:

  • 次に、アプリを最終的にデプロイする前にいくつかのチェックを行います。APIを使用するようなより複雑なアプリの場合、環境変数を追加する必要があるかもしれません。次のページでそれらを設定できます。

  • 次のステップでは、アプリケーションの名前を編集し、アプリがデプロイされるリソースを選択できます。

  • 次に、NextをクリックしてReviewページを表示します。ここでは、請求、場所などのアプリに関連する情報を確認できます。最後に、Create resourceをクリックしてアプリをデプロイします。

  • これには数分かかります。アプリがデプロイされると、URLでアプリを確認でき、Overviewページでその他の詳細を表示できます。

上記のすべての手順に従うと、あなたのアプリケーションは次のようになります: https://sea-lion-app-l8cvv.ondigitalocean.app/。

ステップ2: アプリケーションをカスタムドメインにマッピングする

アプリケーションが正常にデプロイされ、ondigitalocean.appドメインを持っているので、このステップではカスタムドメインにマッピングする方法を見ていきます。

アプリにカスタムドメインを追加する方法は2つあります:

  1. 自動化を使用する

  2. コントロールパネルを使用する

この記事では、コントロールパネルを使用してカスタムドメインを構成する方法を見ていきます。

  • DigitalOcean Cloudにログインし、ドメインを追加したいアプリを選択し、Settingsタブをクリックします。

  • その後、Domainsの右側にあるEditリンクをクリックし、Add Domainボタンをクリックします。

  • 以下のテキストフィールドにドメイン名を入力し始めると、カスタムドメインを追加するための2つのオプションが表示されます。

  • DigitalOceanのネームサーバーを使用するか、CNAMEプロバイダーを使用してカスタムドメインを追加できます。

  • DigitalOceanのネームサーバーを使用するには、それらをコピーしてドメインレジストラのネームサーバーレコードに貼り付けます（ns1.digitalocean.com、ns2.digitalocean.com、ns3.digitalocean.com）。一般的なドメインレジストラからDigitalOceanのネームサーバーにドメインを委任する方法については、DigitalOceanのネームサーバーを指す方法に関するチュートリアルをチェックしてください。

  • また、ドメインにCNAMEレコードを追加することもできます。DNSプロバイダーがDigitalOceanでない場合は、彼らのドキュメントを確認してください。コピーボタンを使用してondigitalocean.appエイリアスをコピーし、DNSプロバイダーのCNAMEレコードに貼り付けて、カスタムドメインをApp Platformアプリにポイントします。完了したら、ドメインを追加ボタンをクリックしてください。

ドメインに関連するより高度な設定については、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