Github ActionsでS3にNuxt.jsで作成したアプリケーションを自動デプロイする

• 意外と本タイトルの手順を簡潔に説明した記事ってない気がします。
• なので書いておきます。
• なきゃ、かけえぇ。

知れること：Github Actionsを活用してリポジトリにPushされたら、S3バケットにアプリケーションをデプロイする方法
知れないこと：バケットの設定は本記事では紹介しません。バケットのオブジェクトをパブリックに公開する設定にしておきましょう。

以下の記事は、Terraformでやってますけど、S3の公開設定をしてるので興味があれば見てみてください。
https://qiita.com/ayumu_/items/ba0674f226e2acfa114f

目次

1. Github Actionsとはなにか（超簡潔に）＆ 本記事でやっていること
2. 手順
3. おわりに

1. Github Actionsとはなにか（超簡潔に）＆ 本記事でやっていること

Github Actionsとはなにか（超簡潔に）

• Githubに完全統合されているCI/CDのことです。
• Github以外のダッシュボードを見に行く必要がなく、 あらゆるGithubイベントに対応しています。

Github Actions
https://github.co.jp/features/actions

本記事でやっていること

• workflowと呼ばれるymlに定義した通りに、Actionsを実行できます。
• ここでは、リポジトリへのPush処理をトリガーとして、workflowに定義した処理を自動で実行(指定したS3バケットにアプリをデプロイ)するように設定します。yarn generateもデプロイの過程で実行します。
• つまり、リポジトリは開発したアプリケーションのソースを管理する場所、workflowに自動でs3にアプリケーションをデプロイする方法を記載する、というわけです。

2. 手順

前提条件

1. s3バケットがあらかじめ作成済みであること
2. AWSリソースにアクセスするためのアクセスキーとシークレットアクセスキーを取得済みであること

Github ActionsにAWSリソースにアクセスするための、アクセスキーとシークレットアクセスキーを環境変数として設定する

GUIでリポジトリ内の、Settingタブを選択し、サイドバーにあるSecrets and variablesのActionsを押下します。
New repository secretからアクセスキーとシークレットアクセスキーを設定しましょう。

私は、上記のように設定しました。

では、workflowを設定するための準備をしましょう

GUIでリポジトリ内のActionsタブを選択し、ハイパーリンクのset up a workflow yourseldを押下します。

以下のように、workflowを設定するためのディレクトリ構造とymlファイルに定義内容を設定するためのエディタが出現します。
ymlのファイル名を設定して、早速エディタに処理を記述していきましょう。私はactions.ymlとしました。

workflowの定義内容です、お納めください

Actions.yml

name: Build and Deploy to S3

on:
  push:
    branches:
      - vuetify-practice2

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 16
      
      - name: Install dependencies
        run: yarn install
      
      - name: Build Nuxt.js
        run: yarn generate:dev
      
      - name: List directory contents
        run: ls -la
        
      - name: Deploy to S3
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}

        run: aws s3 cp --recursive --region ap-northeast-1 ./dist s3://バケット名 --acl public-read

記述内容の解説（この項はスキップしてもらっても構いません）

このactions.ymlファイルは、Github Actionsのワークフローを定義しています。ワークフローは一連の手順（ジョブとステップ）を指定し、特定のイベント（この場合はpushイベント）が発生したときに自動的に実行されます。以下に、各部分の解説を簡単に行います。

name >>> ワークフローの名前を定義します。

on: push: branches: - vuetify-practice2　>>> vuetify-practice2という名前のブランチへのpushイベントが発生したときに、ワークフローがトリガーされることを定義します。

yarn install >>> 必要な依存関係をインストールします。

yarn generate:dev >>> Nuxt.jsのアプリケーションをビルドします

ls -la >>> ディレクトリの内容をリスト表示します。これは主にデバッグ目的で使用されます。（これは書かなくてもok）

env >>> 環境変数に設定したアクセスキーとシークレットアクセスキーを読み込みます。

aws s3 cp --recursive --region ap-northeast-1 ./dist s3://バケット名 --acl public-read >>> aws s3 cpコマンドで./distディレクトリの内容をS3バケットにコピーします。このコマンドは、コピー先のS3バケットを公開（--acl public-read）として設定します。これにより、デプロイされたアプリケーションは公開URLからアクセス可能となります。なお、Nuxtはgenerateされると、./dist配下にオブジェクトができるので、そこを指定しています。

つまり、このactions.ymlファイルによって、vuetify-practice2ブランチにプッシュが行われると、Github Actionsは自動的に上記のステップを実行し、アプリケーションをAWS S3にデプロイします。

Actionsを起動して、結果を確認しよう

設定が終わったら、ローカルからリモートリポジトリに対してPushしてもいいのですが、pullしてgithub actionsを起動するためのymlをローカルにも反映させましょう。

さて、これでActionsを起動する準備が整いました。リポジトリに対して、Pushしてみてください。
GithubでActionsのタブから、起動中のActionsを確認できます。

該当のCommitメッセージを押下します。Actionsが起動している様子をみることができます。
以下のように全ての項目がパス(正常であれば緑のチェックマーク)されれば、完了です。

AWSのマネージメントコンソールにアクセスし、S3を確認して、想定通りアプリがデプロイされていることを確認できたらWell doneです！

3. おわりに

• 今回は、Actionsを活用してpushをトリガーにS3にアプリケーションを自動でデプロイする方法を紹介しました。
• Actions最高！