Django Rest Framework (DRF)でトークン認証の際にユーザー名を取得する方法

準備するもの

・Django RESTFrameworkのプロジェクト

・Python

イントロ

通常、Djangoのプロジェクトならログインしているユーザー情報をHTMLテンプレートに出力することは簡単ですね。

ではAPIでクライアント側にDjangoのユーザー情報を渡したい場合はどうすればよいでしょうか。

今日は、これを解決するためにDjango REST Frameworkのトークン認証のメソッドを上書きしていきます。

準備するもの

GitHubから完成したサンプルコードを参考にしてください。

詳しい公式ドキュメンテーションがあるのでこれも参考にしてください。

https://www.django-rest-framework.org/api-guide/authentication/

CustomAuthTokenクラスを作成する

これからアプリのViews.pyにCustomAuthTokenのクラスをコピペしてそのリスポンスに返したいデータを追加するだけです。

from rest_framework.authtoken.views import ObtainAuthToken

from rest_framework.authtoken.models import Token

from rest_framework.response import Response



class CustomAuthToken(ObtainAuthToken):



    def post(self, request, *args, **kwargs):

        serializer = self.serializer_class(data=request.data,

                                           context={'request': request})

        serializer.is_valid(raise_exception=True)

        user = serializer.validated_data['user']

        token, created = Token.objects.get_or_create(user=user)

        return Response({

            'token': token.key,

            'user_id': user.pk,

            'email': user.email

        })

urls.pyでURLも更新する

では、トークンを取得するURLも更新しましょう。

urlpatterns += [

    path('api-token-auth/', CustomAuthToken.as_view())

]

検証する

http POST http://127.0.0.1:8000/api-token-auth/ username="admin@gmail.com" password="admin"

ではコマンドラインからHTTPリクエストを送ってみましょう。

ちなみに通常のusernameの箇所にはユーザー名が入りますが、今回使用しているDjangoアプリはEmailでトークンが取得できるように変更しています。

OKっすね。

ちなみにEmailだけではなくでユーザー名も取得したい場合はこんな感じです。

        return Response({

            'token': token.key,

            'user_id': user.pk,

            'user_name': user.user_name

            # 'email': user.email

        })

お疲れ様です。

Vueアプリでトークン認証のログインシステムを作る

準備するもの

・Django RESTとToken Authができている環境

・Vueのアプリ

アプリ紹介

今回は、フロントエンドがVueでバックエンドがDjangoでできているチケット管理システムのログインのシステムを作成します。

例として、従業員がお客様からの問い合わせに対してチケットを作成していくようなイメージです。

Vueがフロントエンド(クライアント側)でDjangoのAPIのエンドポイントからデータを発信しています。

しかし、このAPIが公共に垂れ流しの状態なのでURI(URL)にアクセスできる人誰でもこのデータにアクセスできてしまいます。

前回はDjango RESTFramewrokを使ってトークンAuthでこのトークンがある人だけデータにアクセスできる人だけAPIのリクエストにデータをリスポンスとして返すことができました。

今日はそれをVueのアプリから行っていきたいと思います。

アプリの準備

DjangoアプリはこちらのURLのGitHubからクローンしてください。

https://github.com/TraitOtaku/djangoAPI/tree/8_AuthReady

Vueのアプリはこちらからダウンロードしてください。

https://github.com/TraitOtaku/VueApp/tree/4_AuthReady

Gitのコマンドを使ったことがない人は面倒でも必須のスキルですので必ず覚えておくようにしましょう。

Gitのコマンドです。

git clone URL

cd /to/repo/

git branch -a

Git checkout <branch_name> 

Djangoの準備の仕方は他の動画でも説明しているので今回は飛ばします。

Vueもnpmかyarnでライブラリをインストールして準備完了です。

npm i

EventService.js

まずは、ログインする際にDjangoにユーザー名とパスワードをJSONファイルで送りつけます。この際POSTリクエストになっていることに注意しましょう。

で、正しいクレデンシャル(ログイン情報)が遅れた後にDjangoからTokenが返されます。

const loginClient = axios.create({

  baseURL: "http://127.0.0.1:8000/",

  withCredentials: false,

  headers: {

    Accept: "application/json",

    "Content-Type": "application/json",

  },

});
  submitLogin(logininfo) {

    return loginClient.post("api-token-auth/", logininfo);

  },

ちなみにapiClientというファンクションでDjangoのTokenAuthに必要なTokenをリクエストの際に送るヘッダーに付けてあげるようにしています。

const apiClient = axios.create({

  baseURL: "http://127.0.0.1:8000/api",

  headers: {

    Authorization: `Token ${localStorage.getItem('token')}`,

    "Content-Type": "application/json",

  },

});

では、このJavaScriptをエキスポートして、LoginView.vueのコンポーネントを作成します。

LoginView.vue

このページ(コンポーネント)でログインに関連するシステムを構築しています。

AntDesignのUIライブラリからコピペしたフォームと、そのサブミットボタンにクリックイベントを付けてます。

    const submitLogin = () => {

      EventService.submitLogin(toRaw(formState))

        .then((response) => {

          console.log(response.data);

          localStorage.setItem('token', response.data.token)

          router.push({ name: 'home' })



        })

        .catch((error) => {

          console.log("Error" + error);



        });

    }

で、ここで、Django から返ってきたトークンをブラウザのストレージにtokenというキーで保管しておきます。

これでログインができたらrouter.pushでホーム画面にジャンプするように設定しています。

