演習 - リポジトリを公開する

  • 5 分

おもちゃ会社では、Web サイトの開発者があなたの Bicep テンプレートの作成を支援することを提案しています。 Bicep コードをリポジトリに保持していることを伝えると、リポジトリを公開するように求められました。 この演習では、同僚がファイルを表示して、共同作業できるように、Git リポジトリを公開します。

このプロセスでは、次のことを行います。

  • 新しいリモート リポジトリを作成します。
  • ローカル Git リポジトリをリモート リポジトリと統合するように構成します。
  • ローカル リポジトリの変更をリモート リポジトリにプッシュします。
  • リモート リポジトリに変更が反映されていることを確認します。

GitHub でリポジトリを作成する

  1. ブラウザーで GitHub に移動します。 GitHub アカウントを使用してサインインするか、アカウントがない場合は新しいアカウントを作成します。

  2. ウィンドウの右上にあるプラス (+) アイコンを選択し、[ 新しいリポジトリ] を選択します。

    新しいリポジトリを作成するためのメニューを示す GitHub インターフェイスのスクリーンショット。

  3. 新しいリポジトリの詳細を入力します。

    • 所有者: ドロップダウン メニューから GitHub ユーザー名を選択します。 スクリーンショットでは、mygithubuser はリポジトリ所有者の GitHub アカウント名です。 アカウント名は、このモジュールの後半で使用します。
    • リポジトリ名: わかりやすい短い名前を入力します。 このモジュールでは、toy-website-workflow を使用します。
    • 説明: 他のユーザーがリポジトリの目的を理解するのに役立つ説明を含めます。
    • プライベート: GitHub を使用して、パブリック リポジトリとプライベート リポジトリを作成できます。 組織内のユーザーのみがおもちゃ Web サイトのファイルにアクセスする必要があるため、プライベート リポジトリを作成します。 後で他のユーザーにアクセス権を付与できます。

    完了すると、リポジトリの構成は次のスクリーンショットのようになるはずです。

    作成するリポジトリの構成を示す GitHub インターフェイスのスクリーンショット。

  4. [ リポジトリの作成] を選択します。

  5. 表示される確認ページで、リポジトリの URL をメモしておきます。 コピー ボタンを使用して URL をコピーできます。 これは後ですぐに使用します。

    リポジトリの URL が強調表示されている、新しいリポジトリの詳細を示す GitHub インターフェイスのスクリーンショット。

Azure Repos でリポジトリを作成する

  1. ブラウザーで、 Azure DevOps に移動します。 サインインするか、新しいアカウントを作成します。

  2. 新しいアカウントを作成する場合は、画面の指示に従って Azure DevOps 組織を作成します。 Azure DevOps によって、新しいプロジェクトを作成するように求められます。 次の手順に進みます。

    既存の Azure DevOps 組織にサインインした場合は、[ 新しいプロジェクト ] ボタンを選択して新しいプロジェクトを作成します。

    新しいプロジェクトを作成するためのボタンを示す Azure DevOps インターフェイスのスクリーンショット。

  3. 新しいプロジェクトの詳細を入力します。

    • プロジェクト名: わかりやすい短い名前を入力します。 このモジュールでは、toy-website を使用します。
    • 説明: 他のユーザーがリポジトリの目的を理解するのに役立つ説明を含めます。
    • 可視性: Azure DevOps を使用して、パブリック リポジトリとプライベート リポジトリを作成できます。 組織内のユーザーのみが Web サイトのファイルにアクセスする必要があるため、プライベート リポジトリを作成します。 後で他のユーザーにアクセス権を付与できます。

    完了すると、プロジェクトの構成は次のスクリーンショットのようになるはずです。

    作成するプロジェクトの構成を示す Azure DevOps インターフェイスのスクリーンショット。

  4. 作成を選択します。

  5. 表示されたプロジェクト ページで、[ リポジトリ ] メニュー項目を選択します。

    [Repos] 項目が強調表示されているプロジェクト ページのメニューを示す Azure DevOps インターフェイスのスクリーンショット。

  6. リポジトリ の URL をメモします。 コピー ボタンを使用して URL をコピーできます。 これは後ですぐに使用します。

    リポジトリの U R L が強調表示されている、リポジトリの詳細を示す Azure Repos インターフェイスのスクリーンショット。

Git パスワードを生成する

macOS の Visual Studio Code から Azure Repos を操作する場合は、サインインに使用するパスワードとは異なる特別なパスワードを使用する必要があります。

注

Windows を使用している場合は、次のセクション「 ローカル Git リポジトリを構成する」に進んでください。

  1. [ Git 資格情報の生成 ] ボタンを選択します。

    Azure Repos により、ランダムなパスワードが自動的に作成されます。

  2. [パスワード] の値を書き留めます。 これは後ですぐに使用します。

ブラウザーを開いたままにします。 この演習の後半で、もう一度リポジトリを確認します。

ローカル Git リポジトリを構成する

  1. Visual Studio Code ターミナルで次のコマンドを入力して、 メイン ブランチを使用していることを確認します。

    git checkout main

  2. 次のコマンドを入力して、作成したリモート リポジトリとローカル リポジトリを統合します。 YOUR_REPOSITORY_URL は、以前に保存した URL で置き換えます。

    git remote add origin YOUR_REPOSITORY_URL

    git remote add コマンドを使用して、リモート リポジトリへの新しい参照を作成していることに注意してください。 参照に origin という名前を付けます。これは標準の名前です。

  3. リモートが作成されたことを確認します。

    git remote -v

    出力は例のようになります。

    origin  https://github.com/mygithubuser/toy-website.git (fetch)
origin  https://github.com/mygithubuser/toy-website.git (push)

    origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (fetch)
