UbuntuサーバーのコードをGitHubにプッシュする方法

UbuntuサーバーからGitHubにプッシュ

GitHubにリポジトリを作成してコードを公開したい、もしくはプライベートで管理したいですよね。 今回はUbutnuサーバーでデプロイしているコードをコマンドラインからGitHubにアップロード(プッシュ)する方法をご紹介します。 これができるとちょっとしたコードの変更があった場合にGitHubにコマンドラインで更新できるのでバグ修正をすぐに行い公開することができちゃったりしますね。 でGitHubにあげたコードは自分のパソコンにクローンしてまた作業ができるようになります。 後からのGitでの更新作業を考えると、Git CloneでGitHubのリポを先にサーバー側にコピーしてあげるのが一番良いです。 今日の条件 ①Ubuntuサーバー(22.04)とSSHアクセス 他のOSでもよいですがコマンドが変わる可能性があります。 ②GitHubのアカウント 今回初めてGitとGitHubを使う人は下記の動画から基本を学んでみてください。 SSHが分からない人は下記の動画を見てください。 Gitをインストールする では、UbuntuサーバーにSSHで接続した状態にしてください。 で、ターゲットとなるディレクトリに移動して.gitファイルを作成します。 もし、GitHubからリポをクローンしている場合は飛ばしてください。 コミットができたのでRPGゲームでいうセーブが完了しました。 ではこのセーブデータをシェアするためにGitHubを接続します。 GitHubで使うSSHキーを作成する ではUbuntuサーバーでSSHキーを生成してGitHubにそのパブリックキーの方を渡すような流れになります。 SSHのフォルダーに移動します。 SSHキーを作成します。 ファイルの保管場所を聞かれるので問題がなければそのままエンター パスフレーズの聞かれるので必要に応じて秘密のパスワードを作成します。 なくても大丈夫です。その場合はただエンターを押して次に進みます。 これでid_rsaとid_rsa.pubの二つのキーができました。 では下記のコマンドでパブリックキーの方を閲覧します。 ではこれをコピーします。ターミナルでハイライトすると自動でクリップボードにコピーされますね。 GitHubでSSHのパブリックキーを登録 ではGitHubのサイトに行き、設定の画面を開きます。英語だとSettingsですね。 その中に、SSH and GPG Keysというオプションがあるのでそれをクリックします。 右上の緑のNew SSH Keyのボタンを押して先ほどコピーしたキーを貼り付けます。 タイトルは自分で管理するために使うので分かりやすいように説明を付けてあげてください。 Ubuntuサーバーからコードをプッシュする では、最初にコミットしたコードをGitHubにプッシュ(アップロード、更新)します。 ちゃんと.gitのある場所に戻りましょう。 GitHubのプッシュしたい先のSSHのURLをコピーします。 ではコードのプッシュ先を下記のコマンドで登録しておきます。 では下記のコマンドでGitHubにコミットしたコードをプッシュします。 ちなみにGitHubのブランチ名が何になっているか確認しましょう。 メインのリポにプッシュする場合はmainとかmasterになっているはずです。 もしブランチ名(枝名)をmainに変えたい場合はこのコマンドで。 レッツゴー! yesと入力し接続を完了させます。 トラブルシュート もし、GitHubの接続先にすでにリポが存在する場合はエラーが発生します。 もし、強制的にサーバー側からのコードでプッシュしたい場合は下記のfフラグで更新できるようになります。 GitHubのリポが更新されました。 お疲れ様です。

Gunicornってなに?

Gunicornって何

