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を使うようにしましょう。

DjangoをPostgreSQLに接続しよう

DjangoアプリをPostgreSQLに接続しよう

PostgreSQLのインストール

では自分が使っているPCにPostgresをインストールしましょう。

本番環境ではUbuntuとかのLinuxのサーバーにPostgresを入れなおすことになりますが、テスト環境として入れておいたら後からコードも書き直さなくてよいので準備しておきます。

Postgresの公式サイト

https://www.postgresql.org/

インストールはここから

https://www.enterprisedb.com/downloads/postgres-postgresql-downloads

この際にDB名とユーザー名、そのPWを保管しておきましょう。

 psycopg2のインストール

ではDjangoがPostgreSQLのデータベースとコミュニケーションを取るためのアダプターをインストールします。

pip install psycopg2

https://github.com/psycopg/psycopg2

Settings.pyの設定

ではSSQLiteの設定をコメントアウトして下記の用に設定していきます。

DATABASES = {

   'default': {

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

       'NAME': '<database_name>',

       'USER': '<database_username>',

       'PASSWORD': '<password>',

       'HOST': '<database_hostname_or_ip>',

       'PORT': '<database_port>',

   }

}

あとはいつも通りにDBのマイグレーションを行います。

python manage.py makemigrations

python manage.py migrate

python manage.py createsuperuser

http://127.0.0.1:8000/admin/

Django REST API COR Headersの使い方

Django CORSとは

Django CORSはホスト側のAPIリソースを取り扱う、そしてセキュリティのメカニズムのことです。

このCORSが設定されていないと、アプリからDjangoAPIとコミュニケーションをしようとしてもエラーになってしまいます。

CORSをインストール

python -m pip install django-cors-headers

Settings,.pyの更新

INSTALLED_APPS = [

...

'corsheaders',

...

]

ミドルウェアの更新

ここで注意したいのはCORSのラインが他のミドルウェアよりも先(上)に来るようにします。

MIDDLEWARE = [

...,

'corsheaders.middleware.CorsMiddleware',

'django.middleware.common.CommonMiddleware',

...,

]

Allowed Originの設定

CORS_ALLOWED_ORIGINS = [

"https://domain.com",

"https://api.domain.com",

"http://localhost:8080",

"http://127.0.0.1:9000"

]

CORS_ALLOW_METHODS

必要に応じてHTTPのリクエストのメソッドも制限できます。

CORS_ALLOW_METHODS = [

'DELETE',

'GET',

'OPTIONS',

'PATCH',

'POST',

'PUT',

]

CORS_ALLOW_HEADERS

これも必要に応じてHTTPリクエストのヘッダーを制限できます。

CORS_ALLOW_HEADERS = [

'accept',

'accept-encoding',

'authorization',

'content-type',

'dnt',

'origin',

'user-agent',

'x-csrftoken',

'x-requested-with',

]

Django API ViewsetとForeginKeyの使い方

必要な環境

・Python 3

・pip

・git(※無くても良い)

イントロ

前回はPythonのフレームワークDjangoとDjango Rest Frameworkを使ってクラスベースとファンクションベースのView(views.py)でAPIを作りました。

前回カバーしたのはHTTPのGETリクエストに対してのレスポンスとしてデータを出力しただけです。

まずは、主なHTTPのリクエストを簡単に紹介します。

GETリクエスト➡データ取得

POSTリクエスト➡フォームのサブミット、ログイン、記事の投稿など

PUT➡データの更新、書き換え

DELETE➡既存のデータの削除

詳しくはこちらを参考にしてください。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods

では、前回やったAPIViewでも同じようにそれぞれのHTTPでリクエストが来たときにどうやってDjango側がリクエストを扱うかコードで指示できます。

詳しくはこちらを参照。

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

しかし、DjangoのREST Frameworkでviewsetという全部のリクエストをカバーしたメソッドがあるのでそれを今日紹介していきます。

環境の設定

まずは下記のGitHubリポジトリからコードをダウンロードしてください。

https://github.com/TraitOtaku/djangoAPI.git

Gitを使ったことがない人はZIPファイルでもダンロードできます。

ではGitのコマンドです。

cdでファイルを作成したい所に行き、

git clone -b 2_Viewset https://github.com/TraitOtaku/djangoAPI.git

で、virtualenvが入っていない人はグローバルに入れます。

pip install virtualenv
virutalenv ENV

ENV\Scripts\activate.bat

(ENV)でアクティベートされていることを確認して、requirements.txtnのパッケージを全部インストールします。

pip install -r requirements.txt

pip list
python manage.py makemigrations

python manage.py migrate

​​​​​​​python manage.py createsuperuser

