S3への自動デプロイをやってみた
概要
Github Actions を使って、Vue.jsのビルドからS3の自動デプロイまでを自動化してみました。
経緯
自身はAndroidエンジニアではありますが、自分のWEBサイトを刷新したくて、とりあえずVue.jsを使ってみました。
全くVue.jsの恩恵を受けることなく、開発をしていたのですが、ふと自動化したいと思い、Github Actions を使って、ビルドしたファイルを自動でS3にアップできるようにしましたので、メモ書きとして残しておこうと思います。
実際のレポジトリは以下のURLからご覧ください。
内容
ビルドから自動デプロイまでの手順は、色んなサイトで記述されているので、今回は省略します。
今回は、自動デプロイを実現する上で、詰まった点を書き留めておこうと思います。
ワーキングディレクトリのミス
Githubでレポジトリをご覧になるとお分かりですが、ルート直下に、package.jsonがなく、appフォルダ直下に置いておりました。これが、様々な問題を引き起こしてしまいました。
Github Actions が実行されると、早速、以下のエラーコードが出ちゃいました。
Error: Process completed with exit code 254.
ちゃんと、コピペをするんじゃなくて、理解することが必要だと痛感しましたね。
ビルドする前に、ディレクトリを指定することで解決しました。
- name: Build
run: npm run build # vuejs ビルド
working-directory: ./app
AWS CLI
なぜか、以下のようなエラーが発生しちゃいました。
Process completed with exit code 255.
結論、AWS CLI のインストールをしてなかっただけでした（違うサイトでは、直接、AWS CLI を呼び出していたので、できるのかと思ってた）
# S3へのデプロイ準備
- name: Configure AWS credentials from account
uses: aws-actions/configure-aws-credentials@v1
with:
# Secretsで登録したキーを設定
aws-access-key-id: ${{ secrets.AWS_ACCESS_TOKEN_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
# S3のリージョン
aws-region: ap-northeast-1
なんとか、無事、自動デプロイができるようになりました。
ちなみに、CloudFrontも使っているので、キャッシュを削除するような仕組みも必要なので、どこかで実施しようと思います。
