DjangoアプリにGoogleでログインできるようにする

Django-allauth

こんにちは。今日はDjangoアプリにGoogleなどのソーシャルメディアアカウントを使ってログインする方法を紹介します。

今回使用するdjango-allauthライブラリを使用することにより、ソーシャルメディアでユーザーをサインアップさせることができます。

詳しいドキュメンテーションはこちらを参照してください。(英語ですが。)

あと、Googleクラウドのサービスは課金されるものになるのでテストが完了したら課金はオフにしておきましょう。(最初に登録した場合は無料のクレジットがもらえるはずですが。)

ちなみに今回はフロントエンドはDjangoのテンプレートを想定していますが、REST APIを使ってログインする方法も今後紹介する予定ですのでお見逃しなく。

WSL2を使ってWindows11からDjangoをデプロイしよう

WSL2からDjangoをデプロイ

前回の記事では、windowsにWSL2(Windows Subsystem for Linux)をインストールする方法を紹介しました。 では今日はWSL2を使ってDjangoをデプロイする方法を説明していきます。UbuntuサーバーからDjangoをデプロイする方法はこちらの記事を参考にしてください。 ※今回はwindows11で作業を行っています。SWL2であれば問題はないと思いますが、Windows11を使うことをお勧めします。 ※WindowsからDjangoはデプロイできますが、Hyper-VでNATネットワークをUbuntuにアサインしているためにデフォルトでは、Windowsマシン以外からDjangoアプリにアクセスができません。詳しい対応策はMicrosoftのWSLのGitHub Issueを見てください。 Ubuntuサーバーの起動 では前回の記事でインストールしたUbuntuサーバーを起動します。 Ubutnuサーバーの環境の確認 これから作業するにあたり、Linuxのコマンドに慣れていない人は簡単な早見表などを見ておくとよいです。 例えばCtl+Lで入力画面が一番上に来るのでキレイに見えます。 他に入力している途中でCtl+iを押すと推測したテキストが表示されます。長いファイル名の場合は最初の何文字か書いてCtrl+iで記入を終わられるのに便利です。 また、過去に実行したコマンドを見たい場合は上矢印で見ることができます。 UbuntuサーバーのIPアドレスを見てみます。 ip addrのコマンドで分かるようにeth0のインターフェースに172.18.173.157のIPアドレスがあることが分かります。 WindowsのホストマシンのコマンドプロンプトからPingをかけてみました。 リスポンスがあったので、ここからデプロイできそうです。 次にPythonが入っていることを確認します。 次にUbuntuソフトウェア、パッケージのアップデートをします。 Ubutnuユーザーをwww-dataグループに追加します。 ※これからの作業の注意点 Ubuntuユーザーを作成した際にsudoの権限がすでについています。rootに切り替えて作業せず、そのままsudo権限のあるユーザーのまま作業を行いましょう。理由はnginxやファイルの実行の際に権限が与えられていないとエラーが発生するからです。 Djangoデプロイに使うライブラリをUbuntuにインストール 下記のコマンドでUbuntuサーバーにグローバルにインストールしていきます。 PostgreSQLのデータベースを作成 ではこちらの参考Djangoのプロジェクトを使用してデプロイさせていくことにします。もしPostgreSQLを使ったことがない人は1時間くらいかけてデータベースのSQLコマンドを練習、理解してみてください。今後データベースのデータの修正やバックアップを取るためにコマンドラインを使っていくことになるので慣れておくとよいです。 postgresをインストールしたときに自動でpostgres というアドミン権限のユーザーが作成されます。 この権限を使って新しいデータベースとユーザーを作成します。 まずは、PostgreSQLのステータスを確認します。 PostgreSQLが起動できたらPostgresのユーザーに切り替えます。 これでユーザーが切り替わりSQLの入力モードになったことが分かります。 では、Djangoのsettings.pyに合わせたデータベースを作成していきます。 セミコロンを忘れずに! \lのコマンドでDBの一覧が表示されます。 これでpostgresユーザーがオーナーのデータベースが出来ました。 PostgreSQLのコンフィグレーション もしデータベースのオーナーをpostgres以外に設定したい場合は新しいPosgreSQLのユーザーを作成して所有権を移動させてください。 ではpostgresの接続をスムースにするためにコネクションパラメーターを変えます。 まずはエンコーディングをutf-8に変えます。 Postgresのタイムゾーンを日本時間に変えます。 Djangoのタイムゾーンがデフォルト(初期設定)でUTCにセットさせているのでそれを変更していない人はSettnigs.pyから変更しておきましょう。 次に、作成したユーザーにdb(データベース)のアドミン権限をつけます。 postgresは一旦完了なのでquitと入力してでpostgresから抜け出しましょう。 もしくはCtl+Zでも抜けられます。 Django用に仮想環境を作成 pythonではいくつか仮想環境のライブラリがありますが今回はvirtualenvを使用します。 仮想環境を使ったことがない人は詳しく理解しておいた方が良いですね。 簡単に説明すると同じサーバーで違うバージョンのライブラリを使いたいとき(例えばDjangoの3.0と4.0)に仮想環境をアクティベートして同じマシンでも同時に使用できる様になります。 また、複数人で仕事をするときもバージョンを統一してするために使います。 Pipの準備pipはpythonパッケージマネージャーでpythonのライブラリをインストールする際に使用しますね。 -HのフラグはsudoのコマンドでユーザーのhomeディレクトリではなくrootのHOMEディレクトリにインストールするように指示します。 まずはpipを最新のものにします。 … Read more

