導入
開発者として、私たちは楽しみのため、あるいは新しいことを学ぶためなど、一緒にプロジェクトを構築することがよくあります。これらのプロジェクトは、私たちのスキルを披露する場でもあります。.
作業の証明が必要です。コードだけでなく、ユーザーがアプリケーションを利用できるようにする必要があります。そのためには、localhost:3000 ではなく、リンク経由でアクセスできる必要があります。これを実現するには、アプリケーションをデプロイし、カスタムドメインにマッピングして、読みやすさを向上させ、共有しやすくする必要があります。.
前提条件
- アプリケーション プラットフォームにアクセスするための DigitalOcean アカウント。.
- GitHubアカウント
- カスタム ドメインは NameCheap または同様のプラットフォームで利用可能です。.
DigitalOcean アプリケーション プラットフォームとは何ですか?
App Platformは、開発者がアプリケーションを簡単に構築、デプロイ、拡張できるよう支援する、フルマネージドのPlatform as a Service（PaaS）です。インフラストラクチャ管理の負担を大幅に軽減し、コード作成とデプロイに集中できます。.
GitHubやGitLabなどのGitプロバイダーからコードを自動的に解析・ビルドし、アプリケーションをクラウドに公開できます。また、DigitalOcean Container RegistryやDocker Hubにアップロード済みのコンテナイメージを使用して公開することも可能です。.
DDoS 緩和、自動 OS パッチ適用、垂直スケーリング、HTTP サポート、グローバル CDN、ドメイン サポートなどの機能を備えたアプリ プラットフォームにより、アプリの公開と管理が簡素化されます。.
ステップ1 – アプリプラットフォームを使用した展開
アプリケーションの準備ができたら、モノレポ、コンテナ イメージ、または GitHub Actions を使用してデプロイできます。.
モノレポとは、多くのプロジェクトを収容するバージョン管理されたコードリポジトリです。これらのプロジェクトは互いに関連している場合もありますが、論理的には独立しており、異なるチームによって管理されていることがよくあります。.
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を使ったデプロイメント
「アプリ」ページに移動し、「アプリの作成」をクリックします。.
GitHub アカウントを接続し、ソースコードが含まれている GitHub リポジトリを選択します。.
「ソースディレクトリ」セクションでは、下の画像のように、ソースファイルを含むフォルダを指定します。デモリポジトリはルートディレクトリにindex.htmlファイルのみで構成されているため、デフォルトの/を使用します。コードがモノレポ構造に従っている場合は、コードが配置されている特定のディレクトリを選択してください。.
「自動デプロイ」を選択すると、新しい変更を適用するたびに自動的に再デプロイされます。
アプリケーションのリソースを設定し、「次へ」をクリックします。画面は次のようになります。
次に、アプリケーションを最終的に実行する前にいくつかのチェックを実行します。APIを使用するような複雑なアプリケーションの場合は、環境変数を追加する必要がある場合があります。環境変数は次のページで設定できます。.
次に、アプリケーション名を編集し、アプリケーションをデプロイするリポジトリを選択できます。.
次に、「次へ」をクリックしてレビュー ページを表示します。ここで、課金、場所などのアプリに関するその他の情報を確認できます。最後に「リソースの作成」をクリックしてアプリを実行します。.
数分かかる場合があります。アプリが起動すると、概要ページでアプリのURLやその他の詳細を確認できます。.
ステップ2: アプリをカスタムドメインにマッピングする
アプリが正常にデプロイされ、ondigitalocean.app ドメインが作成されたので、この手順では、アプリをカスタム ドメインにマップする方法を確認します。.
アプリにカスタム ドメインを追加するには、次の 2 つの方法があります。
- 自動化の使用
- コントロールパネルの使用
この記事では、コントロール パネルを使用してカスタム ドメインを構成する方法について説明します。.
- DigitalOcean Cloud にログインし、ドメインを追加するアプリケーションを選択して、「設定」タブをクリックします。.
- 次に、「ドメイン」の右側にある「編集」リンクをクリックし、「ドメインの追加」ボタンをクリックします。.
下のテキスト フィールドにドメイン名を入力し始めると、カスタム ドメインを追加するための 2 つのオプションが表示されます。.
DigitalOcean ネームサーバーを使用してカスタム ドメインを追加するか、CNAME プロバイダーを使用することができます。.
DigitalOceanのネームサーバーを使用するには、以下の情報（ns1.digitalocean.com、ns2.digitalocean.com、ns3.digitalocean.com）をコピーして、ドメインレジストラのネームサーバーレコードに貼り付けてください。主要レジストラのDigitalOceanネームサーバーにドメインを割り当てる手順については、「主要ドメインレジストラのネームサーバーをDigitalOceanにポイントする」チュートリアルをご覧ください。.
ドメインにCNAMEレコードを追加することもできます。DNSプロバイダーがDigitalOcean以外の場合は、そのドキュメントで手順をご確認ください。「コピー」ボタンを使用して「ondigitalocean.app」エイリアスをコピーし、DNSプロバイダーのCNAMEレコードに貼り付けて、カスタムドメインをApp Platformアプリに関連付けます。完了したら、「ドメインを追加」ボタンをクリックします。.
Namecheapで購入したドメインを追加する
上記の手順に従って、どのプラットフォームで購入したカスタムドメインも追加できます。この例では、Namecheapで購入したドメインの設定方法を確認しましょう。.
- Namecheapアカウントにログインします。「ドメインリスト」をクリックし、追加したいドメインを選択して、「管理」をクリックします。.
- 次に、「詳細 DNS」タブに移動し、「新しいレコードの追加」をクリックします。.
次に、DigitalOcean コントロール パネルに移動し、以下のリンクをコピーします。.
それをNamecheapに貼り付けて変更を保存します。.
結果
この記事では、DigitalOcean を使用してアプリケーションをデプロイし、カスタム ドメインを管理する方法を学習しました。.