本来なら、ログインしない限りhomeのページへのアクセスはできないようにするのがベストですが、今回は割愛しています。

もしするのであればv-ifとvuexでState managementを使うのがベストだと思います。

また、ログインのエラーがあった場合のロジックもここに追加できますね、。

では、ログインができたらHomeViewに行くのでそこにログアウトのボタンも作成しましょう。

HomeViews.vue

ログアウトのロジックは下記のようなコードでできます。

単純にlocalStorageに保管されているtokenアイテムを取り除き、router.pushのコマンドでログイン画面に誘導してあげます。

    const logOut = () => {

      localStorage.removeItem('token')

      router.push({ name: 'login' })

    }

まとめ

まあ、全体的に煩雑なコードですが、これでVueアプリからDjangoのToken AuthのAPIにアクセスすることができました。

バックエンドのテクノロジーとAuth(認証)のやり方によって、ヘッダーの書き方が変わることに注意しましょう。

あとはサインアップと、パスワードを忘れた際の再設定のロジックもDjango側と一緒に作成していけばプロダクションで使えそうですね。

お疲れ様です。

Django API Authってなに?Token Authenticationを使ってみよう

サマリー

APIのエンドポイントを守れ!
 

準備するもの

  • Pythonとpip
  • Django RESTFrameworkのプロジェクト

Authってなに?

Authは認証のことで、Autheniticationの事を意味します。ここで、Authorizationと間違える事が多いですがこの2つは全くの別ものなのでちゃんと理解をしておきましょう。

Authentication(認証)→誰かを証明すること

Authorization(権限を与える)→特定のデータへのアクセスを許可するか

なのでAuth(認証)された人がどのPermissionがあるのかを判断する方法になり、それから、認証された人が特定のデータにアクセスできるかをAuthorizeするわけですね。

例でいうと会社のセキュリティカードを持っていればそのカードのステータスによってアクセスできる場所が決まってくるような感じでしょうか。

Authはなぜ必要か

APIのエンドポイントのURI(URL)にアクセスできる誰もがその情報を手に入れることができます。その情報を守るために認証された人だけにデータのアクセス権限を与えるためです。

特にデータの更新や削除ができる権限は限られた人だけに与えたいですよね。

Authの種類について

Djangoで主流なAuthシステムを紹介します。

  1. Basic Authentication→ログインIDとPWだけの簡単なものです。
  2. Token Authentication→トークンを使ってHTTP認証をします。クライアント・サーバーセットアップのデスクトップアプリやモバイルアプリに最適です。
  3. SessionAuthentication→DjangoについてくるセッションAuthのシステムを使えます。時間が経つとログアウトされる仕組みとかも作れます。
  4. JWT(JSON Web Toekn)→ ここ数年で人気になったJSONウェブトークンでの認証システムです。

BasicAuthenticationを使おう

他にJWTとDjoserのライブラリもお勧めです。

まずは公式ドキュメンテーションを読みましょう。

https://www.django-rest-framework.org/api-guide/authentication/

settings.pyの設定

ではプロジェクトディレクトリ内のsettings.pyに下記のラインを追加しましょう。

REST_FRAMEWORK = {

    'DEFAULT_AUTHENTICATION_CLASSES': [

        'rest_framework.authentication.BasicAuthentication',

        'rest_framework.authentication.SessionAuthentication',

    ]

}

Views.pyの設定

ここでAiuthenticationに必要なモジュールをインポートします。

from rest_framework.authentication import SessionAuthentication, BasicAuthentication

from rest_framework.permissions import IsAuthenticated

あとは、クラスを貼り付けるだけ!

from .models import Member

from .serializers import MemberSerializer

from rest_framework import viewsets

#これを追加

from rest_framework.authentication import SessionAuthentication, BasicAuthentication

#これを追加

from rest_framework.permissions import IsAuthenticated




class MemberViewSet(viewsets.ReadOnlyModelViewSet):

    #これを追加

    authentication_classes = [SessionAuthentication, BasicAuthentication]

    #これを追加

    permission_classes = [IsAuthenticated]



    queryset = Member.objects.filter(status="Employed")

    # queryset = Member.objects.all()

    serializer_class = MemberSerializer

APIのエンドポイントの確認

では、DjangoのユーザーでログインしていないブラウザでURIにアクセスしましょう。

このように、APIのデータが出力されなくなりましたね。

ここで重要なのが、APIの発信元がHTTPSでないとログイン情報が盗まれることがあるので必ずHttps://を使うようにしましょう。

しかし、これだとDjangoのアドミンパネルからログインしていないとAPIが見れないのでクライアント側では使えなさそうですね。

(※このログインページはカスタマイズできますが次の方法で試してみましょう。)

TokenAuthを使おう

ではAuthのイメージが沸いたところでTokenAuthの設定をしていきます。

settings.pyの設定

では、REST_FRAMEWORKの項目を下記のように更新しましょう。

REST_FRAMEWORK = {

    'DEFAULT_AUTHENTICATION_CLASSES': [

        'rest_framework.authentication.TokenAuthentication'

    ],

    'DEFAULT_PERMISSION_CLASSES': [

        'rest_framework.permissions.IsAuthenticated'

    ]

}

では、Views.pyのAuthも項目は一旦削除しましょう。

で、APIのエンドポイントに行くとデータが見れなくなったことがわかりましたね。

http://127.0.0.1:8000/api/?format=api

このAPIのルートから全てTokenがないとアクセスが制限されます。

ちなみにこれをなくして、viewごとでauth設定をすることもでき、一部のapiだけにauthをかけられます。

Tokenを取得するURLを作成

まずはsettings.pyに下記のtokenアプリを追加します。

INSTALLED_APPS = [

    ...

    'rest_framework.authtoken'

]

ではurls.pyにTokenを作成するURLを作成します。

from rest_framework.authtoken import views




urlpatterns = [

    path('api-token-auth/', views.obtain_auth_token, name='api-token-auth')

]

URLの名前はなんでもよいです。

アプリを登録した後にDBのマイグレーションを忘れないようにしてください。

これでToeknテーブルがアドミンパネルに表示されました。

これでユーザーがログインしたときに生成されるトークンと照らし合わせてアクセス権限を判断できるようになります。

ログイン情報を作成

もし、ログインする情報がない人は先にスーパーユーザーを作っておきましょう。

python manage.py createsuperuser

テストでリクエストを送ってみる

では下記のURLにアクセスしてみます。

http://127.0.0.1:8000/api-token-auth/

下記のようにGETリクエストが拒否されました。

ではログイン情報と一緒にPOSTメソッドでリクエストを送ってみます。

HttpieでURLにPOSTリクエストを送る

では下記のコマンドでテストツールのhttpieをインストールします。

pip instal httpie

で、先ほど作成したapi-token-authのURLにPOSTリクエストを送ります。

http POST http://127.0.0.1:8000/api-token-auth/ username="admin" password="admin"

これでTokenが作成されればOKです。

トークンを使ってAPIにアクセスする

では先ほど作成されたTokenを使ってAPIにアクセスできるか試してみましょう。

http http://127.0.0.1:8000/api/tickets/ “Authorization: Token 330b6d34c6ac24a3606b14495e9311e0681821c2”

問題なくレスポンスがかえってきましたね。

※同じようにHTTPSを使うようにしましょう。

Vueアプリをデプロイしよう!

AsameshiCode

準備するもの

・Ubuntuサーバー(今回はバージョン20)

・root権限

知っておきたいこと

・SSHの簡単な操作

・Liniuxの簡単なコマンド

・VueJSの基本知識

サーバーの準備

今回はVPS (Virtual Private Server)を使います。Linodeというアメリカのフィラデルフィアにある会社のレンタルサーバーを毎月5ドル~で借りられます。

サーバー自体は東京で設定できるのでそれも良い点だと思います。

LinodeはAWSに比べて安く、しかもサービスも良いので良い会社として有名です。

では早速、linodeのページを見てみます。

また、他のレンタルサーバーや自宅サーバーでもUbuntuの準備ができたらほとんど手順は同じです。

Linode(サーバー)を作成します。

個人的にはOSはFedoraが好きですがUbuntuで行きます。

場所は東京にしましょう。

今回はRAM2GBでやってみます。しょぼいけど、パフォーマンスがどうなるか見てみます。

で、このlinodeの中のサーバー名とrootのパスワードを設定します。

SSHキーも必要なら生成して入れてあげましょう。

でCreate Linodeボタンを作成してサーバーを作成します。(お金がかかります)

サーバーにSSHで接続

でサーバーができたらSSHで接続します。今期はお気に入りのmobaXtermを使います。

IPアドレスがあるので、それとさっき作成したrootのパスワードを使います。

WindowsならmobaXtermの代わりにPuTTYでもOKですね。

サーバーに入れましたね。

Ubuntuのユーザーを作成

Rootだとすべてのファイルにアクセスでき、セキュリティ上安全ではないので新しくユーザーを作成します。

adduser dan

ユーザーができましたね。

では rootから新しく作成したユーザーのdanに切り替えます。

su - dan

ユーザーにrootと同じ権限を与える

では下記のコマンドから新しく作成したユーザーにrootと同じ権限を与えます。

一旦rootに戻ります。

su -

visudo

でコンフィグファイルが開くので下のrootと同じように新しく作成したユーザーにも権限を与えます。

root    ALL=(ALL:ALL) ALL

dan   ALL=(ALL:ALL) ALL #追加

wwwフォルダにアクセス権を与える

今回使用するnginxがこれからアップロードするvueのファイルにアクセスできるようにします。

これからwww-dataグループのwww-dataユーザーに読み込みする権利を与えます。

今回はvar/wwwkaravueファイルをデプロイすると仮定して進めます。

cd var

mkdir www
sudo chown -R www-data:www-data /var/www


sudo chmod -R g+rwX /var/www

では、下記のコマンドで新しく作成したubuntuのユーザーをwww-dataグループに追加します。

sudo adduser dan www-data

ここまでできたらrootから新しく作成したuserの方にスイッチしておきましょう。

 su - dan

NPMをインストール

yarnを使いたい人はyarnでも同じようにできますのでいつも使っている方をどうぞ。

※このやり方だと現時点でバージョン12の古いNodeがインストールされるので後で別のインストールの仕方を説明します。

sudo apt update

sudo apt install nodejs npm

できたらバージョンを確認しましょう。

node --version

【最新のNodeJSをインストールする方法】

sudo apt update -y

cd ~

curl -sL https://deb.nodesource.com/setup_16.x -o nodesource_setup.sh

sudo bash nodesource_setup.sh

sudo apt install nodejs

node --version

バージョン16がインストールできました。

Nginxのインストールと設定

