複数のウェブサイトを一つのサーバーからデプロイする

複数のサイトを一つのサーバーからデプロイする方法

皆さん、こんにちは。 今日は今まで習ってきたウェブサイトのデプロイの仕方をちょっと工夫してみます。 特に、ドメインはいらないけど、複数のポートを開けておいて、各ポートに応じたウェブサイトがユーザーに届けられるようにしたい!という時を想定しています。 下記に、例を挙げます。 社内のアプリケーションで、複数のアプリケーションを同じサーバーからデプロイしたい。 プログラムのポートフォリオを同じサーバーにまとめておきたい。 しかし覚えておきたいのはIPアドレスでユーザーがアクセスできるという事は、HTTPSにできない。つまり、ユーザーとやり取りするデーターが暗号化できないので個人情報のあるフォーム等を使う事は絶対に避けましょう。 もし、ドメインを購入して、ドメインごとに対応したウェブサイトを同じサーバーからデプロイすることもできるので、その場合は別の記事を参考にしてください。 今日の目的 Ubuntuサーバーから2つのサイトをデプロイさせる。ユーザーはIPアドレスとポートを見てそれぞれのサイトにアクセスできるようにする。 今日の環境 Ubuntu 22.04 下準備 では、下記の記事にnginxのセットアップの仕方が記載されているので、まずはそちらを見てください。 この記事の通りに進めてIPアドレスでNginxのデフォルトのページが見れるところまで進めてください。 サーバーブロックの設定 ここも前回の記事を参考に一つ目のサイトとなるファイルを作成していきます。 詳しい説明は前回の記事を参考にしてください。 各ウェブアプリケーション事でサイトを作成します。まずは一つ目のサイトをasameshisoft.comと名前を付けてそのフォルダーを作成します。 (今回はドメインは購入しないのでIPアドレスで参照します。) ランディングページを作りましょう。 今回はテストだけなので適当にテキストを書いておきます。 nginx Nginxの指定したsites-enabledディレクトリにリンクさせます。 nginxのテストをします。sucessと出れば成功です。 Nginxのサービスをリスタートします。 これでポート80をリッスンするサイトが完成しました。 2つ目のサイトのポートを開ける 今回はポート80と81を使ってサイトを公開します。ポート81はまだ何もしていないのでこれから設定していきましょう。 2つ目のサイトを設定 先ほどと同じことを繰り返します。 ポートを81にして、サイト名(ただの名称)をasameshiapp.comにした場合です。 では2つのブラウザをオープンしてサーバーのIPとポートを指定してエンターします。 172.105.218.191:80 172.105.218.191:81 皆さんも自分のサーバーのIPで同じことを行い、それぞれのHTMLが返ってきたら成功です! ではお疲れさまでした。

SSHクライアントのMobaXtermでUbuntuサーバーに接続しよう。

MobaXtermの使い方

日本の皆さん、こんにちは。 前回はLinodeのサービスを使って月500円でUbutnuサーバーを作りましたね。 しかし、このサーバーに遠隔で入れなければこの先、何もできませんね。 そういうことで、今日は無料ソフトのMobaXtermを使ってこのサーバーに接続してみましょう! SSHとは SSHはScure Shellの略で、コマンドラインからサーバーに接続することができる技術のことです。 サーバー側はOpenSSHなどでSSH用のポートが空いていることが条件になります。 クライアント側(あなた、もしくはユーザー側)はSSHクライアントを使ってこのサーバーに接続することができます。 SSH接続はWindowsのコマンドプロンプトでもできますし、無料ソフトの有名なPuTTYでもOKです。 今日はとても使いやすいMobaXtermを紹介します。 今日の環境 遠隔で接続できるサーバー サーバーの接続情報(IP、ユーザー名、パスワード) クライアント側のPC(今回はwindows10) MobaXtermのダウンロード では、無料アプリのMobaXtermをダウンロードします。 https://mobaxterm.mobatek.net/download.html 次にダウンロードしたいバージョンを選びます。 Portable(ポータブル)とInstaller(インストーラー)のバージョンがありますが、インストールするほどの者でもないし、USBに入れて持ち歩きたいのでPortableの方(青)をダウンロードします。 ダウンロードされたら解凍し、使いやすいところに置いておきます。 では、実行ファイル(.exe)をクリックしてアプリを立ち上げましょう。 セッションを作成する では上にあるツールバーからSessionを選択し、接続情報を入力しましょう。 ちなみに、SFTP(ファイル転送)や、IPのPingアプリもあるのでこれは本当に便利ですね。 で、SSHをクリック。 Remote Hostが接続先になるのでIPアドレスを入れます。 Specify Usernameにチェックを入れてユーザーネームを入れます。 今回はrootになりますが、rootで接続するのは良い習慣ではないので接続したら、別のユーザーを作成して権限を変えることをお勧めします。(rootだと、分かりやすいし、最高の権限があるためです。) ポートは何も変更していない場合はデフォルトで22になります。 でOKを押します。 パスワードを聞かれるので、入力し、エンターを押します。 ここで覚えておきたいのがLinuxはパスワードを売ってもカーソルが動かないのでキーボードが壊れたかと思いがちですが、ちゃんと入力されているので、自身をもって打ち込んでください。 MobaXtermに接続情報を保管できるので保管したい人はYESを押してください。 繋がりました!! ここからコマンドラインを使ってサーバーのアプリを更新したり、ファイヤーウォールを設定したり、何でもできちゃいます。 とりあえずSSHクライアントを使ってUbuntuサーバーに接続できたので今日はここまで! お疲れ様です。 下に、前に作った動画もあるので是非チェックしてみてください。

