開発者ドキュメント

DigitalOceanAppPlatformを使用して静的Webサイトをクラウドにデプロイする方法

序章

ローカル環境で静的Webサイトを構築した場合、次のステップは、それをWebに公開する方法を決定することです。 サイトを公開する1つの方法は、DigitalOcean App Platform を介してアプリケーションとしてデプロイすることです。これは、3つの静的サイトに対して無料ホスティングを提供します。 多くの場合、アプリケーションを展開するには、基盤となるサーバーインフラストラクチャをセットアップする必要があります。 App Platformはこの作業を自動化し、静的WebサイトをGitHubリポジトリからクラウドにデプロイできるようにします。

このチュートリアルでは、App Platform、GitHub(ソフトウェア開発プラットフォーム)、およびGitHubのデスクトップアプリケーションを使用して静的Webサイトをクラウドにデプロイするすべての手順について説明します。 ここでの手順は、チュートリアルシリーズ HTMLを使用してWebサイトを構築する方法で作成されたWebサイトを含め、ローカル環境で構築した静的Webサイトで機能するはずです。 また、Webサイトを展開する準備ができていない場合、またはApp Platformをテストしたい場合は、このチュートリアルでサンプルHTMLWebサイトを使用する方法についても説明します。 このチュートリアルを終了するまでに、公開されたWebサイトと、AppPlatformを使用してGitHubリポジトリからクラウドにWebサイトをデプロイする方法を理解している必要があります。

:ウェブサイトプロジェクト用のGitHubアカウントとGitHubリポジトリを既にお持ちの場合は、ステップ6 にスキップして、AppPlatformの使用を開始する手順を確認できます。

前提条件

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

GitHubアカウントをまだお持ちでない場合は、プロジェクトのGitHubリポジトリを作成できるように、アカウントを登録する必要があります。 GitHubは、開発者がコーディングプロジェクトをホスト、共有、および共同作業できるようにするソフトウェア開発プラットフォームです。 無料アカウントを作成するには、GitHubのホームページにサインアップしてください。

アカウントを確認したら、次のステップに進む準備ができています。 手順3で必要になるため、ログイン資格情報を覚えておいてください。

ステップ2—GitHubデスクトップアプリをダウンロードしてインストールします