主流のウェブサーバーとしてapache(ワードプレスで使っている)もありますが、個人的にお勧めのnginxを使っていきます。

インストールはこれで。

sudo apt install nginx

Nginxのディレクトリに移動

cd /etc/nginx

ここにsites-availableとsites-enabledの2つのディレクトリがありますね。

使い方としては、sites-enabledにウェブサイトのファイルを準備し、それとsites-availableから読み込むようにします。

Windowsではショートカットに近いもの(同じではありませんが感覚として)ですが、シンボリックリンクという方法でファイルをコピーします。 

まずは、sites-available内にvue_projectというファイルを作成します。

sudo touch /etc/nginx/sites-available/vue_project
sudo ln -s /etc/nginx/sites-available/vue_project /etc/nginx/sites-enabled/vue_project

ではvue_projectのファイルにnginxのコンフィグを書いていきます。

sudo nano sites-available/vue_project

実際のファイル(例)

server {

    listen 80;

    server_name 139.162.84.105;

    charset utf-8;

    root    /var/www/html/Vue/dist;

    index   index.html index.htm;



    location = /favicon.ico { access_log off; log_not_found off; }

    location / {

        root /var/www/html/Vue/dist;

        try_files $uri /index.html;

    }



    error_log /var/log/nginx/vue-app-error.log;

    access_log /var/log/nginx/vue-app-access.log;

}

nginxにvar/www/html/Vue/distのディレクトリを見るように指示しています。

では下記のコマンドでnginxをテストします。

sudo nginx -t

イェイ!

ではnginxをリスタートしてみます。

sudo service nginx restart

Nginxが参照するディレクトリを作成

では先ほどのコンフィグで設定したdistファイルがないので設定していきます。

デプロイの際に vue のbuildコマンドでdistディレクトリが自動で作成されますが、まずはnginxのテストでダミーファイルを作成します。

cd var/www/html



mkdir Vue

cd Vue

mkdir dist

nano index.html

で、適当に<h1>Hi</hi>とか入れてセーブします。

で、ブラウザからサーバーのIPアドレスかドメインにいくと。。。

やったー!

Nginxサーバーが問題なく動いていることを確認できました。

ではテスト用で使ったdistディレクトリは削除しておきます。

 rm -rf dist/

Gitを使ってvueアプリをサーバーにプッシュ

では、distディレクトリからindex.htmlがサーブされていることを確認できたので、本番のVueアプリをアップロードしていきます。

ここで、gitを使ったことがない人は、FTPでサーバーに接続してマニュアルでアップロードする方法もあります。

しかし、今後のファイル更新の事を考えると、gitを使って、バージョンをコントロールしていく方がより効率的です。

このやり方は他の記事でも説明しているので、それも見てみてください。

今回はコマンドだけ記載しておきます。

Gitのインストールとコンフィグ

sudo apt install git-all

git init --bare github-hook.git

cd github-hook.git/

cd hooks



nano post-receive
git --work-tree=/var/www/html/Vue/ --git-dir=/var/www/html/Vue/github-hook.git/ checkout -f

Vueアプリのある環境からpush

ではローカルのPCからVueアプリをサーバーにpushします。

git remote add live ssh://root@139.162.84.105:/var/www/html/Vue/github-hook.git

git push live master

ファイルが上がったことが確認できました。

Vueアプリのbuild

では、Vueアプリがアップロードされたらデプロイ用にアプリをプロダクション用にコンパイルしていきます。

npm install

#デペンデンスィーのインストール(ライブラリとか)

npm run build

#distディレクトリの作成

ここでエラーがなければOKですね。

【おまけ】

さっきのpost-receiveファイルに下記のコマンドを追加してgitでpushした後に自動でnpm run buildのコマンドが実行されるようにしましょう。

これでいちいちdistのファイルを更新しなくてすみますね。

cd /var/www/html/Vue
npm install
npm run build

実際にデプロイしたVueアプリ

下記のIPアドレスから実際にデプロイしたVueのアプリにアクセスができます。

良かったら見てみてください。

http://172.104.81.40:82/login

Gitでサーバーのリポを更新しよう

準備するもの

・Ubuntuサーバー

・root権限

今日の課題

Gitは世界のどこのデベロッパーでも使っておきたいバージョンコントロールシステムのことです。

Gitを使ってコードをブランチに分けたり、前のバージョンに戻ったりできるプログラマーの親友です。

今日はGitを使ってサーバーに上げたリポジトリを更新する作業を行います。

サーバーにSSH接続

まずはサーバーにSSH接続しましょう。

私のお気に入りのSSHクライアントはmobaXtermです。他に自分で使っているのがあればそれで構いません。

では、サーバーには入れたらgitをインストールしましょう。

sudo apt install git-all

y/nで聞かれたらyesのy、でエンター。

ではgitをinit(イニシャライズ)したいファイルパスに行き、下記のコマンドを実行します。

.git前の名前は何でもいいです。

git init --bare github-hook.git

post-receive Hookを追加

Initした後に作成されたファイルを見てみましょう。

ではこの中のhooksに移動します。

ここではpost-receiveファイルを作成します。

nano post-receive
git --work-tree=/home/djangoboy/backendAPI/ --git-dir=/home/github-hook.git/ checkout -f

git –work-tree=/pushしたいディレクトリ/ –git-dir=/Gitの場所/ checkout -f

post-receiveを実行ファイルにする

さっき作成したpost-receieveファイルをexcecutableのファイルにします。

