SvelteでSupabaseを使う例

superbase

今日は最近流行りのSvelteスタックで基本的な操作を理解できる例を紹介しますね。 Supabaseのセットアップ 前回のSupabaseの記事を読んでおきましょう。 次に、テーブルを準備します。 このスクリプトを選択します。 “Run”または “Execute” ボタンをクリックして選択したスクリプトを実行します。これにより、データベースに「Todo」テーブルが作成され、必要な行レベルのセキュリティルールも設定されます。 スクリプトが正常に実行されると、テーブルとルールが作成されたことを示す確認メッセージが表示されます。 “Data” タブに移動して、「Todo」テーブルが作成されていることを確認できます。 APIキーの取得 URLとキーの取得 プロジェクト設定に移動して(歯車アイコン)、APIタブを開き、API URLと匿名キー(anon key)を見つけてください。これらは次の手順で必要になります。 匿名キーは、クライアント側のAPIキーです。ユーザーがログインするまで、データベースへの「匿名アクセス」を許可します。ユーザーがログインしたら、キーはユーザー自身のログイントークンに切り替わります。これにより、データの行レベルのセキュリティが有効になります。 注意:サービスロールキーはセキュリティポリシーをバイパスし、データに完全なアクセス権を持っています。これらのキーは秘密に保つ必要があり、サーバー環境でのみ使用され、クライアントやブラウザ上で使用しないでください。 プロジェクトのクローン SupabaseのプロジェクトができたらSvelteのToDoリストのサンプルリポジトリがるのでこれをクローンしましょう。 https://github.com/supabase/supabase/tree/master/examples/todo-list/sveltejs-todo-list 下記のコマンドだとSupabaseの全部のリポがクローンされてしまうのでサイズはちょっと大きいかも ではSvelteの例があるディレクトリに移動してライブラリをインストールしましょう。同じディレクトリにNext.jsとNuxt.jsで作られたToDoリストのサンプルプロジェクトもあるようですね。 ではcode . のコマンドでVSCodeを開きましょう。 ルートディレクトリに.env.exampleのファイルがあるので名前を.envに変更します。 次に中にある環境変数に先ほどSupabaseでとってきた値を入力します。 アプリの起動 ではnpm run devのコマンドでSvelteアプリを起動します。 でサインアップをするとメールにちゃんとサインアップの確認メールが届きました。 そうするとToDoリストに誘導されてタスクを入力できるようになりましたね。 登録されたユーザーはAUthentication(認証)タブのユーザーから確認できますね。 でSvelteのアプリから追加したタスクもデータベースのテーブルに反映されていました。 Googleでのログインを追加する まずは、Gooelデベロッパーコンソールからプロジェクトを作成をします。Google Developer ConsoleからSupabaseのGoogle認証に使用するOAuthのClient IDを取得する手順は以下の通りです: ではSupabaseの認証タブでキーを登録します。 これだけで、OKです。素晴らしいですね。 ではGoogleでもログインできることを確認しましょう。 今日はコードの説明なしですが、次回詳しくSvelteのファイル構成と一緒に見ていきましょう。

Firebaseの代替バックエンド、Supabaseを使ってみよう

superbase

今日はSupabaseを紹介します。 「Supabase」は、オープンソースのプラットフォームで、バックエンドサーバー、データベース、認証、リアルタイムデータ、ストレージなどの機能を提供するBaaS(Backend as a Service)プロバイダーです。Supabaseは、アプリケーションの開発者がアプリケーションのバックエンド機能を迅速かつ簡単に構築および管理できるようにするために設計されています。 主な特徴と機能: Supabaseは、モダンなWebおよびモバイルアプリケーションのバックエンドを効率的に構築するための強力なツールとして広く利用されています。アプリケーションのバックエンドを設計、実装、デプロイするプロセスを簡素化し、開発者がフロントエンドに焦点を当てるのに役立ちます。 更にFirebaseではNoSQLしか提供していないのでPostgreSQLを使い方は必然的にこちらになりますね。 Supabaseのプロジェクトを始める では下記のサインインのページからSupabaseにサインインしましょう。 https://supabase.com/dashboard/sign-in? メールアドレスでサインアップしてもよいですし、GitGubのアカウントからサインインしてもOKですね。 サインイン後にダッシュボードからNew Projectを選択して新しいプロジェクトを作成しましょう。プロジェクトはOrganization(組織)に紐づくので組織を作成することになります。ここで無料のプランを選んでおきましょうね。 そのままDBのパスワードの設定の画面へ。 セットアップが完了するとダッシュボードのページにもどされ、APIキーやらが表示されます。 もちろん、公開しないこと! テーブルエディター 左側にあるメニューの上にテーブルエディターがあります。ここでUI上でPostgreSQLデータベースのテーブルを作成してデータを作成することもできますね。 Enable Row Level Security (RLS)とは Enable Row Level Security (RLS)は、テーブルへのアクセスを制限するためのセキュリティ機能です。RLSは行ベースのセキュリティ制御を提供し、データベース内の各行に対してアクセスポリシーを設定できます。この機能を有効にすることにより、データベースの安全性を向上させ、機密性の高いデータを保護できます。 RLSの利点は以下の通りです: RLSを有効にすると、ポリシーを設定してデータベースのセキュリティを強化できます。ポリシーは、特定のユーザーやロールに対するアクセス権を制御し、データのプライバシーとセキュリティを確保します。RLSは特に多くのユーザーやロールが存在し、データへの細かいアクセス制御が必要な場合に有用です。 データの挿入 次にInsertボタンを使って手動でデータを入力してみましょう。わかりやすいので説明不要ですね。 参考API 次に右上の<>APIのボタンをクリックします。 ここで使えるAPIの一覧が例で出てきます。

