序章

ローカル環境で静的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 ポータルにアクセスし、青い[LaunchYourApp]ボタンをクリックします。

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

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

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

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

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

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

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

.

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

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

結論

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

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