Edited at
CI/CDDay 4

Github Actionsにて自動的にデプロイする環境作成(Webサイト編)


概要

Github Actionsが使用できるようになったのでGithub上でのCI/CDの検証を行います。

開発において毎回デプロイ環境を構築したり、デプロイ手順書の作成、把握、手動での実施、といった一連のフローを行っていくのは非常に手間がかかります。

今回Github ActionsのCI/CDの検証を行い、定常的な方法を確立し、他の開発プロジェクトにも適用できるようなテンプレートを作成しました。

そのような環境の構築にあたっての備忘録としてここに記述しておきます。

今回、作成したテンプレートのプロジェクトは以下になります。

github-actions-examples

今回はWebサイトの環境における自動デプロイの手法になります。

この他、

での自動ビルド&デプロイの環境構築を進めており、こちらは確立され次第、後日紹介します。


使用構成

運用費用が月額0円になるようなサービスを中心に利用していきます。


  • Frontend(サーバー)



  • Frontend(フレームワーク/ツール/言語)


    • React

    • Typescript



  • Backend(サーバー)


    • AWS(Lambda + API Gateway)



  • Backend(フレームワーク/ツール/言語)



またFirebaseにおけるデプロイも作成中で、完成次第、更新します。


やりたいこと



  • React Web: ReactでWeb frontendの開発を行い、masterにpushされたら自動的にbuildする。Buildが完了したら Github PagesにDeployして内容が反映されること


  • Serverless Framework: Serverless FrameworkよりBackendの開発を行いWeb APIを作成。masterにpushされたら自動的にdeployコマンドを実行し、AWS Lambda + ApiGatewayの環境にdeployして反映されること


  • Firebase: Firebase Hosting, Firebase Cloud Functions にて、それぞれfrontend/backendの開発を行う。masterにpushされたら自動的に firebase cli のdeployコマンドを実行し、反映されること


Github Actionsについて


Github Actionsとは

通称 CI(継続的インテグレーション: continuous integration) / CD(継続的デリバリー: Continuous Delivery) が実行できるGithubの機能です。

詳しくはこちらを参照してください。

CI/CD実行環境: つまり開発していく中で繰り返し行われる作業を自動的に実行してくれる環境になります。基本的にCLIで実行可能な状態にすることでCI/CDに組み込むことができます。


競合サービス

また、この他、ツールとして

などがあります


Github Actionsを使うメリット


  • Githubの中だけで完結できる

  • 設定が簡単(ymlファイルに記述していくだけ)

  • MacOS/WindowsOSが利用できる(Gitlab CIではLocalへのインストールが必要)

  • 上記OSの利用も含めて無料(Publicリポジトリは完全無料、privateリポジトリは2000時間/月まで利用無料 → 詳しくはこちら)


    • ※ 以下に記載しますがpublicリポジトリであっても、鍵の情報などは公開されることはありません



  • 有志が作成したGithub Actions用のライブラリ(Plugin)があり、それを組み込みことができる


Github Actionsのはじめ方

GithubにてGithub Actionsを有効にして、 .github/workflows/フォーマットしたymlファイル を設置する事でGithub Actionsが実行可能になります。(現在まだオープンβ盤なの利用するには申請が必要になります。こちらから申し込みを行ってください。)

GithubActions.png

なお、今回作成したymlファイルの設定内容の詳細についてはそれぞれこちらを参照してください。


ymlファイルの書き方

構文の内容が多いのでまずは Github Actions を有効にした時に Template の使用を勧められるのでそちらを選択してください。また以下に詳細が載っていますのでこちらを参照してください。

GitHub Actionsのワークフロー構文

簡単に設定例と解説として、AWS LambdaへのServerless Deployの設定ファイルについて以下に示します。(詳しくはこちら)

on:

push:
branches:
- serverless-deploy
name: Serverless Deploy
jobs:
deploy:
name: deploy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: setup ubuntu
run: sudo apt-get --quiet update --yes
- name: yarn install |
working-directory: ./serverless
run: yarn install
- name: serverless package and deploy
working-directory: ./serverless
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run:
yarn add serverless
./node_modules/serverless/bin/serverless package --package ./build
./node_modules/serverless/bin/serverless config credentials --provider aws --key ${AWS_ACCESS_KEY_ID} --secret ${AWS_SECRET_ACCESS_KEY}
./node_modules/serverless/bin/serverless deploy --package ./build
- uses: actions/upload-artifact@master
with:
name: build
path: serverless/build

ここでは、serverless-deploy というブランチにpushされたら、 ubuntu-latest のdockerイメージをもちいて、 steps: 以降の処理を順次実行していってます。

steps: の中の uses: で使用するライブラリを指定、run: で実行するコマンドを記述していきます。また、連続してコマンドを実行したい場合は run: | で複数行にまたがって記述することで連続してコマンドが実行できます。

working-directory: ではrun: コマンドを実行するときの ルートディレクトリを指定することができます。


