服务端渲染应用部署应该先编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

  我们已经在pakage.json里配置好script命令

{
"scripts": {
  "dev": "nuxt",
  "build": "nuxt build",
  "start": "nuxt start",
  "generate": "nuxt generate"
 },
}

  即先用npm run build编译打包,然后用npm run start发布项目,如果在本地http://localhost:3000  依然可以启动项目,说明打包是ok的

  这时我们只需要在本地npm run build打包后,会在.nuxt生成一些新的文件,我们把.nuxt 、nuxt.config.js、pakage.json 、static四个文件/文件夹放到服务器上,然后安装依赖:npm install

  最后用pm2来启动项目

  pm2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的。在服务器shell中,先安装pm2,安装后pm2 list查看进程列表,如果说pm2未找到,需要设置下环境变量

  安装pm2,直接全局安装 (pm2 官网地址:http://pm2.keymetrics.io )

npm install -g pm2

  pm2安装ok后,进入nuxt项目目录,执行

pm2 start npm --name ‘project-name’ -- start

  project-name,就是package.json里的name名

  启动项目,这时项目运行在你服务器上的3000端口上,我们还需要使用nginx 作为反向代理把这个端口专门映射到一个域名上

  #通过upstream nodejs 可以配置多台nodejs节点,做负载均衡

  #keepalive 设置存活时间。如果不设置可能会产生大量的timewait

  #proxy_pass 反向代理转发 http://nodejs

    upstream nodenuxt {
server 127.0.0.1:; #nuxt项目 监听端口
keepalive ;
}

  配置代码参考了很多的文档,主要参考这篇:next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序,代码如下

    worker_processes  ;

    events {
worker_connections ;
} http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout ; upstream nodenuxt {
server 127.0.0.1:; # nuxt 项目监听PC端端口
keepalive ;
}
server {
listen ;
server_name localhost; 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;
}        location ^~/api/ {
              proxy_pass   http://119.3.166.247:8080/;
          } error_page /50x.html;
location = /50x.html {
root html;
}
}
}

  如果之后需要更新代码,本地重启打包把上述文件替换到服务器上,然后重启pm2即可

pm2 restart all

  在使用pm2中遇到的问题

  这是第一次使用Nodejs 启动服务, pm2 也还有更多高级的配置需要学习, 记录的过程也比较粗糙打算自己重复几次完善一下 ,这里有遇到一个pm2的一个问题, 在启动服务的时候遇到这个错误

SyntaxError: Unexpected token :
at createScript (vm.js::)
at Object.runInThisContext (vm.js::)
at Module._compile (module.js::)
at Object.Module._extensions..js (module.js::)
at Module.load (module.js::)
at tryModuleLoad (module.js::)
at Function.Module._load (module.js::)
at Object.<anonymous> (C:\Users\关文峰\AppData\Roaming\npm\node_modules\pm2\lib\ProcessContainerFork.js::)
at Module._compile (module.js::)
at Object.Module._extensions..js (module.js::)

  GitHub 上面有解决方案 https://github.com/Unitech/pm2/issues/2808

There's your problem - when you do that, you're telling pm2 to interpret the "npm script" with an argument of start. 
Try putting a npm-cmd call into a start script called startscript.js, and then doing pm2 start startscript.js. Eg
npm install node-cmd --save; in startscript.js:
var cmd=require('node-cmd'); cmd.run('npm start'); pm2 start startscript.js

  也就是说:需要安装 node-cmd 这个包,之后创建一个 start.js 文件使用指令启动该文件

cnpm install node-cmd --save-dev

  然后启动命令:pm2 start start.js

  这样就解决了这个问题。解决完这个问题之后我发现启动完一直有一个 npm 命令框存在也关不掉好像也没啥影响就是看着有点不舒服

