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番ポート以外で設定した場合はポートを開けておくようにしましょう。 デプロイの確認 これでサイトのデプロイができました。 一応、このような感じになりました。 お疲れ様です。

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

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

今日は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のやり方で書けるので見やすいと思いました。 イメージとしてはこのような感じになります。 お疲れ様です。

Nuxt3にPrimeVueをインストールする方法

Nuxt3にPrimeVueをインストールする方法

PrimeVueはVue.jsのUIライブラリでコンポーネントの数が多くお勧めです。今日は、SSR(サーバーサイドレンダリング)ができるVueベースのNuxtライブラリにPrimeVueを使う方法を紹介していきます。 Nuxtのプロジェクト まずは下記のコマンドでNuxt3のプロジェクトを作りましょう。 PrimeVueのインストール 次にPrimeVueをインストールします。 コンフィグファイルからインポート では、ライブラリをインストールしたところで、nuxt.config.tsファイルを開きます。 デフォルトでは何も記載されていません。 ではここにPrimeVueで使うファイルをインポートしていきます。インポートするファイルはPrimeVueの公式ページにあるので必要に応じて確認してください。 Nuxtのプラグインについて Nuxtではpluginsというフォルダーを認識して自動でVueアプリを作成する際にサーバー側でレンダーするかクライアント側でレンダーするか指定することができます。 フォルダーの構成はこのようにできます。 では公式ドキュメンテーションに従い、ファイルをインポートしていきます。 プロジェクトのルート直下にpluginsというフォルダーを作成して、primevue-plugin.jsファイルを作成しましょう。 例としてボタンのコンポーネントを使いたい場合はここで登録しておきます。Vueアプリのmain.jsと似たような感じですね。 ripple:trueはボタンなどで使われるアニメーションのことでデフォルトではfalseになっているので必要に応じて上記のようにtrueに設定してください。 コンポーネントの作成 では、PrimeVueのコンポーネントが登録できたところで、実際にNuxtでボタンを作ってみましょう。 pages/index.vueファイルを作成してデフォルトのランディングページを作成します。 詳しいページの作り方はこちらを参考にしましょう。 これで、テストサーバーを再起動するとPrimeVueのコンポーネントをFlexがちゃんとロードされていることがわかりましたね。 ではお疲れさまでした。

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

Nuxt.js使い方

前回の記事では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を始めよう

NuxtJSを始めよう

Reactを使っている人なら聞いたことはあるNext.js。そのVueバージョンがNuxt.jsです。Nuxt.jsはVue.jsをベースに作られたJavaScriptフレームワークです。サーバーサイドレンダリングが可能なので、より早く、SEO対策ができるウェブアプリの開発が可能になります。今日はNuxt.jsのバージョン3について解説していきます。 Nuxt.jsの強み Nuxt.jsの弱み また、ソースコードはGitHubのリポを確認してください。 Nuxt.jsを始める Nuxtのインストレーションガイドは公式サイトを参考にしました。コマンドでプロジェクトを作成していきます。バージョン3をインストールします。(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のコンポーネントは削除しなくて良いです。 これでデフォルトのページがホットリロードされましたね。 お疲れ様でした。