阅读 358

部署nuxt ssr服务器渲染应用

原文我的博客:部署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.jsonmyblog-front-app/
  7. 复制 nuxt.config.jsmyblog-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
复制代码

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

文章分类
前端
文章标签