これがないとうまくいきません。

chmod +x post-receive

権限をみたい場合は
ls -all

ローカルサーバーでpushの行先を設定

git remote のコマンドでどこにpushするか教えてあげます。

これでローカルのPCで更新したコードをサーバーにpushできるようにします。

git remote add live ssh://root@104.248.231.241/var/repo/myproject.git

例2:git remote add live ssh://root@172.104.81.42/home/dan/ticketapi/github-hook.git

Liveの部分は名称なのでdeoployとかprod(プロダクションの略)とかに変えてもOKです。

でsshの次にサーバーのIPから、pushするパスまでを書きます。

git remote add live ssh://root@172.105.192.111/home/github-hook.git

Push!

git push live master

git push live

おまけ

現在の接続先をみたい場合

git remote -v

DjangoをUbuntu(22.04)からデプロイする

先に知っておくべきこと

・SSHの概念、簡単なコマンド

・IPアドレスの基礎

・Linuxの基礎

・Djangoフレームワークの基礎

準備するもの

・レンタルサーバーにSSHで入れる状態、若しくは

・自宅のゴミPCにUbuntuサーバーが入った状態

今日の課題

今日は自分で作ったDjangoアプリをデプロイする作業を行います。いつもLinuxを使っていない方には混乱する作業が多いと思います。

もし難しいと思ったらLinuxをインストールしてみてターミナル(コマンドライン)をいじってみたりSSHで接続してプログラムをインストールする練習をしてみてください。

SSHでサーバーに入る

SSHはセキュアセルといってコマンドラインからネットワークを通して他のサーバー等に接続するテクノロジーの事です。

まずは、SSHクライアントでサーバーに入り込みましょう。

別の記事で詳しく説明しますが、サーバー側でOpenSSH等でサーバーを設定してポートを開けておきます。

私の場合は、MobaXtermという無料のSSHクライアントを使います。

MobaXtermはこちらはから、インストーラかポータブルのアプリをダウンロードできます。

https://mobaxterm.mobatek.net/

で、セッション開始!

Host側(サーバー側)にアクセスしたいIPアドレスを入力し、usernameにサーバーで作成したユーザーネームを入力します。レンタルサーバーでOSを作成した際にrootのPWを設定した場合はusernameはrootになります。

SSHでログイン出来たら

では、SSHでログインできたらちょっとコーヒー休憩。ここでサーバーの中に入り込めたという事ですね。

では、Ubuntuの設定を行い、Djangoのデプロイに必要なdependency(デペンデンスィー:必要なライブラリ等)をインストールしていきます。

sudo apt update

OSのアップデートが終わりました。

では、Python3が入っていることを確かめましょう。

python3 --version


このサーバーにpythonの3.9.7が入っていることが確認できました。

※python2でもできますが、2020年の1月に公式サポートが終了したのでバージョン3をお勧めします。

では次。

Ubuntuユーザーの作成

もし、Ubuntuでユーザーを作成していない場合は新しくubuntuにユーザーを追加しましょう。

すでにroot以外のUbuntuユーザーがある場合は飛ばしてください。

sudo adduser ユーザー名
sudo adduser dan

usermod -aG sudo ユーザー名(ユーザーにsudo権限を与える)
usermod -aG sudo dan

sudo adduser dan www-data

rootからユーザーに入れ替える。

su ユーザー名 ※(rootで入っている場合はユーザーに入れ替えます。)
su dan

ライブラリのインストールと設定

sudo apt install python3-pip python3-dev libpq-dev postgresql postgresql-contrib nginx curl


このコマンドで下記のライブラリがインストールされます。

python3-pipはパッケージマネージャー

python3-devはスタティックライブラリ、デベロップメントツール

Libpq-devはクライアント側からpostgresにクエリを流すツール

postgresql-contribはエクステンション

nginxはウェブサーバー

curlはClient URLの略でコマンドラインツール

本当にインストールしますか?と聞かれたらyとタイプ(yesのy)

もしくはインストールの際に最後に-yを打ちます。

PostgreSQLのデータベースを作成

Postgresのdb(データベース)を作ったことがある人ならここは簡単です。

postgresをインストールしたときに自動でpostgres というアドミン権限のユーザーが作成されます。

この権限を使って新しいデータベースとユーザーを作成します。

sudo -u postgres psql

postgres=#に現在のディレクトリが変わったことでpostgresに入れたことが確認できます。

CREATE DATABASE myproject; myprojecyはDB名

でdbを作成します。myprojectの部分はdb名になるので好きな名前でどうぞ。

【注意】

SQLのコマンドは全てセミコロン;で終わります。必ずつけ忘れないように!

エラーがでずに次に進めたらdbができたはずです。

これを確認するには\l(バックスラッシュと小文字のL)です。

これで現在のdbがList(一覧)で表示されました。

PostgreSQLのユーザーを作成

CREATE USER myprojectuser WITH PASSWORD 'password';

このコマンドでユーザーとそのパスワードを作成します。

Myprojectuserはユーザー名なのでお好きなものを。

‘Password’ の部分も自分で決めたパスワードを入力。

PostgreSQLをモディファイ(修正)

ではpostgresの接続をスムースにするためにコネクションパラメーターを変えます。

まずはエンコーディングをutf-8に変えます。

ALTER ROLE myprojectuser SET client_encoding TO 'utf8';

次に下のコマンドでpostgresがコミット(確定)したデータのみを読み取るようにします。

