项目介绍

项目中整合 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~

Logo

前往低代码交流专区

更多推荐