序章

ローカル環境で静的Webサイトを構築した場合、次のステップは、それをWebに公開する方法を決定することです。 サイトを公開する1つの方法は、DigitalOcean App Platform を介してサイトをアプリケーションとしてデプロイすることです。これにより、開発者は、基盤となるインフラストラクチャを気にすることなく、コードをDigitalOceanサーバーに直接公開できます。 App Platformは、最初の3つの静的サイト無料ホスティングを提供します。

このチュートリアルでは、GitHubリポジトリからAppPlatformを使用して静的Webサイトをデプロイします。 フォローするには、所有しているGitHubリポジトリでWebサイトファイルをホストする必要があります。 GitHubリポジトリでファイルをホストし、GitHubアカウントを作成する手順が必要な場合は、より詳細なチュートリアル DigitalOcean AppPlatformを使用して静的Webサイトをクラウドにデプロイする方法をご覧ください。 このチュートリアルを終了するまでに、公開されたWebサイトと、AppPlatformを使用してGitHubリポジトリからクラウドにWebサイトをデプロイする方法を理解している必要があります。

前提条件

  • GitHubアカウント。
  • 所有しているGitHubリポジトリ内の静的Webサイトのファイル。 テスト目的で、サンプル静的Webサイトリポジトリのクローンを作成することもできます。
  • DigitalOceanのクラウドサービスにサインアップするためのクレジットカードまたはPaypalアカウント。 最初の3つのサイトの料金は請求されません。

ステップ1—DigitalOceanアカウントを作成する

DigitalOceanアカウントを作成するには、サインアップページにアクセスし、次のオプションから選択します。

  • メールアドレスとパスワードの入力
  • Googleシングルサインオンの使用
  • GitHubシングルサインオンの使用

メールアドレスとパスワードを使用する場合は、登録後に自動的に送信されるメールに含まれるリンクを使用して、メールアドレスを確認する必要があります。

本人確認のために支払い方法を入力する必要があることに注意してください。 これは、スパマーを締め出すのに役立つ必須の手順です。 請求は行われません。カードを確認するための一時的な事前承認料金が表示される場合があります。これは1週間以内に取り消されます。

アカウントを確認すると、 DigitalOcean AppPlatformにアクセスできるようになります。 DigitalOceanアカウントへのサインアップに関する完全なドキュメントについては、ガイドDigitalOceanアカウントへのサインアップをご覧ください。

これで、次のステップに進む準備ができました。

ステップ2—DigitalOceanアプリプラットフォームを使用してWebサイトを展開する

このステップでは、静的WebサイトをAppPlatformでデプロイします。

まず、 DigitalOcean App Platform ポータルにアクセスし、青い[アプリの起動]ボタンをクリックします。

App Platform Portal

次のページで、GitHubリポジトリを選択するように求められます。 App PlatformアカウントをGitHubアカウントにまだ接続していないため、[GitHubアカウントをリンクする]ボタンをクリックする必要があります。

App Platform webpage with first step of deloying an app

次に、GitHubアカウントにサインインするように求められ(まだサインインしていない場合)、AppPlatformに接続するアカウントを選択します。 選択すると、AppPlatformにアクセスを許可するリポジトリを選択できるページに移動します。 「リポジトリのみを選択」ボタンをクリックして、AppPlatformにプッシュするリポジトリを選択します。

GitHub webpage where users select repository to connect to the App Platform

完了したら、Webページの下部にある[保存]ボタンをクリックします。 これで、App Platformに戻り、ドロップダウンメニューでリポジトリを選択できるようになります。

App Platform webpage displaying menu for selecting repository

リポジトリを選択したら、「次へ」をクリックします。 次に、自動デプロイの名前、ブランチ、およびオプションを選択するように求められます。 [自動デプロイ]ボックスがオンになっている場合、リポジトリファイルに加えた今後の変更は、すぐにライブサイトにプッシュされます。 選択して「次へ」をクリックします。

Choosing name and branch of repository window on the App Platform

次に、アプリを構成できるページが表示されます。 このページでは、コンポーネントタイプを「静的サイト」として自動的に検出する必要があります。

App Platform webpage for configuring your app

このページで変更を加える必要はありません。 下にスクロールして、ページの下部にある青いボタン「次へ」をクリックします。 このサイトを無料の3つの静的サイトの1つとして展開する場合は、「スターター」プランを選択できる新しいウィンドウが表示されます。

App Platform page for selecting payment plan

ご希望のプランを選択し、「スターターアプリの起動」ボタンをクリックしてください。 アプリの管理ページに移動します。 アプリのデプロイが完了すると、「正常にデプロイされました」と表示されます。 メッセージ:

Admin page for app on App Platform

また、ページの上部にアプリ名の下にリンクが表示されます。 リンクをクリックして、サイトが正しく機能していることを確認します。 公開されたWebサイトを含む新しいWebページに移動する必要があります。 サイトが表示されない場合は、戻ってエラーを確認してください。

これで、静的サイトがAppPlatformを介してWebに公開されます。 アプリのリンクを持っている人は誰でもあなたのサイトにアクセスできます。 サイトにカスタムドメインを追加する場合は、AppPlatform製品ドキュメントのカスタムドメインの管理方法ガイドにアクセスしてください。

結論

このチュートリアルでは、静的サイトをGitHubからDigitalOceanAppPlatformにデプロイする方法を学習しました。 手順2で[プッシュ時に自動的にデプロイする]オプションを選択したままにした場合、GitHubリポジトリに加えた変更はすべて自動的にサイトにプッシュされます。 そのオプションを選択しなかった場合は、アプリの管理ページに戻り、右上隅にある[デプロイ]ボタンをクリックして、変更をデプロイできます。

App Platformの詳細については、公式のAppPlatform製品ドキュメントおよびAppPlatform静的サイトの管理方法をご覧ください。 最大3つの無料の静的サイトをホストできることを忘れないでください。 アプリを削除する場合は、製品ドキュメントのアプリの破棄セクションの手順に従ってください。