ALTER ROLE myprojectuser SET default_transaction_isolation TO 'read committed';

Djangoのタイムゾーンがデフォルト(初期設定)でUTCにセットさせているのでそれに合わせます。

ALTER ROLE myprojectuser SET timezone TO 'UTC';

Djangoのドキュメンテーションを読んで変更したい箇所があれば詳しく見てみましょう。

https://docs.djangoproject.com/en/4.0/ref/databases/#optimizing-postgresql-s-configuration

作成したユーザーにdbのアドミン権限をつける

GRANT ALL PRIVILEGES ON DATABASE myproject TO myprojectuser;

とりあえずpostgresは一旦完了なのでquitのコマンドでpostgresから抜け出しましょう。

Django用に仮想環境を作成

Djangoアプリのデプロイまでもう少しの辛抱です!

pythonではいくつか仮想環境のライブラリがありますが今回はvirtualenvを使用します。

仮想環境を使ったことがない人は詳しく理解しておいた方が良いですね。

簡単に説明すると同じサーバーで違うバージョンのライブラリを使いたいとき(例えばDjangoの3.0と4.0)に仮想環境をアクティベートして同じマシンでも同時に使用できる様になります。

また、複数人で仕事をするときもバージョンを統一してするために使います。

Pipの準備

pipはpythonパッケージマネージャーでpythonのライブラリをインストールする際に使用しますね。

-HのフラグはsudoのコマンドでユーザーのhomeディレクトリではなくrootのHOMEディレクトリにインストールするように指示します。

まずはpipを最新のものにします。

sudo -H pip3 install --upgrade pip

次にvirtualenvをインストールします。

sudo -H pip3 install virtualenv

Djangoのプロジェクトディレクトリを作成

では、どこにDjangoのプロジェクトを置くか決めましょう。

これは特に決まりはありません。

今日はhome/user名の直下にプロジェクトを置きます。理由はvar/www直下にプロジェクトを作成するとユーザーのパーミッション設定が面倒なので、すべての権限があるユーザーの為に作成されたフォルダを使いたいからです。

ここで簡単なLinuxコマンドを知っていると理解できやすいと思います。

若しくはSSHの代わりにFTPとかでサーバーに入ればUIツールでディレクトリを作成できるようになります。今日使っているSSHクライアントにはどちらのツールも入っているので是非試してください。

Linuxの基本コマンド

  • pwdで現在のパス
  • cd ..で一階層上に移動
  • lsで現在のパスにあるファイルを一覧で表示

で、/varまで移動したら下のコマンドでディレクトリを作成します。

ルートのパスにいる場合は一階層上がり、varフォルダに入ります。

cd..

cd var/www

ls

ではこのコマンドでディレクトリを作成します。

mkdir myprojectdir(myprojectdirはフォルダ名です。)

※ディレクトリ名は自分で好きなものに名前を変えてください。

で、cdコマンドで先ほど作成したディレクトリに入ります。

cd myprojectdir

仮想環境をアクティベート

下のコマンドでvirtualenvで仮想環境を作成します。envの所はディレクトリ名なので自分で好きなものを決めてください。

virtualenv env

バーチャル環境ができたら下のコマンドでアクティベートします。

source env/bin/activate

画像を見てわかるようにユーザー名の前に(env)がつきましたね。

これで仮想環境がアクティベートされたことがわかります。

ここからpipでインストールしたライブラリは全てこの仮想環境内のみでインストールされるのでディアクティベートしたらあとはサーバー自体には全く影響しません。

pipでDjangoプロジェクトのライブラリをインストール

pipで下記のライブラリをインストールします。

他に使っているライブラリがある場合はここで全てインストールしてしまいましょう。

もし、requirements.txt 等でライブラリを一覧で書き出している場合はそれを使ってインストールしましょう。

pip install django gunicorn psycopg2-binary

もしくは、FTP等を使って自分で使ったDjano プロジェクトを持ってきましょう。

私の使っているSSHクライアントのmobaXtermはFTPもついてくるのでそのままファイルをドラグandドロップで転送しちゃいます。

もし、WindowsのPCでvirtualenvを使ってDjangoのプロジェクトを作成している場合は下記のコマンドでrequreiments.txtの名前(一般的なので)でデペンデンスィーを書き出します。

pip freeze > requirements.txt

私の場合の requirements.txtの中身はこんな感じになります。

asgiref==3.4.1

autopep8==1.6.0

distlib==0.3.4

Django==4.0.1

django-ckeditor==6.2.0

django-cors-headers==3.11.0

django-js-asset==1.2.2

djangorestframework==3.13.1

filelock==3.4.0

platformdirs==2.4.0

psycopg2==2.9.3

pycodestyle==2.8.0

pytz==2021.3

six==1.16.0

sqlparse==0.4.2

toml==0.10.2

tzdata==2021.5

virtualenv==20.13.0

ではWindowsのPCから必要なファイルだけサーバーに上げていきます。

画像はMobaXtermのSFTPを使用しています。

SSHの方にもファイル転送の機能があるのでわざわざSFTPで接続しなくてもOKです。

requirements.txtからライブラリをインストールしたい場合はこれ。

pip install -r requirements.txt

Gunicornを入れ忘れずに。デベロップメントでは入れていないと思うので。

pip install gunicorn 

Djangoプロジェクトの設定

Djangoプロジェクトを新規で作る場合

Djangoのアプリをデプロイする前に練習で新しいプロジェクトを作成したい場合はこちらです。

