中級者向け Archives - Page 4 of 7

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

2024/01/222023/01/26 by Dan

前回の記事では、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

自作のnpmパッケージを公開しよう

2024/01/222023/01/19 by Dan

npmはNode Package Manager（ノードパッケージマネージャー）の略で、コマンドラインからJavaScriptのライブラリを簡単にインストール、管理できるアプリケーションです。 ReactもVueもAxiosもすべて、このnpmのライブラリに登録されているパッケージになります。今日は、自作したnpmパッケージを一般に公開する方法を紹介します。npmを使ったことがない人は先にこちらの動画を見ておいてください。なぜパッケージを自作すべきかプログラマーのツールの大多数は無料で使えます。Reactも、Linuxもソースコードを公開してオープンソースとして社会に貢献しています。もし、アイディアがあれば、オープンソースのプログラムを公開することはサイドプロジェクトとして最適です。また、通常、下記の行からライブラリをインポートしますが、実際にその中身がどうなっていることを知ることはとても重要になります。 GitHubのリポジトリを作成まずはGitHubとGitを準備しましょう。使ったことがない人はこちらの動画でGitのインストールの仕方と、GitHubの使い方を説明しています。GitとGitHubはなくてもできないことはないですが、バージョンコントロールと、リポジトリの管理はプログラマーにとって必須のスキルですので是非覚えておきましょう。この作業は後からでもできますが、リポジトリが決まっている場合は先に作っておきます。では、GitHubに行き、リポジトリを作成します。ここで作成（Create Repository）をクリックするとGitをinit（イニシャライズ）できるコマンドがあるのでそれらをコピペしていきます。ではコマンドラインから上記のラインを一行ずつコピペしていきましょう。 git push でrefsのエラーが出た場合はセキュリティ対策としてSSHキーが登録されていないと使用できないものになります。詳しいSSHキーの登録の仕方はこちらの記事を参照してください。 npmパッケージのイニシャライズでは、git initを行ったディレクトリ内にいることを確認して、npmパッケージのイニシャライズを行います。npmがインストールされていることを確認し下記のコマンドを実行していきましょう。すべてを入力するとおなじみのpackage.jsonが作成されました。途中で聞かれたエントリーポイントがnpmパッケージのメインのJavaScriptのファイルになります。早速、index.jsを作成していきます。もしファイル名を変更したい場合は、package.jsonの中にある”main”の対象先を編集してください。では、index.jsにサンプルとして、下記の行を書いてみます。ストリングが一致するとtrueを返す関数です。 npm link npmのパッケージができたら、コマンドラインからnpm linkのコマンドを使い{prefix}/lib/node_modules/<package>の場所にリンクさせます。シンボリックリンクといいますが、これで、npmパッケージがインストールされたかのようになり毎回ビルドをすることなくテストを行うことができます。 npmパッケージのテストでは、npm linkを行ったら、適当な場所にフォルダを作成して、テストを行います。コマンドラインで、テストディレクトリに移動して、先ほどのasameshiパッケージのリンクをインストールします。コマンドを実行するとnpmのnode_modulesディレクトリが作成され先ほど作成したasameshiパッケージがインポートされました。ではコマンドラインからJavaScriptファイルを実行します。画像のようにtrueが返ってきました。これでパッケージが問題なく作動していることが確認できましたね。 npmアカウントの作成 npmのパッケージを公開するためにはアカウントが必要になります。無料でできるので作っておきましょう。ではnpmの公式サイトからSign Upをクリックします。では、下記の様にアカウント情報を入力していきます。これでnpmのアカウントが作成できました！ npmのアカウントをローカルの環境に接続では下記のコマンドでローカルのnpmにユーザーを追加します。ではEmailでワンタイムパスワードを確認してnpmにユーザーを追加しましょう。ちなみに登録したEmailは一般に公開されるので要注意！ npmパッケージの公開ではnpmにユーザーを追加したところで、下記のコマンドでnpmのパッケージを公開しましょう。これで下記の様にエラーがでなければ成功です。ちなみに、パッケージ名がすでに取られている場合はエラーが出るので、ユニークなものにしてください。公開したnpmを確認では公式サイトからasameshiのパッケージを確認しましょう。 https://www.npmjs.com/package/asameshi … Read more

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

2024/01/222023/01/18 by Dan

