AWS + github actions

概要

AWS + github actionsでWebサービスを構築する。

概略図

費用

Vue環境構築

まずVueアプリを作りS3にアップする。

https://qiita.com/nako_sleep_9h/items/a8ae1684100c3291376a

Vueアプリ作成

nodejsのインストール

https://nodejs.org/ja/

$ node --version
v18.14.0

vueのインストール

$ npm install -g @vue/cli

$ vue --version
@vue/cli 5.0.8

$ npm ls node-ipc

アプリ作成

$ vue create apartmentlifeplan
> use Vue3
> use npm
$ cd apartmentlifeplan
$ npm run serve

ブラウザ確認

S3へアップロード

ビルド

npm run build

S3バケット作成、S3バケットにdist以下をアップロードし、静的ウェブサイトホスティングを有効化

バケットアクセスポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:GetObject",
                "s3:PutObject"
            ],
            "Resource": "arn:aws:s3:::longtermrepairplan/*"
        }
    ]
}

URL

https://bucket-name.s3.region-code.amazonaws.com/key-name
https://longtermrepairplan.s3.ap-northeast-1.amazonaws.com

できた

https://longtermrepairplan.s3.ap-northeast-1.amazonaws.com/index.html

3. github actions

https://docs.github.com/ja/actions/quickstart

https://docs.github.com/ja/actions/learn-github-actions

https://docs.github.com/ja/actions/using-workflows

AWS IAM

AWSでS3へのアクセス権を持ったユーザを作成する。
AWS IAMで以下を作成する。

• ポリシー

• ロール

• ユーザー

ポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::longtermrepairplan"
        }
    ]
}

ユーザーにアクセスキーID、シークレットアクセスキーを作成し、メモる。

github actions登録

Settings＞Secrets＞ActionsでActions secretsを追加。

ワークフローを作成する .github/workflows/deploy.yml

on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@main  # リポジトリをチェックアウト

      - name: Install Dependencies
        run: npm install

      - name: Build
        run: npm run build

      - name: Deploy  # 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://longtermrepairplan

上記をPRににする。

github actions実行

RPをマージした。deploy成功。

デプロイテスト

ちゃんとPRマージでS3に反映されるか確認

修正内容

-  <HelloWorld msg="Welcome to Your Vue.js App"/>
 + <HelloWorld msg="Welcome to My Vue.js App"/>

修正前

マージした。デプロイに成功。

デプロイ完了後に見ると変わっていた。S3へのデプロイ成功。

?. github actionsでamazon lightsailにデプロイ（未定）

DBアクセスが必要になったら行う。

https://zenn.dev/devneko/articles/196b9befb48b41798071

https://docs.aws.amazon.com/cli/latest/reference/lightsail/index.html#cli-aws-lightsail