nuxt项目服务端渲染应用部署、使用pm2守护进程及遇到的问题处理的更多相关文章

  1. Nuxt.js服务端渲染实践,从开发到部署

    感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...

  2. Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署

    官方网址:https://zh.nuxtjs.org/guide/commands/#%E5%8F%91%E5%B8%83%E9%83%A8%E7%BD%B2

  3. nuxt.js服务端渲染中less的配置和使用

    第一步:npm 安装 less 和 less-loader ,文件根目录下安装,指令如下 npm install less less-loader --save-dev 第二步:直接在组件中使用 &l ...

  4. next.js、nuxt.js等服务端渲染框架构建的项目部署到服务器,并用PM2守护程序

    前端渲染:vue.react等单页面项目应该这样子部署到服务器 貌似从前几年,前后端分离逐渐就开始流行起来,把一些渲染计算的工作抛向前端以便减轻服务端的压力,但为啥现在又开始流行在服务端渲染了呢?如v ...

  5. Nuxt.js vue服务端渲染

    一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue ...

  6. vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器

    vuejs服务端渲染更好的SEO,SSR完全指南Nuxt.js静态站生成器SSR 完全指南https://cn.vuejs.org/v2/guide/ssr.html在 2.3 发布后我们发布了一份完 ...

  7. [vue] vue服务端渲染nuxt.js

    初始化 使用脚手架工具 create-nuxt-app 快速创建 npx create-nuxt-app <项目名> npx create-nuxt-app 执行一些选择 在集成的服务器端 ...

  8. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  9. 服务端渲染和nuxt简单介绍

    概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...

随机推荐

  1. 剑指offer之面试题2:实现Singleton模式

    来源:剑指offer 这篇主要记录<剑指offer>书籍中的面试题2:实现Singleton模式 使用语言:C# 代码环境:VS2017 总共有5中解法,从前往后依次优化. 结构如下: 前 ...

  2. 文件的读取(txt文件)

    一.将读取文件夹内容,变为字典保存,代码如下: def read_class_names(class_file_name): '''loads class name from a file''' na ...

  3. 连接池未注册org.logicalcobwebs.proxool.ProxoolException: Attempt to refer to a unregistered pool by its alias 'XXX'

    代码之前一直好好的,写了一个定时器后报错,本地测试为了立马能执行就用cron表达式* * * * * ?,为了只执行一次在最后面加上Thread.sleep(1000*3600*24)睡眠二十四小时从 ...

  4. ios、安卓前端兼容性

    1.日期兼容性 解决方法(请看我上一篇文章)安卓.ios时间转换成时间戳的形式 2.input框聚焦,ios出现outline或者阴影,安卓显示正常 解决方法 input:focus{outline: ...

  5. SQLi_Labs通关文档【1-65关】

    SQLi_Labs通关文档[1-65关] 为了不干扰自己本机环境,SQL-LAB我就用的码头工人,跑起来的,搭建也非常简单,也就两条命令 docker pull acgpiano/sqli-labs ...

  6. 《JavaScript高级程序设计》笔记:新兴的API

    requestAnimationFrame() 大多数电脑显示器的刷新频率60HZ,大概相当于每秒钟重绘60次.因此,最平滑动画的最佳循环间隔是1000ms/60,约等于17ms. mozReques ...

  7. 8 smali文件格式

    Apktool反编译apk后程序中每一个类都会有一个smali文件. 一.当前类信息:smali文件的头三行描述了当前类的一些信息. Eg: .class <访问权限> [修饰关键字]&l ...

  8. OCR6:Custom Traineddata

    参考:https://groups.google.com/forum/#!msg/tesseract-ocr/MSYezIbckvs/kO1VoNKMDMQJ V4版本代码示例 : import py ...

  9. Golang: 读写之外的其他文件操作

    在上一篇文章中,我们介绍了常用的文件读写操作,今天接着来研究一下,除了读写以外的其他常见文件操作. 一.创建目录: package main import ( "fmt" &quo ...

  10. Kali 安装tightvncserver

    一.软件说明 a) tightvncserver是一个轻量级,只能建立桌面,不能查看TTY7/TTY1正在显示的桌面,但x11 vnc可以,相比x11vnc 安全传输差一些.反之,x11 vnc:安全 ...