今日はNuxtで試しに作ってみたフロントエンドロードマップのウェブアプリをUbuntuサーバーからデプロイします。先にVueのデプロイの記事を読んでnginxを使ったサーバーを構築しておきましょう。ちなみにAWS、Heroku, Digital Oceanなどのサーバーを使う場合は今日のようにプロキシサーバーを設定せずにデプロイできる方法があるそうなので見ておいてください。しかし、今日のNginxの設定はとても良い練習になるのでどのサーバーでも活用してみてください。準備すること Nuxtビルドのチョイス Nuxtアプリをデプロイするにあたり、２つの方法があります。デフォルトはSSR：サーバーサイドレンダリングされる方法で設定されています。もう一つのnpm run generateのコマンドでstaticの静的サイトとしてビルドしたい場合はNuxtのコンフィグに下記のラインを追加しましょう。静的サイトの場合は普通のHTMLファイルのようにそのままデプロイできるのでプロキシサーバーの設定も不要です。 nuxt.config.ts 今回はSSRで行います。このような場合はNodeサーバーを使うためPM2でNodeのウェブサーバーを常時起動できるようにしておきます。詳しいPM2の説明は後ほど。 PM2 PM2（プロセスマネージャー２）はビルドインでロードバランスの機能がついているアプリケーションになります。このPM2がNodeJS（今回はNuxtJS）のアプリが365日常に起動されるように監視してくれます。では、PM2をサーバーにインストールしましょう。もしローカルでLinuxで作業をしている場合は、PM２が起動するアプリを確認できるので同じように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番ポート以外で設定した場合はポートを開けておくようにしましょう。デプロイの確認これでサイトのデプロイができました。一応、このような感じになりました。お疲れ様です。

NuxtにPiniaをインストールする方法

2024/01/222023/01/12 by Dan

今日はNuxtJSのウェブアプリのプロジェクトに状態管理システムのPiniaをインストールする方法を紹介します。 VueでPiniaを使ったことがある人、Nuxtのコンフィグファイルを触ったことがある人はなんとなくイメージがつかめると思います。 Piniaのインストール Nuxtのプロジェクトが設定できたところで、Piniaの公式サイトの説明に従いインストールを進めていきましょう。コマンドラインから下記の通りPiniaをインストールします。 npmを使っている人はERESOLVE unable to resolve dependency tree errorというエラーが出るかもしれません。その場合は、package.json:に下記の行を追加して、再度試してみて下さい。次に、NuxtのコンフィグファイルにPiniaを登録します。 setup()の外でPiniaを使う場合 Vueの書き方で<script setup>があります。その外でPiniaを使いたい場合はpiniaオブジェクトをuseStore()に渡してあげるようにしましょう。慣習としてプロジェクトのルート直下にstoresディレクトリを作成してPiniaのファイルを格納するようにするようにします。 Piniaファイルを作成ではsotesディレクトリ直下にJSファイルでPiniaを作成します。<script setup>に近い方法で書く方法を紹介しているので参考にしてください。この方法だとJavaScriptのやり方で書けるので見やすいと思いました。イメージとしてはこのような感じになります。お疲れ様です。

Nuxt.jsを始めよう：ページを追加する

2024/01/222023/01/05 by Dan

前回の記事ではNuxt.jsのセットアップの仕方を説明しました。今日はNuxtを使ってページの追加の仕方、ラウティング（URLの設定）の仕方を説明します。Vueで構築したことがある人は、Nuxtのアプローチの仕方に関心されること間違いなしです。ユニークなレイアウトとroutingの設定方法に驚かされました。 pagesディレクトリ Nuxt.jsのルートディレクトリ（src）と同じ階層にpagesというフォルダを作成してみましょう。その中に例としてabout.vueのファイルを作成します。そうするとNuxtがこのフォルダを読み込みURLのrouting（ラウティング）をしてくれるようになります。テスト用のウェブサーバーを起動してみてください。まるで魔法の様です。しかし、これを読み込んでくれるおかげで、もともとあったapp.vueに変更が必要になります。ではapp.vueを削除して、pagesの直下にindex.vueを作成してください。このファイルがドメインの読み込み時に表示されるランディングページとして表示されるようになります。URLでいうと”/”です。へえ。おもしろいですね。では、URLをもっと複雑に設定したい場合は、pagesディレクトリにさらにフォルダーを作成してその中にvueファイルを作成してみます。 URL/products/index.vueはURL/productsのビューになり、URL/products/item.vueはURL/products/itemのビューになりました。とても直感的です。 routerのパラメーター以前にVue－RouterでURLパラメーターを設定できることを説明しました。URLにダイナミックなデータが入力されたときにそのURLのパラメーターを取得する方法です。例でいうとproducts/1やproducts/2などこの数字がユニークな商品のIDになることがあげられます。このvueファイルは[id].vueの用に作成できます。ファイル名の[]内にダイナミックにしたい名称を入れます。これをuseRoute().paramsで呼び出してあげればOKです。これでダイナミックなURLが完成できましたね。 NuxtLink しかし、このままではユーザーがURLに直接名称を入力しないといけないという非現実的な作業が発生してしまいます。ですのでナビゲーションバーを作成していきます。 NuxtLinkは自動的にインポートされるのでわざわざ<script>からインポートする必要がありません。例としてトップページのpages/inedx.vueに下記の様にNuxtLinkを記載してみましょう。ここで理解しておきたいのが<a>タグを使わないのでVueと同じようにSPAと同じように他のURLにアクセスができます。つまりページがリフレッシュされないのでユーザーエクスペリエンスが向上するということです。レイアウトこのままだとすべてのページにナビゲーションバーを設置しないといけないことになりますね。そこでレイアウトを設定していくことにします。レイアウトはVueでおなじみの<slot/>で解決していきます。ではプロジェクトのルートにlayoutsという名称でフォルダーを作成します。その中にdefault.vueを作成しましょう。 Nuxtが自動でlayouts/default.vueのファイルを監視して、<slot/>内にpageのビューを表示してくれるようになります。カスタムレイアウトでは、ページによってレイアウトが変わる場合はどうすればよいのでしょうか？その場合はlayoutsディレクトリ直下に別のレイアウトとなるvueファイルを作成して対応することができます。例として、アイテムの詳細ページのレイアウトをlayouts/products.vueに作成します。名前は何でも良いです。参考例として内容を下記の様にしてナビゲーションをフッターに移動しました。では、このレイアウトを指定したビューに使えるようにするにはどうすれば良いでしょうか？この場合は、レイアウトを変えたいページのvueファイルに行きdefinePagemeta()を使用します。参考例として、products/index.vueとproducts/[id].vueに下記のmetaを追加しましょう。 products/index.vue products/[id].vue これで、プロダクトページのレイアウトが変わったことが理解できましたね。今日はNuxt.jsでページの使い方、レイアウトの使い方を学びました。お疲れ様でした。

