DjangoをRenderにデプロイする方法を学習します。

Herokuへのデプロイは有料になってしまったので、Renderにデプロイします。

Herokuとほぼ同じことができます。

Renderは無料でも使用することができますので、ぜひ参考にしてください。

初級

DjangoをRenderにデプロイする方法

Render

はる@講師

DjangoでGraphQLのAPIを作成する方法を学習し、React Nativeと連携するチュートリアルです。
Django GraphQLではTikTokのホーム画面に表示するための簡単な投稿用のモデルを用意します。
GraphQL APIをReact Nativeで読み込み、TikTokのホーム画面の動画を動的に変えれるようにしていきます。

DjangoでGraphQLが気になっている方は、ぜひ参考にしてください。

Django GraphQL入門とReact Native(TikTok)連携

GraphQL/ReactNative

React NativeでTikTokのホーム画面を作成するチュートリアルです。
スタイルはTailwindCSSを使用します。
画面を上下にスナップすると、次の動画が表示できるアプリです。
スナップするアプリを開発したい方は必見です。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。
ぜひ参考にしてください。

React NativeでTikTokのホーム画面を開発

ReactNative

React NativeとDjango REST Frameworkでスマホアプリを開発していきます。
はじめてReact Nativeをさわる方向けのチュートリアルになります。
Djangoと連携させて簡単なブログアプリを開発していきましょう。
React Nativeの状態管理はReduxを使用して、スタイルはTailwindCSSを使用します。
ExpoというReact Nativeのアプリ開発をサポートするフレームワークを使用しています。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。
ぜひ参考にしてください。

超級

はじめてのReact Nativeスマホアプリ開発

DRF/ReactNative

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

DjangoをRenderにデプロイする方法
https://www.fullstackchannel.com/courses/23

DjangoをRenderにデプロイする方法を学習します。
Herokuへのデプロイは有料になってしまったので、Renderにデプロイします。
Herokuとほぼ同じことができます。

Renderは無料でも使用することができますので、ぜひ参考にしてください。

よろしくお願いいたします。

🐸新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

Django GraphQL入門とReact Native(TikTok)連携
https://www.fullstackchannel.com/courses/22

DjangoでGraphQLのAPIを作成する方法を学習し、React Nativeと連携するチュートリアルです。

Django GraphQLではTikTokのホーム画面に表示するための簡単な投稿用のモデルを用意します。
GraphQL APIをReact Nativeで読み込み、TikTokのホーム画面の動画を動的に変えれるようにしていきます。

DjangoでGraphQLが気になっている方は、ぜひ参考にしてください。

よろしくお願いいたします。

🦜新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

React NativeでTikTokのホーム画面を開発
https://www.fullstackchannel.com/courses/21

React NativeでTikTokのホーム画面を作成するチュートリアルです。
スタイルはTailwindCSSを使用します。
画面を上下にスナップすると、次の動画が表示できるアプリです。
スナップするアプリを開発したい方は必見です。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。

ぜひ参考にしてください。

よろしくお願いいたします。

🦄新しい講座のお知らせ

フルスタックチャンネルをご利用頂きありがとうございます。

新しい講座のお知らせです。

はじめてのReact NativeとDjango REST Frameworkスマホアプリ開発
https://www.fullstackchannel.com/courses/20

React NativeとDjango REST Frameworkでスマホアプリを開発していきます。
はじめてReact Nativeをさわる方向けのチュートリアルになります。
Djangoと連携させて簡単なブログアプリを開発していきましょう。

スマホアプリが開発できるようになると、一気にアイデアの幅が広がります。

ぜひ参考にしてください。

よろしくお願いいたします。

🦀新しい講座のお知らせ

### 実現したいこと
スタッフ専用画面を表示させたい。

### 発生している問題
ログイン画面から管理ユーザーの情報を入力してログインしたら、IndexErrorが起こる。

### ソースコード

git@github.com:or-sawa/django-reserve.git
### 自分で試したこと

IndexErrorをGoogleで調べて、django-custom-auth/app/views.pyの150行目の
末尾の引数を[0]から[1]に変更したりした。
### 補足情報


エラー文です。　分かりづらくてすみません。

IndexError at /mypage/2022/11/20/
list index out of range
Request Method:	GET
Request URL:	http://127.0.0.1:8000/mypage/2022/11/20/
Django Version:	4.1.3
Exception Type:	IndexError
Exception Value:	
list index out of range
Exception Location:	/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/db/models/query.py, line 446, in __getitem__
Raised during:	app.views.MyPageView
Python Executable:	/Library/Developer/CommandLineTools/usr/bin/python3
Python Version:	3.9.6
Python Path:	
['/Users/sawa/Desktop/django-reserve/django-custom-auth',
 '/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python39.zip',
 '/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9',
 '/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/lib-dynload',
 '/Users/sawa/Library/Python/3.9/lib/python/site-packages',
 '/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/site-packages']