DjangoやFlaskなどのPythonアプリケーションをデプロイする際に使うGunicorn(ジーユニコーン)。 デプロイはできたけど、実際にどのような役目をしているのか分かりづらいですよね。 今日はGunicornについて紹介していきます。 Gunicornとは Gunicorn(Green Unicorn)は、PythonのWebアプリケーションサーバーであり、高速で拡張可能な環境でのWebアプリケーションのデプロイメントを容易にするために設計されています。 Gunicornは、WSGI(Web Server Gateway Interface)準拠のWebアプリケーションフレームワークと連携して動作します。WSGIは、PythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースです。つまり、GunicornはPythonのWebアプリケーションを受け入れ、HTTPリクエストを処理し、Webアプリケーションに渡す役割を果たします。 Gunicornの特徴的な特徴の一つは、マルチワーカーモデルを採用していることです。これにより、複数のプロセスを同時に実行し、複数のリクエストを同時に処理することができます。これにより、Webアプリケーションのパフォーマンスが向上し、ユーザーに迅速かつ効率的なレスポンスを提供することが可能になります。 さらに、Gunicornは拡張性に優れています。ワーカープロセスの数や接続数などのパラメーターを調整することで、サーバーの動作を調整することができます。また、NginxやApacheなどのリバースプロキシと組み合わせて使用することもできます。これにより、Gunicornは高トラフィックの環境でも優れたパフォーマンスを発揮することができます。 Gunicornはコマンドラインツールとして提供されており、比較的簡単にインストールして使用することができます。また、Pythonの仮想環境やDockerコンテナ内など、さまざまな環境で利用することができます。 要約すると、GunicornはPythonのWebアプリケーションを高速かつ拡張可能な方法でデプロイするためのサーバーソフトウェアです。マルチワーカーモデルと拡張性の高さが特徴であり、Webアプリケーションのパフォーマンス向上とスケーラビリティを実現します。 以下、さらに詳しく説明します。 Gunicornの定義 Gunicornの公式サイトに記載されているものを翻訳します。 Gunicorn もしくは緑のユニコーンとはPythoinのWSGI HTTPサーバーでUnixの為に作られました。これはPre-Forkワーカーモデルです。(※各ワーカーをアプリケーションごとに割り当てロードに必要なキャパシティ以上を割り当てる) Gunicornは様々なウェブフレームワークに対応し、簡単に実装でき、サーバーに負担のかからない、軽量なサーバーになります。 Gunicornができた経緯 Gunicorn(Green Unicorn)は、RubyのWebサーバーであるUnicornにインスパイアされて作られました。RubyのUnicornは、高パフォーマンスで信頼性の高いWebアプリケーションサーバーとして広く使用されていました。 Pythonのコミュニティでは、RubyのUnicornの成功とパフォーマンスの高さに触発され、同様の機能を持つPython用のWebサーバーが求められるようになりました。そこで、Python開発者のBenjamin PetersonがGunicornを開発しました。 Gunicornの開発は、2009年に始まりました。当初はワーカープロセスの管理やリクエストの処理など、基本的な機能の実装に焦点を当てていました。その後、GunicornはPythonのWSGI(Web Server Gateway Interface)仕様との互換性を持つように拡張され、Pythonの主要なWebフレームワークとシームレスに連携できるようになりました。 Gunicornは、PythonのWebアプリケーションサーバーとしての需要を満たすため、活発なオープンソースプロジェクトとして成長しました。開発者コミュニティの貢献により、Gunicornは安定性とパフォーマンスの向上が図られ、多くのユーザーによって利用されるようになりました。 また、Unixのアプローチとして、毎回アプリケーションのデプロイをするたびに下記の作業が必要でした。 以上の作業がアプリケーションのデプロイごとに必要になりとても時間がかかります。 それを解決するのがGunicornになります。 サーバーの仕組みを理解する Pythonのウェブアプリケーションのデプロイには下記の3つのスタックが必要になります。 ウェブサーバーはユーザーからのリクエストを受け、ドメインロジックとHTTPコネクションを担当します。ウェブサーバーは正しいリクエストだけを判別し、実際のDjangoアプリ等に渡してあげることが役目になります。 Django等のアプリケーションは各リクエストに対してリスポンスをすることしかできないことを理解しておきましょう。 ではアプリケーションサーバー(Gunicorn)の役目をこれから説明します。 Web Server Gateway Interface(WSGI)とは Web Server Gateway Interface(WSGI)は、PythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースです。WSGIは、PythonのWebアプリケーションフレームワークやWebサーバーの開発者が、相互に互換性のあるコンポーネントを作成するための共通のルールを提供します。 WSGIの主な目的は、WebアプリケーションフレームワークとWebサーバーを疎結合にすることです。これにより、異なるフレームワークやサーバーを組み合わせることができ、柔軟性と再利用性が向上します。WSGIを使用することで、Webアプリケーションの開発者は、特定のWebサーバーに依存しないアプリケーションを作成できます。 WSGIでは、2つの主要なコンポーネントが定義されています。 WSGIを使用する場合、Webサーバーとアプリケーションはお互いに疎結合であるため、異なる組み合わせが可能になります。これにより、異なるWebフレームワークを使用したり、Webサーバーを切り替えたりする際の柔軟性が向上します。 要約すると、WSGIはPythonのWebアプリケーションとWebサーバーの間の標準化されたインターフェースであり、疎結合性と柔軟性を提供します。WSGIによって、PythonのWebアプリケーションは異なるフレームワークやサーバーと組み合わせることができ、再利用性と相互運用性が向上します。 WSGIサーバーとしてのGunicorn Gunicornは複数のウェブサーバーと交信ができます。またGunicornはどのウェブサーバーを使っているかも気にしません。(例えばNginxとかApacheとか) GunciornはWSGIサーバーとしてウェブサーバーとコミュニケーションが取れることだけと条件としています。 GunicornはウェブサーバーとPythonアプリケーションの間に入り下記の問題を解決してくれます。なので自身で解決策を探す必要がありません。 Gunicornの代替オプション … Read more

