演習 - 基本的なワークフローを作成して実行する

6 分

重要

この演習を行うには、独自の Azure サブスクリプションが必要です。また、料金が発生することがあります。 Azure サブスクリプションをお持ちでない場合は、開始する前に無料アカウントを作成してください。

あなたは、玩具会社の Web サイトの更新のデプロイを自動化したいと思っています。最初の手順として、GitHub Actions で基本的なワークフローを作成します。

この演習では、以下のことを行います。

GitHub のアカウントとリポジトリを作成します。
基本的なワークフローを作成します。
基本的なワークフローを実行します。

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

ブラウザーで GitHub にアクセスします。 GitHub アカウントを使用してサインインするか、アカウントがない場合は新しいアカウントを作成します。
ウィンドウの右上にある正符号 (+) アイコンを選択し、[新しいリポジトリ] を選択します。
新しいリポジトリの詳細を入力します。
- 所有者: ドロップダウンメニューから GitHub ユーザー名を選択します。スクリーンショットでは、mygithubuser はリポジトリ所有者の GitHub アカウント名です。アカウント名は、このモジュールの後半で使用します。
- リポジトリ名: わかりやすいが短い名前を入力します。このモジュールでは、toy-website-workflow を使用します。
- 説明: 他のユーザーがリポジトリの目的を理解できるように説明を含めます。
- プライベート: GitHub を使用して、パブリックリポジトリとプライベートリポジトリを作成できます。組織内のユーザーのみがおもちゃ Web サイトのファイルにアクセスする必要があるため、プライベートリポジトリを作成します。後で他のユーザーにアクセス権を付与できます。
完了すると、リポジトリの構成は次のスクリーンショットのようになるはずです。
[Create repository] (リポジトリの作成) を選択します。

リポジトリの複製

Visual Studio Code で、リポジトリをクローンします。

リポジトリページで、コピーボタンを選択して Git リポジトリの URL をコピーします。
Visual Studio Code を開きます。
[ターミナル]>[新しいターミナル] を選択して、Visual Studio Code ターミナルウィンドウを開きます。このウィンドウは通常、画面の下部に表示されます。
ターミナルで、ローカルコンピューター上の GitHub リポジトリをクローンするディレクトリに移動します。たとえば、toy-website-workflow フォルダーにリポジトリをクローンするには、次のコマンドを実行します。
```
cd toy-website-workflow
```
「git clone」と入力し、先ほどコピーした URL を貼り付けると、次のようになります。
```
git clone https://github.com/mygithubuser/toy-website-workflow
```
空のリポジトリをクローンしたことを示す警告が表示されます。このメッセージは無視してかまいません。
今回、このリポジトリを初めて使用したため、サインインするように求められる場合があります。

Windows の場合、「1」と入力して Web ブラウザーの使用を認証し、Enter キーを押します。

macOS の場合は、[承認] を選択します。
ブラウザーウィンドウが開きます。場合によっては、再度 GitHub にサインインする必要があります。 [承認] を選択します。
次のコマンドを実行して、リポジトリフォルダー内の Visual Studio Code を再度開きます。
```
code -r toy-website-workflow
```

ヒント

GitHub Actions のワークフロー定義は、GitHub の Web ユーザーインターフェイスを使用して編集することもできます。ワークフロー定義を開くと、GitHub によって YAML ファイルの構文とインデントがサポートされ、使用する可能性があるアクションのコードスニペットの例が示されます。このモジュールでは、Visual Studio Code で定義ファイルを操作しますが、GitHub エディターを調べてその動作を確認することもできます。

YAML ワークフロー定義を作成する

リポジトリを作成し、クローンしたので、基本的なワークフロー定義を作成する準備が整いました。

Visual Studio Code で [エクスプローラー] を開きます。
toy-website-workflow フォルダー構造のルートに、.github という名前の新しいフォルダーを作成します。

Note

フォルダー名の先頭にピリオドを含めてください。これで、このフォルダーが隠しフォルダーであることを示します。GitHub Actions からワークフロー定義を検出するには、GitHub にピリオドが必要です。
.github フォルダー内に workflows という名前の別のフォルダーを作成します。
workflows フォルダー内に workflow.yml という名前の新しいファイルを作成します。

次のワークフロー定義をファイルにコピーします。

name: deploy-toy-website

on: [workflow_dispatch]

jobs:
  say-hello:
    runs-on: ubuntu-latest
    steps:
      - name: 'placeholder step'
        run: echo "Hello world!"

ファイルを保存します。
次のコマンドを使用してファイルをコミットし、GitHub リポジトリにプッシュします。
```
git add .
git commit -m "Add initial workflow definition"
git push
```

ヒント

Visual Studio Code を使用すると、YAML ファイルのインデントに役立ちます。構文エラーを示す波線を探すか、[View](表示)>[Problems](問題) を選択してファイル内の問題点の一覧を表示します。

ワークフローを実行する

ワークフロー定義を作成しました。ワークフローファイルは .github/workflows ディレクトリ内にあるので、GitHub Actions によって自動的に検出されます。

ブラウザーでリポジトリに移動します。必要に応じてページを更新し、変更内容を確認します。
[Actions](アクション) タブを選択します。
[deploy-toy-website] ワークフローを選択します。
[ワークフローの実行] ドロップダウンを選択し、[ワークフローの実行] ボタンを選択します。
ワークフローの実行が開始されます。少し時間がかかるかもしれませんが、ページを更新することができます。しかし、自動的に更新され、ワークフローのキューに格納済み、実行中、または実行が既に完了していることが表示されるはずです。

ジョブの状態は、最初は "Queued" (キューに格納済み) と表示されることに注目してください。ワークフローが開始されるまでには時間がかかることがあります。ジョブはランナーのキューに追加され、ランナーが使用可能になると GitHub Actions によってランナーが割り当てられ、ジョブが開始されます。これでジョブの状態は "Executing" (実行中) になります。

各ワークフロー実行には、識別子が含まれています。この識別子は、ワークフロー実行を参照し、特定のワークフロー実行を見つける必要がある場合に使用できます。

ワークフロー実行を確認する

ワークフロー実行が開始されたら、[deploy-toy-website] を選択して実行の詳細を表示します。ジョブ状態に "Success" (成功) と表示されるまでページを更新します。

また、このページには実行に使用された Git コミットの識別子が含まれていることに注目してください。このコミットの識別子は、ワークフローに使用されたリポジトリの内容のバージョンを示しています。
ジョブの一覧で say-hello を選択します。
ジョブ情報ページが表示され、ワークフローによって自動実行されたステップのログが示されます。 [placeholder step] が含まれていることに注目してください。

この一覧には、あなたが指定しなかったステップも含まれていることに注目してください。これらのステップは、GitHub Actions によって自動的に作成されます。
[placeholder step] を選択します。

このステップのログには、ワークフローの YAML ファイルに指定されたコマンドの内容と、スクリプトから出力された Hello world! のテキストが含まれています。

ワークフロー実行をコミットにリンクする

ワークフロー実行を、実行に含まれていたコミットに対して相互参照する方法を理解することをお勧めします。ワークフロー実行をコミットにリンクすると、デプロイの履歴をトレースし、問題を診断するのに役立ちます。

[Summary](概要) を選択し、実行の概要に戻ります。
コミット識別子を選択します。 GitHub には、ワークフロー実行をトリガーしたコミットの詳細が表示されます。