CentOs nginx部署nuxt ssr服务端渲染

一、初始化服务安装基本环境工具

yum -y install gcc gcc-c++ autoconf pcre-devel make automake

yum -y install wget httpd-tools vim

二、安装node/npm
1、到local磁盘下

cd /usr/local

2、安装nodejs

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

3、解压

tar -zxvf node-v8.9.1-linux-x64.tar.gz -C /usr/local

4、更换名字

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

5、软连接指向node npm

ln -s /usr/local/node8.9.1/bin/node  /usr/local/bin/node
ln -s /usr/local/node8.9.1/bin/npm  /usr/local/bin/npm 

三、安装VUE
1、CD到项目目录

2、安装VUE脚手架

npm install -g vue-cli

安装完后 vue -V 如果出现 bash: vue: command not found 需要修改环境变量，步骤如下:

npm root -g

得出/usr/local/node/lib/node_modules，检查是否正确的路径。

若存在问题可重新指定：

 npm config set prefix /usr/local

可根据全局路径设置$PATH
直接运行命令

export PATH=$PATH:/usr/local/node

执行并修改 vi /etc/profile，在文件末尾加上如下两行（DEMO）代码

PATH=$PATH:/usr/local/node
export PATH

运行

source /etc/profile

查看结果

echo $PATH

得出 /usr/local/node/lib/node_modules:/usr/local/node/bin
再从新安装VUE

npm install --global vue-cli

3、建立vue软连接

ln -s /usr/local/node8.9.1/bin/npm  /usr/local/bin/npm

4、初始化nuxt项目

vue init nuxt/starter

5、安装依赖包

npm install

6、把nuxt自带的nuxt命令放到项目目录下

ln -s 项目路径/node_modules/nuxt/bin/nuxt 项目路径/nuxt

7、服务端打包

npm run build

四、安装nginx
1、修改nginx最新安装源

vim /etc/yum.repos.d/nginx.repo

添加以下代码：

[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/centos/版本号/$basearch/
gpgcheck=0
enabled=1

2、执行安装

yum install nginx

安装完后 nginx -v 看是否安装成功，安装成功后启动nginx

nginx

(启动 nginx，停止 nginx -s quit 或 nginx -s stop)，启动后浏览器输入服务器IP即可看到nginx欢迎界面。

3、修改nginx反向代理

cd /etc/nginx/conf.d

4、修改配置文件反向代理至nuxt默认端口3000端口

vim default.conf

添加 proxy_pass http://localhost:3000; 即可，如下

...
location / {
	proxy_pass http://localhost:3000;
       # root   /usr/share/nginx/html;
       # index  index.html index.htm;
}
...

保存再重启nginx，此时浏览器从新输入服务器IP看到的就是nuxt的欢迎界面，则表示nginx反向代理成功。

五、安装PM2
1、安装pm2 node进程管理器

npm install -g pm2

2、建立PM2软连接

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

3、使用PM2启动项目

pm2 start npm --name "项目名称" -- run start

使用PM2启动项目前注意cd到项目目录并运行npm run build在使用PM2的命令启动下。

4、PM2常用命令

#查看进程： 
pm2 list  
#或者(0为进程id)  
pm2 show 0  
#开启  
pm2 start 0   
#停止  
pm2 stop 0  
#重载  
pm2 reload 0  
#删除/卸载  
pm2 delete 0  
#显示后台日志  
pm2 logs 0