Postgresのユーザーのパスワードを忘れた場合

PostgreSQL

サーバーで色々操作していてPostgresのデータベースで使うユーザーのパスワードを忘れた場合は下記の方法で新しいパスワードを再設定しなおしましょう。 今日の環境 Ubuntu22.04 PostgreSQL 14 今日の目的 Postgresの設定ファイルから仮でパスワードなしで接続できるようにします。 その後にコマンドから、新しいパスワードを設定しなおします。 最後にパスワードでデータベースに接続させるように再設定します。 ※作業にリスクがあると感じた場合はバックアップを取るなり自己責任で操作をしてください。 pg_hba.confを探す Postgrtesをインストールした後にpg_hba.confのコンフィグファイルも作成されます。ここでユーザーがどのようにデータベースに接続できるようにするか設定できます。 通常は下記のファイルパスにあります。 PostgreSQLのバージョンによりファイルの場所が少し変わるので注意します。 /etc/postgresql-9.1/pg_hba.conf /etc/postgresql/14/main/pg_hba.conf rootで入っている場合はpwdのコマンドでどこにいるか確認しましょう。 cd のコマンドとlsのコマンドを使いながらPostgresの場所を探します。 pg_hba.confを見つけました。 pg_hba.confのバックアップをとる では下記のコマンドでオリジナルのファイルをコピーしておきます。 ※パスワードをリセットしたらこっちに戻します。 ファイルがコピーで来たことを確認しました。 認証方法を変更する ではテキストエディタを使ってこのpg_hba.confを開きます。 もともとはこんな感じになっていますね。 これを下記のように変えます。 Ctl +X で抜け出し Yで上書き、エンターでファイル名をそのままにします。 Postgresのサーバーをリスタートする ではファイルを更新しただけではコンフィグを読み取ってくれないのでPostgresのサービスを再起動します。 postgresのユーザーで接続する ここでコンフィグをtrustにしたのでどのユーザーでもパスワードなしで接続できるようになりました。 ではpostgresのユーザーで接続してみます。 パスワードなしで入れました。 パスワードを更新する では更新したいユーザーのパスワードを下記のコマンドで更新します。 元のコンフィグファイルに戻す パスワードなしで誰でも接続できてしまうのは危険なので、元のファイルに戻します。 Postgresサーバーのリスタート 同じようにPostgresのシステムを再起動します。 これでpsqlのコマンドでパスワードが聞かれたらもとに戻っているという事ですね。 ではお疲れ様です。

レンタルサーバーのLinodeで月500円のサーバーを作ろう

Linodeサーバー

