Serverlessを用いたAWSラムダへのDJANGOプロジェクトの展開(第4報)

前のブログ記事で約束した通りDeploying a Django project on AWS Lambda using Serverless (Part 3) , 反応を加える方法をあなたに教えたいです.JJPクライアントをDjangoプロジェクトに配備し、Servlessを使用してAWSラムダでDjangoで展開します.

ブラフ

Djangoフレームワークを使用すると、djangoテンプレートを使用してクライアントを構築することができますが、これは十分ではない場合が多いです.アプリケーションのクライアント側のビジネス要件は、クライアント側により複雑なロジックを追加する必要があります.これらのケースでは、JavaScriptのWebフレームワーク(reac . js、vuj . js、角度など)なしでビジネスの問題を解決することはできません.簡単な反応の作り方を教えてあげたい.JSクライアントとDjangoプロジェクトを使用して統合 axios クライアント側のライブラリとDjango REST Framework サーバ側で.
このアプローチで、私は反応を構築します.CloudFrontディストリビューションのドメイン名をPublicCount URLとしてJSクライアントに接続し、Ajj 3にバンドルしています.それから、私はビルダーを加えますindex.html 反応するファイル.DjangoテンプレートフォルダへのJSアプリは、AWSラムダでDjangoプロジェクトでそれを展開します.

始める

私は既にDjangoプロジェクトを作成して、Serverlessを使用してAWSラムダでそれを展開する方法を説明しましたmy first blog post このシリーズの.私は始めるためにそのプロジェクトを使用します.
次の手順を実行しましょう.

私が使用したDjangoリポジトリをクローンthe first part of these series とクローンされたリポジトリに移動します.

git clone https://github.com/vadym-khodak/django-aws-lambda
cd django-aws-lambda

指示に従ってくださいthis blog post Djangoサーバーをインストールするには、環境変数を設定します.env , マイグレーションを適用し、スーパーユーザを作成し、サーバーを実行します.

すべてが動作する場合は、クライアント上で作業を開始する準備が整いました.

反応を加える。クライアント

この部分では、簡単な反応を作成する方法を示します.JSクライアントと我々のdjangoプロジェクトとそれを統合するが、私はあなたが簡単にVueを使用することができることを確認します.JS(私は角度に精通していない)はかなり同じステップとして.
反応を作成する多くのオプションがあります.JSクライアント.使っている react-scripts この例では.

インストール react-scripts 使用 npm ( Node Package Manager )

npm install -g react-scripts

反応スクリプトを使用して反応を初期化します.クライアント

npm init react-app client

反応するチェック.クライアントが正常に構築されました

cd client
npm run start

それはあなたのブラウザを開きますlocalhost ポート3000 このようなページが表示されます.

Djangoプロジェクトの設定の更新

Djangoの設定を更新しましょうindex.html 反応するファイル.JSクライアント:

追加CLIENT_DIR 環境変数.env ファイル

CLIENT_DIR="client/build"

更新django_aws_lambda/urls.py 次のコードをファイルします

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView


urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', include('hello.urls')),
    path('', TemplateView.as_view(template_name="index.html"), {'resource': ''}),
    path('<path:resource>', TemplateView.as_view(template_name="index.html")),
]

更新STATICFILES_DIRS インdjango_aws_lambda/settings.py

STATICFILES_DIRS = [
    str(ROOT_DIR / env('CLIENT_DIR', default='client/build')),
    str(ROOT_DIR / 'static'),
]

我々のdjangoプロジェクトが反応を走らせることができることを確認してください。クライアント

ビルド生産反応.クライアントはローカルで以下のコマンドを実行します:

cd client
export PUBLIC_URL=static/
npm run build
cd ..

次のコマンドを実行して静的ファイルを収集します.

python manage.py collectstatic --no-input

このdjangoプロジェクトをローカルで実行します(既に移行しているスーパーユーザを作成してください.

python manage.py runserver

ブラウザに行き、このURLを開きますhttp://localhost:8000 このようなページが表示されます.

前に見たのと同じように見えるnpm run start インclient フォルダ.ちょうど2、3の違いがあります8000 そして、それは我々のDjangoウェブサーバによって運営されます.

反応する。JJOクライアントは、Djangoサーバーに話をします。

まず、クライアントからクライアントにデータを返すAPIエンドポイントを作成する必要があります.DjangoでREST APIをビルドする最も簡単な方法はDjango REST framework プロジェクト

Djangoの残りのフレームワークをインストールしてrequirements.txt ファイル

pip install djangorestframework

新しいdjangoアプリを作成users 次のコマンドを実行します.

python manage.py startapp users

更新users/views.py 次のコードをファイルします

from rest_framework import status
from rest_framework.decorators import api_view
from rest_framework.response import Response


@api_view(["GET"])
def get_current_user(request):
    return Response(status=status.HTTP_200_OK, data={"username": request.user.username})

This is an endpoint that returns Response object with username (if the user is not authorized it will return an empty string as username)

更新users/urls.py 次のコードをファイルします

from django.urls import path

from .views import get_current_user

app_name = "users"
urlpatterns = [
    path("me/", view=get_current_user, name="get-current-user"),
]

プロジェクトの設定

更新django_aws_lambda/urls.py 次のコードをファイルします

from django.contrib import admin
from django.urls import path, include
from django.views.generic import TemplateView


urlpatterns = [
    path('admin/', admin.site.urls),
    path('hello/', include('hello.urls')),
    path('api/users/', include('users.urls')),
    path('', TemplateView.as_view(template_name="index.html"), {'resource': ''}),
    path('<path:resource>', TemplateView.as_view(template_name="index.html")),
]

更新INSTALLED_APPS インdjango_aws_lambda/settings.py

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'hello',
    'rest_framework',
    'users',
]

