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

静态应用部署就不说了,主要说说服务端渲染应用部署。

官方部署方式

关于服务端渲染应用部署,官方文档是这么写的:

部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令,而应该先进行编译构建,然后再启动 Nuxt 服务,可通过以下两个命令来完成:

nuxt build
nuxt start

推荐的 package.json配置如下:

{
"name": "my-app",
"dependencies": {
"nuxt": "latest"
},
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start"
}
}

提示: 建议将 .nuxt 加入 .npmignore 和 .gitignore 文件中。

意思是说.nuxt不加入到版本控制,每次服务器从gitlab上拉代码后先执行nuxt build生成.nuxt文件夹,然后再执行nuxt start来启动服务。

每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

error Command failed with signal "SIGKILL".

看了一下服务器监控发现build的时候cpu和内存飙升,尤其是内存。。。

好吧,我买的是阿里最低配的ECS,升级配置是最后的选择,在这之前只能另辟蹊径。

既然服务器上build不了,那我们就本地build再上传,在.gitignore里把.nuxt去掉、并把dist改为/dist,然后本地执行yarn build,成功之后再上传到github上,检查一下.nuxt是否有上传上去。

之后在服务器上把代码拉下来、安装一下依赖,执行nuxt start就可以了。

这里还有个坑,就是为什么要把.gitignore里的dist改为/dist

/dist这个文件夹是执行nuxt generate后生成的,用来做静态应用部署的,这部分就跟通常情况下的.nuxt一样是不应该加入到版本控制里的,但由于nuxt build之后,在.nuxt里也会生成一个dist文件夹,我们希望gitignore的只有/dist而不是/.nuxt/dist,因此猜需要做出这里的修改。

我们使用pm2来部署nuxt。

pm2 start npm --name nuxt -- start

Nuxt.js部署应用的方式的更多相关文章

  1. nuxt.js部署vue应用到服务端过程

    由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染 移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成.现在记录一下部署中的过程. 注:部署时候过 ...

  2. nuxt.js 部署静态页面[dist]到gh-pages

    一. 1.添加package.json { "name": "nuxtweb001", "version": "1.0.0&quo ...

  3. nuxt.js express模板项目服务器部署

    nuxt版本:0.10.6 技术栈:nuxt.js, express, pm2 部署环境:windows server 之前用nuxt.js 的express的模板项目在windows下用nginx进 ...

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

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

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

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

  6. vue.js 服务端渲染nuxt.js反向代理nginx部署

    vue.js的官方介绍里可能提到过nuxt.js,我也不太清楚我怎么找到这个的 最近项目vue.js是主流了,当有些优化需求过来后,vue还是有点力不从心, 比如SEO的优化,由于vue在初始化完成之 ...

  7. 从壹开始 [ Nuxt.js ] 之二 || 项目搭建 与 接口API

    前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程 ...

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

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

  9. vue-nuxt.js部署到宝塔主机服务器

    废话不多说,直接上步骤,如下: 本文章为在 vue环境下使用了nuxt.js 1.搭建环境--由于本人安装的是宝塔主机,因此如下: 由于我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器. ...

随机推荐

  1. 栈 VS 队列

    linkStack.javalinkQueue.java程序强调栈和队列是概念上的实体,独立于它们的具体实现.用数组或者是用链表实现栈都是一样的.栈的重要性在于它的push()操作和pop()操作.以 ...

  2. Python datetime与timestamp之间的转换

    # !!!! Python 2 datetime.datetime 对象没有timestamp方法! 在用Python处理datetime和timestamp的转换时发现在时区方面,Python的处理 ...

  3. POJ.2175.Evacuation Plan(消圈)

    POJ \(Description\) \(n\)个建筑物,每个建筑物里有\(a_i\)个人:\(m\)个避难所,每个避难所可以容纳\(b_i\)个人. 给出每个建筑物及避难所的坐标,任意两点间的距离 ...

  4. 洛谷P1880 石子合并(区间DP)(环形DP)

    To 洛谷.1880 石子合并 题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一堆的石子数,记为该次合并的得分. 试设计出1 ...

  5. Python发送QQ邮件

    #!/usr/bin/python # -*- coding: UTF-8 -*-    import smtplib from email.mime.text import MIMEText fro ...

  6. 潭州课堂25班:Ph201805201 django 项目 第三十三课 后台文章标签查询提交到前台,删除功能实现(课堂笔记)

    在视图中创建个类,要实现此功能,并把结果返回前台 , from django.shortcuts import render from django.views import View from dj ...

  7. Linux引导程序类型

    Bootloader Monitor 描述 X86 ARM PowerPC LILO 否 Linux磁盘引导程序 是 否 否 GRUB 否 GNU的LILO替代程序 是 否 否 Loadlim 否 从 ...

  8. HDU5518 : John's Fences

    求出平面图的对偶图,那么需要选择一些环,使得这些环可以异或出所有环. 对于两个不同的区域,需要用一个代价最小的环把它们区分开,这对应最小割. 那么求出对偶图的最小割树,所有树边之和就是把所有区域都区分 ...

  9. 编程菜鸟的日记-初学尝试编程-寻找2到n之间的素数并输出

    //输入一个整数n,输出2到n之间的具体素数值 #include <iostream> #include <algorithm> #include <cmath> ...

  10. xpath分析 html文件抽正文的过程

    使用Py3的HTMLParser解析模块解析HTML的时候,出现:no moudle named 'markupbase' 错误. 用xpath打算分析html里面的新闻.根据运行程序后的报错的信息, ...