Linode(リノード)はアメリカで設立されレンタルサーバーを世界のさまざまな拠点に置き日本なら東京と大阪でサーバーを使うことができます。 Linodeは私も実際に使っており安く、安定性があり、サービスが良い、しかも使いやすいという神のような存在です。 今はそこまで大きな会社ではないですが、アメリカのDigitalOceanのように成長していくと感じています。 今Linodeを始めると$100ドル分のクレジットがもらえ月々の費用から差し引いてくれるので是非試してみてください。(60日間しかクレジットは有効ではありません。) もしこのリンクからアカウントを作成してもらえると私にも$25のクレジットがもらえるので是非よろしくお願いします。(土下座) Linodeを使ったプロジェクトのデプロイの記事もあるので是非どうぞ! Linodeでサーバーを作成する ではLinodeでアカウントを作成したらこのようなウェブポータルのページが表示されます。 ではCreateのボタンを押して、Linode(リノード)を作成しましょう。 Linodeはサーバーのマシンのことをイメージした名称になるようです。 ImageのドロップダウンからOSをお好きなものを選んでください。 今回は使用ユーザーとコミュニティが豊富なUbuntuを使用します。バージョンは最新の22.04を使用します。 場所は東京を選択します。(昔は大阪もあったと思ったんだけどなぁ。) 次に使用プランを選びます。 今回はShared CPU(シェア)の月額$5を使用します。 Linodeの良いところはマシンの拡張がとても簡単で、ボタン一つで専属CPUのマシンに変更できたり、容量を変更できたりします。 なのでまずは、しょぼいスペックから始めてどのようなものか様子を見てみます。 次に、Linode Labelにマシンの名称を付けます。これは管理者用なので自分で名前が分かればなんでもOKです。 日本語がだめだったので英語で打ち直しました。 次にRootのパスワードを設定します。 SSHで接続するときに使います。 もしSSHの意味が分からない人は別の動画で説明しているので是非ご覧ください。 であとは使わないと思うので無視してください。 もし、必要であれば月額$2のバックアップもあるので何かアプリケーションをデプロイしたいのであれば、これはあっても良いと思います。 で、問題がなければCreate Linodeのボタンを押してサーバーが作成されます! おめでとうございます。 これでサーバーが完成しました。 IPアドレスは172.105.218.191のようですね。 これはパブリックIPなのでSSHクライアントを使って先ほど設定したパスワードで接続することができます。 お疲れまです。

UbutnuサーバーをVirtualBoxにインストールしよう

皆さん、お疲れ様です。

今日は、Ubutnu ServerのISOファイルを使って、VirtualBoxにインストールする作業を説明します。

Ubutnu のデスクトップバージョンも同じやり方でできますし、他のLinuxも同じ方法なので是非試してみてください。

特にお金のかかるサーバーをレンタルする前のテストにはもってこいです!

今日の環境

  • Windows10(VirtualBoxのホストPC、OSで何でもOKです。)
  • ホストPCのメモリが8G以上(理想は16G以上)
  • VirtualBoxがインストールされた状態
  • UbutnuServer22.04

VirtualBoxってなに?

VirtualBoxはOracle社が提供している仮想マシンのアプリケーションのことです。MicrosoftではHyper-Vという同じような仮想マシンを提供しています。他に、有名なものではVMWareというものもあります。

動画ではVirtualBox(以下、略してVB)のインストールから説明しているのでご覧ください。

ISOファイルをダウンロード

Ubuntuの公式サイトからUbuntu ServerのISOファイルをダウンロードしておきます。

https://ubuntu.com/download/server

VBインスタンスを作成

Instanceは事例、という意味ですが、プログラマーの世界では、プロジェクトの意味合いに近いものになります。

では、早速Newのボタンを押して新しいインスタンス(プロジェクト)を作成します。これが各OSがインストールされる仮想マシンになるわけですね。

で、マシン名と、メモリのサイズを指定していきます。サーバーだけならデスクトップよりもメモリは食わないので4Gあれば足りるかな?私は8Gに設定しておきました。これは後から調整できるので色々試してください。

で、Createをクリック。

ファイルサイズを指定します。

使用目的にもよりますが、使うと思う分のハードディスクを割り当ててください。

Hard Disk File Typeは、仮想マシンのファイル端子のことです。他の人とシェアしないならどれでも構わないと思います。

私はVMDKを選びました、これならエキスポートした仮想マシンファイルをVirtualBox以外のアプリケーションにインポートすることができます。

Storage on physical hard diskはハードディスクの容量をどのように区切るかの設定です。

通常はDynamically allocatedでOKです。これは、指定した分を実際にハードディスクから削り取るのではなく、使った分だけダイナミックにホストPCから割り当てるという事になります。

これで問題なければCreateを押します。

ネットワークの設定

では、インスタンスがハイライトされた状態でSettingsを押して詳細を確認します。 

ネットワーク設定を見てみましょう。

もし同じLANネットワークで使用したいのであればBrige Networkを使用しましょう。

その場合は、ホストPCが192.168.1.5とかなら、192168.5.16などの同じネットワークのIPが割り当てられます。

NATの場合はちょっと複雑になります。私の場合はとりあえずこのままでOKにしておきます。

インストールするOSを指定

ではStartボタンからマシンを起動しましょう。

そうするとスタートアップに使用するででディスクを指定してくださいというメッセージが出ます。

フォルダのアイコンをクリックしましょう。

Addを押します。

では、ダウンロードしておいたUbuntuサーバーのISOファイルを指定します。

Chooseを押します。