反応の変更JJOクライアントのリクエストを送信するには

インストールaxios ライブラリ

cd client
npm install axios -S

-S flag will add axios library to package.json file

更新client/src/App.js 次のコードをファイルします

import { useEffect, useState } from 'react';
import axios from 'axios';
import logo from './logo.svg';
import './App.css';

function App() {
  const loadUserDetails = async () => {
    const response = await axios.get('/api/users/me/');
    return response.data;
  };
  const [userData, setUserData] = useState(false);
  useEffect(() => {
    loadUserDetails().then((payload) => {
      setUserData(payload);
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <h1>Hello, World!</h1>
        <h2>I'm {(userData && userData.username) || 'Unknown User'}</h2>
      </header>
    </div>
  );
}

export default App;

次のコマンドを実行して、ビルドを最適化したクライアントをビルドします.

export PUBLIC_URL=static/
npm run build
cd ..

次のコマンドを実行して静的ファイルを収集します.

python manage.py collectstatic --no-input

ローカルでこのプロジェクトを実行します

python manage.py runserver

ブラウザに行き、このURLを開きますhttp://localhost:8000 このようなページが表示されます.

しかし、あなたのスーパーユーザのユーザ名とパスワードを使用する権限を与えた場合、以下のようなページが表示されます.

Serverlessを使用したAWSラムダでの展開

AWSインフラストラクチャを準備する

以前のブログ記事でAWSインフラストラクチャを準備する方法については既に述べたので、次のいずれかを使用できます.

手動でAWSインフラストラクチャを準備するDeploying a Django project on AWS Lambda using Serverless (Part 3) ブログ柱

TRARFORMを使用して自動的にAWSインフラストラクチャを準備しますDeploying a Django project on AWS Lambda using Serverless (Part 2) ブログ柱

無制限の設定

追加client フォルダpackage.exclude 展開から除外する

クライアント/ src / appの更新URL。生産サーバへのリクエストを送信できるJSファイル

    const response = await axios.get('/production/api/users/me/');

あなたのDjangoプロジェクトをServerlessを使用しているAWS

Amazon Linux 2 Dockerイメージを必要なすべての依存関係で準備します.

docker run -it -v $(pwd):/root/src/ -v /Users/<your-username>/.aws:/root/.aws amazonlinux:latest bash
# install the necessary Unix dependencies:
yum install sudo -y
sudo yum install -y gcc openssl-devel bzip2-devel libffi-devel wget tar sqlite-devel gcc-c++ make
# install node.js version 14:
curl -sL https://rpm.nodesource.com/setup_14.x | sudo -E bash - 
sudo yum install -y nodejs
# install Python 3.8.7:
cd /opt
sudo wget https://www.python.org/ftp/python/3.8.7/Python-3.8.7.tgz
sudo tar xzf Python-3.8.7.tgz
cd Python-3.8.7
sudo ./configure --enable-optimizations
sudo make altinstall
sudo rm -f /opt/Python-3.8.7.tgz
# create python and pip aliases:
alias python='python3.8'
alias pip='pip3.8'
# update pip and setuptools:
pip install --upgrade pip setuptools
# install serverless:
npm install -g serverless
# move to project directory
cd /root/src/
# install requirements inside docker container:
pip install -r requirements.txt
# set the necessary environment variables
export DJANGO_SETTINGS_MODULE=django_react_aws_lambda.production
export AWS_ACCESS_KEY_ID=<your-aws-access-key-id>
export AWS_SECRET_ACCESS_KEY=<your-aws-secret-access-key>
# migrate database changes
python manage.py migrate
# create a superuser in the database
python manage.py createsuperuser
# build React.JS client for AWS Lambda
cd client
npm install 
export PUBLIC_URL="https://<your-cloud-front-distribution>.cloudfront.net/static/"
npm run build
# copy `index.html` from `client/build` to `templates`
cp build/index.html ../templates/index.html
cd ..
# collect static files to AWS S3 bucket
python manage.py collectstatic  --no-input
# install serverless packages from package.json
npm install
# deploy your Django project to AWS Lambda using Serverless
serverless deploy -s production

今、反応とあなたのジャンゴプロジェクト.JSクライアントはこのURLで利用できます.https://<some-id>.execute-api.<your-aws-region>.amazonaws.com/production許可されていないユーザ:

ユーザ権限

動作方法

ブラウザ上のDjangoプロジェクトURLに移動すると、Ajang - Mapゲートウェイに移動します.Djangoサーバーがレンダリングされますindex.html 反応して.JSアプリは、ブラウザが反応を得るためにCloudFront分布のドメイン名を使用します.AWS S 3バケツからのJSクライアント.

最終語

このブログの記事では、反応を加える方法を見ました.DjangoプロジェクトへのJSクライアントとServerlessを使用してAWSラムダで展開します.そこへのリンクがありますGitHub repository ( GitLab copy ) このブログ記事に示されているコードで.
それは、このシリーズの最終的なブログ柱です.私は、AWSラムダでDjangoプロジェクトを配備するために、ちょうどAWSインフラストラクチャを準備して、反応を加える多くの方法のうちの1つを示しました.JSクライアント.あなたは他の多くの方法を見つけることができます同じことを行うには、それを使用する方法をあなた次第です.
Twitterで私をフォローすることを忘れないでくださいので、次の記事をお見逃しなく.