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

·  阅读 3642

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)

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改