nuxt.jsexpress模板项目服务器部署

阿弥陀佛呵呵哒      2022-02-12     445

关键词:

 nuxt版本:0.10.6

技术栈:nuxt.js, express, pm2

部署环境:windows server

之前用nuxt.js 的express的模板项目在windows下用nginx进行代理访问,其实有点多余,直接用host文件就可以达到相同的效果,仅供娱乐吧,熟悉一下nginx的基本配置也是好的,其实这段时间研究nuxt.js比较多,主要还是想提高客户端访问首页更快一点。

之前使用nuxt.js generate直接生成对应的html静态文件,这个不需要服务器安装什么特殊的环境。

以iis为例,直接把dist文件夹下生成的文件丢到对应的目录就可以了,其他的也是一样拷贝目录文件,这种方式是客户端访问最快的方式,但是生成html静态文件的过程可能有点痛苦,服务器数据有变化的时候要及时地更新对应的静态html文件,比如要跑一些增量更新数据的服务,数据更新这一块的复杂度就上去了。(后续再补充一下nuxt.js 用generate命令生成静态html的范例)

对于后端数据变化比较频繁且及时性要求高的应用来说,需要生成静态html文件很多的情况下,循环生成的方式难以满足要求,以下是一个nuxt.js在服务端世界挂在node.js的环境运行的方式。

生成模板项目

vue init nuxt/express mynuxtexpress

拷贝mynuxtexpress目录下的文件夹到服务器上,例如我拷贝到D:\nuxt目录下

服务器上需要安装node.js,安装好后,cmd打开D:\nuxt目录,更新依赖包

npm install

编译

npm run build

运行

npm run start

浏览器输入http://localhost:3000就可以正常访问了,但是在服务器上如果关掉了cmd命令行窗口,服务就自动停止了

这里介绍一个管理node.js应用进程的管理器pm2,安装也很简单

npm install -g pm2

然后使用pm2启动应用

pm2 start ./build/main.js

启动成功后

基本到这里环境就差不多了,nuxt.js源代码如果不想放在服务器上,可以删除除了.nuxt, build, node_modules文件夹和package.json文件的其他文件和文件夹,但是每次发布build和.nuxt两个文件夹和package.json文件需要进行更新,如有依赖包更新,直接运行更新依赖包命令就可以了

另外默认的服务是host在127.0.0.1本机上,在部分服务器上,如云服务器使用虚拟ip的服务器上,localhost和127.0.0.1都可以访问,但是使用内网的ip无法访问,这也直接导致了服务器外网即使端口开启了,也没有办法访问站点,需要更改server/index.js的host配置,去掉host参数

然后重新编译运行,发布就可以了。

 nuxt.js还在发展阶段,很期待即将到来的1.0的版本,其实现在线上的项目已经开始使用了,如果觉得不错,那么试一试吧,用得人多了,发展也就更快了!

react项目模板-从项目搭建到部署(代码片段)

技术选型参考范围大致三种:AngularJS,Angular,React。这里可能会有些困惑,AngularJS和Angular不是一个东西吗?没错,它们是一个东西,但也不是一个东西。好了,废话少说,首先说明一下AngularJS和Angular的区别。引用官方文档中的... 查看详情

bootstrap模板怎么部署到自己的服务器上?

我有一个阿里云服务器已经建了一个网站了,最近想用bootstrap来再做一个网站,想先在服务器上多建一个虚拟主机,我是个小白,以前用的wordpress比较简单,上传上去后安装就可以了,但bootstrap完全搜索不到具体的步骤,直接把... 查看详情

ssis2012项目部署模型

...型。使用项目部署模型可以将项目部署到IntegrationServices服务器,使用包部署模型可以将单独的包部署到IntegrationServices服务器。关于部署SSIS2012支持两种部署模型:项目部署模型和包部署模型。使用项目部署模型可以将项目部署... 查看详情

自动化运维:如何零停机构建与部署项目

...让您在此过程中通过终端用户完全更新网站。请确保在您服务器上安装SSH,因为我们需要使用SSH运行一些命令以修改部署。新建项目在此,我们将使用一个静态​​React​​网站作为演示,您可以从:​​GitHub存储仓上获取示例... 查看详情

在 ARM 模板部署中引用托管服务标识

】在ARM模板部署中引用托管服务标识【英文标题】:ReferencingaManagedServiceIdentityinARM-templatedeploy【发布时间】:2018-02-2622:00:42【问题描述】:使用新的MSI功能部署Microsoft.Web资源时,已创建用户的principalIdGUID在部署后可见。下面的... 查看详情