レンタルサーバーの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クライアントを使って先ほど設定したパスワードで接続することができます。 お疲れまです。

UbuntuサーバーにNginxをインストールしよう

Install-nginx-on-Ubuntu

今日は前回作成した仮想マシンにインストールしたUbuntuサーバーにNginxをインストールしていきます。 仮想マシン(VirtualBox)にUbuntuサーバーをインストールする方法かこちらからどうぞ。 Nginxとは Nginx(エンジンエックス)はApacheと同じで、世界で最も使われているウェブサーバーのうちの一つです。 Ngnixは、軽量で、大規模なウェブサイトにも使えるエンタープライズレベルのアプリケーションになります。 今日の目的 この記事では、Ubuntuサーバー22.04にNginxをインストールして、ファイヤーウォールの設定、Nginxののプロセスを管理、そしてサーバーブロックを設定する方法を説明します。 準備しておくこと Ubuntuサーバーのある環境(今回はバージョン22.04) Ubutnuユーザーのログイン情報 必要に応じてドメインネームの取得 Nginxのインストール NginxはUbuntuのデフォルトのリポジトリで取得可能なためそこから簡単にインストールできます。今回はサーバーを設定したばかりなのでローカルパッケージをアップデートして最新のパッケージにアクセスできるようにしておきます。 Nginxの際にDo you want to continue?と聞かれるのでY(イエスの意味)を入力してエンターします。 ファイヤーウォールの設定 Nignixをテストする前にファイヤーウォールのソフトウェアを設定してNginxがサービスにアクセスできるようにします。 先ほどNginxをインストールした際にNginx自体がサービスとしてufw(Uncomplicated Firewall)に登録されています。 まずは、ufwに登録されているアプリケーションを一覧で見てみましょう。 アウトプットから見てわかるようにNginxから3つのプロフィールが作成されていることが分かります。 Nginx Full: ポート 80 (通常, 暗号化されていない)とポート 443 (TLS/SSL 暗号化されたトラフィック) Nginx HTTP: ポート80だけ Nginx HTTPS: ポート443だけ 今回はポート80しか使わないので下記のコマンドでポート80だけ開けておきます。もちろん、プロダクションの場合はHttps://を使うのでポート443を開けることになります。 このコマンドで、現在のステータスを確認しましょう。 もしStatusがinactiveとなっている場合はファイヤーフォールがアクティブになっていないのでこのコマンドでファイヤーオールを起動させます。 再度ステータスを確認するとアクティブになっていることが分かり、HTTPのファイヤーウォールも設定されていることが分かりますね。 ウェブサーバーの設定 Nginxをインストールした時点で、自動でウェブサーバーが起動して使える状態になっているはずです。 念のために確認しておきましょう。 アウトプットを見てわかるように、アクティブになっていることが分かります。 これでサーバーのIPアドレスにアクセスするとNginxのデフォルトのページが見れるはずです。 まずは、サーバーのIPアドレスを見つけましょう。 ifconfigのコマンドが使えない場合は、このコマンドでnet-toolをインストールしてくださいというメッセージが出ますね。インストールし再度ifconfigのコマンドを実行します。 もしVirtualBoxを使っている人は仮想マシンのSettingからNetworkにいき、Bridged Adapterになっていることを確認しましょう。 使用しているネットワークのインターフェースにもよりますが、enp0s3の方のinetが192.168.0.186になっていることが分かります。loの方はローカルの方なので関係ないです。 もしレンタルサーバーとかを使っている方はパブリックIPが分かるはずなのでそれを自身のブラウザに入力します。 これで、Nginxが正しく起動されていることが分かりました。 … Read more

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のパッケージマネージャー)も一緒にインストールされるのでご安心を。