ではStartを押してマシンを起動しましょう。

Ubuntuサーバーのインストール

ではインストールが始まるので言語選択の画面になるまで待ちます。

日本語がないので英語で進めていきます。私はプログラミングは全部英語で行っています。皆さんも同じ習慣をつけることをお勧めします。

ではEnglishがハイライトされた状態でエンターを押します。

キーボードの設定をします。

キーボードのタブボタンを使って上下にスクロールします。スクロールアップの場合はシフトを押しながらタブになります。LayoutをJapanese、VariantをJapaneseにしましょう。

完了したらDoneを選択します。

特にハードディスクに制限がない場合は通常版のサーバーをインストールしましょう。

minimizedバージョン(軽量版)をインストールしても後から変更できるのでどっちでもOKです。

選択したらDoneをクリックします。

ネットワークの設定をします。

これも後から変更できるのでそのままにしてDoneにしましょう。

次のプロキシアドレスの設定も後から行うのでそのままdoneにします。

これもそのままDoneでOKです。

ストレージはヴァーチャルボックスで割り当てた分をUbuntuサーバーで使用できるようになっているのでデフォルトのまま次に進みましょう。

では全体のサマリーをみて問題がなさそうならdoneを押します。

そうすると確認のメッセージが出るのでContinueを選択しエンター。

Ubutnuのユーザーを作成します。

これはログインの際に使います。

こんな感じで適当に入力できたらDoneを押します。

次にオープンSSHサーバーをインストールするか聞かれます。

もしSSHの意味が分からない人は下記に説明の動画があるので見てみてください。

要約すると、ホスト側(ユーザー側)のPCのコマンドライン(シェル、コマンドプロンプト、ターミナル)からサーバー側のマシンにアクセスするためのツールになります。

これは必須の知識なので是非、練習してみましょう。

ですので、タブとエンターキーを使ってInstall Open SSHServerにチェックを入れてDoneを選択します。

次に他にインストールしたいアプリケーションがあれば選択してください。

個人的にnextcloudのファイル管理アプリが楽しそうだと思いました。

とりあえず今回はスキップするのでそのままDoneを選択します。

インストールが始まります。

インストールが完了したら下のオプションからReboot Nowを選択してマシンを再起動します。

バーチャルボックス側ではインストール用のISOファイルは外れると思いますが、一応それを確認して、サーバーが起動できることを確認します。

サーバーを再起動

サーバーを再起動すると先ほど設定したパスワードを聞かれます。

パスワードの部分は打っても何も動かないですが、入力されています。

ログイン情報を入力したらエンターを押します。

これでログインができました!

とりあえずUbuntu Serverがインストールできたので今日はこれでおしまいにします。

この後はサーバーの更新、初期設定をしたり、SSHで接続してWebサーバーを設定していきたいと思います。

良かったら他の記事も参考にしてください。

ではお疲れ様です。

DB BrowserでSQLiteのデータベースを作ろう

SQLiteの使い方

