由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染

移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成。
现在记录一下部署中的过程。

注:部署时候过程中,参考了下:https://segmentfault.com/a/11...

一:搭建nginx+node+npm+pm2环境

我们的nginx版本是 1.12
node版本是v8.11.1
npm版本是5.6.0
pm2版本是2.10.2

具体环境安装,网上都有教程,就不在叙述,直接进入正文。

一:配置nginx代理监听3002端口,package打包时端口3002

在nuxt.js的项目下package.json里设置

在nginx的 vhost里新建一个主机绑定

upstream nodenuxt {
server 127.0.0.1:3002; #nuxt项目 监听端口
keepalive 64;
} server {
listen 80;
server_name mysite.com;
location / {
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Nginx-Proxy true;
proxy_cache_bypass $http_upgrade;
proxy_pass http://nodenuxt; #反向代理
}
}

二:项目在本地完成后,npm run build 打包应用
打包完成后,我们将

.nuxt
static
nuxt.config.js
package.json

传到服务器空间里, 需要上传文件如下

三:在服务器上部署运行

  1. 运行npm install 安装package里的依赖
  2. 运行npm start 就可以运行起来nuxt的服务渲染了

此时我们就可以在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了,但这并不理想,进程稳定性能否常驻后台?

四:pm2开启进程守护

进入对应的应用目录,执行以下命令

pm2 start npm --name "my-nuxt" -- run start

其中 my-nuxt的名称是 我们在package中的项目名称。
执行完pm2的启动命令后,我们用 pm2 list 查看一下进程列表,我截一下我个人服务器的pm2列表:

大功完成!!

nuxt.js部署vue应用到服务端过程的更多相关文章

  1. Vue.js与 ASP.NET Core 服务端渲染功能整合

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  2. JS提交对象数组到服务端的方法总结(C#实例)

    *转载请注明出处: 作者:willingtolove: 本文链接:http://www.cnblogs.com/willingtolove/p/4741549.html 正文: 1. 方法一:利用aj ...

  3. node.js中ws模块创建服务端和客户端,网页WebSocket客户端

    首先下载websocket模块,命令行输入 npm install ws 1.node.js中ws模块创建服务端 // 加载node上websocket模块 ws; var ws = require( ...

  4. js插件---WebUploader 如何接收服务端返回的数据

    js插件---WebUploader 如何接收服务端返回的数据 一.总结 一句话总结: uploadSuccess有两个参数,一个是file(上传的文件信息),一个是response(服务器返回的信息 ...

  5. Nuxt.js部署应用的方式

    Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署. 静态应用部署就不说了,主要说说服务端渲染应用部署. 官方部署方式 关于服务端渲染应用部署,官方文档是这么写的: 部 ...

  6. supermap iclient for js 标签专题图(服务端)

    <!DOCTYPE><html> <head> <meta http-equiv="Content-Type" content=" ...

  7. js页面(页面上无服务端控件,且页面不刷新)实现请求一般处理程序下载文件方法

    对于js页面来说,未使用服务端控件,点击下载按钮时不会触发服务端事件,且不会提交数据到服务端页面后台进行数据处理,所以要下载文件比较困难.且使用jQ的post来请求一般处理程序也不能实现文件的下载,根 ...

  8. jenkins+gitlab自动化编译部署方案探索及服务端编译webpack实战

    一. 背景 之前我们的开发流程为在本地进行webpack打包编译,然后svn提交源代码和编译后的代码.同时每次提交前也会从svn更新源代码和编译后的代码.这样做有几个缺点: 1. svn 更新和提交编 ...

  9. vue使用$http服务端收不到参数

    老夫子我正在憋方案书,听到身后传来细软的声音:“李哥,我这有个Bug调了很长时间了,您能帮我看一下吗?”.说这话的是我的好朋友,公司新来的前端小妹伊万卡.我起身向她走去,看到因长时间调试Bug漂亮的脸 ...

随机推荐

  1. FPGA 开发详细流程你了解吗?

    FPGA 的详细开发流程就是利用 EDA 开发工具对 FPGA 芯片进行开发的过程. FPGA 的详细开发流程如下所示,主要包括电路设计.设计输入.综合(优化).布局布线(实现与优化).编程配置五大步 ...

  2. 使用命令行创建maven web项目

    一,前言 遇到了一个非常简单的maven命令: 总的来说,这是一个用maven创建一个jersey快速开始项目的maven命令. 这次不妨使用maven命令来构建项目,看体验如何. 在文章idea m ...

  3. JSP自定义标签的使用简化版

    在jsp中 如果不想页面中出现java代码 这个时候就需要使用到jsp的自定义标签库技术了 自定义标签库 能够有效的减少jsp中java代码的出现 使其更加自然的像html页面一样 如果要使用jsp自 ...

  4. JAVA设计模式---单例模式篇

    单例模式(singleton):是JAVA中最简单的一种设计模式,属于创建型模式.所谓单例,就是整个程序有且仅有一个实例. 特点: 构造方法私有化 在本类中实例化一个对象作为本类的属性 对外提供一个访 ...

  5. JS 取整、取余

    一.取整 1. 取整 // 丢弃小数部分,保留整数部分 parseInt(7/2) // 3 2. 向上取整 // 向上取整,有小数就整数部分加1 Math.ceil(7/2) // 4 3. 向下取 ...

  6. Python3 学习笔记之 变量/字符串/if/while/逻辑运算符/模块引用

    变量/if/while/逻辑运算符/模块引用: 变量: 使用变量前必须先赋值. 大小写区分. Python创建字符串,在字符串两边可以加上单引号或者双引号. 打印单引号或双引号,使用转移\ 使用\进行 ...

  7. IDEA 学习笔记之 Maven项目开发

    Maven项目开发: 配置Maven: 新建Maven项目: 选择webapp: 和eclipse一样,设置: 修改maven配置,添加一个新属性,可以加快项目创建速度: 完成: 新建java和tes ...

  8. 服务器配置https协议,三种免费的方法

    最近想搞一个网站玩玩,发布网站用https协议已经是大势所趋了.例如微信小程序,不使用https协议根本不让接入.所以,分享一下我尝试过的三种方法. 1.Linux自签(OPENSSL生成SSL自签证 ...

  9. B-概率论-极大似然估计

    [TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...

  10. aapt dump报错dump failed because no AndroidManifest.xml found解决方式

    路径太长, 方法1:把apk放到短路径文件夹 方法2::先cd /D xxxx 再执行 aapt dump badging xxx.apk