VueでPiniaを使ってみよう

VueではState Management SystemのVuexが公式のプラグインとして紹介されてきました。しかし、最新のVue3ではPiniaを使うようにとVue生みの親のEvan Youさんもお勧めしています。

では、State Management(状態管理)って何でしょうか?

State Management(状態管理)

State Managementとはいわばストレージ/ストア(倉庫)のことです。アプリケーションでストアを作っておいてそこにデータを保管できるようになります。

例えばユーザーがログインしたときのトークン、APIでフェッチしたデータ、アプリケーションの状態(例:フォームが提出したとかの状態)があげられます。

PiniaのAPIの使い方

PiniaはVue2でもVue3でも使う事ができます。また、Options API(一般的に初心者向け)でもCompotion APIの書き方でもどちらでも対応しています。私の個人的な意見ではVue3でComspostion APIで書く方法が一番良いと思います。

なぜPiniaなのか

Piniaを使う事でこの状態管理システム(Store Library)を各コンポーネントやページのどこでも使う事ができます。

もちろん、同じことが export const state = reactive({}) でもできますよね。

しかし、このやり方だとセキュリティに脆弱性があり、何を管理しているのか見られてしまう可能性があります。

この他にもデベロッパー用のツールがあったり、サーバー側でもレンダーにも対応することができるなど色々メリットがあります。

Piniaをインストール

npmかyarnのコマンドでインストールしましょう。

yarn add pinia
# or with npm
npm install pinia

※NuxtJSの場合はこちらから

インストールが完了したらmain.jsにPiniaを追加します。

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

Piniaのファイルを作成しよう

ではPiniaが追加できたらJSファイルでストアしたいデータを保管できる場所を作っていきましょう。

慣習的にsrcディレクトリの直下にstoreというフォルダを作成してそこにJavaScriptファイルで下記のコードを作るのが一般的になります。

import { defineStore } from 'pinia'

export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCount: (state) => state.counter * 2
  },
  actions: {
    increment() {
      this.counter++
    }
  }
})
  • stateは保管するデータの初期値をリターンするファンクションです。(dataと同じ概念)
  • getters は stateを使ってデータをモディファイ(変更)したいときに使うファンクションです。(copmputedと同じ概念)
  • actionsはasyncにできるファンクションのことです。(methodと同じ概念)

<script setup>的なPiniaの使い方

他のサイトでは上記のやり方でPiniaを使っていますが、今年からVueで使えるようになった<script setup>を使ったやり方に合わせてPiniaも書きたい人は下のやり方をお勧めします。

import { defineStore } from 'pinia'
import { ref } from 'vue';
import EventService from "@/plugins/EventService";

export const useMemberStore = defineStore('member', ()=> {

  const data = ref(null)

  const getData = () => {
    EventService.getMember()
      .then((response) => {
        data.value = response.data;
      })
      .catch((error) => {
        console.log("data:" + error);
      });
  }

  return {
    data,
    getData
  }
})

上のコードを見ても分かるようにgetterとかactionsとかの概念はなく普通のJavaScriptのコードで<script setup>と同じようにVanilla JavaScriptに近い状態で書くこともできます。

個人的にはこちらの方が書きやすいと思ったので是非試してみてください。

ではこれをコンポーネントから読み込めるようにしましょう。

<script setup>

import { useOfficeStore } from "@/stores/members/office";

const officePinia = useOfficeStore();

const officeData = officePinia.data
</script>

このようにどのコンポーネントからでもStoreにアクセスでき、グローバルにデータを管理することで後から見やすくなりますね。

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にあるので見てください。