部署nuxt ssr服务器渲染应用

原文个人博客：部署nuxt ssr服务器渲染应用

个人服务器是centos 7，如下步骤以个人服务器为例

第一步：安装node

我采用手动安装的，本身好把控，好控制版本。首先去找到对应的node版本,下载地址传送门： nodejs.org/dist

找到对应的node版本，下载

wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.gz
复制代码

下载完成后，解压安装：

tar -zxvf node-v14.16.0-linux-x64.tar.gz
复制代码

移动到usr/local/nodejs 下

mv node-v14.16.0-linux-x64 /usr/local/nodejs
复制代码

配置环境变量,在/etc/profile文件内添加，若是是其余服务器，请自行查如何配置环境变量

vim /etc/profile

export NODEJS_HOME=/usr/local/nodejs
export PATH=${NODEJS_HOME}/bin:${PATH}

. /etc/profile
复制代码

输入node -v 检查是否安装成功

第二步：安装yarn，也可使用npm

直接脚本安装

curl -o- -L https://yarnpkg.com/install.sh | bash
复制代码

配置阿里云淘宝镜像

yarn config set registry https://registry.npm.taobao.org
复制代码

输入yarn -v检查是否安装成功

第三步：打包项目，传到服务器

1.修改package.json 打包命令，咱们每一个项目确定都是要自定义端口的，否则多个项目确定有端口冲突，config内是服务端将运行的端口

注意：这里有个坑，host 写成127.0.0.1 没法访问

本地运行打包命令

yarn build
复制代码

打包完后，将.nuxt , static,nuxt.config.js,package.json传到服务器上

第四步：在服务上安装package里的依赖

cd 到你的文件目录,安装完依赖，执行yarn 安装依赖

yarn
复制代码

而后输入yarn start启动服务,

yarn start
复制代码

这时页面就能正常运行了，此时输入你服务器的ip地址和刚刚配置的端口ip:port就能够访问页面啦。 不过这个时候，咱们的项目运行依赖终端，不能关闭终端，因此咱们要使用pm2守护进程。

第五步：配置pm2守护进程

首先安装pm2

npm install -g pm2
复制代码

检查是否安装成功

pm2 -v
复制代码

这里列出一些经常使用的pm2 命令

pm2 守护的进程

pm2 list 
复制代码

中止守护进程

pm2 stop app_name 
复制代码

删除守护进程

pm2 delete app_name 
复制代码

打开项目的package.json ，配置一个pm2命令

pm2 start yarn --interpreter bash --name oitboy-front -- start
复制代码

而后传到服务器上，执行命令

yarn pm2
复制代码

此时pm2就在为咱们守护进程了！

ps:上传服务能够再配置一个push命令

yarn build  && rm -rf myblog-front-app && mkdir myblog-front-app &&  cp -r .nuxt/ myblog-front-app/.nuxt && cp -r static/ myblog-front-app/static && cp  package.json myblog-front-app && cp nuxt.config.js myblog-front-app && scp -r myblog-front-app root@服务器地址:/home/vue/
复制代码

整个操做大概是:

1. 打包编译
2. 本地删以前的缓存文件myblog-front-app
3. 当前文件夹建立一个myblog-front-app存储要上传的文件
4. 复制.nuxt 文件夹下全部文件到myblog-front-app/.nuxt
5. 复制static 文件下全部文件到myblog-front-app/static
6. 复制 package.json 到myblog-front-app/
7. 复制 nuxt.config.js 到myblog-front-app/
8. 上传本地 myblog-front-app全部文件到 远程地址 /home/vue/

而后每次打包上传，咱们就能够直接yarn push 输入服务器密码就行了

第六步：配置nginx反向代理

首先确定是，安装Nginx，网上不少教程，这里就不特别说明了。

nginx 启动时会加载/etc/nginx/conf.d/下的配置，咱们只须要在这个文件夹下单独配置本身的配置就行

建立一个本身的配置

vim /etc/nginx/conf.d/myapp.conf
复制代码

配置以下：

upstream nodenuxt {
    server 127.0.0.1:3001; #nuxt项目 监听端口
    keepalive 64;
}
server {
    listen 80;
    server_name oitboy.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; #反向代理
    }
}
复制代码

而后重启Nginx

nginx -s reload
复制代码

此时就能够输入你的域名访问你的项目了（固然你得提早解析域名到你的服务器上）。