GitHub Actions入門～Cloud9でGitHub ActionsのHello Worldを実行してみよう

　現場によっては、メンバーそれぞれがビルドやテスト、デプロイをしているところや、開発チームのメンバーがコードを更新するだけで、自動的にビルドとテストがなされる「CI（継続的インテグレーション）」を利用していたり、ビルドやテストだけでなく、リリースプロセス全体を自動化する「CD（継続的デリバリー）」を使っているところもあると思います。

 　普段インフラ寄りの作業をしている方であれば、「<b>GitHub Actionsを使ってビルド・自動テストを実施する</b>」といってピンとくる方も多いと思いますが、実際に興味はあるけれど、どうGitHub Actionsを使って良いのかわからないという方も多いと思います。

  　CI／CDを導入してリリースに関わる作業が自動化されることで、開発者が開発に集中できたり、ソフトウェアの品質向上や、リリース時間の短縮に繋がるといったメリットは充分にあると思います。

<h2>今回の目標</h2>
　GitHub Actionsを使った自動テストやビルド・デプロイの知識を学んでいく上で、今回まずは<b>AWSのCloud9という開発環境のサービス上でHelloWorldを実行したい</b>と思います。
<br>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/dea65ab4-e58f-1537-d362-1105c80e03d4.png)

<b>GitとGitHubの基本とCloud9との連携を設定し、GitHub Actionsに触れながらCI（継続的インテグレーション）の基本や各種ツールを学ぶ</b>機会とさせていただければ幸いです。
<br/>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/037bb926-9c68-295d-41dd-bc2631c11f5e.png)

:::note info
事前準備として
「AWSのアカウント作成」をお願いします。
https://aws.amazon.com/jp/register-flow/
:::

まずは環境から確認していきたいと思います。

<h2>AWS –　Cloud9とは？</h2>

<b>AWS Cloud9は、Webブラウザ上でコードを実装できる統合環境</b>。<br>

AWSのサーバ上で動かして使います。実際に、Cloud9で環境を１つ作成していきましょう。
<br/>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/90b9d623-e8ef-5574-d675-a6945dddf9f1.png)

<br/>
<h2>Cloud9の環境の作成</h2>

　AWSのWeb管理画面である「マネジメントコンソール」を開きましょう。検索欄に「cloud9」と入力して検索します。
<br/>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/82652b3f-bbbc-a749-1fb0-ff407ec2383d.png)

　[ 環境を作成 ] ボタンを押下後、フォーム入力していきます。

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/a8fdf510-1133-e424-6ecd-c1a44918f5a1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/9b56272d-dd3c-ca6e-a5e5-6bace4a70c21.png)


[ 作成 ] ボタンを押下後、1つ環境が出来ていることが確認できます。

費用について、Cloud9を使わない時は、サーバーを停止したり、削除したりして費用を抑えることができます。サーバーを停止してもストレージはそのままの為、少し費用がかかります。もしも料金が全くかからないようにしたいのであれば、環境を削除してください。
</br>

<h2>Cloud9でアプリケーションを実行</h2>

「File」⇒「Upload Local Files…」をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/1623af6e-e9f8-aa45-004a-7f3a50d52dad.png)

zipフォルダをアップロード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/1ec5d1bd-4608-4a57-ca5b-cb0b044a88a3.png)

unzipコマンドを使って解凍します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/0828b094-c366-3d77-e61b-f3330bf0d0eb.png)


<h2>GitHubでリポジトリを作成</h2>

今回は、「sample-github-actions」という名前のリポジトリを作成します。

GitHubアカウントから[作成]をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/7a72358d-8325-3d3b-12ea-a417726bd1d8.png)

GitHub上に「sample-github-actions」という名前のリポジトリが出来ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/ad555d73-d3a9-73af-eea8-f36df2ca8239.png)

<h2>Cloud9 と GitHubの連携</h2>

　ここでは、GitHubのSSHの設定を行います。
Cloud9を開き、以下のコマンドを入力し、鍵の作成をします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/c1e12009-fd2d-ff35-f232-1f3c2378cf16.png)

Pass Phrase を入力します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/a4671029-2393-2c30-b0c4-3415072ca673.png)

「~/.ssh/」フォルダに、秘密鍵と公開鍵のキーペアが作成されます。
「id_ed25519.pub」の公開鍵のほうをGitHubに登録する必要があります。

