nuxt基于ubuntu18.04服务器下的部署

2,191 阅读4分钟

最近这几年前端三大框架横行,包括本人也一直在用Vue这个框架,但因为spa的原因,如果只是单单做系统之类的还好,但是在做门户类等需要SEO的站点时候,往往不尽人意,这时候就该上nuxt.js了。
这篇教程是基于ubuntu 18.04 系统下的nuxt部署方法。
搭建nginx+node+npm+pm2环境
nginx版本1.14.0
pm2版本3.5.1
node版本v10.11.0
npm版本6.4.1

1、安装nginx

更新源

sudo apt-get update

安装

sudo apt-get install nginx

如果忘记了nginx程序目录,可以执行:

whereis nginx

Nginx如果指定默认加载/etc/nginx/nginx.conf的配置文件。如果要查看加载的是哪个配置文件,可以用这个命令sudo nginx -t或者ps -ef | grep nginx

nginx的使用方法

sudo service nginx {start | stop | restart | reload | force-reload | status | configtest | rotate | upgrade }

2、安装node+npm

下载node

cd /usr/local/src/
wget https://nodejs.org/dist/v10.11.0/node-v10.11.0-linux-x64.tar.xz

解压

xz -d node-v10.11.0-linux-x64.tar.xz
tar -xvf node-v10.11.0-linux-x64.tar

重命名

mv node-v10.11.0-linux-x64 node

环境变量
打开文件后键盘输入 i 即可开始编辑

vim ~/.bash_profile
PATH=$PATH:$HOME/bin:/usr/local/src/node/bin

改完按键盘左上角Esc键并输入 :wq (冒号+w+q,不要掉了冒号)
最后编译刚刚修改的文件 

source ~/.bash_profile

安装完成测试

node -v
npm -v

第二种安装方法

apt-get 安装 nodejs

sudo apt-get install nodejs
sudo apt-get install nodejs-legacy
node -v 

安装最新的 node v10.x

curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v 

npm镜像替换为淘宝镜像 #得到原本的镜像地址

npm get registry 

#设成淘宝的

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

#换成原来的

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

3、安装pm2

npm i -g pm2

自启动

pm2 startup
pm2 save

4、设置nginx代理

nginx代理设置

server {
	listen 80;
	server_name test.rdf.banjiajia.com;
	`静态资源目录(不转发),服务器没开启gzip的话不要添加这个`
	location /_nuxt{
            alias /var/www/xue_deploy/.nuxt/dist/client;
        }

    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://127.0.0.1:3333; #反代理地址,端口是nuxt项目所用到的端口
    }
}

5、nuxt打包上传

npm run build

把 nuxt.config.js package.json static .nuxt 上传到服务器项目文件夹 列入: /var/www/nuxt
进入项目目录安装依赖

cd /var/www/nuxt
npm i

用pm2运行项目

cd /var/www/nuxt
pm2 start npm --name "my-nuxt" -- run start

pm2管理项目命令
pm2 list # 查看当前正在运行的进程
pm2 start all # 启动所有应用
pm2 restart all # 重启所有应用
pm2 stop all # 停止所有的应用程序
pm2 delete all # 关闭并删除所有应用
pm2 logs # 控制台显示所有日志

pm2 start 0 # 启动 id为 0的指定应用程序
pm2 restart 0 # 重启 id为 0的指定应用程序
pm2 stop 0 # 停止 id为 0的指定应用程序
pm2 delete 0 # 删除 id为 0的指定应用程序

pm2 logs 0 # 控制台显示编号为0的日志
pm2 show 0 # 查看执行编号为0的进程
pm2 monit jsyfShopNuxt # 监控名称为jsyfShopNuxt的进程

这样之后就可以愉快的去玩耍了!!^.^!

一般更新维护流程

进入文件目录,停止和删除项目,遍历文件,删除内容

pm2 list
pm2 delete id
rm -r node_modules nuxt.config.js package.json package-lock.json static

重新上传新打包的文件然后,安装依赖并开启项目'rdf-nuxt''

npm i
pm2 start npm --name "rdf-nuxt" -- run start

关于集群

pm2 的 cluster模式可以支持同一个端口,集群多个实例(一个核心起一个实例,如果是单核的服务器就没法了)

在项目根目录 pm2 init  发现生成了一个 ecosystem.config.js

vi ecosystem.config.js


module.exports = {
    
      apps : [{
    
        name: 'nuxt-app',
    
        script: './node_modules/nuxt/bin/nuxt.js'// 不能用npm run start 的命令,会报错端口占用
    
        args: 'start',
    
        // Options reference: https://pm2.io/doc/en/runtime/reference/ecosystem-file/
    
        instances: 2, // 几个实例也可以填 'max' 服务器最大支持的实例
    
        exec_mode: 'cluster',
    
        autorestart: true,
    
        watch: false,
    
        max_memory_restart: '1G', // 我的服务器是1g内存,当超过1g内存,会重启
    
        env: {
    
          NODE_ENV: 'development'
    
        },
    
        env_production: {
    
          NODE_ENV: 'production'
    
        }
    
      }]

};

编辑保存完之后,

pm2 start

使用

pm2 list 

查看当前状态

测试,如何测试两个实例都在正常工作, 我们pm2 list, 可以看到当前的node进程状态,现在我们发现有两个,0 和 1,此时我们试着pm2 stop 0 ,关掉第一个,看还能不能访问,同样的方法关掉1,打开0,如果都是正常的,那就说明我们部署成功了。