github-action-demo

github action test プログラミング方法論T2 プロポーザル (バージョン管理システムとDevOps) - github action demo です。

サポーター：T2メンバー全員 ☕☕☕
デモ作者：york-yang ☕☕☕
デモ概要：Github actionでReactプロジェクトを構築し、GitHub Pagesに公開します。

GitHub Actions 定義

GitHub Actionsは、ビルド、テスト、デプロイのパイプラインを自動化できる継続的インテグレーションと継続的デリバリー (CI/CD) のプラットフォームです。

github-action-demo:
│  .gitignore
│  list.txt
│  package-lock.json
│  package.json
│  ReactREADME.md
│  README.md
│  
├─.github
│  └─workflows
│          deploy.yml
│          
├─img
│      action logs.png
│      actions workflow.png
│      failed action logs.png
│      github page link.png
│      new repository.png
│      personal access token.png
│      style_picture.png
│      token binding.png
│      token copy.png
│      token setting.jpg
│      web .png
│          
├─public
│      favicon.ico
│      index.html
│      logo192.png
│      logo512.png
│      manifest.json
│      robots.txt
│      
└─src
        App.css
        App.js
        App.test.js
        index.css
        index.js
        logo.svg
        reportWebVitals.js
        setupTests.js

主要なファイルの説明

./githu/workflows/deploy.yml

GitHub Actionsの設定ファイルはワークフローファイルと呼ばれ、コードリポジトリの .github/workflows ディレクトリに保存されています。

ワークフローファイルはYAMLの形で、好きな名前をつけることができますが、.ymlサフィックスが必要です。eg. deploy.ymlリポジトリにも複数のワークフローファイルを持つことができます。

GitHubは .github/workflows に.ymlファイルを見つけると自動的に実行します。
public

アイコンとか画像とか静的なウェブファイル（static files）を保存します。
- index.html デフォルトウェブ画面
- manifest.json アイコンやUI等に関する設定の配置ファイル
- robots.txt 収集されたくないコンテンツをクロールされないように制御するファイル
src

ウェブ画面に関する動作ファイル(.js)、スタイルファイル(.css)を保存する場所です。
package.json

Node.jsにおいてインストールするパッケージが記述されたファイルです。
img

READMEに関するテスト画像です。

手順

新しいGithubリポジトリを作ります。ここでgithub-action-demoというリポジトリを使って説明します。

個人用アクセストークンを作成します。GitHub actionをリソースに自動的にアクセスするため、個人アカウントのセッティン画面でPersonal access tokensを作ります。リンクはこちらへ：https://github.com/settings/tokens

指定されたリポジトリにトークンを保存します。リポジトリのSettings/Secretsにコピーします。

個人PCでcreate-react-appを利用して、新規プロジェクトを構築します。npxコマンドを利用すれば、npmパッケージの「ダウンロード」と「実行」をまとめて行なってくれます。
```
npx create-react-app github-action-demo
cd github-action-demo
```
作業環境は以下の通りです：
```
>> node -v
v14.17.0
>> npm -v
6.14.13
```
package.jsonファイルを開き、アプリケーションが公開されるルートディレクトリ(root directory)を示すhomepageフィールドを追加します。
```
"homepage": "https://[username].github.io/github-actions-demo",
```
[username]は自分のGithubアカウント名を変更してください。
Github action workflowの作成します。リポジトリのActions画面へ移動し、actionに関するワークフローを作ります。
- ここで他人が作た設定ファイルを利用します。JamesIves/github-pages-deploy-actionを使います。
- このアクションは、そのままコピーできるサンプルワークフローファイルを提供しています（ソースコード）。
ここに参照の例があります。
```
     name: GitHub Actions Build and Deploy Demo
     on:
       push:
         branches:
           - master
     jobs:
       build-and-deploy:
         runs-on: ubuntu-latest
         steps:
           - name: Checkout 🛎️
             uses: actions/checkout@v2.3.1
             with:
               persist-credentials: false

           - name: Install and Build 🔧
             run: |
               npm install
               npm run-script build

           - name: Deploy 🚀
             uses: JamesIves/github-pages-deploy-action@4.1.1
             with:
               branch: gh-pages
               folder: build
               token: ${{ secrets.ACCESS_TOKEN }}   
```
念のため、このワークフローの機能も簡単に説明します。
- masterブランチでpushイベントが発生すると、すべてのプロセスがトリガーされます。
- jobは1つだけで、仮想マシン環境ubuntu-latest上で実行します。
- action/checkoutというアクションを使って、ソースコードを取得します。
- npmをインストールして、プロジェクトの環境(build)を構築します。
- JamesIves/github-pages-deploy-actionというアクションを使用して、デプロイを行います。
- GitHubキー、リリースブランチ、構築環境が置かれるディレクトリ(build)という3つの環境変数が必要です。
ローカルのリポジトリgithub-action-demoをGithubに指定されたリポジトリ[username]/github-action-demoをpushします。

GitHubはワークフローファイルが見つかれば自動的に実行します。ログはウェブサイトでリアルタイムに見えます。

もしActionsを実行失敗したら、問題が発生したところもチェックできます。
Github pagesでウェブ画面を公開します。

まずはデプロイしたいブランチを指定します。リポジトリのセッティング画面でpagesをクリックし、生成したgh-pagesブランチを指定します。その後、https://[username].github.io/github-action-demo/をアクセスして、ウェブ画面をアクセスできます。

終わり(¦3[▓▓] (¦3[▓▓]

york-yang-me/github-action-demo

github-action-demo

GitHub Actions 定義

目次

主要なファイルの説明

手順