Pineconeとは

Pineconeとは Pineconeは、機械学習のための高速でスケーラブルなベクトル検索エンジンです。ベクトル検索は、ベクトル表現でデータを表現し、ベクトル間の類似性を計算してデータを検索する技術です。 Pineconeは、大量のベクトルデータをリアルタイムで高速に検索することを目的としています。これには、機械学習モデルの埋め込み表現や特徴ベクトルなどのデータを含めることができます。例えば、製品の特徴ベクトルや顧客のプロファイルをPineconeに格納し、似たような製品や顧客を見つけるためにクエリを実行することができます。 Pineconeは、高速な類似性検索とスケーラビリティに優れており、リアルタイムのアプリケーションやサービスでの利用に適しています。また、Pineconeはクラウドベースのサービスとして提供されており、簡単に統合して利用することができます。 Pineconeは、機械学習エンジニアやデータサイエンティストが類似性検索やパターンマッチングを効率的に行うためのツールとして利用されています。また、個別のユースケースに応じて、推薦システム、自然言語処理、コンピュータビジョンなど、さまざまな分野で利用されています。 Pineconeの開発者 Pineconeは、アメリカの企業であるOpenAIによって開発されました。OpenAIは、人工知能(AI)の研究と開発を行う非営利団体および企業であり、AI技術の発展と普及に取り組んでいます。OpenAIは、GPT-3やGPT-3.5などの有名なAIモデルを開発したことでも知られています。 Pineconeは、OpenAIが開発したベクトル検索エンジンであり、その目的は高速かつ効率的なベクトルデータの検索と類似性の計算です。OpenAIは、Pineconeを利用することで、機械学習エンジニアやデータサイエンティストがリアルタイムで大規模なベクトルデータを処理し、高度な類似性検索やパターンマッチングを実現できるようにしました。 Vector Databaseとは Vector Database(ベクトルデータベース)は、ベクトル検索に特化したデータベースの一種です。通常のデータベースは、主にテキストや数値などの構造化データを格納・検索するために使用されますが、ベクトルデータベースでは、ベクトル表現でデータを格納し、ベクトル間の距離や類似性を計算してデータを検索することができます。 ベクトルデータベースは、大規模なベクトルデータセットを効率的に管理し、高速な類似性検索を実現することを目的としています。ベクトルデータベースは、ベクトルのインデックス化や効率的なベクトル検索アルゴリズムの実装に特化しており、従来のデータベースとは異なる要件に対応しています。 ベクトルデータベースは、機械学習の分野で広く活用されています。例えば、画像やテキストの埋め込みベクトル、音声や動画の特徴ベクトル、ユーザーのプロファイルなど、様々なタイプのベクトルデータを格納し、類似性検索やパターンマッチングを行うことができます。ベクトルデータベースは、リアルタイムなアプリケーションやサービスにおいて、高速かつスケーラブルなベクトル検索を可能にするために使用されます。 使われる用語 Pineconeを使用する際に関連する専門用語を以下に説明します。 Pineconeを使ってみよう ではPineconeのサイトにアクセスしてSign Up Freeのボタンからアカウントを作成しましょう。データの使用料や期間により有料になります。 では、GoogleやGitHubのアカウントでサインアップすることができるのでこれらのアカウントを使ってログインしましょう。 ログインするとAPI Keyが与えられるので自分のプロジェクトに使えるようになります。 PythonでPineconeにアクセスする方法 Pineconeにアクセスするためには、Pinecone Pythonクライアントを使用します。以下は、Pinecone Pythonクライアントを使用してPineconeデータにアクセスする方法の一般的な手順です。 上記の手順は一般的なPineconeデータの操作方法の例です。具体的なデータの構造や要件に応じて、より詳細な設定や操作を行うことができます。

