Vue.js/DjangoのアプリケーションをElastic Beanstalkでデプロイする際の注意点

2021.10.26

Vue.js/DjangoのアプリケーションをElastic Beanstalkでデプロイする際の注意点

こんにちは！ハンズラボのりょうです。

今回は、Vue.js/Djangoのアプリケーションを、ElasticBeanstalkでデプロイする際に陥ったミスとその解決策についてのお話です。

背景

ElasticBeanstalk で環境プロパティ等の変更を行うたびに、アプリケーションが表示されなくなってしまう現象が発生し、環境プロパティを変更するたびに手動でデプロイをしなければならないので、なんとか解決したい！！

やりたいこと

環境プロパティ等の変更により ElasticBeanstalk が自動的に再デプロイされても、アプリケーションが表示されていること。

調査開始

まずは、これまでのデプロイの流れと本事象の発生タイミングをおさらいします。

vue-cli-service build 操作を実施し、Vue.js のビルド結果を出力
ebextensions の container_commands に collectstatic コマンドを設定
eb deploy を実行（この時点ではアプリケーションは表示されている）
環境プロパティ等の設定変更を実施するとアプリケーションが表示されなくなる

.ebextensions/01_django.configの中身はこんな感じです。

container_commands:
    01_collectstatic:
　　　　　　　　# ここでビルド結果を静的ファイル配置パスに配置
        command: ‘source /var/app/venv//bin/activate && python /var/app/staging/manage.py collectstatic --noinput’ 
    02_migrate: 
        command: ‘source /var/app/venv//bin/activate && python /var/app/staging/manage.py migrate’
        leader_only: true
    03_wsgipass:
        command: ‘echo “WSGIPassAuthorization On” >> ../wsgi.conf’

option_settings:
    aws:elasticbeanstalk:environment:proxy:staticfiles:
        /static: “static”
    aws:elasticbeanstalk:container:python:
        WSGIPath: app.wsgi:application

設定変更後のアプリケーションコードを見てみると、なんとVue.jsのビルド結果が消失していました。
むむむ、、

その後も調査を続けましたが、直接の原因がわからず、、
AWSサポートに本件について相談してみました。

すると、eb deploy 実行時点で存在していないファイル(eb deploy 中にビルドしたファイル等)については、デプロイ後、環境プロパティ等の設定変更を行った際に消失してしまうとのことでした。

確かに、eb deploy中に collectstatic を実行し、Vue.jsのビルド結果を静的ファイル配置パスに配置しているので、デプロイ実行時点ではファイルが存在していない。。

ということで、collectstatic を実行して、Vue.js ビルド結果を静的ファイル配置パスに配置してから eb deploy してみる

実践

以下の流れでデプロイしてみます。

vue-cli-service build 操作を実施し、Vue.js のビルド結果を出力
collectstatic を実施し、Vue.js のビルド結果をプロジェクトディレクトリの静的ファイル配置パスに配置
eb deploy を実行

変更後の.ebextensions/01_django.configの中身はこんな感じです。
eb deploy前にcollectstaticコマンド実行しているので、01_django.configからは削除しています。

container_commands:
    01_migrate: 
        command: ‘source /var/app/venv//bin/activate && python /var/app/staging/manage.py migrate’
        leader_only: true
    02_wsgipass:
        command: ‘echo “WSGIPassAuthorization On” >> ../wsgi.conf’

option_settings:
    aws:elasticbeanstalk:environment:proxy:staticfiles:
        /static: “static”
    aws:elasticbeanstalk:container:python:
        WSGIPath: app.wsgi:application