Vultr在Ubuntu 18.04 LTS上设置Nuxt.js Web应用程序

Nuxt.js:通用框架

Nuxt.js是一个JavaScript框架,旨在快速创建通用Vue.js应用程序。最著名的是它具有创建可以在服务器和客户端上呈现的Vue.js应用程序的能力。在本教程中,我们将设置服务器渲染的Nuxt.js应用程序并将其部署在Ubuntu 18.04 LTS上。

安装Node.js

首先,您需要确保正在运行Ubuntu 18.04 LTS。然后,您需要安装Node.js(如果尚未安装)。在本教程中,我们将使用节点版本管理器或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-app,它是一个社区制作的工具,可以轻松创建Nuxt.js应用程序。

在您的主目录中,运行以下命令以开始生成应用程序。

npx create-nuxt-app <nameofproject>

控制台将提示您输入几个重要选项。在本教程中,我们将项目命名为“ app”。我们将使用Express作为我们的自定义服务器框架,并且我们将在通用模式下运行该应用程序,以确保我们将网站呈现在服务器上。指定所有必需的权限后,将开始安装过程,并创建所有配置文件。

初始开始

下载所有内容后,将目录更改为您刚创建的文件夹。

cd app

现在,我们可以启动Nuxt.js开发服务器。

npm run dev

此命令将使用webpack(一个模块捆绑程序)构建站点,并在localhost端口(通常为port)上为站点提供服务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进行运行的方式运行,除了现在我们在生产优化方面有更多的控制权。

现在,您已经拥有一个Nuxt.js应用程序构建,该应用程序已部署用于与Node.js和Ubuntu 18.04进行生产。如果您想了解有关Nuxt及其所有深入功能的信息,请随时访问其官方文档。

给TA打赏
共{{data.count}}人
人已打赏
前端问答

Type string trivially inferred from a string literal, remove type annotation (no-inferrable-types)

2020-12-15 15:47:01

VPS

Hostwinds VPS无理由退款政策你了解嘛?教你如何进行Hostwinds VPS退款

2020-10-27 23:35:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索