【Python】Flaskを始めよう

Flaskを始めよう

Flaskとは Flaskは、Pythonで開発された軽量なWebアプリケーションフレームワークです。Webアプリケーションの構築を容易にするために設計されており、シンプルさと柔軟性が特徴です。 Flaskは、HTTPリクエストを受け取り、レスポンスを返すためのルーティングやビューを定義することができます。また、テンプレートエンジンを使用して動的なコンテンツの生成や、データベースとの連携、セッション管理など、一般的なWebアプリケーション開発に必要な機能を提供します。 Flaskの特徴の一つは、軽量かつシンプルな設計です。これにより、開発者は必要な機能を選択し、カスタマイズすることが容易になります。また、Flaskは拡張性が高く、多くのサードパーティ製拡張モジュールが利用可能です。これにより、データベース処理、認証、API開発など、さまざまな機能を追加することができます。 Flaskは人気のあるWebフレームワークであり、小規模なプロトタイプや中規模なアプリケーションの開発に適しています。また、FlaskはPythonのエコシステムともシームレスに連携することができるため、Pythonの豊富なライブラリやツールを活用することができます。 総じて言えば、Flaskはシンプルさと柔軟性を重視したPythonのWebフレームワークであり、Webアプリケーションの開発を迅速かつ効率的に行うためのツールです。 Flaskのインストール Flaskを始めるためには、以下の手順に従ってインストールを行う必要があります。 macOS/Linux(Bashシェルを使用する場合): Flaskのインストール: 仮想環境をアクティベートした場合は、コマンドラインで以下のコマンドを実行してFlaskをインストールします: Flaskはデフォルトでローカルホスト(http://127.0.0.1:5000/)でアプリケーションを実行します。Webブラウザを開き、このURLにアクセスすると、”Hello, World!” と表示されるはずです。 これで、Flaskのインストールと初めてのアプリケーションの作成・実行が完了しました。 FlaskにHTMLを使ったテンプレートを作成する方法 Flaskでは、HTMLを使ったテンプレートを作成することができます。以下の手順に従って、FlaskでHTMLテンプレートを作成する方法を説明します。 これで、FlaskでHTMLテンプレートを作成し、動的なコンテンツを表示することができます。テンプレート内では、フローティング変数、条件分岐、ループなどの制御構造を使用して、より複雑なテンプレートを作成することも可能です。FlaskのテンプレートエンジンにはJinja2が使用されているため、Jinja2の文法と機能を学ぶことも有用です。 if __name__ == ‘__main__’: if __name__ == ‘__main__’: と app.run() の組み合わせは、Pythonスクリプトが直接実行される場合にのみ、Flaskアプリケーションを実行するための一般的なパターンです。以下に詳細を説明します。 Pythonのスクリプトファイル(.pyファイル)は、他のスクリプトやモジュールからインポートされることもありますが、また、直接実行されることもあります。 if __name__ == ‘__main__’: は、Pythonインタプリタが現在実行しているスクリプトがエントリーポイント(直接実行されるファイル)である場合に条件が真となります。一方、他のスクリプトからインポートされた場合は条件が偽となります。 app.run() は、Flaskアプリケーションを起動するためのメソッドです。FlaskがローカルのWebサーバーを立ち上げ、アプリケーションを実行します。通常、app.run() はFlaskアプリケーションを実行するために必要な一行のコードです。 組み合わせると、if __name__ == ‘__main__’: ブロック内に app.run() を配置することで、Pythonスクリプトが直接実行された場合にのみ、Flaskアプリケーションが実行されるようになります。他のスクリプトからインポートされた場合には、app.run() は実行されず、アプリケーション自体は起動されません。 このパターンは、Flaskアプリケーションを開発しているときに便利です。開発中に、他のスクリプトからアプリケーションをインポートしてテストしたり、モジュールとして再利用することができますが、同時にスクリプト単体として実行して動作を確認することもできます。 templatesに作成したindex.htmlにCSSとJavaScriptのファイルを追加する Flaskのテンプレート内にCSSファイルやJavaScriptファイルを追加するには、以下の手順に従ってください。 {{ url_for(…) }} は、Flaskのテンプレート内で静的ファイルのパスを生成するための特殊な構文です。これにより、正しいファイルパスが生成されます。 これで、index.htmlテンプレートにCSSファイルとJavaScriptファイルが追加されました。Flaskはこれらの静的ファイルを自動的に探し、リンクやスクリプトとして適切に読み込みます。Webブラウザでアプリケーションを実行すると、CSSが適用され、JavaScriptが実行されるはずです。

【OpenAI】ChatGPTのAPIキーの取得の仕方

ChatGDPのAPIキー取得の仕方

※ChatGPTで使用できるAPIは有料のサービスになります。クレジットカードを登録する必要があるので必要に応じて自己責任で進めてください。 ChatGPTとは ChatGPTは、OpenAIが開発した自然言語処理のモデルです。ChatGPTは、言語の理解や生成に関するタスクを行うことができ、対話型のコンテキストで人間のような会話を行うことができます。 ChatGPTは、GPT(Generative Pre-trained Transformer)というモデルのバリエーションです。GPTは、大規模なテキストデータセットを使用してトレーニングされたニューラルネットワークモデルであり、文章の言語モデリングや文章生成に非常に優れた性能を持っています。ChatGPTは、このGPTモデルを対話型の環境に適応させたものです。 ChatGPTは、ユーザーとの対話を通じて質問に答えたり、情報を提供したり、一般的な会話をしたりすることができます。ユーザーの入力に基づいて適切な応答を生成するため、コンテキストを理解し続けることができます。ただし、ChatGPTは、対話に関する事前の知識や特定のトピックの知識を持っているわけではありません。そのため、一部の質問や要求に対しては、正確な回答や適切な対応ができない場合もあります。 ChatGPTは、様々な用途に活用することができます。ユーザーサポート、情報提供、クリエイティブな文章生成、言語学習、エンターテイメントなど、多岐にわたる場面で利用されています。ただし、注意点として、ChatGPTは人工知能であり、完全な理解力や意識を持っているわけではないことを認識しておく必要があります。 日本でChatGPTを使用している会社 日本でもChatGPTを利用している会社はいくつかあります。以下にいくつかの例を挙げますが、これらはあくまで一部の例であり、他にも利用している会社は存在します。 これらの会社は、ChatGPTを使用して顧客サービスの向上や効率化を図ることを目的としています。ChatGPTを活用することで、自動化された対話システムを導入し、迅速かつパーソナライズされた対応を提供することが可能となります。 ChatGPTの使い方 ChatGPTを使うためには、以下の手順に従うことが一般的です。 以上が一般的なChatGPTの使い方の手順です。ただし、具体的な実装や利用方法は、選んだプラットフォームやツールによって異なる場合があります。 API KEYの取得 OpenAIのAPIキーを取得する手順は以下の通りです。 APIキーは機密情報ですので、他人と共有せず、安全な場所に保管してください。APIキーを持っていれば、OpenAIのAPIエンドポイントにアクセスしてChatGPTを利用することができます。

MongoDBで使われるmongooseのフレームワークを解説

Mongoose

Mongooseは、MongoDBを操作するためのNode.js用のオブジェクトモデリングツールです。Mongooseは、MongoDBのドキュメントベースのデータモデリングをより簡単に行うための機能やAPIを提供しています。 mongooseの機能 具体的に、Mongooseは以下のような機能があります: Mongooseを使用することで、MongoDBの操作をより簡潔で直感的なコードで行うことができます。また、データモデルの定義やバリデーションのルールの管理、データの関連付けなどの作業も容易になります。 mongooseの開発者 Mongooseはオープンソースのプロジェクトで、開発と管理はGitHub上で行われています。Mongooseのリポジトリは、https://github.com/Automattic/mongoose で公開されており、オープンソースコミュニティによって管理されています。 Mongooseの初期バージョンは、オープンソースコミュニティのメンバーであるAaron Heckmannによって作成されました。その後、Mongooseは多くのプログラマーによって開発とメンテナンスが行われています。現在、Mongooseの主な管理は、オープンソース企業Automatticの一部であるMongooseチームによって行われています。 mongooseと相性の良いフレームワークは MongooseはMongoDBとの連携に特化したライブラリであり、主にNode.jsのバックエンドで使用されます。そのため、Node.jsベースのフレームワークと相性が良いです。以下に、Mongooseと相性の良いいくつかのNode.jsフレームワークをいくつか紹介します。 これらのフレームワークは、Mongooseとの連携を容易にするための豊富なエコシステムと共に利用されることが多いです。ただし、Mongooseは純粋なJavaScriptのMongoDBドライバーとも組み合わせて使用することができるので、他のフレームワークでも利用することは可能です。 mongooseの短所は MongooseはMongoDBとの連携を容易にする強力なツールですが、いくつかの短所もあります。 これらの短所は、Mongooseが提供する便利な機能と比較して考える必要があります。プロジェクトの要件やデータモデリングの複雑さに応じて、Mongooseを選択するかどうかを検討することが重要です。 ※ORMとは: ORM(オブジェクトリレーショナルマッピング)は、オブジェクト指向プログラミングとリレーショナルデータベースの間のデータ変換を自動化するテクニックやツールです。データベースではテーブルや関係でデータを扱いますが、オブジェクト指向プログラミングではデータをオブジェクトとして表現します。ORMはこのデータモデル間のマッピングを行い、オブジェクトとデータベースの相互変換を容易にします。開発者はORMを使用することで、データベースの詳細な操作やSQLクエリの作成と実行について意識する必要がなくなり、オブジェクト指向の方法でデータベースを操作できます。 オーバーヘッドとは: オーバーヘッド(Overhead)とは、ある処理や操作を実行する際に付随する余分なコストや負荷のことを指します。具体的には、時間、メモリ、リソースなどの面での追加的な負荷や消費を意味します。 まとめ Mongooseは非常に強力なツールであり、MongoDBとのインタラクションを簡素化するための優れたORM(オブジェクトリレーショナルマッパー)です。 Mongooseを学ぶことで、データベースの操作やデータモデリングをより効率的に行うことができます。Mongooseの豊富な機能を活用し、データベースのスキーマ定義、データの作成・読み取り・更新・削除、クエリの作成などを学びましょう。 Mongooseを学び始める前に、MongoDBの基礎知識を身につけることをお勧めします。MongoDBのドキュメントやチュートリアルを参照し、コレクション、ドキュメント、クエリの基本的な概念を理解しましょう。 次に、Mongooseのドキュメントを読み、APIの使い方や概念を学びましょう。モデルの作成、スキーマの定義、バリデーション、フック、クエリの実行などについて理解を深めましょう。 最終的には実際のプロジェクトでMongooseを使用してみることをおすすめします。 では、お疲れ様でした。

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

Django-allauth

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

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

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

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

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

NuxtJSをUbuntu/PM2/Nginxでデプロイしよう

Nuxtをデプロイしよう

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。 先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。 ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。 準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、2つの方法があります。デフォルトはSSR:サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2(プロセスマネージャー2)はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS(今回はNuxtJS)のアプリが365日常に起動されるように監視してくれます。 では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM2が起動するアプリを確認できるので同じようにPM2をインストールしてもOKです。 ではNuxtのプロジェクトのルート直下にecosystem.config.jsを作成し、下記の行を追加します。nameの部分は自分のアプリ名に変更しましょう。 次に下記のコマンドでPM2を起動し、NUXTのアプリが登録されるか確認してください。 実際にサーバーにコードを上げてから同じコマンドを実行します。 リポジトリをクローン では、UbuntuサーバーにSSHで接続をしたあとに、GitHubのリポジトリからNuxtのプロジェクトをクローンしましょう。もしローカルから直接ファイルを上げたい場合はSFTPなどでアップロードしてください。私はSSHクライアントはいつもMobaXtermを使っています。 Nginxのファイルを作成 Nginxをインストールしてコンフィグファイルを作成します。初めての人は理解するまでに時間がかかるかもしれませんが、それぞれのコマンドが何を操作しているのか調べるようにしましょう。 ではnanoなどのテキストエディタでNginxのコンフィグファイルを書いていきます。ここでとても重要なことを説明します。 今回のデプロイはPM2というプロセスマネージャーを使います。これで、127.0.0.1:3000にNuxtのウェブサーバーを常時起動させます。 それをNginxを使ってプロキシサーバーとしてロカールのPM2のウェブサーバーに飛ばすような形になります。 順番でいうと。。。 では、早速nginxのコンフィグを書いていきます。良い慣習としてetx/nginx/sites/available/にサイト名でコンフィグファイルを作成して下記の行を追加します。 listenはポートになります。通常は80番ポートにしてください。もしユーザーが他のポートでアクセスする場合は普通は、URLの最後にポートが必要になります。例:sankou.com:84 server_nameがホストマシンのIPアドレスです。もしドメインを取得している場合は、代わりにここにドメインを記載します。 proxy_passがPM2のアプリが起動しているURLを記載します。デフォルトで:3000なのでそのままでOKです。 ではNginxのテストをします。 OKがでれば問題なしです。 ファイヤーウォール もし80番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。

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