Nuxt项目完成了剩下的就是部署到服务器上了
但是网上的教程多半含混不清顺序混乱对新手不太友好索性自己写一个比较全的教程吧

介绍

Nuxt项目打包后发布在服务器上是前台运行的启动后若将窗口关掉则无法访问

使用pm2可以完美解决该问题
pm2是一个带有负载均衡功能的Node应用的进程守护工具 允许独立代码利用全部服务器上的所有CPU 并且能够保证进程永远活着(alive)
pm2有着0秒的重载还能提供监控等功能是个很实用的工具

环境准备

一、首先当然是安装Node了

安装pm2需要npm 包括Nuxt项目的下载模块同样也需要npm 因此Node必不可少

1、下载：

wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz

2.解压：

解压方式一(若失败请用方式二)：

tar -zxvf node-v10.11.0-linux-x64.tar.xz

方式二：

xz -d node-v10.11.0-linux-x64.tar.xz
tar -xvf node-v10.11.0-linux-x64.tar

3、重命名：

mv node-v10.11.0-linux-x64 node

4、设置环境变量：

vi ~/.bash_profile

里面默认有个PATH=$PATH:$HOME/bin
将其修改为：

PATH=$PATH:$HOME/bin:/usr/local/node/bin(根据自己的实际目录修改)

修改完之后编译刚刚修改过的文件：

source ~/.bash_profile

5、测试是否安装成功：

node -v
npm -v

二、安装pm2

pm2的安装过程很简单

npm i pm2 -g

设为开机自启动：

pm2 startup
pm2 save

三、然后需要安装Nginx服务器

(如果已安装了请跳过)
安装步骤在我的另一篇博客：Linux环境下Nginx反向代理服务器的安装和配置

安装完之后还需在nginx.conf进行配置：

(在这上个完整版的配置文件吧可根据需要修改)

#user  nobody;
worker_processes  1;
error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;
pid  logs/nginx.pid;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;#gzip  on;server {listen       80;server_name  test.com www.test.com;# 这里填写你的域名location / {proxy_redirect off;proxy_set_header Host               $host;proxy_set_header X-Real-IP          $remote_addr;proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto  $scheme;proxy_read_timeout 1m;proxy_connect_timeout 1m;proxy_pass http://127.0.0.1:3000; # nuxt项目的监听端口 启动在哪个端口这里就填写哪个端口}}
}

如果是SSL 要这么配置：

server {listen 443 ssl;server_name test.com www.test.com;ssl_certificate cert/xxxxxx.pem;   # 证书文件的路径ssl_certificate_key cert/xxxxxx.key;   # 证书密钥的路径ssl_session_timeout 5m;ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  #使用此加密套件ssl_protocols TLSv1 TLSv1.1 TLSv1.2;   #使用该协议进行配置ssl_prefer_server_ciphers on;location / {# =======================若要实现CORS跨域 则将下方的注解解开=======================#add_header 'Access-Control-Allow-Origin' $http_origin;#add_header 'Access-Control-Allow-Credentials' 'true';#add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';#add_header 'Access-Control-Allow-Headers' 'DNT,web-token,app-token,Authorization,Accept,Origin,Keep-Alive,User-Agent,X-Mx-ReqToken,X-Data-Type,X-Auth-Token,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';#add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';#if ($request_method = 'OPTIONS') {#add_header 'Access-Control-Max-Age' 1728000;#add_header 'Content-Type' 'text/plain; charset=utf-8';#add_header 'Content-Length' 0;#return 204;#}# =======================若要实现CORS跨域 则将上方的注解解开=======================proxy_redirect off;proxy_set_header Host               $host;proxy_set_header X-Real-IP          $remote_addr;proxy_set_header X-Forwarded-For    $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto  $scheme;proxy_read_timeout                  1m;proxy_connect_timeout               1m;proxy_pass                          http://127.0.0.1:3000;}
}

部署

现在已经万事俱备只欠东风了我们需要将我们的Nuxt项目打包

等等我们还需要稍微配置一下端口和ip：
在nuxt.config.js里和head属性平级添加server的配置

