vue-nuxt.js部署到宝塔主机服务器

废话不多说,直接上步骤,如下:

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

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

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

2、添加站点

站点添加成功后修改站点配置文件,直接在配置文件顶部增加
upstream nodenuxt {
    server 127.0.0.1:3003; #nuxt项目 监听端口
    keepalive 64;
}
//以下为之前默认的数据,不用管
server {
    listen 80;
    server_name mysite.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:3003 
因此反向代理的目标URL也为 http://127.0.0.1:3003
发送域名:mysite.com  //项目的访问域名

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

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "online": "cross-env NODE_ENV=production nuxt start",
    "build": "nuxt build",
    "start": "PORT=3003 nuxt start",
    "generate": "nuxt generate",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },

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=3003 nuxt start

到了这里我们就可以在浏览器上输入 mysite.com 访问了。服务端渲染瞬间出来了。
#### 别得意,这里还没完成呢。
,上面的效果是并不理想的,所以我们需要开启进程守护来稳定常驻后台

7、pm2 开启进程守护

pm2 start npm --name "my-nuxt" -- run start  //my-nuxt为我们自定义的项目名称,也是我们自定义的守护进程名称

┌──────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐
│ App name │ id │ version │ mode │ pid   │ status │ restart │ uptime │ cpu │ mem       │ user │ watching ├──────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤
│ my-nuxt  0  0.33.4  │ fork 23278 │ online 0       0s     0%  15.6 MB   │ root │ disabled └──────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘

出现了以上的图案数据,说明守护进程已经开启了。

OK,到了这里也就完成了,你可以放心的访问你的域名。 就可以正常的访问啦。

以上为我实际操作得出的步骤,如果按照步骤完成还是不能访问,那就很抱歉没能帮到你,你也继续努力....

posted @ 2019-01-22 18:33  每①天都是↗开始  阅读(6180)  评论(0编辑  收藏  举报