0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AzureにNuxt × Docker + Djangoをデプロイする手順(学生向け)

Posted at

はじめに

個人開発で作っていたNuxt3 + Django + Postgresqlアプリケーションを、Azureにデプロイしました。僕にとって初めてのクラウド本番環境構築でしたが、Azure Web AppとAzure Static Web Appsを組み合わせることで、なんとか正常に動作しました。(実際には、1週間以上ハマっていましたが、振り返れば良い経験です。)

構成

・フロントエンド:Nuxt3(Azure Static Web Apps)
・バックエンド:Django REST Framework(Azure Web App Services / Docker)
・DB: Postgresql Flexible Server(Azure Database for PostgreSQL)

デプロイ手順(概要)

  1. リソース作成(Azure CLI)
    az CLI を使って、以下のリソースを作成:
    リソースグループ
     ・PostgreSQL Flexible Server
     ・Azure Web App for Containers
     ・Azure Static Web Apps
    上記のコマンドはすべて setup.sh にまとめて再利用可能にしました。

  2. Docker対応(Django)
    Django を Docker 化して GitHub Container Registry に push。
    App Service の yml 設定で ghcr.io/... から pull できるように設定。

  3. Nuxtデプロイ(CI/CD)
    .github/workflows/azure-static-web-apps.yml を作成し、GitHub Actions で自動デプロイ構築。
    本番用の環境変数は .env.production、開発環境では .env を使い分け。

  4. Djangoの本番設定
    settings.py を本番用に切り替え(例:DEBUG=False、ALLOWED_HOSTS 設定など)。
    CORS_ALLOWED_ORIGINS や CSRF_TRUSTED_ORIGINS を、Azure が発行するドメインに合わせて設定。

今回の反省点

さて、次に今回の挑戦での反省点と改善点を記載していこうと思います。

  1. 計画性の無さ
    僕は、とてもズボラな性格であるので特に、「今日はこれとこれを実装する」というようなキッチリとした開発計画やテーマを持たずに開発をしていました。なので、次回からは一日一日の開発目標を持って取り組んでいこうと思います。
  2. クラウド自体の知識不足
    Azureのサービス構成(App Service, PostgreSQL Flexible Server, Static Web Appsなど)についての前提知識が浅かったため、ドキュメントを読む時間にかなり時間を使いました。今後は、「ドキュメントを先に読み、試す前に全体像を把握する」ようにします。
  3. デバッグ時の足踏み
    本番環境で起きるトラブル(CORS, CSRF, Docker pull失敗など)に対して、ログの読み方や再現方法に慣れておらず、原因特定に多く時間を食ったと感じました。
    ここから、トラブルシューティングに強くなるには、「本番のログを追う習慣」が必要だと学びました。
  4. 全体概要の非認知
    最初は「とにかく動かせ!!」と自分の心にひたすら言い聞かせ続けたので、インフラ設計・環境変数の整理・CI/CDの構成など、後から大々的な手直しが必要となる点が多くなりました。
    よって、次回からは「全体の構成図」を最初に描く癖をつけたいと思います。

まとめ

初めてのクラウドデプロイは、まさにトラブルの連続でした。
けれど、トラブルと向き合いながら環境を一つずつ構築していく中で、**「本番に耐える構成力」と「デプロイへの自信」**が自然と身についてきたように思います。

次回は、実際に使用したスクリプト全文や、エラーごとのトラブル対応ログ、構成図などを交えて、より具体的なノウハウをまとめていく予定です。
お楽しみに!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?