JSひろばアプリ開発5日目:Djangoのデプロイ

JSひろばアプリ作成まで~5日目

前回まではJSひろばのVueアプリとDjangoのAPIを大まかに作成しました。 今日はフロントエンドのVueのデプロイよりも先にDjangoのアプリをデプロイして実際のAPIを使ってVueからAPIコールができるようにします。実際にデプロイをしたあとに細かなセキュリティの設定やAPIのデータを入力していくようにします。 作業日 2022年12月14日 作業にかけた時間 5時間 合計作業時間 16時間 作業内容 ドメインの取得Ubuntuサーバーの設定サーバーのユーザー設定PostgreSQLのインストールリポジトリのクローンDjangoのデプロイNginxの設定SSLの取得 ドメインの購入 ドメインは〇〇.comとかウェブサイトのアクセスリンクになる部分ですね。今回は個人的なお勧めのNameCheap.comからドメインを購入します。APIの方もIPアドレスからAPIのエンドポイントを作成しようと思いましたがセキュリティの面からもドメインを使った方が良いとのことなのでDjangoとVueのアプリケーションのどちらにもドメインを割り当てます。 では、asameshi-api.cloudとjs-hiroba.comを購入します。合計で年間12ドルなので安いですね。SSL Certificate(HTTPS)は無料でサーバー側で設定できるのでここで購入する必要はありません。 サーバーにドメインを登録 今回もまた、個人的なお勧めのLinodeサーバーを使います。東京にサーバーを作りましたので先ほど購入したドメインをサーバーに登録しましょう。ではNameCheapのドメイン設定からカスタムDNSを設定します。 ところがLinode側で登録すると以前に設定していたサーバーと紐づけされてエラーになってしまいました。 これは私の方では何もできないので一旦、サポートにお願いをして待ちます。 その間にIPアドレスからデプロイしちゃいます。 サーバーの設定 まずはLinodeでサーバーを作ります。Linodeサーバーを月額500円で始めるという記事があるのでそちらを参考にしましょう。 サーバーを作成したらLinode側でドメインを登録します。 同じようにapiで使う方のドメインも登録しておきます。 サーバーにSSHで接続 詳しいSSHの使い方はこちらの記事で説明しています。サーバー構築で必ず役に立つので理解しておきましょう。 ではSSHクライアントを使ってサーバーに接続しましょう。SSHクライアントのMobaXtermを使います。 Djangoのデプロイ 詳しいDjangoのデプロイの仕方はこちらで説明しています。 同じような手順で設定していきましょう。 この後にデータベースを作成しましょう。 詳しくはDjangoのデプロイの仕方でカバーしているので確認しておきましょう。 次に仮想環境の設定です。 次にGunicornのテストをしました。 でNginxのコンフィグはこのようになりました。 ではNignxをテストして、サービスをリロードします。 ドメインをsettings.pyに登録していなかったのでエラーが出ました。しかしこれでDjangoのエラーのページが出たので正しくNginxとGunicornが動いていることが確認できますね。 これでサーバーを再起動してAPIのURLにアクセスすると問題が解決していることが確認できました。 しかしURLを見ても分かるようにまだHTTPのままなのでSSL Certificateを取得して安全なサイトにするようにします。 この作業はLet’s EncryptでSSL取得の記事を見て行いましょう。 ここで、安いプランのシェアサーバーだったせいか、SSLのセットアップに少し苦難し、2時間余計に時間がかかってしまいました。 特に、DNSを使ったSSL証明のチャレンジ、HTTPからHTTPSへのリダイレクトなど初めての作業だったのでとても良い経験になりました。

