项目介绍

项目中整合 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上推荐使用压缩包的安装方式，下载地址;

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

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

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

第五步、若你的服务器上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项目成功之后可以在服务器的浏览器上可视化的视图,可以在网页中监控,效果如下：

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

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

第二步：连接本地项目

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

最后

文章到这就要结束了。

PC端GitHub地址

移动端GitHub地址

如果大家觉得这个项目有点意思，欢迎 star。谢谢，O(∩_∩)O~

# 运维 # java # json
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue