部署nuxt ssr服务器渲染应用

Zaxcler
2,991 阅读3分钟

原文我的博客：部署nuxt ssr服务器渲染应用支持原文吧😋

我的服务器是centos 7，以下步骤以我的服务器为例

第一步：安装node

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

image.png 找到对应的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 检查是否安装成功

image.png

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

直接脚本安装

curl -o- -L https://yarnpkg.com/install.sh | bash

配置阿里云淘宝镜像

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

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

image.png

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

1.修改package.json 打包命令，我们每个项目肯定都是要自定义端口的，不然多个项目肯定有端口冲突，config内是服务端将运行的端口 image.png

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

本地运行打包命令

yarn build

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

image.png

第四步：在服务上安装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

image.png

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

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

此时就可以输入你的域名访问你的项目了（当然你得提前解析域名到你的服务器上）。

avatar
文章
阅读
粉丝