Nuxt.jsを始めよう

2024/01/222023/01/05 by Dan

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン３について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱みまた、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン３をインストールします。（Node.jsがインストールされていることが前提です。）ではライブラリがインストールされたところでデベロップメント用のサーバーを起動します。これで初期のNuxtのセットアップが完了しました。ファイル構成 nuxt.config.ts nuxt.config.tsはNuxtのコンフィグで使用するファイルでTypeScriptで構成されています。JavaScriptファイルの方が良い場合は.jsに変更することも可能です。このファイルでモジュールの登録やカスタムメタデータの登録をすることができます。また、ここにAPIキーなどのEnvironment Variable（環境変数）を登録することもできます。 app.vue デフォルトのルートコンポーネントになります。デフォルトでは、NuxtWelcomeのコンポーネントがマウントされるようになっていますが、これらのファイルはモジュールに埋め込まれています。Vueの場合はHelloWorldが通常のディレクトリに置かれているのでいちいち削除する必要がありましたがNuxtの場合は無視して削除する必要はありません。npm i でまたインストールされてしまうので。 .nuxt 開発の際にNuxt側で使われるディレクトリです。そのまま放っておいてください。 package.json おなじみのパッケージが一覧で記載されたコンフィグファイルです。npm i で記載されているライブラリがインストールされますね。 Welcomeページを削除ではapp.vueにあるNuxtWelcomeを適当に入れ替えてみます。先ほども記載しましたがWelcomeNuxtのコンポーネントは削除しなくて良いです。これでデフォルトのページがホットリロードされましたね。お疲れ様でした。

JSひろば開発7日目：Vueアプリのデプロイとデザイン

2024/01/222022/12/29 by Dan