日本のプログラマーの皆さんこんにちは。今日はDB Browserを使ってSQLiteのデータベースを管理していく方法を紹介します。 エクセルのような感覚で始められるのでリレーショナルデータベースを使ったことがない人には得にお勧めです。 SQLiteってなに? SQLiteは下記のような長所があります。 オープンソースです。(ソースコードが一般に公開されています。) データベースの一種です。(MySQLとかPostgreSQLとかと同じ) ポータブルです。(OSに依存せず、DBファイルにそのままアクセスすることができます。) SQLiteの欠点はこのようなものがあります。 DBサーバー無しで使えるのでネットワークからアクセスできない。 大規模なアプリケーションには向いていない。 データサイズに制限がある。 本日の環境 Windows10(MacOSでも、Linuxでも問題ありません。) 本日の目的 今日も目的はSQLiteのデータベースがどのような仕組みで作れるのか見ていくことが目的になります。慣れてきたら、次回以降はSQL(クエリ)を書いてデータベースを操作できるようにしたいですね。 SQLite DB Browserをダウンロード では、SQLiteのデータベースの作業をするために下記の公式リンクからSQLite Browserをダウンロードしましょう。 https://sqlitebrowser.org/dl/ では、ダウンロードページに行ったらWindowsのポータブル版をダウンロードしましょう。 windowsにインストールしちゃいたい人は64bitのインストーラーをダウンロードしてもOKです。MacOCの人はMacの方からダウンロードしてください。 DBBrowserを展開 ではダウンロードした.exeファイルをダブルクリックしてファイルを展開しましょう。 Nextをクリックします。 ポータブル版のファイルをおきたいファイルパス(場所)を指定します。これだとダウンロードに展開されることになります。 では、Instalをクリック。 Finishをクリックで完了です。 SQLiteDatabaseBrowserを実行 では先ほど展開したファイルを開くと.exe実行ファイルがあるのでそれをクリックしてアプリを起動します。 データベースを作成 では、NewDatabaseのボタンを押してデータベースを作成します。 それからデータベース名を決めて、Saveします。名前は後から変更できるのでご心配なく。 Addをクリックしてカラム(Column)を追加します。 まずは、テーブル名をInventoryとかにしておきましょう。 今回は在庫管理業務で使えそうなデータベースを作ってみましょう。 では下記のようにカラムを追加していきましょう。 Nameはカラムの名前です。クエリで指定する際に使います。 Typeはデータのタイプになります。Textは文字のデータです。(数字を入れると文字データの数字として扱われます。プログラミングを学習する際に習いますね。) INTEGERは整数のことになります。 その横にあるチェックボックスを説明します。 NN NotNull(Null=データがないことを許さないという事です。) PK プライマリーキー(他のデータと被らない行を区別するためのキーです。) AI auto increment (自動で数字が足されていくことです。) U ユニーク(PKと同じですが、PKはテーブルに1つしか設定できないことに対しUは複数設定可能です。 では、今回設定した内容を説明します。 idはプライマリーキーでそれぞれのデータの行を区別するために設定しておきます。またAIにチェックが入っているので新しいデータが作成されるたびに数が1,2と増えていくようになります。 最後にadded_date(追加日)のDefault(デフォルト)の部分に下記のテキストを追加します。 CURRENT_TIMESTAMP デフォルトで初期値を設定することができます。もし何もインプットがない場合にデフォルトの値を記録することになります。 この場合は現在の日時を自動で入力するように指示したことになります。 では右下のOKボタンを押してDB(データベース)が作成されました。 … Read more

Windowsに正しくPythonをインストールする方法

WindowsにPythonを正しくインストールする方法

今日はWindowsにPythonを正しくインストールする方法を説明します。 Windowsには複数のバージョンのPythonをインストールすることができます。しかし、Windowsの環境変数にどのバージョンのPythonをどの名称で使うようにするか教えてあげないといけないのがかなり面倒になることがあります。この理由から、MacやLinuxを使いやすいと言っている人もいるくらいです。 しかし!一度やり方を覚えてしまえばよいので是非試してください。 Pythonをダウンロードする 下記のPythonの公式リンクからPythonをダウンロードしてください。 もしリンクが怪しいと思った人は自分で検索してpython.orgのサイトからダウンロードしましょう。本題とはそれますがインターネットの脅威を避ける癖はとても重要になります。 https://www.python.org/downloads/ このPythonの公式サイトにいったら、最新のバージョンをダウンロードしましょう。 ちなみにPythonのバージョン2とバージョン3ではシンタックスが違ってきます。つまり、Python2で書かれたコードをPython3で実行するとエラーになることがあるという事です。 Python2は2020年にサポートが終了しているので理由がない限りインストールする必要はありません。 Pythonインストーラーを実行する ではダウンロードしたPythonインストーラーをダブルクリックしてインストールを進めていきましょう。 重要!!!!! ここで注意してほしいのが”PythonをPATHに登録する”のチェックボックスをクリックしておく必要があることです。 チェックしてください。 これをチェックしないとコマンドプロンプトでpythonのコマンドが使えません。 後から登録することができますが、ちょっと面倒です。 これができたら、Install Nowのボタンからインストールしていきます。 この場合だとWindowsユーザーのProgramsにPythonが保存されるようになります。 管理者の権限を聞かれるのでOKを押してください。 インストールが開始されます。 これでインストールが完了しました。 では、コマンドプロンプトを開いてPythonが使えるか確認してみましょう。 私の場合は英語ですが、これを開きましょう。 ではインストールされたPythonのバージョンが正しいか見てみましょう。 コマンドプロンプトに下記のコマンドを書いてエンターを押します。 私の場合はPythonの3.10.7をインストールしたのに3.10.0が表示されました。 これはすでにPython3.10.0が環境変数に登録されているからです。 もし、今回が初めてのインストールの場合は問題はないと思います。 ちなみにPythonで使うPIP(Pythonのパッケージマネージャー)も一緒にインストールされるのでご安心を。