用于部署和禁用 Azure 流分析服务的 ARM 模板

】用于部署和禁用Azure流分析服务的ARM模板【英文标题】:ARMtemplatefordeployinganddisablingAzureStreamAnalyticsService【发布时间】:2021-06-0207:08:28【问题描述】:我们可以通过ARM模板在禁用模式下部署流分析作业吗?【问题讨论】:【参... 查看详情

Node App 在 Heroku Local 上运行,但在 Heroku 服务器上崩溃。使用简单的 Foundation 模板项目

】NodeApp在HerokuLocal上运行,但在Heroku服务器上崩溃。使用简单的Foundation模板项目【英文标题】:NodeAppworksonHerokuLocalbutcrashesonHerokuserver.usingsimpleFoundationtemplateproject【发布时间】:2019-11-1705:19:50【问题描述】:我正在尝试在Heroku上... 查看详情

javaweb项目部署

服务器镜像:windowsserver2016建ftp站点用来传输文件安装MySQL安装Tomcatmaven打包项目部署项目到服务器Tomcat项目地址 查看详情

项目部署流程(代码片段)

项目部署http://blog.51cto.com/ljmict项目部署流程:买服务器,服务器租用选择操作系统的版本,安装系统在开发环境中把项目需要的pip包写到一个文件pipfreeze.requirements.txt把项目上传到服务器部署项目,安装需要的环境pyhton3解释器... 查看详情

django2021年最新版教程30django项目部署到华为云(nginxuwsgimysql方式)(代码片段)

http://c.biancheng.net/view/8256.html该web站点主要由Ubuntu18.04系统、python3.9.5、Django3.2.3框架、MySQL5.7数据库nginx服务器搭建1. 部署架构Django应用部署模板架构如下图:uWSGI用于连接Web服务器(Nginx)和Python应用程序(Django 查看详情

如何将javaweb项目部署到服务器上

...Windows还是Linux)上的部署已经了然于心了,那么对于在云服务器上部署JavaWeb项目又是如何操作的呢?其实很简单,还是离不开Web项目部署的那三点:①基础的JDK环境②一个Web服务器。如Tomcat、JBoss③一款数据库。如:mysql 对于... 查看详情

如何部署一个vue项目?

...用webstorm作为编辑器,它具有Vue和其他框架的所有预安装模板,使用Vue进行开发非常有趣。无论如何,当我决定在Heroku上部署应用程序时,它不起作用。当我在本地机器上运行该项目时,它工作正常,但是当我在Heroku上部署时,... 查看详情

请教bootstrap的模板怎么部署到自己的服务器上?

我有一个阿里云服务器已经部署了一个网站,想再建一个虚拟主机增加一个网站,但是网上也搜不到怎么把模板部署到服务器上的教程,像wordpress这样的工具上传后进行安装就可以,我试着把模板文件上传到了对应的虚拟主机文... 查看详情

无法使用已装载存储的 Linux 部署 Azure 应用服务的 ARM 模板

】无法使用已装载存储的Linux部署Azure应用服务的ARM模板【英文标题】:CannotdeployARMtemplateofAzureAppServicewithLinuxthathasmountedstorage【发布时间】:2021-11-0823:53:54【问题描述】:我们正在尝试部署AzureLinux应用服务,该服务也已挂载存储... 查看详情

部署 jquery 或 javascript 前端项目

...3:06:56【问题描述】:我在管理面板项目中使用adminlte管理模板。adminlte是使用jquery、javascript和bootstrap开发的。我开发了一个前端和后端层分开的项目,这意味着我的前端项目只是jquery和javascript,后端是 查看详情

在vsphereclient使用模板部署虚拟机系统硬盘空间扩展

...的软件和其他属性。 一、连接ESXi或者vSphere Server服务器1、打开VMware vSphere Client客户端,输入VMware 查看详情

将 JHipster 项目部署到 tomcat 服务器

】将JHipster项目部署到tomcat服务器【英文标题】:DeployingJHipsterProjectintotomcatserver【发布时间】:2021-11-1612:57:09【问题描述】:我有3个SpringBootJHipster微服务项目,目前正在部署到openshift。现在,我想将我的JHipster微服务项目部署到... 查看详情

一个tomcat下部署多个项目或一个服务器部署多个tomcat

最近需要把两个项目同时部署到服务器上,于是研究了一下,页借鉴了很多别人的方法,把过程记录下来,以儆效尤。目录:1,一个tomcat下同时部署两个项目(多个项目可以参考)1.1项目都放在webapps内(共用一个端口)1)把两... 查看详情