チュートリアル:GitHub ソースリポジトリを使用してプロジェクトを作成する

AWS CodeStar を使用すると、リポジトリを設定して、プロジェクトチームでプルリクエストを作成、レビュー、マージを行うことができます。

このチュートリアルでは、GitHub リポジトリにサンプルウェブアプリケーションのソースコードを格納したプロジェクト、変更をデプロイするパイプライン、アプリケーションがクラウドでホストされている EC2 インスタンスを作成します。プロジェクトを作成した後、このチュートリアルでは、ウェブアプリケーションのホームページに変更を加える GitHub プルリクエストを作成してマージする方法を説明します。

ステップ 1: プロジェクトと GitHub リポジトリの作成

このステップでは、コンソールを使用してプロジェクトを作成し、新しい GitHub リポジトリへの接続を作成します。GitHub リポジトリにアクセスするには、AWS CodeStar が GitHub での認可を管理するために使用する接続リソースを作成します。プロジェクトが作成されると、その追加のリソースがプロビジョンされます。

1. AWS Management Consoleにサインインして、https://console.aws.amazon.com/codestar/ で、AWS CodeStar コンソールを開きます。

2. プロジェクトとそのリソースを作成する AWS リージョンを選択します。

3. [AWS CodeStar] ページで、[プロジェクトの作成] を選択します。

4. [Choose a project template] (プロジェクトテンプレートを選択する) ページで [Web application] (ウェブアプリケーション)、[Node.js]、および[Amazon EC2] チェックボックスを選択します。次に、オプションのセットで使用可能なテンプレートから選択します。

   詳細については、「AWS CodeStar プロジェクトテンプレート」を参照してください。

5. [Next] (次へ) を選択します。

6. [Project name] (プロジェクト名) に、プロジェクトの名前 (例: MyTeamProject) を入力します。別の名前を選択した場合は、このチュートリアル全体でその名前を使用してください。

7. [Project repository] (プロジェクトリポジトリ) で、[GitHub] を選択してください。

8. [GitHub] を選択した場合、接続リソースを選択または作成する必要があります。既存の接続がある場合は、検索フィールドで選択します。それ以外の場合は、ここで新しい接続を作成します。[Connect to GitHub] (GitHub に接続) を選択します。

   [Create a connection] (接続の作成) ページが表示されます。

   注記

   接続を作成するには、GitHub アカウントが必要です。組織の接続を作成する場合は、組織の所有者である必要があります。

   

   1. [Create GitHub App connection] (GitHub App 接続の作成) で、[Connection name] (接続名) に接続名を入力します。[Connect to GitHub] (GitHub に接続) を選択します。

      [Connect to GitHub] (GitHub に接続) ページが表示され、[GitHub Apps] フィールドが表示されます。

   2. [GitHub Apps] で、アプリケーションのインストールを選択するか、[Install a new app] (新しいアプリケーションをインストールする) を選択してアプリケーションを作成します。

      注記

      特定のプロバイダーへのすべての接続に対してアプリを 1 つインストールします。GitHub app 用 ‭AWS‬ コネクターをすでにインストールしている場合は、これを選択してこのステップをスキップしてください。

   3. [Install AWS Connector for GitHub] ページで、アプリをインストールするアカウントを選択します。　　

      注記

      アプリケーションをインストール済みである場合は、[Configure] (設定) を選択してアプリのインストールの変更ページに進むか、戻るボタンでコンソールに戻ることができます。

   4. [Confirm password to continue] (パスワードを確認して続行) ページが表示される場合、GitHub パスワードを入力し、[Sign in] (サインイン) を選択します。

   5. [Install AWS Connector for GitHub] ページで、デフォルトはそのままで [Install] を選択します。

   6. [Connect to GitHub] (GitHub へ接続) ページで、新規インストールのインストール ID が [GitHub Apps] に表示されます。

      接続が正常に作成された後、CodeStar の [create project] (プロジェクトを作成) ページで、[Ready to connect] (接続準備完了) メッセージが表示されます。

      注記

      [Developer Tools] (デベロッパーツール) コンソールの [Settings] (設定) で接続を表示できます。詳細については、[Getting started with connections] (接続入門ガイド) を参照してください。

      

   7. [Repository owner] (リポジトリ所有者) で、GitHub 組織または個人用 GitHub アカウントを選択します。

   8. [Repository name] (リポジトリ名) で、デフォルトの GitHub リポジトリ名を受け入れるか、別の名前を入力します。

   9. [Public] (公開) または[Private] (プライベート) を選択します。

      注記

      AWS Cloud9 を開発環境として使用する場合は、[Public repository] (公開リポジトリ)を選択する必要があります。

   10. (オプション) [Repository description] (リポジトリの説明) に、GitHub リポジトリの説明を入力します。

