タグ: AWS

  • Django × AWS RDS でバックエンドを構築する手順

    Django × AWS RDS でバックエンドを構築する手順

    Flutterで単語帳アプリを構築しようと思い立ち、バックエンドを Django + AWS RDS(PostgreSQL)に選定しました。今回はこの手順をメモがてら記事に残そうと思います。

    環境

    • M1 MacBook Air

    使用技術スタック

    • Django 4.x(Python 3.13)
    • AWS RDS(PostgreSQL)
    • psycopg2-binary(PostgreSQL ドライバ)
    • 環境変数管理:python-dotenv
    • API:Django REST Framework

    🛠 構築手順

    1. Django プロジェクトの準備

    仮想環境を立ち上げ、django プロジェクトを作成しました。今回は単語帳アプリなのでvocab という名前にしましたが、これを参考にしている方は好きなプロジェクト名にしてください。

    python -m venv venv
    source venv/bin/activate
    pip install django djangorestframework psycopg2-binary python-dotenv
    django-admin startproject config .
    python manage.py startapp vocab

    2. .env ファイルの作成(RDS 接続情報)

    プロジェクトのルートディレクトリに .env ファイルを作成し、AWS RDS で設定した際に表示される以下情報を.env にまとめました。

    .gitignore に .env を追加しておけば、リモートでの管理ができます。

    DB_HOST=your-rds-endpoint.ap-northeast-1.rds.amazonaws.com
    DB_NAME=vocab
    DB_USER=yourusername
    DB_PASS=yourpassword

    3. settings.py に DB接続を設

    先ほど作った.env を読み込ませます。PORTはデフォルトで5432なので直接書きました。

    import os
    from dotenv import load_dotenv
    
    load_dotenv()
    
    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.postgresql',
            'NAME': os.getenv('DB_NAME'),
            'USER': os.getenv('DB_USER'),
            'PASSWORD': os.getenv('DB_PASS'),
            'HOST': os.getenv('DB_HOST'),
            'PORT': '5432',
            'OPTIONS': {
                'sslmode': 'require',
            }
        }
    }

    4. AWS RDS(PostgreSQL)インスタンスの構築

    AWS RDS のコンソールにWebからアクセスして、作成したRDS の設定を変更します。

    • パブリックアクセス:はい
    • セキュリティグループで 5432 ポートを開放
    • ソース:自分のIP/32(ターミナルでcurl -4 ifconfig.me で確認)

    5. セキュリティグループを RDS に割り当て

    AWS Console → RDS → データベース → 「変更」→ セキュリティグループを追加


    6. RDS に接続してデータベースを作成

    vocab という名前のデータベースを作成しました。psqlコマンドを使用するので入ってない人はインストールしてください。

    brew install postgresql
    psql "host=your-rds-endpoint port=5432 user=yourusername dbname=postgres sslmode=require"
    CREATE DATABASE vocab;

    7. Django モデル定義とマイグレーション

    例:vocab/models.py

    from django.db import models
    
    class Vocabulary(models.Model):
        word = models.CharField(max_length=100)
        meaning = models.TextField()
        created_at = models.DateTimeField(auto_now_add=True)

    マイグレーション実行:

    python manage.py makemigrations vocab
    python manage.py migrate

    8. Django REST Framework でAPI構築

    vocab/views.py

    from rest_framework import viewsets
    from .models import Vocabulary
    from .serializers import VocabularySerializer
    
    class VocabularyViewSet(viewsets.ModelViewSet):
        queryset = Vocabulary.objects.all()
        serializer_class = VocabularySerializer

    vocab/serializers.py

    from rest_framework import serializers
    from .models import Vocabulary
    
    class VocabularySerializer(serializers.ModelSerializer):
        class Meta:
            model = Vocabulary
            fields = '__all__'

    config/urls.py

    from django.urls import path, include
    from rest_framework.routers import DefaultRouter
    from vocab.views import VocabularyViewSet
    from django.http import JsonResponse
    
    router = DefaultRouter()
    router.register(r'vocab', VocabularyViewSet)
    
    def root_view(request):
        return JsonResponse({"message": "Vocab API is running!"})
    
    urlpatterns = [
        path('', root_view),
        path('api/', include(router.urls)),
        path('admin/', include('django.contrib.admin.urls')),
    ]

    9. 開発サーバー起動・確認

    python manage.py runserver

    確認:

    • http://127.0.0.1:8000/ → 簡易JSON

    • http://127.0.0.1:8000/api/vocab/ → API 動作確認

    ✅ まとめ

    Django × AWS RDS の連携は、セキュリティグループやパブリックアクセスの設定など、最初の接続までが一番の壁でしたが、そこを乗り越えれば快適にクラウドDBで開発が進められます。


    ✍️ 補足(記事に入れてもOK)

    • .env に機密情報を書くので .gitignore で Git に上げないこと

    • RDS の接続テストは psql の sslmode=require を忘れずに

    • セキュリティグループのソースIPに注意(固定IPでない場合は都度更新)

  • Amplify Data Manager から登録できない時

    Amplify Data Manager から登録できない時

    Amplify Studio Data Manager でコンテンツ登録しようとしたところ、

    IAM is required as an auth provider to use content management capabilities. To automatically add IAM and enable content management, navigate to 'Data' and select 'Save and Deploy'.

    と表示されました。

    この画面で Go to Data Model をクリックして遷移した先で, Save and Deploy をしたところ、

    An error occurred while processing your request: Deployment failed because your app backend contains hosting. Amplify Studio only supports API, Auth, and Storage deployments. Please use the Amplify CLI to deploy updates.

    となってしまいました。

    解決方法

    私の場合 hosting を試しに使用していたのが問題でした。

    amplify remove hosting

    再度バックエンドをプッシュ

    amplify push

    その後 Amplify Studio の Data に移動し、 Save and Deploy をしたところ、deployが成功しました!

    この後 content / Data Manager に戻って無事amplify studio からデータの操作ができるのを確認できました!

  • Amplify Studio を使う

    Amplify Studio を使う

    この記事ではAmplify Studio の使い方について軽めに解説します。

    amplify を使ってデプロイしたアプリに管理画面を作ろうとしたところ、古い記事を参照したため Amplify admin UI という単語が出てきたのですが、Amplify Studio に統合されたようです。

    Amplify Studio を開く

    始める前にGithubで新しくリポジトリを作っておくと便利です。

    amplify cli を使ってプロジェクトを準備する方法は下の記事をご覧ください。

    AWS console から Amplify を開きます。

    開いて、まだ自分のアプリをデプロイしていない場合は指示に従ってデプロイをしましょう。

    デプロイに成功すると、Amplify console から amplify studio の設定を開けるようになります。

    amplify console はターミナル上で以下コマンドを実行すると表示できます。 ⚠️検索バーでamplify と調べて出てくるページとは違うので注意

    amplify console

    console が開いたら Go to Amplify Studio to enable をクリックします。

    amplify studio を有効にします。 のトグルスイッチをオンにしましょう。

    読み込みが終わると上のような画面になります。Backend Environments のURLをクリックすると、Amplify Studio に移動できます。

    Login with AWS account のボタンを押して遷移しましょう。

    このような画面に遷移するはずです!

    ここまできたら、サイドバーからUI Library → sync with Figma など話題の機能が使えます!

    お疲れ様でした。

  • Amplify React デプロイまで

    この記事ではAWS Amplify を使ってReacgtプロジェクトをビルドするまでの手順をメモとして残しています。

    やり方

    Amplify の初期設定

    Amplify cli をインストールします。

    npm install -g @aws-amplify/cli

    次にAWS cli の認証情報を設定します。これはコンソールからIAMユーザーの作成と権限の付与が事前に必要です。

    amplify configure

    Amplify プロジェクトの初期化

    用意してあるReactプロジェクトのディレクトリに移動して、次のコマンドを実行します。

    cd your-react-project
    amplify init

    対話形式で色々と聞かれるので順に答えていきます。

    APIの追加

    amplify add api

    このように必要なパッケージをaddします。

    変更をpush

    全て終わったらpushしましょう。

    amplify push

    デプロイ

    デプロイ方法は2つあり、一つはこのままCLIで行う方法です。もう一つはAWS Amplify console でWeb上でデプロイをする方法です。

    まずはCLIを使った方法です。

    amplify add hosting
    amplify publish

    これでOKです。

    もう一つのWeb上でのデプロイはamplify console に移動して、GitHubとリポジトリを連携していけばデプロイできます。

    参考

    参考にさせていただいた動画のリンクです。

Home
About
Blog
Works
Contact