• 中文
  • 注册
    • 查看作者
    • vue-nuxt.js部署到宝塔主机服务器

      本文章为在 vue环境下使用了nuxt.js

      1、搭建环境--由于本人安装的是宝塔主机,因此如下:

      由于我直接使用的是宝塔主机,直接去“软件管理”安装 PM2管理器。

      安装好以后点击“设置”,找到“模块管理”,直接安装需要的模板,我使用的是nuxt,因此我也直接安装了 nuxt。 (这里安装有没有用我目前不太清楚,我只是知道我项目里使用了nuxt,所有我就顺便安装了,时间太忙也就没深入研究了)

      2、添加站点

      站点添加成功后修改站点配置文件,直接在配置文件顶部增加

      upstream nodenuxt {
          server 127.0.0.1:3000; #nuxt项目 监听端口
          keepalive 64;
      }
      //以下为之前默认的数据,不用管
      server {
          listen 80;
          server_name idepy.com;
          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; #反向代理
          }
      }

      3、设置反向代理

      由于以上配置了 127.0.0.1:3000

      因此反向代理的目标URL也为 http://127.0.0.1:3000

      发送域名:idepy.com  //项目的访问域名

      4、本地项目下的package.json里设置, 注意:start 使用了3000端

      "scripts": {
        "dev": "nuxt",
        "build": "nuxt build",
        "start": "PORT=3000 nuxt start",
        "generate": "nuxt generate"
      },

      5、项目本地完成后, npm run build 打包应用

      打包完成后将以下四个文件上传到服务器空间

      .nuxt     //打包生成的文件夹

      static    //默认静态文件

      nuxt.config.js   //nuxt项目配置文件

      package.json   //配置文件

      6、在服务器上部署运行

      1. 使用命令模式:终端或者其他方式链接上服务器

      2. 自己先测试一下服务器上是否安装支node npm,检查一下版本号 

          node -v

          npm -v

      2. 进入到该项目的根目录

      3. 运行 npm install 安装package里的依赖

      4. 安装好3以后,再运行 npm start 就可以运行起来nuxt的服务渲染了

      如下:

      > my-nuxt@1.0.0 start /www/wwwroot/mysite.com

      > PORT=3000 nuxt start

      到了这里我们就可以在浏览器上输入 idepy.com 访问了。服务端渲染瞬间出来了。

      #### 别得意,这里还没完成呢。

      最后用pm2来启动项目

        pm2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的。在服务器shell中,先安装pm2,安装后pm2 list查看进程列表,如果说pm2未找到,需要设置下环境变量

        安装pm2,直接全局安装 (pm2 官网地址:http://pm2.keymetrics.io )

      npm install -g pm2

        pm2安装ok后,进入nuxt项目目录,执行

      pm2 start npm --name ‘project-name’ -- start

        project-name,就是package.json里的name名

    • 0
    • 0
    • 0
    • 132
    • 请登录之后再进行评论

      登录
    • 做任务
    • 发表内容
    • 实时动态

    • 关于伊迪派 | 联系我们 | 免责声明 | 侵权投诉 | 小黑屋

      本站资源来源于互联网,仅供个人学习参考研究之用,请于下载后24小时内删除。
      如有侵犯您的权益,可通过邮件(admin@idepy.com)、站内通道等方式反馈,本网站将在第一时间处理。
      Copyright © 2019 - 2020 伊迪派(IDEPY), All Rights Reserved · 粤ICP备12030819号-6 · 粤公网安备 44132202100185号