JSひろばアプリ開発4日目:Djangoプロジェクトの作成

JSひろばアプリ作成まで~4日目

前回まではVueのフレームワークを使い、フロントエンドのアプリを作成しました。まだモックのデータでしか操作できないので、実際にREST APIを作成したVue側で使えるようにしていきます。 今日は、PythonのウェブフレームワークのDjangoを使ってAPIを作っていきます。Flaskよりもアドミンページがあったりセキュリティの設定が最初から入っているなど開発の面でもスピードアップができる素晴らしいフレームワークです。 YouTubeでもDjangoとDjango REST APIを説明したプレイリストがあるので是非見てください。 作業日 2022年12月13日 作業にかけた時間 2時間 合計作業時間 11時間 作業内容 Djangoのプロジェクト作成virtualenvの設定requirements.txtに書き出しDRFのインストールDBのテーブルの構成モデル、URL、ビューの設定PostgreSQLに接続 Djangoのプロジェクト では早速Djangoのプロジェクトを作成します。Python3がインストールされていることを確認してください。 その前に仮想環境のvirtualenvが入っているか確認します。入っていない場合は下記のコマンドでインストールしましょう。 仮想環境の説明はこちらの動画を見てください。必ず役に立ちますよ。 では正しいファイルパスにいることを確認して下記のコマンドで仮想環境をアクティベートします。 これでプロンプトの最初に(env)と表示されればOKです。 Djangoのインストール ではDjangoとDjango REST Frameworkをインストールします。 他にも必要なパッケージがあればその都度インストールすると思いますが、今のところはなさそうです。 Djangoはバージョン4.1がリリースされているので最新のものを入れておきましょう。 必要であればgit initでリポを作成しましょう。詳しいGitとGitHubの使い方はこちらの動画を見てください。 では、下記のコマンドでDjangoのプロジェクトをスタートします。 次にmanage.pyのファイルを使ってDjangoのアプリを作成します。 次にを開発用の仮のデータベースをSQLiteで作成します。 その後にテストランしてみましょう。 これでセッションのテーブルができました。 では実際にブラウザにアクセスしてDjangoのデフォルトのページが表示されるか見てみます。 OKですね。では実際にコードに入ります。 アプリの登録 先ほど登録したcommandアプリをDjangoのプロジェクトに教えてあげます。 Settings.pyでcommandアプリとRESTフレームワークのアプリを登録しました。 次にプロジェクトフォルダのurls.pyにAPIのエンドポイントとなるURLを登録します。 このrouterファイルは後から作成します。まずはAPIの前にデータが登録できるところまで確認しましょう。 モデルの作成 ではデータベースの枠となるmodels.pyを作成していきます。 とりあえずはこんな感じで作成しました。 Views.pyの作成 Views.pyはモデルともとに何をするのか指示する場所になります。 ここではモデルをシリアル化してAPIを作成するように指示しています。 CommandSerializerのファイルがまだできていないのでそれを作成します。 CommandSerializer では同じファイルパスにserializers.pyを作成しましょう。 まずはこれだけ設定していきます。 admin.pyの登録 Djangoのアドミンパネルでテーブルが見れるようにモデルを登録します。 スーパーユーザーの登録 Djangoのスーパーユーザーを作成してアドミンパネルからテーブルが作成できるか見てみましょう。 再度テーブルのマイグレーションを行います。 … Read more