インストールしたDjangoから下記のコマンドでプロジェクトを作成します。

django-admin.py startproject myproject ~/myprojectdir

すでにDjangoプロジェクトを転送した人は飛ばしてください。

Settings.pyのコンフィグ設定

Djangoのプロジェクトを作成した際に自動settings.pyが作成されます。

このファイルでホスト側の設定とDBの設定を行います。

まずは、setting.pyがあるディレクトリに移動しましょう。

nano settings.py

ALLOWED_HOSTSの箇所を見つけて、下記のように変更します。

ALLOWED_HOSTS = [ 'example.com', '203.0.113.5']

ALLOWED_HOSTS = [ *] で全てのIpを許可しますが、セキュリティ上、良くないのでこれはやめましょう。

DBの設定

同じく、settings.pyの所でDATABASEの箇所を見つけて、ENGINE、ユーザー名とパスワード、ホストのIPを確認しましょう。

ちなみにこの作業はデベロップメント(開発)の際に既に接続を確認しているべきですので、windowsとmacをそれぞれ使っている人はその時からDBを接続しておきましょう。

ポートはローカルで接続する場合は空でOKです。

DATABASES = {

    'default': {

        'ENGINE': 'django.db.backends.postgresql_psycopg2',

        'NAME': 'project',

        'USER': 'postgres',

        'PASSWORD': 'password',

        'HOST': '127.0.0.1',

        'PORT': '5432',

    }

}

Staticファイルの扱い

同じくsettings.pyです。

下記のようにosモジュールをインポートしてStaticファイル(CSS,JS,画像ファイル)等の保管場所を指定してあげます。

import os


STATIC_URL = '/static/'


STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

データベースのマイグレーション

ではmanage.pyがあるディレクトリから下記のコマンドで接続したDBにDjangoのモデルで作成したテーブルの枠組みをmigration(マイグレーション:移動)します。

python3 manage.py makemigrations

python3 manage.py migrate

ここでエラーがでなければ問題なくDBにテーブル(スキーマ)が作成されました。

おめでとう。

スーパーユーザーの作成

次にDjangoのアドミンパネルに入るためのスーパーユーザを作成します。

python3 manage.py createsuperuser

今回は説明の為にユーザー名:admin、パスワード:adminで作成し警告が出ましたが、本番環境ではハッキングされないものを作りましょう。

collectstaticの実行

ではmanage.pyから下記のコマンドを実行して、Staticファイルをデプロイ用に一か所にまとめます。

python3 manage.py collectstatic

ファイヤーウォールの設定

では、このDjangoプロジェクトをテストで公開するために下記のコマンドでサーバーのポートを開けます。

sudo ufw allow 8000

Djangoのテストサーバーでテスト

では下記のコマンドでDjangoにおまけでついてきたウェブサーバーで実際にpublicのネットワークから見れるか確認しましょう。

ちなみに自宅のLAN環境の場合はポートフォワーディングをして外からのアクセスを許可しないといけません。※おすすめしません。

python3 manage.py runserver 0.0.0.0:8000

やったよー。

ここまでできたらちょっとうれしいですね。

で、さっき作成したDjanogoのアドミンパネルにも入れますね。

Gunicornを使ってテスト

では、今度はgunicornを使って同じようにDjangoアプリをデプロイできるか試してみましょう。

※このproject.wsgiのprojectはDjangoのアプリ名です。settings.pyが入っているディレクトリ名ですね。

gunicorn --bind 0.0.0.0:8000 project.wsgi

※必要に応じてパスを移動(pwdで確認)
gunicorn --bind 0.0.0.0:8000 Djangoのプロジェクト名.wsgi

【ちなみに】

gunicornでサーブしたDjangoプロジェクトのアドミンパネルのCSSスタイルが抜けてますよね?これはgunicornがどこのCSSを見たらいいか分かっていないからです。今は無視しておきましょう。

では、ここまでできたら、一旦テストサーバーを止めて、仮想環境もディアクティベートしましょう。

サーバーはCtrl(コントール)+Cで止められます。

Systemdソケットとサービスファイルの作成

ではここからgunicorn様にsystemd socket(ソケット)とサービスファイルを作成します。

さっき、gunicornが動くことが分かったのですが、よりコントロールのある設定をしていきます。

下記のコマンドでソケットファイルを作成します。

sudo nano /etc/systemd/system/gunicorn.socket

中身をこんな感じで書きましょう。

[Unit]

Description=gunicorn socket



[Socket]

ListenStream=/run/gunicorn.sock



[Install]

WantedBy=sockets.target

次に、systemdサービスファイルを作成します。

sudo nano /etc/systemd/system/gunicorn.service

中はこんな感じです。

UserはUbuntuのユーザー名になります。

[Unit]

Description=gunicorn daemon

Requires=gunicorn.socket

After=network.target



[Service]

User=sammy(Ubuntuのユーザー名)

Group=www-data

WorkingDirectory=/home/sammy/myprojectdir

ExecStart=/home/sammy/myprojectdir/myprojectenv/bin/gunicorn \

          --access-logfile - \

          --workers 3 \

          --bind unix:/run/gunicorn.sock \

          myproject.wsgi:application(※myprojectはDjangoのプロジェクト名)




[Install]

WantedBy=multi-user.target

次に下のコマンドでGunicornソケットを実行します。これで自動でソケットファイルが作成されます。

sudo systemctl start gunicorn.socket

