カスタムドメインを使用してアプリプラットフォーム上でアプリを構築および展開する

紹介

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

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

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

前提条件

App PlatformにアクセスするためのDigitalOceanアカウント。
GitHubアカウント。
NameCheapや同様のプラットフォームでカスタムドメインが利用可能です。

DigitalOcean App Platformとは何ですか？

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

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

DDoS緩和、自動OSパッチ適用、垂直スケーリング、HTTPサポート、グローバルCDNおよびドメインサポートなどの機能を備えたApp Platformは、アプリの公開と管理を簡単にします。

ステップ1 - アプリプラットフォームを使用してデプロイする

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

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

App Platformを使用してGitHubでアプリケーションを展開する方法を見てみましょう。プライベートなGitHubリポジトリにこのシンプルなHello Worldコードを含むindex.html<&47;code>ファイルがあるとしましょう。

<!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ファイルのみで構成されているため、デフォルトの/を使用します。コードがモノレポ構造に従っている場合は、コードが存在する特定のディレクトリを選択してください。

auto-deploy<&47;code>を選択してください。これにより、新しい変更をプッシュするたびに自動的に再デプロイされます。

アプリのリソースを設定し、次へ<&47;strong>をクリックします。これが表示される内容です:

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

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

次に、Next<&47;code>をクリックしてReview<&47;code>ページを表示し、請求、場所などのアプリ関連情報を確認します。そして最後に、Create resource<&47;code>をクリックしてアプリをデプロイします。

これには数分かかります。アプリがデプロイされると、URLやその他の詳細を概要<&47;code>ページで確認できます。

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

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

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

アプリにカスタムドメインを追加する方法は2つあります。
自動化を使用する
コントロールパネルを使用して
この記事では、コントロールパネルを使用してカスタムドメインを設定する方法を説明します。
DigitalOcean Cloudにログインし、ドメインを追加したいアプリを選択し、次に設定<&47;code>タブをクリックします。
次に、Domains<&47;code>の右にあるEdit<&47;code>リンクをクリックし、その後Add Domain<&47;code>ボタンをクリックします。
下のテキストフィールドにドメイン名を入力し始めると、カスタムドメインを追加するための2つのオプションが表示されます。
カスタムドメインは、DigitalOceanのネームサーバーを使用するか、CNAMEプロバイダーを使用して追加できます。
DigitalOceanのネームサーバーを使用するには、ns1.linux-console.net<&47;code>、ns2.linux-console.net<&47;code>、ns3.linux-console.net<&47;code>をコピーして、ドメインレジストラのネームサーバーレコードに貼り付けます。一般的なドメインレジストラからDigitalOceanのネームサーバーにドメインを委任する方法については、チュートリアル「一般的なドメインレジストラからDigitalOceanのネームサーバーにポイントする」をご覧ください。
ドメインにCNAMEレコードを追加することもできます。DNSプロバイダーがDigitalOceanでない場合は、指示についてのドキュメントを確認してください。コピー<&47;strong>ボタンを使用してondigitalocean.app<&47;code>エイリアスをコピーし、DNSプロバイダーのCNAMEレコードに貼り付けてカスタムドメインをApp Platformアプリにポイントします。完了したら、ドメインを追加<&47;strong>ボタンをクリックしてください。
ドメインに関連するより高度な設定については、App Platformのドメイン管理に関するドキュメントを参照してください。
Namecheapで購入したドメインを追加する
上記の手順に従って、任意のプラットフォームで購入したカスタムドメインを追加できます。この例では、Namecheapで購入したドメインの設定をどのように構成するかを見てみましょう。
Namecheapアカウントにログインします。ドメインリストをクリックし、追加したいドメインを選択してから、管理をクリックします。
次に、高度なDNSタブに移動し、新しいレコードを追加をクリックします。
次に、DigitalOceanのコントロールパネルに移動し、下に表示されているフィールドからリンクをコピーします。
Namecheapに貼り付けて、変更を保存してください。
それだけです！これで、あなたのアプリケーションがカスタムドメインにマッピングされました。
結論
この記事では、DigitalOceanを使用してアプリケーションをデプロイし、カスタムドメインを管理する方法を学びました。
カスタムドメインは、ユニークでブランドに関連しているため、ウェブサイトが検索エンジンでより高くランク付けされるのに役立ちます。また、人々がURLを覚えやすくし、アプリケーションにアクセスしやすくします。
カスタムドメインに従うべきいくつかのベストプラクティスは次のとおりです。
SSL/TLSセキュリティを確保してください。これはデータを暗号化し、安全な接続を提供することでSEOを改善します。
ドメインの健康を定期的に監視して問題を検出し、ユーザーの最適なパフォーマンスを維持します。
データ損失から保護し、ドメインやサイトに問題が発生した場合に迅速な回復を可能にするために、バックアップを作成してください。
次のステップ
何らかの理由でアプリを中止することを決定した場合は、アプリを削除する前にカスタムドメインを削除してください。削除するには、コントロールパネルに移動し、アプリをクリックし、次に設定をクリックします。次に、ドメインの右側にある編集リンクと三点リーダー(…)メニュー項目をクリックし、最後にドメインを削除をクリックしてドメインを削除します。
役立つリソースのリストはこちらです:
特殊文字を含むドメインをどのように追加しますか？
DNSのハウツー
関連するLet’s Encrypt証明書のために、ドメインを削除できません。