origin https://myuser@dev.azure.com/myuser/toy-website/_git/toy-website (push)

Git CLI を使用して変更をプッシュする

  1. Visual Studio Code ターミナルで、次のコマンドを入力します。

    git push -u origin main

    現在のローカル ブランチがメインであるため、このコマンドは、ローカル メイン ブランチがリモート リポジトリ内のメイン ブランチを追跡することを Git に指示します。 また、ローカル リポジトリからリモート リポジトリにコミットを プッシュ します。

  2. 今回、このリモート リポジトリを初めて使用したため、ターミナルによって、認証方法を選択するように求められます。 ブラウザーを使用するオプションを選択します。

  3. ブラウザーの指示に従ってサインインし、Visual Studio Code が GitHub リポジトリにアクセスすることを認可します。

  4. ターミナル ウィンドウで、Git によって次の列のような出力が表示されます。

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), done.
To https://github.com/mygithubuser/toy-website.git
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    この出力は、Git によってリポジトリの内容がリモート リポジトリに正常にプッシュされたことを示しています。

  1. Visual Studio Code ターミナルで、次のコマンドを入力します。

    git push -u origin main

    現在のローカル ブランチがメインであるため、このコマンドは、ローカル メイン ブランチがリモート リポジトリ内のメイン ブランチを追跡することを Git に指示します。 また、ローカル リポジトリからリモートにコミットを プッシュ します。

  2. 今回、このリモート リポジトリを初めて使用したため、サインインするように求められます。

    Windows を使用している場合は、この演習で以前に Azure DevOps にサインインするために使用したのと同じ資格情報を入力します。

    macOS を使用している場合は、この演習で以前に作成したパスワードを貼り付けます。

  3. ターミナル ウィンドウで、Git によって次の列のような出力が表示されます。

    Enumerating objects: 16, done.
Counting objects: 100% (16/16), done.
Delta compression using up to 8 threads
Compressing objects: 100% (11/11), done.
Writing objects: 100% (16/16), 2.30 KiB | 785.00 KiB/s, done.
Total 16 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Analyzing objects... (16/16) (5 ms)
remote: Storing packfile... done (165 ms)
remote: Storing index... done (75 ms)
To https://dev.azure.com/myuser/toy-website/_git/toy-website
 * [new branch]      main -> main
Branch 'main' set up to track remote branch 'main' from 'origin'.

    この出力は、Git によってリポジトリの内容がリモート リポジトリに正常にプッシュされたことを示しています。

README ファイルを追加する

同僚がリポジトリを使用するようになったので、リポジトリの目的と開始方法を理解できるように 、README.md ファイルを作成することが重要です。

  1. Visual Studio Code で エクスプローラー を開きます。

  2. 現在のフォルダー構造のルートに新しいファイルを追加し、README.md 名前を付 けます。

  3. 次のテキストをファイルにコピーします。

    # Toy company's website

This repository contains the website for our toy company.

## How to use

The Azure infrastructure is defined using [Bicep](/azure/azure-resource-manager/bicep).

To deploy the website's Azure resources, use the _deploy/main.bicep_ file.

    ヒント

    これはプレースホルダーの README ファイルであるため、有益なコンテンツはあまりありません。 独自の Git リポジトリを操作する場合は、誰かがコードの使用を開始する方法を理解するのに役立つ README ファイルを作成します。 それは、プロジェクトの軽量なマニュアルと考えてください。

  4. ファイルを保存します。

  5. ファイルをステージングし、ローカル Git リポジトリにコミットします。 コミットする場合は、Git CLI を使用するか、Visual Studio Code の ソース管理 を使用するかを選択できます。

Visual Studio Code を使用してもう一度プッシュする

新しいファイルをコミットしたので、リモートに最新のファイルが含まれるように、変更をもう一度プッシュする必要があります。 今回は、Visual Studio Code を使用してリモート リポジトリにプッシュします。

  1. Visual Studio Code の オープン ソース管理 。

  2. ソース管理ツール バーの右側に 3 つのドットがあるアイコンを選択し、[プッシュ] を選択します。

    [プッシュ] メニュー項目が強調表示されている [ソース管理] メニューを示す Visual Studio Code のスクリーンショット。

    再度サインインするように求められないことに注意してください。 資格情報は、Git CLI と Visual Studio Code 間で共有されます。

GitHub で変更を確認する

これで、変更をリモート リポジトリにプッシュしたので、GitHub でリポジトリの内容を調べることができます。

  1. ブラウザーで、リポジトリのページを最新の情報に更新します。

  2. 作成したファイルが一覧表示され、 README.md ファイルが表示されます。

    フォルダーとファイル構造を含むリポジトリを示す GitHub インターフェイスのスクリーンショット。

  3. GitHub インターフェイスを参照してファイルを探し、変更がすべて表示されていることに注意します。 GitHub には各ファイルへの変更の完全な一覧が含まれているため、Visual Studio Code で作業する場合と同じように、ファイルの履歴も表示できます。

Azure Repos で変更を確認する

これで、変更をリモート リポジトリにプッシュしたので、Azure Repos でリポジトリの内容を調べることができます。

  1. ブラウザーで、リポジトリ ページを更新してください。

  2. 作成したファイルが一覧表示され、 README.md ファイルが表示されます。

    フォルダーとファイル構造を含むリポジトリを示す Azure DevOps インターフェイスのスクリーンショット。

  3. Azure Repos インターフェイスを参照してファイルを探し、変更がすべて表示されていることに注意します。 Azure Repos には各ファイルへの変更の完全な一覧が含まれているため、Visual Studio Code で作業する場合と同じように、ファイルの履歴も表示できます。