9. プロジェクトが Amazon EC2 インスタンスにデプロイされ、変更する場合、[Amazon EC2 Configuration](Amazon EC2 の設定)で Amazon EC2 インスタンスを設定します。例えば、プロジェクトの使用可能なインスタンスタイプから選択できます。

   [key pair] (キーペア) で、ステップ 4: AWS CodeStar プロジェクトの Amazon EC2 キーペアの作成 で作成した Amazon EC2 キーペアを選択します。[I acknowledge that I have access to the private key file] (私はプライベートキーファイルへのアクセス権があることを認めます) を選択します。

10. [Next] (次へ) を選択します。

11. リソースと設定の詳細を確認します。

12. [Next] (次へ) または [Create project] (プロジェクトの作成) を選択します。(表示される選択はプロジェクトテンプレートによって異なります。)

    プロジェクトの作成中は、数分間待ってください。

13. プロジェクトが作成された後、[アプリケーションの表示] を選択して、ウェブアプリケーションを表示します。

ステップ 2: ソースコードの表示

このステップでは、ソースコードとソースリポジトリに使用できるツールを表示します。

1. プロジェクトのナビゲーションバーで、[Repository] (リポジトリ) を選択します。

   GitHub でコミットのリストを表示するには、[View commits] (コミットの表示) を選択します。これにより GitHub でコミット履歴が開きます。

   課題を表示するには、プロジェクトの [Issues] (課題) タブを選択します。GitHub で新しい課題を作成するには、[Create GitHub issue] (GitHub の課題を作成する) を選択します。これにより、GitHub でリポジトリの課題フォームが開きます。

2. [Repository] (リポジトリ) タブで、[Repository name] (リポジトリ名) の下にあるリンクを選択すると、プロジェクトのリポジトリが新しいタブまたはウィンドウで開きます。このリポジトリには、プロジェクトのソースコードが含まれています。

ステップ 3: GitHub プルリクエストの作成

このステップでは、ソースコードにわずかな変更を加え、プルリクエストを作成します。

1. GitHub で、リポジトリに新しい機能ブランチを作成します。[main branch] (メインブランチ) ドロップダウンフィールドを選択し、feature-branch という名前のフィールドに新しいブランチを入力します。[Create new branch] (新規ブランチを作成) を選択します。ブランチが作成され、チェックアウトされます。

2. GitHub で、feature-branchブランチに変更を加えます。公開フォルダを開き、index.html ファイルを開きます。

3. AWS CodeStar コンソールの [プルリクエスト] で、GitHub のプルリクエストを作成するには、[プルリクエストの作成] を選択します。これにより、GitHub でリポジトリのプルリクエストフォームが開きます。GitHub で、鉛筆アイコンを選択してファイルを編集します。

   Congratulations! の後、文字列 Well done, <name>! を追加してユーザーの名前で <name> を置き換えます。[Commit changes] (変更のコミット) を選択します。変更は機能ブランチにコミットされます。

4. AWS CodeStar コンソールで、プロジェクトを選択します。[Repository] (リポジトリ) タブを選択します。[Pull requests] (プルリクエスト) で、[Create pull request] (プルリクエストの作成) を選択します。

   GitHub でフォームが開きます。メインブランチはベースブランチに残します。[Compare to] (比較する) で、機能ブランチを選択します。差分を表示します。

5. GitHub で、[Create pull request] (プルリクエストの作成) を選択します。[Update index.html] (index.htmlの更新) という名前のプルリクエストが作成されます。

6. AWS CodeStar コンソールで、新しいプルリクエストを表示します。[Merge changes] (マージ変更) を選択して、変更をリポジトリにコミットし、プルリクエストをリポジトリのメインブランチとマージします。

7. AWS CodeStar でプロジェクトに戻り、[パイプライン] ページでチェックします。パイプラインがデプロイ中であることが表示されます。

8. プロジェクトが作成された後、[アプリケーションの表示] を選択して、ウェブアプリケーションを表示します。