项目介绍

项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router)，一个基于 Nuxt 的服务器端渲染 Demo

PC端GitHub地址

移动端GitHub地址

一、PC端项目部署

关于项目部署折腾了我好多时间，网上许多百度来的文档不适合我的项目，所以自己摸索着终于部署起来了，开心O(∩_∩)O~~

1、项目打包

详情请看 Nuxt官网

命令 描述
nuxt 启动一个热加载的 Web 服务器（开发模式） localhost:3000
nuxt build 利用 webpack 编译应用，压缩 JS 和 CSS 资源（发布用）
nuxt start 以生成模式启动一个 Web 服务器 (nuxt build 会先被执行)
nuxt generate 编译应用，并依据路由配置生成对应的 HTML 文件 (用于静态站点的部署)

第一步、在本地 npm run build,会在.nuxt文件夹下生成dist文件;

第二步、把本地文件的.nuxt,static,package.json,nuxt.config.js,这四个文件夹放到服务器目录文件下，我在服务器上创建了run/www/visneyNuxt路径，四个文件放到里面;

第三步、用cmd进入目录文件夹，安装依赖，npm install -production;

第四步、npm start 此时运行的是 http://localhost:3000;

2、Nginx配置

项目进行到现在，在服务器上的项目正常没有问题，但是当我们在浏览器中输入http://www.visney.cn/，额，震惊，你并没有看到自己想要的结果，(；′⌒`)

这时候就改Nginx出场时候啦，当当当当~~~

(1)、Nginx安装

第一步、Nginx 的安装步骤比较简单，安装在windows上推荐使用压缩包的安装方式，下载地址;

第二步、有稳定版本和最新版本及以前版本，推荐使用稳定版本开发

第三步、下载完成之后，进行解压可以看到如下 文件结构

Nuxt项目的部署-编程知识网

 

第四步、双击nginx,exe 就启动了。在页面输入localhost。出现如下界面则表示安装成功。默认监听80端口号

Nuxt项目的部署-编程知识网

 

第五步、若你的服务器上80端口被占用，需要修改端口，Windows 下 安装目录\conf\nginx.conf中的

server {listen  80;server_name localhost;……
}
复制代码

改为

server {listen  81;server_name localhost;}复制代码

(2)、Nginx基础属性配置

这里说明下我的配置，详细参数说明请百度了解

第一步、找到安装目录下conf 文件下的nginx.conf文件 打开进行 属性配置

第二步、配置代码参考了很多的文档，主要参考https://segmentfault.com/a/1190000012774650，代码如下

    worker_processes  1;events {worker_connections  1024;}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;upstream nodenuxt {server 127.0.0.1:3000; # nuxt 项目监听PC端端口keepalive 64;}server {listen       80;server_name  www.visney.cn;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;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}}
复制代码

第三步、在nginx根目录下打开命令窗口，nginx -t 查看nginx的配置文件的目录 第四步、若缇诗没有问题，nginx -s reload 重新载入nginx(当配置信息发生修改时)

Nginx其他命令：

start nginx windows下的启动命令 nginx -s quit 停止ngix nginx -s reload 重新载入nginx(当配置信息发生修改时) nginx -h 查看帮助信息

完成以上配置，当你打开浏览器，输入http://www.visney.cn/，(@ο@) 哇～，终于成功了 T_T

(3)、Nginx配置 301重定向

301重定向是网页更改地址后对搜索引擎最友好的方法，配置visney.cn自动跳转www.visney.cn，具体配置如下：

    server {listen       80;server_name  visney.cn;return       301 http://www.visney.cn$request_uri;}
复制代码

但是当你关闭服务器上nuxt运行黑窗口时候，你的服务也断了，心累(╯﹏╰)，就算不关闭黑窗口，有时候运行也是会断的，不要问我怎么知道的说多了都是泪，这时候就需要PM2进行守护了

3、PM2守护程序

(1)、pm2全局安装

npm i pm2 -g
复制代码

(2)、pm2启动nuxt项目

关于启动nuxt项目这里试了很多坑，网上看了好多启动方式都没有成功，最多的一种是pm2 start npm --name "xxx" -- run build,在我的项目中也是没有成功，

我的启动方式是 pm2 start node_modules/nuxt/bin/nuxt-start --name xxx ,成功！！！！

这里的xxx是项目名称，即package.json中的name

(3)、pm2其他命令

pm2 list
pm2 show 0                           #查看进程详细信息，0为PM2进程id 
pm2 stop all                         #停止PM2列表中所有的进程
pm2 stop 0                           #停止PM2列表中进程为0的进程
pm2 reload all                       #重载PM2列表中所有的进程
pm2 reload 0                         #重载PM2列表中进程为0的进程
pm2 delete 0                         #删除PM2列表中进程为0的进程
pm2 delete all                       #删除PM2列表中所有的进程
复制代码

** 至此，nuxt项目部署就完成了，长出一口气，舒服！ But，后来我的移动端的项目完成了，也需要Nginx配置，pm2守护，部署亮了会像上面那么简单吗，请听我细细道来：

移动端项目机票

二、移动端项目部署

1、项目打包

项目打包与PC端一致，请参考PC端部署方法

2、Nginx配置

第一步、移动端Nuxt项目监听端口为127.0.0.1:3001

第二步、这里移动端访问配置了二级域名http://m.visney.cn/，

第三步、在nginx中配置了移动端访问和PC端访问的判断

upstream nodenuxtphone {server 127.0.0.1:3001;      # nuxt 项目监听移动端端口keepalive 64;}server {listen       80;server_name  m.visney.cn;   # 移动端代理为二级域名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://nodenuxtphone;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
复制代码

** 全部配置如下 **

worker_processes  1;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;upstream nodenuxt {server 127.0.0.1:3000; # nuxt 项目监听PC端端口keepalive 64;}server {listen       80;server_name  www.visney.cn;location / {if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry)) {rewrite ^/(.*)$ http://m.visney.cn redirect;      #这里随意使用,这一行代表域名栏会跳转到m.aaa.com#监听设备内核，移动端自动跳转到http://m.visney.cn}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;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}server {listen       80;server_name  visney.cn;return       301 http://www.visney.cn$request_uri;}upstream nodenuxtphone {server 127.0.0.1:3001;      # nuxt 项目监听移动端端口keepalive 64;}server {listen       80;server_name  m.visney.cn;   # 移动端代理为二级域名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://nodenuxtphone;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}
}
复制代码

2、PM2配置

真正坑在这里，嘿嘿~~~

高高兴兴的pm2 start node_modules/nuxt/bin/nuxt-start --name xxx （xxx为移动端项目名称）

手机访问没有效果，纳尼，出了什么问题！？别着急，解决方法如下：

当同时使用pm2 start node_modules/nuxt/bin/nuxt-start –name xxx 守护两个项目时候，两个项目都是用了3000端口，而移动端的3001无法反向代理，所以无法访问。 我试着在移动端的package.json中更改端口号，然而没有用，T_T

所以，这时候我在PC端项目与移动端项目的根目录下，分别单独配置了启动文件process.json，为移动端配置端口 "port": "3001"

PC端设置process.json启动

{"apps": [{"name": "visney","cwd": "","script": "node_modules/nuxt/bin/nuxt-start","log_date_format": "YYYY-MM-DD HH:mm Z","error_file": "/var/log/node-app/node-app.stderr.log","out_file": "log/node-app.stdout.log","pid_file": "pids/node-geo-api.pid","instances": 3,"min_uptime": "60s","max_restarts": 10,"max_memory_restart": "300M","cron_restart": "1 0 * * *","watch": false,"merge_logs": true,"exec_interpreter": "node","exec_mode": "fork","autorestart": false,"vizion": false}]
}
复制代码

移动端设置process.json启动

{"apps": [{"name": "visneyphone","cwd": "","script": "node_modules/nuxt/bin/nuxt-start","log_date_format": "YYYY-MM-DD HH:mm Z","error_file": "/var/log/node-app/node-app.stderr.log","out_file": "log/node-app.stdout.log","pid_file": "pids/node-geo-api.pid","instances": 3,"min_uptime": "60s","max_restarts": 10,"max_memory_restart": "300M","cron_restart": "1 0 * * *","watch": false,"port": "3001","merge_logs": true,"exec_interpreter": "node","exec_mode": "fork","autorestart": false,"vizion": false}]
}
复制代码

3、 启动pm2守护

PC端根目录移动端根目录下分别启动 pm2 start process.json

OK，项目完成！！

###3、 pm2浏览器中使用可视化的窗口

pm2项目成功之后可以在服务器的浏览器上可视化的视图,可以在网页中监控,效果如下：

 

Nuxt项目的部署-编程知识网

 

 

登录地址 https://app.keymetrics.io

第一步：登录注册，我在这里使用的是Github账号登录，如下：

Nuxt项目的部署-编程知识网

 

 

第二步：连接本地项目

 

Nuxt项目的部署-编程知识网

 

第三步： 启动项目，pm2 start process.json,ok,现在可以看到效果了，如下：

 

 

Nuxt项目的部署-编程知识网

 

 

最后

文章到这就要结束了。

PC端GitHub地址

移动端GitHub地址