VSCodeを使っている人はこれでテキストエディタを開きましょう。

code .

python manage.py runserver

コンセプトの紹介

まずは、今日使用するアプリの例を紹介します。例として、コールセンターをイメージしましょう。

この画像のように、Djangoで3つアプリを別々に作成しました。

1.会社で従業員を管理するmembers app

2.顧客を管理するcustomers app

3.顧客からの問い合わせを管理するTicket app

Djangoの良いところはこのアプリを連携されてスケーリングが簡単にできることです。

ではこのアプリがどのように連携されるかデータベースのモデルを見てみましょう。

モデルの理解

members.models.py

従業員のデータモデルです。

Customers.models.py

顧客情報のモデルです。

Tickets.models.py

チケットのモデルです。

ForeignKeyで他のモデルのデータを参照していることに注目してください。

アドミンパネルでサンプルデータを作成

ではアドミンパネルで適当にデータを作成します。

データベースの中身を見る

では、DB Browserという無料のソフトウェアを使ってデータベースの中身を見てみましょう。

TicketのテーブルのForeignKeyで他のテーブルのIDを参照していることに注目してください。

ツールはここからダウンロードできます。

https://sqlitebrowser.org/

Serializerを見る

特に重要なのがこのForeingKeyをどうやってAPIで出力するかです。

もし、Readオンリーであればソース源をそのまま出力できますが、

CRUDオペレーションをしたい場合、(データの作成、読み込み、更新、削除)ちょっとした工夫が必要になりそうです。

Views.pyを見る

ここで今日の本題のviewsetの紹介に入ります。ViewsetはこのCRUDで使うAPIを全部セットで使えるようになった便利なメソッドの事です。これを使うことでいちいちGET、PUT、DELETE、POSTのコードを書かなくても良いようにあります。

もちろん、カスタマイズが必要な場日は、コードを上書きすることもできます。

では、viewsetを見てみます。

今回のアプリでは、membersとcustomersは会社のマネージャーがDjangoのアドミンパネル(サーバー側)から編集すると考えます。

それで、従業員がブラウザ上でチケットを管理するような流れです。

なので、membersとcustomersのデーターはReadOnlyModelViewSetはGETメソッドだけ用に絞ってクライアント側ではリードオンリーのデータした提供されません。

Router.pyを見る

今までのDjangoアプリはurls.pyでURLをそれぞれのアプリから提供していました。APIもこのやり方でも良いのですが、どんどなプリが増えてくるとどのURL(URI)がAPI化されているか煩雑になります。

そこで、プロジェクト側のディレクトリにrouter.pyファイルを作成してAPIのエンドポイントを一つにまとめます。このファイルはプロジェクト側のurls.pyから呼び出されていることを忘れずに。

APIを見てみよう。

では実際に提供されたAPIでCRUD操作ができるか試してみましょう。

次回

では、これで、従業員がAPIを使ってブラウザ側からDjangoアプリにデータをやり取りすることができました。しかし、このままだとAPIが垂れ流しでURL(URI)にアクセスで切る人が誰でもデータをみたり編集できてしましますね。

ですので次回はAuthentication(認証、ログイン)システムを使ってAPIのセキュリティ強化をしてみたいと思います。

ではお疲れさまでした。

Vue JSを始めよう!

準備しておくこと

・NodeJS Version 10~

今回使用するもの

・VueJS バージョン3

公式ドキュメンテーション

https://vuejs.org/guide/introduction.html

イントロ

VueJSはフロントエンドのJavaScriptフレームワークでユーザーインターフェースを作ることができます。

通常のHTML、CSS、JavaScriptに合わせてビルドでき、コンポーネントという概念で開発をより効率よくできます。

他の主要概念として、Declarative Rendering(宣言的レンダリング)やReactivity(反応性)などがありますが、まずは実際にVueJSを触りながら理解していきましょう。

ここでVueJSを開発するうえで2種類のAPIのスタイルがあることを簡単に説明します。この2つはOptionsAPIとCompositionAPIになりますが、CompositionAPIはOptionsAPIの上にできたものなので、まずはOptionsAPIから学ぶことをお勧めします。

ビルドツール

では、早速vueのアプリケーションを作成していきましょう。

Npmでもできますが、今日はvue cliというツールを使っていきます。他にvite(ヴィート)というビルドツールも人気が出てきましたね。色々選択肢が多くてほんと追いつけないっすね。

npmでインストールする方法

このコマンドです。

npm init vue@latest

Vue cliのインストール

npm install -g @vue/cli

# OR

yarn global add @vue/cli


Vue cliのバージョンを確認する

vue --version

Vue cliのバージョンを更新する

npm update -g @vue/cli
# OR

