Nuxt服务端部署（CentOS7+nginx+pm2)

Qiaer
4,762 阅读2分钟

1.前言

  • Nuxt: 对标Next的一款适用于Vue的服务端渲染（SSR）应用框架
  • pm2: Node进程守护，监控、自动重启以及生成日志
  • Nginx: 一个轻量级的HTTP服务框架,反向代理服务器，处理静态资源，负载均衡等

2.安装Nodejs

创建文件目录

mkdir -p /usr/local/software

进入文件目录

cd  /usr/local/software

下载nodeJS（nodejs版本可自行更改）

wget https://nodejs.org/dist/v8.11.4/node-v8.11.4-linux-x64.tar.gz

解压NodeJs文件

tar -zxvf node-v8.11.4-linux-x64.tar.gz -C ../

为nodejs更名

mv /usr/local/node-v8.11.4-linux-x64/ /usr/local/node8.11.4 

# 软链接指向到node npm
ln -s /usr/local/node8.11.4/bin/node  /usr/local/bin/node
ln -s /usr/local/node8.11.4/bin/npm  /usr/local/bin/npm

查看软链是否成功

ls -al /usr/local/bin

软链接输出内容

[root@jsyfpre001 bin]# ls -al /usr/local/bin
total 3428
drwxr-xr-x   2 root root    4096 Feb  6 14:09 .
drwxr-xr-x. 32 root root    4096 Feb  6 14:02 ..
lrwxrwxrwx   1 root root      29 Feb  6 14:09 node -> /usr/local/node8.9.1/bin/node
lrwxrwxrwx   1 root root      28 Feb  6 14:09 npm -> /usr/local/node8.9.1/bin/npm

查看Nodejs是否安装成功

node -v

成功输出如下

v8.11.4

3.pm2安装

关于pm2的教程可以参考：PM2实用入门指南

npm install pm2 -g

软连接指向

ln -s /usr/local/node8.11.4/bin/pm2  /usr/local/bin/pm2

npm install速度如果过慢可以更改其国内镜像源，推荐使用淘宝镜像源

npm config set registry https://registry.npm.taobao.org

4.本地nuxt项目打包

npm run build

打包会将会生成.nuxt文件夹，将以下文件上传至服务器

.nuxt
static
nuxt.config.js
package.json

package.json文件如下

{
  "name": "网站名称",
  "version": "1.0.0",
  "description": "网站描述",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "start": "nuxt start"
  },
  # 以下依赖以自己的项目为主
  "dependencies": {},
  "devDependencies": {}
}

上传文件至服务器方式有以下三种：

  1. scp -r 本地文件地址 root@服务器ip:服务器文件待存放地址
  2. 搭建ftp服务器
  3. 使用svn或者git仓库

在服务器上安装相应依赖

# 假设nuxt打包的内容放在 名为 nuxtSSR文件夹下
cd nuxtSSR
npm install

5.Nginx配置代理服务

# 新建一个nuxtserver服务
upstream nuxtSSR{
    server 127.0.0.1:3000;
    keepalive 64;
}
server {
    listen 80; #服务器端口80
    server_name zuxiaoke.com;  #这里对应你服务器的域名
    access_log /var/log/nginx/nuxtssr_access.log;
    error_log /var/log/nginx/nuxtssr_error.log;
    location / {
        proxy_pass http://nuxtSSR;  #这里对应上面upstream中新建的服务名
        index index.html index.htm;
    }
}

重新启动Nginx

service nginx restart

pm2启动nuxt项目服务并实时监控

pm2 start npm --name "nuxtblog" -- run start --watch
  • 注意：这里的name对应的是package.json中的项目名称
  • 查看进程：pm2 list
  • pm2进程管理: pm2 show/stop/delete/start id或者进程名称

6.完结

注意事项：

  1. 如果权限报错，请在root下操作 sudo su -
  2. 在Nginx配置无误情况下，外网访问80端口出现503 time-out问题，但pm2中该进程日志并未有报错信息，请删除pm2中该项目进程，删除Nuxt项目所有依赖，重新安装发布

7.博客

博客文章地址 Nuxt服务端部署（CentOS7+nginx+pm2)

avatar
文章
阅读
粉丝