JSひろばアプリもほぼ完成に近づいていきました。今日は最終的にvue-routerを入れて、URLで指定したコードのIDをコンソールに貼り付けできるようにします。これで、これからJSのチュートリアルを作成する際にリンクを貼り付けて、そこからサンプリコードを実行できるようにすることが目的です。今後はユーザーがコードを登録できたり、シェアできるようにできたら楽しいなと思います。オープンソースなので皆さんでカスタマイズして試してください。作業日 2022年12月28日作業にかけた時間 6時間合計作業時間 30時間作業内容モジュールインポートエラーの対応favアイコンの作成英語版に対応させるDBモデルの改修Google Analyrticsの追加ローディング画面の設定Vue-routerの追加モジュールインポートエラーの対応 Vueアプリをnpm run buildのコマンドでプロダクション用にコンパイルするとデプロイしようとすると下記のエラーが出ました。調べてみると、npmでインストールしたハイライトのプラグインのCSSをインポートしていることが原因の様でした。rollupでモジュール内のCSSをエクスターナルのファイルとして特例で設定しないといけないようです。 vite.config.jsで下記の様にbuildの部分を追加して再度npm run buildを実行したところ、問題が解決できました。 favアイコンの作成 Adobeのイラストレーターでブックマークに使われるアイコンを作りました。SVGで作成したのでデスクトップのブックマークでも画像がぼやけないようにしました。英語版に対応させる日本語だけだとユーザーが限られるので英語版に対応したアプリにさせます。このようにToggle（トグル）させるボタンをつくりRefでisJapaneseがtrueかfalseかを判定させるようにしました。このデータはPiniaに保管されグローバルにアクセスできるようにしています。 DBモデルの改修では英語版に対応したデータがないのでDjangoのモデルを追加します。英語用のフィールドと難易度をチョイスで追加しました。 Google Analyticsの追加 Google Analyticsを追加しました。特に説明する必要はないと思いますが、headタグ内に用意されたscriptを配置しただけでOKです。　難易度のフィルター次にコマンドの例を初級、中級、上級に分けてソートする機能を付けました。ボタンが順番に表示されるようになり、それに合わせてデータがフィルターされます。 Vue-Routerの追加最後に、データベースから引っ張ってきたコードはIDでURLの最後にくっつけます。これでブログとかでコードを指定して表示させたい場合は、URLでそのまま引用できるようになります。で、検索されたコマンドがペーストされた後に、URLにIDを飛ばしました。 URLを監視する Vue-Routerを使う一番の理由である、URLから目的のコードをコピペされた状態にするということを達成するために、watchEffect()を使いました。これでアプリのイニシャライゼーション（初期読込）の時とURLが変わったときにフェッチしたデータをコンソールにペーストできるようになりました。とりあえず完成とします。あとは、Django側でデータを入れて、JSの記事に使えるか試してみます。お疲れ様です。

JSひろば開発６日目：Vueアプリのデプロイとデザイン

2024/01/222022/12/22 by Dan

前回までの記事では、Djangoをデプロイし実際のドメインからアクセスできるところまで行いました。今日の作業ではバックエンドのDjangoアプリで作成したAPIのエンドポイントとVueのウェブアプリから実際にAPIのリクエストを送りバックエンドからデータをもらえるようにします。あとデザインをキレイにしましょう。作業日 2022年12月16日作業にかけた時間 8時間合計作業時間 24時間作業内容 Djangoに実際のデータを入力VueアプリにAxiosをインストールAPIコールのリスポンスをPiniaに保管実行ボタンの作成アニメーションの設定highlight.jsを設定ではDjangoのアドミンページから実際のデータを入力してAPIのエンドポイントから取得できるようにします。 VueアプリにAxiosをインストール次に、EventService.jsというAPI関連のコールをまとめた別ファイルを作成しました。次にPiniaのファイルにAPIコールのファンクションを保管しておきPiniaが読み込まれたらデータをフェッチするようにします。どこでこのファンクションと発火させるかは後から変更するかもしれません。ここで、APIのGETリクエストを送ると予定通りにCORSポリシーでDjangoからブロックされてしまいました。詳しい対応方法はDjango REST API COR Headersの使い方の記事を参照してください。ではこの記事通りにいったんDjangoのアプリを更新してまた戻ってきましょう。あと、Vue側のアプリケーションのindex.htmlのheadタグ内に下記のmetaを追加しました。 Vueアプリの検証ではAPIの問題が解決したところでこのPrimeVueのターミナルで問題発生。。このUIだと改行ができないことが発覚しました。まあターミナルなのでそうでしょうが。なのでPrimeVueのTextAreaのコンポーネントと入れ替えました。 Vueアプリのデプロイ Vueアプリのデプロイはこの記事を参考にして行いました。これもLet’s EncryptとCertbotを使ってHTTPSからアクセスできるようにしました。とりあえず、Vueアプリがデプロイできるようになりました。後はUIの調整と細かい設定をして完了です！アニメーションで使ったCSSはこちらの記事に書いています。Animistaというサイトです。 highlight.jsの追加このままだと、テキストエディタのように色でハイライトされないので見づらいですね。highlight.jsをインストールしてみます。ここで入力したときと同時に1文字ずつでJavaScriptのキーワードかを判定してハイライトするようにしたかったのですが、うまくいきませんでした。テキストエリアをハイライトさせるのが難しそうでしたので諦めました。しかし、他の方法でコマンドを実行したときにコードがハイライトされるようにできたので良しとします！もし、単純にダイナミックでないコードをハイライトしたいのであればVueのコンポーネントで使えるHighlight.jsのプラグインもあるので試してください。とりあえず今日はここまで！

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

2024/01/222022/12/16 by Dan

前回までは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のセットアップに少し苦難し、２時間余計に時間がかかってしまいました。特に、DNSを使ったSSL証明のチャレンジ、HTTPからHTTPSへのリダイレクトなど初めての作業だったのでとても良い経験になりました。

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

2024/01/222022/12/15 by Dan

前回までは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