yarn global upgrade --latest @vue/cli

Vue CliでVueプロジェクトを作成する

vue create hello-world

#Helloe-worldの所は自分のプロジェクト名

ここでマニュアルで何をインストールしたいか選択できます。

また、これをプリセットとして保存して再度使う事もできるので便利ですね。

ファイル構成を見る

.gitはバージョンコントロールのGITファイルがあります。

Node_moduleにインストールしたパッケージが格納されます。

例えばBootstrapとか、ChartJSとかですね。

publicにはfav-iconとindex.htmlがあり、vueJSがこの中のid=”app”の部分にアプリをマウントすることになります。

Scrはソースフォルダです。

ここにコンポーネント、ルーティング、ビューのファイルが格納されます。

assetsはグローバルのCSSとか画像を保管するときに使います。

で、App.jsがVueの親のアプリのようなものです。

Main.jsがこの親アプリをどうするか指示するためのファイルになります。

では詳しいファイルの内容は動画で見てくださいね。

お疲れ様です。

DjangoでAPIをつくろう

知っておくべきこと

・Djangoの基本は説明しませんので別の動画/記事で先に理解しておくこと

・Pythonの基本

・APIの意味

今回使用するもの

・Windows10(OSはあまり関係ありません)

・Python3

・pip

・Django REST framework

Django REST Frameworkってなに?

Django自体はバックエンドのフレームワークの中でもスピーディに開発でき、セキュリティも設定されてるいてくる優れモノです。

他にはPHPのLaravelとか、nodeJSのExpressJSとかが近いもので存在します。

詳しくはDjangoの公式ドキュメンテーションを見てください。

https://www.djangoproject.com/

しかし!実際の開発の現場では、Djangoだけの仕事っていうのはあまりありません。DjangoにAPIを組み込んでマルチプラットフォーム(Web、モバイルアプリ、exeファイル)からデータにアクセスさせるというやり方の方が良いです。

これでDjangoの良さを活かしつつ、ユーザー側にはreact、vue、Anguler等のJSフレームワークでフルスタックにする方がスケールもしやすく、デバッグも楽になります。

では、前置きはこれくらいにして早速Django RESTFramework(DRF)を触っていきましょう。

DRFが提供するAPIの種類

APIでは、JSONファイルのデータを公開したり、アプリのデータを発信、受け取る際に使います。例えば天気の情報をAPIで受け取り、自分のサイトに表示するとかですね。

serializerを理解する

Djangoは通常PostgreSQLなどのデータベースと接続されています。デフォルトでは、SQLiteというポータブルのDB(データベース)がついてきますが、セキュリティのこともあり、デプロイする際には使いません。

DRFのSerializerはこのデータベースのデータをシリアル化することによってDjangoアプリからデータをAPIとして公開する役目を持ちます。

views.pyを理解する

ではこのシリアル化されたデータをDjangoのViews.pyというファイルの中でどのように扱うか指示をしてあげます。ここでフィルターをしたり、順番を変えたりもできます。

urls.pyを理解する

最後にどのURLでクライアント(ユーザー側)がアクセスできるかを指示します。

セットアップ

Pythonが入っていることを確認してください。

python –version

python3 —version

仮想環境を使ってホストターミナル(つまりは私のWIndowsPC)から独立した環境を作ります。必要ない人は飛ばしてください。(OSによってコマンドが異なります。)

環境を作りたいファイルパスで下記のコマンド

ENVは私がつけた名前なのでなんでもいいです。

pip install virtualenv

Virtualenv ENV

ENV\Scripts\activate.bat

Djangoのインストール

pip install django
pip list

プロジェクトの作成

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

django-admin startproject djangoapi

#djangoapiの部分は自分で分かりやすいものにしてください。

で、新しいプロジェクト名のディレクトリができました。

次にDjangoのRESTフレームワークをインストールします。

pip install djangorestframework

pip list

アプリの追加

今できたプロジェクトファイルとは別にアプリケーションごとのディレクトリを作成します。

まずはmasnage.pyのある場所に移動します。

cd djangoapi

python manage.py startapp apiapp

settings.pyを設定

ではテキストエディタでメインのプロジェクトファイルのsettings.pyを開き、

INSTALLED_APPS にrest_frameworkを追加します。

あとさっき作ったapiappも登録します。

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    'rest_framework',

    'apiapp',

]

プロジェクトのurls.pyを設定

これもdjangoの設定なので詳しくは説明しません。

apiappのurls.pyに転送します。

from django.contrib import admin
from django.urls import path, include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('apiapp.urls'))
]

アプリの方にurls.pyを作成しておく。

from django.urls import path

urlpatterns = [
]

アプリ側のviews.pyの設定