次にこれをEnable(実行:オン)にします。これで、ソケットに接続された際にsystemdが自動でgunicorn.socketを実行して処理してくれるようになります。

Gunicorn Socketファイルを確認しよう

gunicorn.socketをアクティブにします。

sudo systemctl enable gunicorn.socket

では下記のコマンドでプロセスのステータスを確認しましょう。

sudo systemctl status gunicorn.socket

Output

● gunicorn.socket – gunicorn socket

     Loaded: loaded (/etc/systemd/system/gunicorn.socket; enabled; vendor prese>

     Active: active (listening) since Thu 2021-12-02 19:58:48 UTC; 14s ago

   Triggers: ● gunicorn.service

     Listen: /run/gunicorn.sock (Stream)

      Tasks: 0 (limit: 1136)

     Memory: 0B

     CGroup: /system.slice/gunicorn.socket

Dec 02 19:58:48 gunicorn systemd[1]: Listening on gunicorn socket.

次に、/runディレクトリ直下にgunicorn.sockファイルがあるか確認します。

file /run/gunicorn.sock

※もしここで、systemctl statusのコマンドでエラーが出るか、gunicorn.sockファイルが見つからないメッセージが出た場合はgunicornソケットが作成されていないことが原因になるかと思います。下記のコマンドでgunicornソケットのログを出しましょう。

sudo journalctl -u gunicorn.socket

次のステップに進む前に下記のファイルに問題が無いか確認してください。

/etc/systemd/system/gunicorn.socket

ソケットアクティベーションのテスト

Gunicorn.scoketユニットをスタートしただけだとgunicorn.serviceはアクティブになりません。それはソケットが接続を受けていないからです。

下記のコマンドでステータスをチェックしましょう。

sudo systemctl status gunicorn

ソケットのアクティベーションのメカニズムをテストするには、curlコマンドを使ってソケットに接続シグナルを送ります。

curl --unix-socket /run/gunicorn.sock localhost

ここでHTMLの200のレスポンスが返ってきたらOKです。

これでGunicornが開始し、Djangoのアプリをデプロイする準備ができました。

では、Gunicornのステータスをもう一度確認してみましょう。

sudo systemctl status gunicorn

修正したら下記のコマンド

sudo systemctl daemon-reload

で、gunicornのプロセスもリスタートしましょう。

sudo systemctl restart gunicorn

では、次に進む前にここまでで問題ないことを確認しましょう。

NginxのGunicornにパスするプロキシを設定する

では、gunicornも設定ができたところで、次にプロセスにnginxのトラフィックを設定してきます。

Nginxのsites-availableディレクトリに新しいサーバーブロックを作成します。

sudo nano /etc/nginx/sites-available/myproject

ではこの中に下記のようにコンフィグを書いていきます。

server {

    listen 80;

    server_name server_domain_or_IP;

}

Nginxはfavicon(ファビコン:お気に入りのアイコン)とスタティックファイルを無視をするので、マニュアルで場所を教えてあげます。

server {

    listen 80;

    server_name server_domain_or_IP;



    location = /favicon.ico { access_log off; log_not_found off; }

    location /static/ {

        root /home/sammy/myprojectdir;

    }

}

最後に、location / {} ブロックで通常のproxy_paramsを含めた全てのリクエストを処理するようにします。

server {

    listen 80;

    server_name server_domain_or_IP;



    location = /favicon.ico { access_log off; log_not_found off; }

    location /static/ {

        root /home/sammy/myprojectdir;

    }



    location / {

        include proxy_params;

        proxy_pass http://unix:/run/gunicorn.sock;

    }

}

このファイルができたらシンボリックリンクでsites-enabledディレクトリとリンクしてあげます。

sudo ln -s /etc/nginx/sites-available/myproject /etc/nginx/sites-enabled

では、nginxのコンフィグレーションをテストしてみましょう。

sudo nginx -t

ここでエラーがでなければ、再度nginxをリスタートします。

sudo systemctl restart nginx

では、最初に開けた8000番のポートはデベロップメント用なので閉じてあげます。

sudo ufw delete allow 8000

それから、通常のアクセスは80番と443番のポートなので HTTPとHTTPSのポートを下記のように許可します。

sudo ufw allow 'Nginx Full'

ファイヤーウォールが起動しているか確認したい場合はこれで。

 

ufw status

sudo ufw enable

rootでしか変更できない場合はいったんrootのアカウントに変更します。

これで、サーバーのIPかドメインでDjangoのアプリが見れるようになりました。

トラブルシュート

DjangoのアドミンぺージのCSSが読み込めていない。

読み込まれていないCSSをクリックします。

CSSのソースページに=アクセスできない場合、www-dataが許可(permission)がないことが理由です。

まずは下記のコマンドでエラーがあるか見てみましょう。

sudo tail -F /var/log/nginx/error.log

必要に応じて、ユーザーのグループに追加しましょう。

etc/nginx/sites-enabled# gpasswd -a www-data root
etc/nginx/sites-enabled# gpasswd -a www-data ユーザー名

でサービスをリスタートして直るはずです。

sudo systemctl restart nginx

sudo systemctl restart gunicorn

トラブルシューティングはプログラミングの基本です。

他人の汚い部屋をきれいにしたり、分厚い契約書を見てミスがない確認するのと同じようで、練習を重ねていけば面倒でも慣れていきます。

慣れてくると、楽しい部分が見えてくるものです。

頑張りましょう!