server: {port: 3000, // 默认3000 也可以改成其它的端口号host: '0.0.0.0', // 默认localhost},

注：这个host: '0.0.0.0'很重要必须配置否则无法直接访问Nuxt项目(当然若使用Nginx进行反向代理则无须进行此配置)

然后就是编译了
我的Nuxt项目是用脚手架构建的因此已经自带了脚本命令：

在本地环境的项目根目录下输入npm run build开始编译然后等待一会(如果你的项目比较大那就不是等"一会"了是等"好久"

【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染相关推荐

vue2-ssr从vue-cli搭建项目改造服务端渲染+打包上线部署
为了完成vue+ssr,本人呕心沥血翻阅很多博主的文档,并在b站看了很多视频之后,经过个人实践,终于整理出一套完整版,无缺失,不报错的改造流程(亲测!!) 从创建=>打包=>上线部署,详细 ...
Node项目部署到阿里云服务器(ECS)，以Nuxt.js服务端渲染项目为例
1.前言最近打算业余时间搭个网站,选择的技术栈为node+mongodb+Nuxt.js(基于vue,用于创建服务端渲染 (SSR) 应用),以下不会教科书式讲解,只是提供整体思路.参考资料以及关键 ...
js 操作vuex数据_请教个有关 Vue.js 使用 Nuxt.js 服务端渲染，使用 Vuex 取数据的时候报错...
查过资料没有什么结果,首先怀疑的是 SSR 的问题,但是简单的测试感觉不是 SSR 的问题.没有找到原因,希望在这里能得到解惑! 使用 Nuxt.js 做服务端渲染,前后端分离,Token 存储在 l ...
Day210.服务端渲染技术NUXT、整合前台主页面、名师、课程静态页面、首页整合banner数据后端部分【创建banner微服务、接口、banner后台前端实现】 -谷粒学院
谷粒学院服务端渲染技术NUXT 一.服务端渲染技术NUXT 1.什么是服务端渲染服务端渲染又称SSR (Server Side Render)是在服务端完成页面的内容,而不是在客户端通过AJAX获 ...
Nuxt.js 服务端渲染从安装到部署
Nuxt.js 服务端渲染方案了解 Nuxt.js 的作用掌握 Nuxt.js 中的路由掌握 layouts.pages 以及 components 的区别能够在 Nuxt.js 项目中使用第 ...
Vue 服务端渲染（SSR）、Nuxt.js - 从入门到实践
前言 10月初有幸接到公司官网改版需求,要求采用服务端渲染模式对原网站进行seo优化. 由于团队一直使用的vue技术栈,所以我第一时间想到的就是采用vue 服务端渲染(SSR)来实现该需求,即能减少团 ...
next.js+react+typescript+antd+antd-mobile+axios+redux+sass react服务端渲染构建项目，从构建到发布，兼容pc+移动端
简介:该教程兼容pc+移动端,如只需一端,可忽略兼容部分教程,根据需要运行的客户端构建项目 antd官网:https://ant.design/components/overview-cn/ antd ...
服务端渲染和客户端渲染以及服务器部署
文章内容输出来源:拉勾教育前端高薪训练营 SPA单页面应用优点用户体验好开发效率高渲染性能好可维护性好缺点需等待客户端js解析执行完,造成首屏渲染时间长单页面的html是没有内容的,不 ...
nuxt 服务端渲染
nuxt 服务端渲染 1 nuxt 生命周期 1.1 服务端生命周期 middleware , plugins , validate 比较特殊,算成生命周期??? 服务端生命周期中, 无法拿到wind ...

【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染

介绍

环境准备

一、首先当然是安装Node了

1、下载：

2.解压：

3、重命名：

4、设置环境变量：

5、测试是否安装成功：

二、安装pm2

三、然后需要安装Nginx服务器

安装完之后还需在nginx.conf进行配置：

部署

【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染相关推荐

最新文章

热门文章

【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染

介绍

环境准备

一、首先当然是安装Node了

1、下载：

2.解压：

3、重命名：

4、设置环境变量：

5、测试是否安装成功：

二、安装pm2

三、然后需要安装Nginx服务器

安装完之后 还需在nginx.conf进行配置：

部署

【新手向】Nginx+pm2部署和发布Nuxt项目 实现服务端渲染相关推荐

最新文章

热门文章

【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染

安装完之后还需在nginx.conf进行配置：

【新手向】Nginx+pm2部署和发布Nuxt项目实现服务端渲染相关推荐