ファイルの中身を確認したいときに利用されるLinuxの<b>catコマンドで公開鍵の中身を確認</b>します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/6bd0f175-6721-39f6-6f09-ac977a17c302.png)

　GitHubの「Settings」⇒「SSH and GPG keys」を選択し、「New SSH Key」を押下

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/aaba211c-21e0-b46e-f2ef-21a5b4c2dae4.png)
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/6090b75e-b3cb-d668-8cc2-c15212695168.png)

SSHの設定が完了していれば、リポジトリをclone (Cloud9上に取得) するのは容易です。

GitHubで作成したリポジトリを開きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/ae96b692-435d-ec38-826d-b8f84cc4182c.png)

既存のリポジトリをローカル環境に複製するgit cloneコマンドを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/f91754b4-0122-12c0-2bfe-72d6cd16f7af.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/c1c3b0db-9bb3-c5ad-9596-968b606f89b4.png)
というディレクトリが出来ます。

<h2>GitとGitHubの基本</h2>

ここで、Gitの基本について簡単に振り返りましょう。

Gitを学ぶ上で欠かせない概念に、「<b>バージョン管理</b>」があります。
これは、ファイルの変更をバージョンとして記録し、記録した地点へいつでも戻れる仕組みのことで、作業者が複数人いても、ファイルの最新状態や変更の履歴をわかりやすく保つことができます。

:::note info
Point
#ファイルの状態を記録（コミット）していく
#リポジトリはコミットの保管庫
:::

ローカルPC内に作成する自分専用のリポジトリを「ローカルリポジトリ」と呼びますが、ここでローカルリポジトリに対する操作のイメージを確認しておきましょう。

ローカルリポジトリにコミットを行いファイルの状態を保存するには

・「<b>ワークツリー</b>」… 変更するファイルを保持する場所
・「<b>ステージングエリア</b>」… コミットするファイルを登録する場所
・「<b>Gitディレクトリ</b>」… コミットを格納する場所

と呼ばれる3つの場所を用います

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/42c9282b-598a-8b5d-566b-b797f9f147b2.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/2cf9d75b-903f-e1df-7fad-7abbfc6f293b.png)

先ほど作成したディレクトリに移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/6e89e676-80c3-3519-7933-7912f08ebaed.png)

README.md ファイルに、何かしらのコメントを入力し、「git status」コマンドを入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/1c742d78-fe5a-ca36-af95-fc28dfd755d7.png)

赤字で、README.mdと記載されているのは、変更があったことを意味します。この変更をGitの履歴に加える操作をみていきます。

「<b>git add</b>」「<b>git commit</b>」の順にコマンドを実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/6b91fa61-865e-e023-6e96-297372b9a654.png)

そして、「<b>git push</b>」コマンドで、GitHubにアップロードします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/a9261a31-588c-fdf7-b9f3-b4800104a2f7.png)


GitHubでリポジトリを開き、変更内容が反映されていることを確認してください。


<h2>GitHub ActionsのHello World </h2>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/8cb342f3-67a2-530b-4f04-75493bd69478.png)

・backend.yaml の作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/798babc7-f2d5-ed21-0959-861b4e387a66.png)

onのところでmainブランチへのpushをトリガーとして実行することを指定して、
jobsのところで実行する内容（echo hello worldを実行する）を書いています。

それでは、ファイルをcommitして、GitHubにpushします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/dadf3405-655e-758a-078f-179a49fde1d4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/85c2e40b-8244-921c-75e4-7da04bdcd3b6.png)
これで、GitHub Actionsの設定ファイルをpushしました。

GitHubのリポジトリで「Actions」をクリックしてyamlの中身を見ていきます。

「build」をクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/dff856de-f031-4488-eddf-0511ce093426.png)

GitHub Actionsでhello worldが表示されることを確認できると思います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2355311/f8288f85-9704-71e2-c646-1d8430e4df95.png)

<hr>
今回の内容はいかがだったでしょうか。スクリプトを実行しながら動作確認できると面白いなと感じて頂けた方もいらっしゃるかもしれません。自分にできる範囲のものから少しずつGitHubの機能にも目を向けてみようかなと思っていただければ幸いです。

以上となります。
<br>

参考資料：
・Udemy「GitHub Actionsで学ぶCI／CD入門－ビルド・デプロイの基本からAPI自動テスト・AWSへの自動デプロイまで」