在windows环境下部署nuxt项目（线上发布部署）

　　由于公司项目须要兼容SEO，同时咱们也一直但愿可以真正的实现先后端分离，因而坚决果断的选择了nuxt。

　　话说要重构先后端分离真是一个大工程，因为各类缘由咱们团队花了近两年时间都没有完成，最近才又重启把这个事情作起来，先搞了一个独立的小模块，我以为主要如下两个点特别重要：

　　1：团队稳定且对于系统业务已经熟悉。特别是对于一个运行了几年的一个系统来讲，先后端分离的工程量之大可能超乎你的想象，由于系统越大、运行越久，那业务复杂度越高，隐性规则越多

　　2：有时间或者说短时间内没有什么其余项目

　　----好吧，开头说得有点多了，如今进入正题

　　网上对于nuxt项目部署的文章共享太少，有些零零碎碎的，特别是对于windows server下的部署，那就只能本身摸索了，踩了很多坑，终于搞成功了也分享给你们。

　　如下参考了 http://www.javashuo.com/article/p-hmfrhjup-eq.html

　　1、node安装

　　nuxt是基于nodejs运行的，安装node是第一步

　　nodejs官网下载

　　安装以后经过命令node -v来检查node是否安装成功，经过命令npm -v来检查npm是否安装成功。　　

　　

 　　二、项目打包

　　项目打包命令请看官网

第一步、在本地执行 npm run build

第二步、把本地文件的.nuxt,static,package.json,这三个文件夹放到服务器站点目录文件下，这个取决于你要把你的代码放在上面地方

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

第四步、npm run start 此时运行的是 http://localhost:3000; 注意端口号能够在package.json 中配置 

 

 

　　二、PM2守护

　　经过以上第四部，已经能够运行了，可是一旦cmd窗口关闭，那么进程就挂了，这是极其不方面的。因而要用到PM2，

　　用pm2能够监听CPU和内存使用状况，进程挂掉会自动重启。

　　pm2是nodejs的一个带有负载均衡功能的应用进程管理器的模块，相似有Supervisor，forever，用来进行进程管理。

　　（1）pm2安装

　　　　全局安装  在CMD命令行输入 npm i pm2 -g 

　　　　

　　（2）pm2开机自启动　　　　

　　　　1.安装并配置pm2-windows-service

　　　　 npm i -g pm2-windows-service 

 

　　　　2. 添加系统环境变量（右键 [个人电脑] - [属性] - [高级系统设置] - [环境变量] - 新建 [系统变量] ）

　　　　 PM2_HOME=C:\Users\zhtop.pm2(路径默认在当前用户下的.pm2) 

　　　　

　　　　3.以管理员权限打开新的cmd命令行窗口,执行如下命令来安装服务

　　　　 pm2-service-install 

　　　　提示Perform environment setup ? 选 n, 继续,此时, PM2服务已安装成功并已启动, 能够经过 [win + r] - [services.msc] 来查看，服务名称为PM2

　　　　

 

　　（3）pm2启动nuxt项目

　　　　关于启动nuxt项目这里试了不少坑，网上看了好多启动方式都没有成功。如下方法是我本身摸索出来的。

　　　　咱们都知道，nuxt.js的项目启动命令，先执行npm run build,在执行npm run start,pm2也支持参数的传递，也有大神说pm2启动nuxt只须要执行pm2 start npm -- run start,到目前为止，表示项目没有这样启动成功过。

　　　　经过package.js文件配置咱们看到，当咱们执行npm run start的时候，执行的实际上是 nuxt start

　　　　

　　　　也就是使用npm去启动了./node_modules/nuxt/bin/nuxt这个文件。当咱们cd到咱们的项目目录以后，咱们最终能够执行以下命令来启动：

　　　　pm2 start node_modules/nuxt/bin/nuxt-start --name prod

               --name 后面跟的是你要给这个站点的名称

 　　　　但在执行上述命令以前，找到 ./node_modules/nuxt/bin/nuxt 文件，修改 const defaultCommand = 'start'

　　　　接着，修改同目录下的 nuxt-start 文件，添加红框中的内容，分别是知道host和port

　　　　

 

　　　　这样PM2 启动nuxt项目才会使用自定义的port

 　　　　以上配置作完，就能够cd到项目目录，执行cmd命令

　　　　pm2 start node_modules/nuxt/bin/nuxt-start --name prod

　　　　再执行 pm2 save (pm2 save 很重要, 它保存当前pm2 正在管理的NodeJS服务, 并在开机后恢复这些服务，保存路径为系统环境变量设置的PM2_HOME路径。)

 

 　　3、Nginx安装

　　　作完以上两步，其实nuxt项目就能运行起来了。可是部署到生产环境每每须要经过域名来访问，这时候就改Nginx出场时候啦！

　　（1）Nginx 的安装步骤比较简单，安装在windows上推荐使用压缩包的安装方式，下载地址，选择稳定版本（Stable version）

　　　　  下载完成以后，进行解压能够看到以下 文件结构

　　　　　

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

　　

　　　　

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

 

　　　　(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; }