データベースに接続する前に簡単なテキストデータが出力できるか試します。

ここでapiの設定の仕方でファンクションベースとクラスベースの設定の仕方があります。

ファンクションベースは細かい設定がしやすいですが、行が長くなりがちで、クラスベースはコードの数が少ないと違いと考えておいて問題ないと思います。

from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.decorators import api_view



@api_view(['GET'])
def getData(request):
  person = {'name':'Shiro', 'age':31}
  return Response(person)

さっきのurls.pyにエンドポイントを作成

from django.urls import path
from .views import getData

urlpatterns = [
    path('api/', ('apiapp.urls')),
    path('', getData),
]

テストラン

python manage.py makemigrations

Python manage.py migrate

python manage.py runserver

http://127.0.0.1:8000/をブラウザで開く。

これでAPIのエンドポイントが設定できましたね。

では、実際のデータを参照するように設定します。l

メンバーアプリを作成する。

では、同じ要領でメンバーのデータを参照するAPIを作成していきます。

python manage.py startapp members

settings.pyにアプリを登録

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    # Installed app
    'apiapp',
    'members'
]

モデルの登録

モデルはデータベースの方のようなもので、Django側でデータベースで受け入れるデータの種類やデータの長さを規制しておくことができます。

では、models.pyで下記のように例としてモデルを登録します。

from django.db import models

class Members(models.Model):
  name = models.CharField(max_length=30)
  email = models.EmailField(max_length=60)
  phone = models.IntegerField()
  date = models.DateTimeField(auto_now_add=True)

  #auto_now_addはレコードの作成した日と時間のみ記録する

モデルをシリアル化する

では、このmembersモデルをAPIにするための作業を行います。

Membersディレクトリ内にserializers.pyを作成します。

from rest_framework import serializers
from .models import Members




class MembersSerializer(serializers.Serializer):
    name = serializers.CharField(max_length=30)
    email = serializers.EmailField(max_length=60)
    phone = serializers.IntegerField()
    date = serializers.DateTimeField()



    class Meta:
        model = Members
        # fields = ['name', 'email', 'phone', 'date']
        fields = '__all__'

Viewsの登録

今回はクラスベースでAPIにしてみましょう。

クラスベースの中でもいくつか方法があります。

まずは基本となるAPIviewを使ったやり方を紹介しますが、Viewsetという.CRUDの全部がセットになったものもあります。(CRUDはクリエイト、リード、アップデート、デリートpの略)

from django.shortcuts import render
from rest_framework.response import Response
from rest_framework.views import APIView
from .models import Members
from .serializers import MembersSerializer




class MemberList(APIView):
    def get(self, request, format=None):
        members = Members.objects.all()
        serializer = MembersSerializer(members, many=True)
        return Response(serializer.data)




Urls.pyの設定

プロジェクト側のurls.pyをアプリ側に転送して、アプリ側のurls.pyでclassのMemberListのエンドポイントを作成します。

#djagoapi/urls.py

from django.contrib import admin
from django.urls import path, include



urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include('apiapp.urls')),
    path('members/', include('members.urls')),
]

#members.urls.py

from django.urls import path
from .views import MemberList

urlpatterns = [
    path('', MemberList.as_view()),
]

DBをマイグレーション

では、実際にAPIができたかを確認する前に、models.pyのDBの枠組みを流し込みます。

python manage.py makemigrations

python manage.py migrate

python manage.py runserver

テストデータの作成

ではデータが空っぽなのでテスト用に入れていきます。

python manage.py createsuperuser

アドミンパネルにアクセスする前にDBモデルを登録して表示できるようにします。

#members/admin.py

from django.contrib import admin
from .models import Members
# Register your models here.
admin.site.register(Members)

ウェブサーバーを実行してURLからアドミンパネルにアクセスします。

http://127.0.0.1:8000/admin/

Djangoが勝手にmembersにsをつけたのでmodels.pyで変更します。

from django.db import models


class Members(models.Model):
    name = models.CharField(max_length=30)
    email = models.EmailField(max_length=60)
    phone = models.IntegerField()
    date = models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural = 'Members'


    def __str__(self):
        return self.name

Pluralは複数形のことです。

あと、__str__の所で、どのように表示したいか教えてあげます。この場合はメンバーのnameのデータを返してあげるようにします。

では、データ登録してみましょう。

では、これでAPIのエンドポイントに行ってみるとAPIが出力されていることが分かりますね!

では、次回はこのDjango RESTFrameworkのAPIでPOSTリクエストやDELETEのリクエストを送ってユーザー側から記事の投稿や削除ができるようにします。

お楽しみに。

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

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

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

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

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

頑張りましょう!