海外サーバーvultr

Ubuntu 18.04 LTSでNuxt.js Webアプリケーションを設定する

Nuxt.js:ユニバーサルフレームワーク

Nuxt.jsは、普遍的なVue.jsアプリケーションを素早く作成するために設計されたJavaScriptフレームワークです。サーバーだけでなくクライアントにもレンダリングできるVue.jsアプリを作成できることで最も有名です。このチュートリアルでは、サーバーレンダリングのNuxt.jsアプリケーションをセットアップし、それをUbuntu 18.04 LTSにデプロイします。

Node.jsのインストール

まず、Ubuntu 18.04 LTSを実行していることを確認する必要があります。その後、Node.jsをインストールする必要があります(まだインストールされていない場合)。このチュートリアルでは、このプロセスをより簡単にするために、Node Version Manager(NVM)を利用します。

次のコマンドを使ってNVMをインストールします。

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

足場アプリケーション

Node.jsをインストールしたら、NPMを使用して必要なパッケージの設定に進むことができます。create-nuxt-appNuxt.jsアプリケーションを簡単に作成できるコミュニティメイドのツールと呼ばれる便利な小さなツールを使用します。

ホームディレクトリで、次のコマンドを実行してアプリの生成を開始します。

npx create-nuxt-app <nameofproject>

コンソールにいくつかの重要なオプションの入力を求められます。このチュートリアルでは、プロジェクトを ” app” と名付けます。Expressをカスタムサーバーフレームワークとして使用し、アプリケーションをユニバーサルモードで実行します。これにより、Webサイトがサーバー上に表示されるようになります。必要な権限をすべて指定すると、インストールプロセスが始まり、すべての設定ファイルが作成されます。

初回起動

すべてがダウンロードされたら、作成したフォルダにディレクトリを変更します。

cd app

これでNuxt.js開発サーバーを起動することができます。

npm run dev

このコマンドは、モジュールバンドラーであるwebpackを使用してサイトを構築し、通常はportになるlocalhostポートでサイトを提供します3000。また、ホットリロードモジュールにアクセスできるため、ファイルを変更するたびにアプリケーションを再起動する必要がなくなります。アプリはユニバーサルモードで実行されているので、アプリはクライアントとサーバーの両方でコンパイルされます。これであなたのアプリケーションはport上で実行されます3000

生産用ビル

開発モードは、アプリケーションを積極的に開発しているときに非常に役立ちます。ただし、アプリケーションを公開する準備が整ったら、ホットリロードや開発者ツールなどのアドオンはそれほど重要ではなくなります。これが、プロダクション環境用にアプリケーションを一度構築したい理由です。ありがたいことに、Nuxt.jsには、本番用にアプリのモジュールをすばやく構築するために使用できるツールが含まれています。以下を実行してプロダクションビルドプロセスを開始します。

npm run build

基本的に、ここで行っているのは、生産用に最適化した状態で、すべてのWebpackモジュールをコンパイルしているということです。

ビルドが完了したら、本番用にサイトを実行することができます。

npm start

これで、ナビゲートするhttp://yourip:3000と、Nuxt.jsのスプラッシュ画面が表示されます。これは、プロダクションモードで実行していることを示しています。

PM2:アプリケーションを簡単に管理する

これで、本番用にアプリケーションを実行するための基本を理解できました。実稼働環境の観点からは、アプリケーションを永遠に実行し続け、必要に応じてアプリケーションを自動再起動し、アプリケーションのリソースを監視するための良い方法をお勧めします。そこで、Process Manager 2(PM2)が登場します。PM2はプロダクションアプリケーション用のNode.jsプロセスマネージャです。ロードバランシング、高度なログ、起動スクリプトなど、多くの重要なプロダクションツールが含まれています。まず、PM2をインストールしてください。

npm install pm2 -g

これはPM2をグローバルにインストールするので、サーバー上のどこでもそれを使用することができます。PM2のダウンロードが完了したら、アプリケーションを起動できます。

pm2 start <appfolder>/server/index.js

アプリケーションルートの内側にあるサーバーファイルを起動していることに注意してください。

アプリケーションが消費しているリソースを確認したい場合は、pm2 monitコマンドを使用して確認できます。これにより、ncursesのインターフェースと同様のインターフェースが表示され、そこでアプリケーションのRAM、CPU、およびディスク使用量に関するデータを正確に収集できます。

これまでのところ、npmで実行したときと同じようにアプリケーションが実行されるようになりました。ただし、本番環境の最適化に関しては、より多くの制御ができるようになりました。

これで、Node.jsとUbuntu 18.04を使用してプロダクション用にデプロイされたNuxt.jsアプリケーションビルドができました。Nuxtについて、さらに詳しくはNuxtの詳細について知りたい場合は、気軽に公式文書をご覧ください。