📌
Vue.jsアプリケーションのAWS S3 + CloudFrontデプロイで遭遇した課題と解決方法
はじめに
Vue.jsアプリケーションをAWS S3とCloudFrontを使用してデプロイする過程で遭遇した問題点と、その解決方法について共有します。特に/distディレクトリの設定に関する問題は重要かと思いました。
主な課題と解決策
- Access Deniedエラーの解決
最も時間がかかった問題は、CloudFrontからのアクセス時に発生したAccess Deniedエラーでした。このエラーの主な原因は以下の点でした：
- /distディレクトリの重要性
特に重要だったのは、CloudFrontのオリジンパス設定です。Vue.jsのビルド後のファイルはdistディレクトリに生成されますが、これを正しく設定しないとアクセスエラーが発生します。
正しい設定手順:
CloudFrontのオリジン設定で「オリジンパス」に/distを指定
S3バケット内のdistフォルダにビルドファイルをアップロード
学んだ教訓 - 設定の順序が重要
S3バケットの設定
バケットポリシーの設定
CloudFrontの設定
オリジンパスの設定 - パブリックアクセス設定の理解
S3バケットの適切なパブリックアクセス設定が必要
特に「新しいパブリックバケットポリシー」の設定に注意 - デプロイ時の注意点
改善点と今後の課題
- 自動デプロイの検討
現状は手動でのS3アップロードが必要
自動化が望ましい - 効率的な更新方法
キャッシュ制御の最適化
効率的なデプロイフローの構築
まとめ
初回のデプロイでは苦戦しましたが、これらの経験は今後の開発・運用に活かせる貴重な学びとなりました。
参考にした記事
Discussion