Server time:	Tue, 22 Nov 2022 14:06:00 +0900
Traceback Switch to copy-and-paste view
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/core/handlers/exception.py, line 55, in inner
                response = get_response(request) …
Local vars
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/core/handlers/base.py, line 197, in _get_response
                response = wrapped_callback(request, *callback_args, **callback_kwargs) …
Local vars
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/views/generic/base.py, line 103, in view
            return self.dispatch(request, *args, **kwargs) …
Local vars
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/contrib/auth/mixins.py, line 73, in dispatch
        return super().dispatch(request, *args, **kwargs) …
Local vars
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/views/generic/base.py, line 142, in dispatch
        return handler(request, *args, **kwargs) …
Local vars
/Users/sawa/Desktop/django-reserve/django-custom-auth/app/views.py, line 150, in get
        staff_data = Staff.objects.filter(id=request.user.id).select_related('user').select_related('store')[0] …
Local vars
/Users/sawa/Library/Python/3.9/lib/python/site-packages/django/db/models/query.py, line 446, in __getitem__
        return qs._result_cache[0] …
Local vars

Django

Python

IndexErrorが解決できません。　※講座内容：　簡単 Djangoで予約サイトを構築しよう！

or-s

Django Rest FrameworkとNextjsを使ってユーザー認証機能システムを構築したく、はるさんの動画をいくつか視聴して学ばせていただいております。
ところで、細かい質問になるかと思いますが、『JWT認証システム構築』と『サブスク有料会員サイト（アカウント認証編）』の動画において、前者はdjoser使用していて、後者は使用していませんが、あえて違いを設けているのは何か意図があるのでしょうか。djoserを使用した方がいい場面や、使用するメリット等を教えていただけないでしょうか。よろしくお願いいたします。

Next.js

個人開発

djoserの使用場面とそのメリットについて教えてください。

tomo

お世話になっております。

現在、Djangoを用いたCMSでサービス運営しており、その中でお客様とスタッフ間のメッセージ機能を搭載しています。

現在はAjaxで定期的に新規メッセージの取得を行なっておりますが、
メッセージ取得とメッセージ送信の処理が同時に行われた時など、時たまエラーが発生してしまう場合があります。
また、定期的にオブジェクトを参照するので、サーバー負荷的なものはどうなんだろうという疑問も湧いています。

少し調べていた所、Channelsを発見したのですが、Webhookというものをよく理解しておらず、Webhookのメリット・デメリットをあまり理解できていません。
(現在は単純にAjaxの方が処理が簡単なのでそちらで作ってるレベルです)


例えば、このサイトでのコメント機能をリアルタイムで更新をかけるとしたら、
はる先生でしたら、AjaxかWebhook(Channels)のどちらを選択しますか？

JavaScript

初心者

リアルタイムメッセージ機能を作成する際、Ajaxで定期処理をするかWebhook(Django-Channels)を用いるか

atnek

講座のリクエストはこちらからお願いします。

いいね数が多いリクエストから検討したいと思います。

リクエストのみの書き込みでお願いします。

### 例

「○○○が流行っているので、○○○を使ったチュートリアルが知りたい」

など

🍀講座リクエスト掲示板

### 実現したいこと
Django REST Framework + Next.js + NextAuth.js(v4)でGoogle認証を行う

### 背景
上記のチュートリアルではNestAuth.jsのVersion 3が使用されているため、NextAuth公式サイトを参考にv4に書き換えながらチュートリアルを進めています。

### 発生している問題
Googleログイン画面への移行には成功し、アカウントを選択したところで"Access Denied, You do not have permission to sign in" と表示されます。

### ソースコード
[...nextauth.js]
```
import NextAuth from "next-auth"
import axios from "axios"
import GoogleProvider from "next-auth/providers/google"

export default NextAuth({
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],

callbacks: {
    async signIn(user, account, profile) {
      if (account.provider === 'google') {
        const { accessToken, idToken } = account

        try {
          const response = await axios.post(
            `${process.env.DJANGO_URL}/api/social/login/google/`,
            {
              access_token: accessToken,
              id_token: idToken,
            }
          )

          const { access_token } = response.data
          user.accessToken = access_token

          return true
        } catch (error) {
          return false
        }
      }
      return false
    },
    async jwt(token, user, account, profile, isNewUser) {
      if (user) {
        const { accessToken } = user

        token.accessToken = accessToken
      }

      return token
    },
    async session(session, user) {
      session.accessToken = user.accessToken
      return session
    },
  }
}

export default (req, res) => NextAuth(req, res, settings)
```