多くの開発者は、コマンドラインインターフェイス(CLI)ツールGitを使用してGitHubを操作しますが、コンピューターの端末の使用に慣れていない場合は、GitHubデスクトップアプリを使用することもできます。 (CLIツールGitの使用について詳しく知りたい場合は、ガイドオープンソースに貢献する方法:Git入門にアクセスしてください。 このチュートリアルでは、GitHubデスクトップアプリの使用方法について説明します。

GitHubデスクトップホームページの指示に従って、GitHubデスクトップアプリをダウンロードします。 次に、ダウンロードしたアプリケーションファイルを開き、指示に従ってインストールプロセスを完了します。

インストールが完了すると、次のステップに進む準備が整います。

ステップ3—WebサイトプロジェクトのGitHubリポジトリを作成します

このステップでは、GitHubデスクトップアプリを使用して、Webサイトプロジェクト用のローカルリポジトリをマシン上に作成します。

まず、GitHubデスクトップアプリを開きます。 [GitHub.comにサインインする]青いボタンをクリックします。

プロンプトに従って、GitHubデスクトップアプリをGitHubアカウントに接続します。 デスクトップアプリがアカウントに接続されると、開始するためのオプションを示すウィンドウが表示されます。 「ハードドライブに新しいリポジトリを作成する」ボタン(上から3番目の大きなボタン)をクリックします。

次に、新しいリポジトリの詳細を入力するように求められます。

このウィンドウで、次の情報を入力します。

自動生成されたローカルパスはそのままにしておくことができます。 これは、GitHubデスクトップがプロジェクトをローカルマシンに保存する場所です。

サイトのドキュメントを保存するファイルを追加する場合は、READMEを使用してリポジトリを初期化するオプションをオンにすることができます。 一般に、リポジトリ用にREADMEを作成することをお勧めしますが、チュートリアルの目的でこのオプションをオフのままにすることもできます。

Git Ignoreオプションを使用すると、特定のファイルを無視するためのテンプレートを選択できます。 「ライセンス」オプションを使用すると、作業用のオープンソースライセンスを選択できます。 さまざまなオープンソースライセンスオプションの詳細については、OpenSourceInitiativeのライセンスと標準のリストにアクセスしてください。 これらのオプションで何を選択すればよいかわからない場合は、このチュートリアルの目的で、両方のオプションで「なし」を選択したままにしておくことができます。

「リポジトリの作成」をクリックします。 デスクトップアプリに、新しく作成したリポジトリの詳細が表示されます。 次のステップでは、これらのさまざまなパネルに表示される内容について説明します。

リポジトリが作成されると、次のステップに進む準備ができているはずです。

ステップ4—ウェブサイトファイルをGitHubリポジトリにコピーする

このステップでは、Webサイトプロジェクトのファイルをコピーして、新しく作成されたGitHubリポジトリフォルダーに配置します。

:サンプルWebサイトを使用してApp Platformを探索する場合は、右上の緑色の[コード]ボタンをクリックしてGitHubリポジトリからzipファイルをダウンロードします。 「ZIPをダウンロード」するオプション:

ZIPファイルのダウンロードが完了したら、ファイルを解凍して、Webサイトファイルを含むフォルダーにアクセスします。 このフォルダーは、以下の手順でWebサイトプロジェクトの作業フォルダーとして機能します。

まず、デスクトップで、Webサイトプロジェクトの作業フォルダー、または現在Webサイトプロジェクトのすべてのファイルとフォルダーを保存しているフォルダーを開きます。 この例では、作業フォルダーは「html-site」と呼ばれます。

次に、手順3で名前を付けた新しく作成されたリポジトリフォルダを見つけて開きます。 この例では、リポジトリフォルダは「my-static-site」と呼ばれています。

ファイルを作業フォルダーからリポジトリフォルダーにコピーします。 ファイルをコピーするには、すべてのWebサイトファイルを選択し、同時にクリックすることができます Right Click (Windowsの場合)または CTRL + Left Click (Macの場合)「Xアイテムのコピー」を選択します。 次に、ファイルのコピーをリポジトリフォルダーに貼り付けるには、リポジトリフォルダーをクリックし、をクリックします。 Right Click (Windowsの場合)または CTRL + Left Click (Macの場合)、[Xアイテムの貼り付け]を選択します。

ファイルをリポジトリフォルダーに貼り付けた後、GitHubデスクトップアプリはアプリウィンドウの左側にある[変更]パネルにファイルを表示する必要があります。

macOSオペレーティングシステムを使用している場合、追加が表示されても心配しないでください .DS_STORE 「変更」パネルのファイル。 これは、フォルダに関する情報を格納する自動生成ファイルであり、プロジェクトに影響を与えることはありません。

フォルダがローカルリポジトリフォルダに配置されると、変更をリポジトリに保存する準備が整います。 GitHubでは、保存された変更はコミットと呼ばれます。 変更をコミットするたびに、変更を説明するコメントを作成する必要があります。

変更をコミットするには、「概要(必須)」というフィールドにコメントを追加し、デスクトップアプリの左下隅にある「説明」フィールドに追加する情報を追加します。

次に、テキストフィールドの下にある青いボタン[マスターにコミット]をクリックします。このアクションにより、変更がプロジェクトの「メイン」ブランチに保存されます。 GitHubは以前、ユーザーのリポジトリのプライマリブランチに「メイン」ではなく「マスター」という単語を使用していたことに注意してください。 これらの規則の名前変更に関する情報を参照し、これらの変更をロールアウトするためのタイムラインでGitHubを参照してください。 GitHubでは、メインブランチまたはマスターブランチはプロジェクトの最も信頼のおけるブランチであり、同じリポジトリの異なるバージョンで同時に機能するようにコピーできます。 ブランチの詳細については、チュートリアルGitブランチの使用方法またはGitHubのドキュメントをご覧ください。

メインブランチに変更をコミットすると、左側のパネルのファイルは表示されなくなります。このパネルには、コミットされていない変更を含むファイルのみが表示されるためです。 コミットが成功したことを示すメッセージが左下隅に表示されます。

ステップ5—コミットされたファイルをGitHubにプッシュする

最後のステップでは、ローカルマシンのリポジトリに変更をコミットしました。 ただし、このリポジトリはまだGitHubアカウントにプッシュされていません。 このステップでは、このコミットをGitHubのリポジトリにプッシュします。これにより、WebサイトファイルがGitHubリポジトリに追加されます。

ローカルリポジトリをGitHubリポジトリに公開するには、青い[リポジトリの公開]ボタンをクリックします。

ボタンをクリックすると、リポジトリの名前と説明を入力するように求めるモーダルが表示されます。 詳細を記入してください。 必要に応じて、リポジトリを非公開にしておくことができます。

詳細を入力したら、青い[リポジトリの公開]ボタンをクリックします。 ファイルのアップロードが完了すると、GitHubのアカウントでリポジトリが利用できるようになります。 確認するには、関連するURLにアクセスしてください。次の形式になります。

https://github.com/your_github_account_name/your_repository_name

強調表示されたテキストは、必ずアカウント名とリポジトリ名に置き換えてください。 リポジトリのファイルを表示するWebページを受け取るはずです。

WebサイトファイルがGitHubでホストされるようになったので、AppPlatformでそれらを使用できます。 ただし、最初にDigitalOceanアカウントを作成する必要があります。

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

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

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

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

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

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

ステップ7— DigitalOceanAppPlatformを使用してWebサイトを展開する

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

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

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

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

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

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

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

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

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

.

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

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

結論

このチュートリアルでは、App Platform、GitHubアカウント、およびGitHubデスクトップアプリを使用して静的サイトをデプロイする方法を学習しました。 Webサイトに変更を加える場合は、手順4と5の手順に従って、ローカルマシンでファイルを編集し、変更をコミットしてGitHubリポジトリにプッシュします。 手順7で[プッシュ時に自動的にデプロイ]オプションを選択したままにすると、変更がGitHubリポジトリにプッシュされると、サイトで自動的に更新されます。

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

モバイルバージョンを終了