本記事では、GithubActionsとrsyncを使用してVue.jsアプリケーションをAWS EC2上に自動デプロイする方法について解説します。
これにより、開発環境へのビルドが煩わしさや、リソースの限られるサーバでビルドする際のメモリ不足問題を解決できます。
secretsにssh情報を設定
セキュリティのために、GithubのsecretsにEC2へのSSH接続に必要な情報を設定します。EC2_SSH_PRIVATE_KEY、EC2_HOST、EC2_USERの3つを登録しておきます。
workflowファイルの作成
まず、Githubリポジトリのルートディレクトリに.github/workflowsフォルダを作成し、その中にdeploy.ymlという名前のファイルを作成します。
deploy.ymlファイルには、以下の内容を記述します。
name: Deploy to AWS EC2 staging
on:
push:
branches:
- hogehoge
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout repository
uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- name: Build
run: |
npm install
npm run build --if-present
- name: Deploy to EC2
env:
PRIVATE_KEY: ${{ secrets.EC2_SSH_PRIVATE_KEY }}
HOST: ${{ secrets.EC2_HOST }}
USERNAME: ${{ secrets.EC2_USER }}
run: |
echo "$PRIVATE_KEY" > private_key.pem
chmod 600 private_key.pem
rsync -avz -e "ssh -i private_key.pem -o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null" --exclude '.git/' --exclude 'node_modules/' --exclude 'private_key.pem' ./dist/ $USERNAME@$HOST:/path/to/your/vue/project/dist
rm -f private_key.pem
プログラムの解説
トリガー
onキーで、ワークフローのトリガーを設定しています。今回は、ブランチへのプッシュをトリガーにしています。hogehogeの箇所は適宜修正してください。
job
jobsキーでは、ワークフロー内で実行されるジョブを定義しています。今回は1つのジョブdeployがあり、以下のステップが含まれています。
- セットアップ
リポジトリのチェックアウト: actions/checkout@v3を使用して、リポジトリのコードをチェックアウトします。
Node.jsのセットアップ: actions/setup-node@v3を使用して、Node.jsをセットアップします。今回はバージョン16を指定しています。 - ビルド
ビルド: npm installで依存関係をインストールした後、npm run build --if-presentでビルドを実行します。--if-presentオプションは、buildスクリプトが存在しない場合にエラーを回避するために使用されます。 - rsyncによるファイル転送
EC2へのデプロイ: まず、secretsから取得したSSHの秘密鍵をprivate_key.pemという名前のファイルに保存し、パーミッションを600に設定します。その後、rsyncコマンドを使用して、ビルドされたファイルをEC2インスタンスに転送します。.git/、node_modules/、およびprivate_key.pemディレクトリは除外されます。最後に、private_key.pemファイルを削除します。