### 自分で試したこと
#### 1. DjangoかNextどちらに問題があるか確認
はる先生のgithubからフロントエンドのプログラムをダウンロードし、私がチュートリアルを参考に(完全なコピーで変更箇所はない)したDjangoと動かしてみました。→Googleログインに成功したため、Djangoのエラーはなし、next.jsの方に問題があることがわかりました。

#### 2. Nextのエラーの詳細を確認
[.../nextauth].jsのcallbacks-のasync signIn...の中のtry-catch文に、エラーがある場合エラーを出力するように追記し、再度自分で作成したプログラムを動かし同じエラーを再現したところ、
next側のターミナルで
```
AxiosError: Request failed with status code 400
    at settle (file:///Users/myuser/Documents/projects/djangonext-googleauth/next/node_modules/axios/lib/core/settle.js:19:12)
    at IncomingMessage.handleStreamEnd (file:///Users/myuser/Documents/projects/djangonext-googleauth/next/node_modules/axios/lib/adapters/http.js:495:11)
    at IncomingMessage.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {

...以下省略(エラーの一部を最後に載せています)
```
そしてDjang側のターミナル上で
```
Bad Request: /api/social/login/google/
[04/Nov/2022 20:17:48] "POST /api/social/login/google/ HTTP/1.1" 400 75
```
が出ていました。

callbacks内の設定に不備があるようです。
#### 3. [../nextauth].jsにconsole.logを足す
```
 async signIn(user, account, profile) {
      if (account.provider === 'google') {
        const { accessToken, idToken } = account
        console.log("\naccessToken"+accessToken + "\nidToken:"+idToken )
```
おそらくdjangoへのpostでエラーが発生しているため、その直前で定義している変数を出力する設定を行い、変数が正しく定義されているか確認を行いました。
```
accessToken:undefined
idToken:undefined
```

公式ドキュメントによると、accountはプロバイダのことを指しています。

https://next-auth.js.org/configuration/events#events

よって、
```
const { accessToken, idToken } = account
```


でgoogleからaccessTokenとidTokenの取得と変数の作成に失敗しているのではないか？というところまで推測できましたが、これ以上はわかりませんでした。



このエラーを解決するために、何をやればいいか見当がつかない
状況です。
手順やプロセスなど、何かアドバイスがあればお伺いしたいです。
長文になってしまいましたが、よろしくお願いいたします。


```

AxiosError: Request failed with status code 400
    at settle (file:///Users/iamuser/Documents/projects/djangonext-googleauth/next/node_modules/axios/lib/core/settle.js:19:12)
    at IncomingMessage.handleStreamEnd (file:///Users/iamuser/Documents/projects/djangonext-googleauth/next/node_modules/axios/lib/adapters/http.js:495:11)
    at IncomingMessage.emit (node:events:525:35)
    at endReadableNT (node:internal/streams/readable:1358:12)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  code: 'ERR_BAD_REQUEST',
  config: {
    transitional: {
      silentJSONParsing: true,
      forcedJSONParsing: true,
      clarifyTimeoutError: false
    },
    adapter: [Function: httpAdapter],
    transformRequest: [ [Function: transformRequest] ],
    transformResponse: [ [Function: transformResponse] ],
    timeout: 0,
    xsrfCookieName: 'XSRF-TOKEN',
    xsrfHeaderName: 'X-XSRF-TOKEN',
    maxContentLength: -1,
    maxBodyLength: -1,
    env: { FormData: [Function], Blob: null },
    validateStatus: [Function: validateStatus],
    headers: AxiosHeaders {
      'Content-Type': 'application/json',
      'User-Agent': 'axios/1.1.3',
      'Content-Length': '2',
      'Accept-Encoding': 'gzip, deflate, br',
      [Symbol(defaults)]: [Object]
    },
    method: 'post',
    url: 'http://127.0.0.1:8000/api/social/login/google/',
    data: '{}'
  },

.....
    config: {
      transitional: [Object],
      adapter: [Function: httpAdapter],
      transformRequest: [Array],
      transformResponse: [Array],
      timeout: 0,
      xsrfCookieName: 'XSRF-TOKEN',
      xsrfHeaderName: 'X-XSRF-TOKEN',
      maxContentLength: -1,
      maxBodyLength: -1,
      env: [Object],
      validateStatus: [Function: validateStatus],
      headers: [AxiosHeaders],
      method: 'post',
      url: 'http://127.0.0.1:8000/api/social/login/google/',
      data: '{}'
    },



      method: 'POST',
      maxHeaderSize: undefined,
      insecureHTTPParser: undefined,
      path: '/api/social/login/google/',
      ....