Viteで@/componentsのショートカットが使えない問題

ViteでVueのアプリを作成してコンポーネントをインポートしようとすると何か気づいたことはありませんか?

そうです。Vue CLIで作った際に使えていた@/~のショートカットが使えないです!

なので、毎回コンポーネントをインポートする際にこのように、かなり面倒になってきます。

import Component from '../../../../components/Component.vue'

//本来ならこうしたい。。。
import Component from '@/components/Component.vue'

Viteで@を使えるようにする方法

これはWebPackでついてきたショートカットを再現することで同じように@が使えるようになります。

では、Viteのコンフィグファイルを作成して、コードを書いていきます。

Viteのコンフィグファイルの書き方

Viteのコンフィグはvite.config.jsの名称でプロジェクトのルート(アプリの一番上の階層)にファイルを作成することでできます。

これで、Viteが読み込む際にこのコンフィグファイルも自動で読み込んでくれます。

import { fileURLToPath, URL } from "url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

あとはいつも通りにコンポーネント側で@を使ってコンポーネントをインポートできるようになります。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3 + Vite" />
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

Vue UIライブラリのPrimeVueを使ってみよう

PrimeVueはVue3に対応したUIライブラリで無料で使えます。

公式サイトはこちらです。

この会社名はPrimeFacesといい11名のスタッフで構成されるトルコ(Turkey)の会社です。

会社の利益はテンプレートとライセンス費用で賄っているようです。

PrimeVueの良いところ

コンポーネントの数が半端ではない!!

なんと90+以上のcomponentがバンドルに含まれています。

また、デザインのスッキリしていて洗練されているのでそのまま使っても気持ちが良いです。

PrimeVueをインストールしよう

ではコマンドラインからPrimeVueをインストールします。

VueアプリケーションはViteで作成しました。(なのでWebPackは入ってません。)

#バージョンを指定したい場合
npm install primevue@^3.15.0 --save

#最新のものをインストールする場合
npm install primevue

#コンポーネントで使うアイコンのインストール
npm install primeicons --save

下記のようにpackage.jsonを見ると、インストールしたprimevueとprimeiconsが記載されデペンデンスィー:dependencies(依存されたモジュール)に追加されたことが分かります。

{
  "name": "crm-app",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "primeicons": "^5.0.0",
    "primevue": "^3.15.0",
    "vue": "^3.2.25",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "vite": "^2.9.9"
  }
}

main.jsにprimeVueを追加

次にmain.jsにPrimeVueを追加してアプリがマウントする際にこのライブラリを読み込ませるようにしましょう。

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';

const app = createApp(App);

app.use(PrimeVue);
app.mount("#app");

グローバルにコンポーネントを登録

PrimeVueのcomponentをグローバルで使用したい場合は下記のように設定します。

まずは、main.jsに使いたいコンポーネントを登録します。

例で例えるとButtonになります。それからapp.componentメソッドでテンプレートで使いたい名称とインポートするコンポーネント名を指定します。

import { createApp } from 'vue'
import App from './App.vue'
import PrimeVue from 'primevue/config';

import Button from 'primevue/button';

const app = createApp(App);

app.use(PrimeVue);
app.component('Button', Button );
app.mount("#app");

この後に例えばApp.vueで下記のように<Button/>をテンプレートに記載するだけで使えるようになります。

<template>
 <Button label="Disabled" disabled="disabled" />
  <Button label="Submit" icon="pi pi-check" iconPos="right" />
</template>

コンポーネントにインポートする場合

では、グローバルではなく、それぞれのcomponentにPrimeVueのコンポーネントをインポートしたい場合は下記のようにします。

例でいうと、子コンポーネントのHwlloWorld.vueに使いたいPrimeVueのコンポーネントをインポートします。

<script setup>
import Calendar from 'primevue/calendar';
</script>

<template>
  <Calendar v-model="value" />
</template>

CSSをインポートする

ここで気が付いたかもしれませんが、スタイルが入っていませんね。

では、CSS、アイコン、それとテーマをインポートしましょう。

これをmain.jsに追加してください。

import 'primevue/resources/primevue.min.css'
import 'primeicons/primeicons.css'
import 'primevue/resources/themes/luna-blue/theme.css'

ちなみにテーマはluna-blueでインポートしてますが実際には下記のように無料で使えるテーマがあるので色々試してみてください。

primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/tailwind-light/theme.css
primevue/resources/themes/fluent-light/theme.css
primevue/resources/themes/lara-light-indigo/theme.css
primevue/resources/themes/lara-dark-indigo/theme.css
primevue/resources/themes/lara-light-purple/theme.css
primevue/resources/themes/lara-dark-purple/theme.css
primevue/resources/themes/lara-light-blue/theme.css
primevue/resources/themes/lara-dark-blue/theme.css
primevue/resources/themes/lara-light-teal/theme.css
primevue/resources/themes/lara-dark-teal/theme.css
primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-orange/theme.css
primevue/resources/themes/saga-purple/theme.css
primevue/resources/themes/vela-blue/theme.css
primevue/resources/themes/vela-green/theme.css
primevue/resources/themes/vela-orange/theme.css
primevue/resources/themes/vela-purple/theme.css
primevue/resources/themes/arya-blue/theme.css
primevue/resources/themes/arya-green/theme.css
primevue/resources/themes/arya-orange/theme.css
primevue/resources/themes/arya-purple/theme.css
primevue/resources/themes/nova/theme.css
primevue/resources/themes/nova-alt/theme.css
primevue/resources/themes/nova-accent/theme.css
primevue/resources/themes/nova-vue/theme.css
primevue/resources/themes/luna-amber/theme.css
primevue/resources/themes/luna-blue/theme.css
primevue/resources/themes/luna-green/theme.css
primevue/resources/themes/luna-pink/theme.css
primevue/resources/themes/rhea/theme.css

これで下記のようにスタイルが追加されましたね。

では、半端ない数のコンポーネントを楽しんでください。

今日使ったコードはGitHubにあるので見てください。

[Vue入門] asyncコンポーネント

基本的な使い方

大規模なアプリケーションでは、アプリを小さなチャンクに分割し、必要なときにのみサーバーからコンポーネントを読み込む必要があるかもしれません。これを実現するために、Vue には defineAsyncComponent 関数があります:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...サーバーからコンポーネントを読み込む
    resolve(/* 読み込まれたコンポーネント */)
  })
})
// ... `AsyncComp` を普通のコンポーネントと同じように使用する

このように、defineAsyncComponent は Promise を返すローダー関数を受け取ります。Promise の resolve コールバックは、コンポーネントの定義をサーバーから取得したときに呼ばれます。読み込みが失敗したことを示すために、reject(reason) を呼ぶこともできます。

ES モジュールの動的インポート も Promise を返すためにほとんどの場合には defineAsyncComponent と合わせて使用します。Vite や webpack などのバンドラーもこの構文をサポートしているため、の Vue SFC をインポートするためにも使用できます。

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

結果的に得られる AsyncComp は、実際にページ上にレンダリングされるときにローダー関数を呼ぶだけのラッパーコンポーネントです。さらに、内側のコンポーネントに任意の props を渡せるため、非同期ラッパーを使用すると、コンポーネントをシームレスに置換するとともに、遅延読み込みも実現できます。

ローディングとエラーの状態

非同期の操作は必然的にローディングとエラーの状態に関係してきます。そのため、defineAsyncComponent() ではこれらの状態のハンドリングを高度なオプションによりサポートしています。

const AsyncComp = defineAsyncComponent({
  // ローダー関数
  loader: () => import('./Foo.vue'),

  // 非同期コンポーネントの読み込み中に使用するコンポーネント
  loadingComponent: LoadingComponent,
  // ローディングコンポーネント表示前の遅延。デフォルト: 200ms。
  delay: 200,

  // 読み込みに失敗した場合に使用するコンポーネント
  errorComponent: ErrorComponent,
  // エラーコンポーネントは timeout が与えられて
  // その時間を超えた場合に表示される。デフォルト: Infinity。  
  timeout: 3000
})

ローディングコンポーネントが与えられた場合、内側のコンポーネントが読み込まれている間に表示されます。ローディングコンポーネントが表示されるまでに、デフォルトで 200ms の遅延があります。このようになっているのは、高速なネットワークではローディング状態が短く、置き換えが速すぎて、ちらつきのように見えてしまう恐れがあるためです。

エラーコンポーネントが与えられた場合、ローダー関数から返された Promise が reject されたときに表示されます。リクエストが長すぎる場合にエラーコンポーネントを表示するために、timeout を指定することもできます。

Suspense とともに使用する

非同期コンポーネントは、ビルトインコンポーネント <Suspense> とともに使用することもできます。