その他、雑多なこと


Workflow

以下のワークフローを元にデプロイしていきます。


  • Reactをデプロイするまでのワークフローは以下の通り

React Web Workflow.png

@startuml

title React Web Workflow

(*) --> [yarn install] "インストール"
"インストール" --> [yarn run build] "Build"
"Build" --> "Deploy(HTML)"
"Deploy(HTML)" --> (*)

@enduml


  • ServerlessをDeployするまでのワークフローは以下の通り

Serverless Workflow.png

@startuml

title Serverless Workflow

(*) --> [serverless config credentials] "設定"
"設定" --> [yarn install] "インストール"
"インストール" --> [serverless package] "Build"
"Build" -->[serverless deploy] "Deploy"
"Deploy" --> (*)

@enduml

上記Workflowの内容をそれぞれ、順次実行していくため、Github Actionsのymlファイルに適用していきます。


Github Actionsにて非公開にしたい変数を登録して使用する

API Keyや環境変数などオープンにしたくない情報は Secrets に変数を登録することで、公開されることなく利用することができます。

以下のようにリポジトリから SettingsSecrets と選択し、Add a new Secrets と選択することで設定することができます。

GithubSettingsSecrets.png

※ 一度設定したSecretsは内容を確認する事はできません。またGithub Actionsの中で出力しようとしても値は表示されませんので、設定には気をつけてください。

設定した, Secrets は以下のように env: の項目に設定した Key名 を代入する事でコマンドの中などで使用されます。

- name: serverless package and deploy

env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
./node_modules/serverless/bin/serverless config credentials --provider aws --key ${AWS_ACCESS_KEY_ID} --secret ${AWS_SECRET_ACCESS_KEY}

上記の内容はServerless FrameworkにてAWS環境にDeployするためにAWSへのAPIアクセスキーを設定している内容になります。

具体的な実装例は

こちら になります。


Github PagesへのDeploy方法



  • Settings よりGithub Pagesを有効にする

GithubSettings.png

GithubPagesSettings.png


  • 公開鍵と秘密鍵のペアを生成する(以下のコマンドを実行する)

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""


  • 作成した公開鍵(gh-pages.pub)の中身を Deploy Keys に登録する

GithubSettingsDeployKey.png


  • 登録する時、以下のように「Allow write access」にチェックを入れる

GithubActionsSetDeployKey.png


  • 作成した秘密鍵(gh-pages)の中身を Secrets に登録する

GithubSettingsSecrets.png



  • Workflowのymlの中のstepsの項目に以下の内容を適用する

    - name: deploy

uses: peaceiris/actions-gh-pages@v2.5.0
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: gh-pages
PUBLISH_DIR: frontend/build

これで設定完了なので、特定のブランチにpushしたら、自動的に Github Pagesにデプロイしてくれるようになります。


設定したymlについての解説

詳細についてはこちらを参照してください。


  • Github Pagesへのデプロイはactions-gh-pagesというライブラリを使用しています。このライブラリを使用しています。ライブラリを使用する場合は step の項目のところで、uses: の項目を指定すると使用できます。この場合、run: 項目や working-directory:項目を使用することができません。


  • secrets.ACTIONS_DEPLOY_KEYは上記で登録したSecret の変数名の値が適用されます。Github Actionsの中で使用したい場合は env: 項目内で変数に指定することで使用することができます。(ライブラリの場合は指定があります)


  • PUBLISH_BRANCHの項目でGithub Pagesにデプロイしたいブランチを指定することができます。このとき gh-pages を指定していますが存在しなければ、Workflowを実行している中で勝手に作成してくれます。しかし、最初に作成する時はうまくdeployできないこともあるので、あらかじめ作っておくといいかもしれません。また gh-pages ブランチは Github Pagesの公開用のブランチとして指定することもできます。(うまくいかないかもしれないので、指定しておいたほうがいいと思います)


serverless framework

serverless frameworkのコマンドについて詳細はこちらを参照してください。

詳細はこちら

serverlessコマンドを使用するためにはserverlessをインストールしてserverlessコマンドを実行できるようにする必要があります。そのため、ワークフローの途中にてyarn install serverlessを実行してインストールしています。環境変数の設定の関係により ./node_modules/serverless/bin/serverless でpathを直接指定しています。


artifactの設定 ~ビルドした成果物をダウンロードできるようにする~

Buildした成果物をダウンロードできるようにするためには upload-artifact というライブラリを使用して成果物をアップロードしています。

以下のように設定することで成果物をアップロードすることができます。

  - uses: actions/upload-artifact@master

with:
name: build
path: serverless/build

このとき、name: でダウンロードするファイル名を指定し、path: で指定したパス以下のディレクトリをアップロードします。

アップロードしたArtifactは以下のようにActionsの中の Artifacts からダウンロードすることができます。

GithubActionsArtifactDownload.png


参考