【nuxt】服务器渲染部署步骤及【nginx】反向代理

最新推荐文章于 2023-12-21 16:31:09 发布

Z-gril

最新推荐文章于 2023-12-21 16:31:09 发布

阅读量213

点赞数 2

分类专栏： nuxt 前端技术类文章标签： nuxt nginx

本文链接：https://blog.csdn.net/qq_35015526/article/details/84876199

版权

前端技术类同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

nuxt

1 篇文章 0 订阅

订阅专栏

【nuxt】服务器渲染部署步骤及【nginx】反向代理

创建文件目录

mkdir -p /home/upload/unit

进入文件目录

cd /home/upload/unit

下载nodeJS

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

注意：

想要合适的版本node到 https://nodejs.org/dist/ 下自己查找到时候复制链接 wget的时候粘贴复制的链接即可

解压NodeJs文件

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

为nodejs更名

mv /home/upload/node-v8.9.1-linux-x64/ /home/upload/node8.9.1

# 软链接指向到node npm npx

ln -s /home/upload/node8.9.1/bin/node /home/upload/bin/node

ln -s /home/upload/node8.9.1/bin/npm /home/upload/bin/npm

ln -s /home/upload/node8.9.1/bin/npx /home/upload/bin/npx

查看软链是否成功

ls -al /home/upload/bin

软链接输出内容

[root@jsyfpre001 bin]# ls -al /home/upload/bin

total 3428

drwxr-xr-x 2 root root 4096 Feb 6 14:09 .

drwxr-xr-x. 32 root root 4096 Feb 6 14:02 ..

lrwxrwxrwx 1 root root 29 Feb 6 14:09 node -> /home/upload/node8.9.1/bin/node

lrwxrwxrwx 1 root root 28 Feb 6 14:09 npm -> /home/upload/node8.9.1/bin/npm

二: 安装vue相相关包

如果vue-cli没有安装，请安装vue-cli

npm install -g vue-cli

到项目目录下

cd /data/www/project/shop/gday

安装淘宝景象, 因为在国内用npm安装会比较慢, 所有我们使用淘宝镜像安装也就是cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

建立cnpm软链

ln -s /home/upload/node8.9.1/bin/cnpm /home/upload/bin/cnpm

安装vue相关组件

cnpm install

查看是cnpm 是否安装完成

cnpm -v

输出内容包括:

node版本

npm版本

cnpm 版本等信息

[root@jsyfprod001 gday]# cnpm -v

cnpm@5.2.0 (/home/upload/node8.9.1/lib/node_modules/cnpm/lib/parse_argv.js)

npm@5.6.0 (/home/upload/node8.9.1/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)

node@8.9.1 (/home/upload/node8.9.1/bin/node)

npminstall@3.3.0 (/home/upload/node8.9.1/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)

prefix=/home/upload/node8.9.1

linux x64 3.10.0-693.5.2.el7.x86_64

registry=https://registry.npm.taobao.org

三、安装pm2 node进程管理器：

进入到gday目录下安装pm2

注(重要): 在其他目录下安装全局pm2 虽能安装成功但是执行pm2 list的时间一直失败在项目目录下成功了所以才到项目目录下执行安装pm2命令

cd /data/www/project/shop/gday

cnpm install -g pm2

安装信息如下(最后几行)

All packages installed (194 packages installed from npm registry, 1 packages installed from remote url, used 3s, speed 2.13MB/s, json 173(1.43MB), tarball 5.17MB)

[pm2@2.10.1] link /home/upload/node8.9.1/bin/pm2@ -> /home/upload/node8.9.1/lib/node_modules/pm2/bin/pm2

[pm2@2.10.1] link /home/upload/node8.9.1/bin/pm2-dev@ -> /home/upload/node8.9.1/lib/node_modules/pm2/bin/pm2-dev

[pm2@2.10.1] link /home/upload/node8.9.1/bin/pm2-docker@ -> /home/upload/node8.9.1/lib/node_modules/pm2/bin/pm2-docker

[pm2@2.10.1] link /home/upload/node8.9.1/bin/pm2-runtime@ -> /home/upload/node8.9.1/lib/node_modules/pm2/bin/pm2-runtime

建立软链接(pm2)

ln -s /home/upload/node8.9.1/bin/pm2 /home/upload/bin/pm2

Nuxt官方部署

Nuxt官方部署教程如下:https://zh.nuxtjs.org/guide/commands

由于我们的环境是本地开发，部署于Linux服务器，下面开始打包操作：

需要先后执行以下命令

nuxt build

但是安装的会时候提示

[root@jsyfpre001 shop]# nuxt build

-bash: nuxt: command not found

解决方法如下:

把nuxt自带的nuxt命令放到服务器项目目录下

执行软链(放到服务器根目录)命令如下:

注意：最好去拷贝服务器项目中node_modules/nuxt/bin/nuxt

ln -s /data/www/project//gday/node_modules/nuxt/bin/nuxt /data/www/project/gday/nuxt

此时项目目录为:

[root@jsyfpre001 gday]# ls -al

total 228

drwxr-xr-x 12 root root 4096 Feb 6 19:14 .

drwxr-xr-x 5 root root 4096 Feb 6 12:02 ..

-rw-r--r-- 1 root root 1536 Feb 6 12:03 app.html

drwxr-xr-x 4 root root 4096 Feb 6 12:03 assets

drwxr-xr-x 6 root root 4096 Feb 6 12:03 components

-rw-r--r-- 1 root root 207 Feb 6 12:03 .editorconfig

-rw-r--r-- 1 root root 28623 Feb 6 12:03 element-variables.scss

-rw-r--r-- 1 root root 11515 Feb 6 12:03 .eslintrc.js

-rw-r--r-- 1 root root 92 Feb 6 12:03 .gitignore

drwxr-xr-x 2 root root 4096 Feb 6 12:03 layouts

drwxr-xr-x 2 root root 4096 Feb 6 12:03 middleware

drwxr-xr-x 1106 root root 114688 Feb 6 14:18 node_modules

lrwxrwxrwx 1 root root 64 Feb 6 19:14 nuxt -> /data/www/project/shop/gday/node_modules/nuxt/bin/nuxt #添加: 注意此行

-rw-r--r-- 1 root root 2950 Feb 23 14:20 nuxt.config.js

-rw-r--r-- 1 root root 1150 Feb 23 14:20 package.json

drwxr-xr-x 24 root root 4096 Feb 23 14:20 pages

drwxr-xr-x 2 root root 4096 Feb 23 14:20 plugins

-rw-r--r-- 1 root root 2843 Feb 23 14:20 README.md

drwxr-xr-x 9 root root 4096 Feb 23 14:20 static

drwxr-xr-x 2 root root 4096 Feb 23 14:20 store

drwxr-xr-x 4 root root 4096 Feb 23 14:20 .svn

五、根目录package.json配置

注：官方推荐的根目录package.json配置信息如下

(我自定义端口：8080）

{

"name": "hao_de_pc",

"version": "1.0.0",

"description": "hao_de_pc",

"author": "wangpengjie <wangpengjie369@126.com>",

"private": true,

"config": {

"nuxt": {

"host": "127.0.0.1",

"port": "880"

}

"scripts": {

"dev": "nuxt",

"build": "nuxt build && PORT=8080 npm start",

"start": "nuxt start",

"generate": "nuxt generate",

"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",

"precommit": "npm run lint"

}

将根目录的这几个文件夹都上传到服务器的 nuxt 文件夹（我对应服务器文件夹为：/data/www/project/gday）：

注：不打包的静态资源，静态文件，第三方插件也同时上传到服务器

再安装下依赖插件（会生成node_modules包）：

cd /data/www/project/shop/gday

npm install

注: 为方便与pm2守护进行结合, 使用更加方便nuxt.js服务端渲染应用部署这样就完成了

官方先后执行 npm run build 、npm start 即可完成部署。

而我这边只要执行 npm run build ，其实我只是把两个合并成一个，并设置了端口以便区别其他应用，避免端口占用！

六、关于nuxt命令、pm2常用命令

nuxt 启动一个热加载的Web服务器（开发模式,端口默认3000） localhost:3000。（可在package.json更改端口和ip地址）

nuxt build 利用webpack编译应用，压缩JS和CSS资源（发布用）。

nuxt start 以生成模式启动一个Web服务器 (nuxt build 会先被执行)。

nuxt generate 编译应用，并依据路由配置生成对应的HTML文件。(用于静态站点的部署，会产生dist文件夹，生存的html文件在dist里)

*1.下面启动Nuxt项目

npm run start

*2.到项目目录下用pm2执行启动Nuxt项目命令

pm2 start npm --name "jsyfShopNuxt" -- run start

注：必须先启动 nuxt项目，再启动 pm2 项目才可以

注：之后更改服务器上的内容，重载守护进程就更新了更改的内容

pm2 reload 0 或 pm2 reload all

补充：关于pm2常用命令：

pm2 list # 查看当前正在运行的进程

pm2 logs # 控制台显示所有日志

pm2 start all # 启动所有应用

pm2 restart all # 重启所有应用

pm2 stop all # 停止所有的应用程序

pm2 delete all # 关闭并删除所有应用

pm2 reload all # 重载

pm2 start 0 # 启动 id为 0的指定应用程序

pm2 restart 0 # 重启 id为 0的指定应用程序

pm2 stop 0 # 停止 id为 0的指定应用程序

pm2 delete 0 # 删除 id为 0的指定应用程序

pm2 reload 0 # 重载id为 0的指定应用程序

pm2 logs 0 # 控制台显示编号为0的日志

pm2 show 0 # 查看执行编号为0的进程

pm2 monit # 监控

七、nginx 反向代理配置

upstream nodenuxt {

server 127.0.0.1:8080; #nuxt项目监听端口

（注：host需与package.json一样设置为127.0.0.1，端口必须与package.json的端口一致）

keepalive 64; （连接数）

}

server {

listen 80;

server_name gdayweb.jindingtimes.com;

if ($host ~* "^(.*?)\.jindingtimes\.com$") {

set $domain $1;

}

index index.html index.php index.htm;

error_page 400 /errpage/400.html;

error_page 403 /errpage/403.html;

error_page 404 /errpage/404.html;

error_page 503 /errpage/503.html;

location ~ /\.ht {

deny all;

}

location / {

if ($domain ~* "next") {

root /home/wwwroot/gdayweb_jindingtimes_com/public_html; #服务器项目目录路径

}

if ($domain ~* "nuxt") {

root /home/wwwroot/gdayweb_jindingtimes_com/public_html; #服务器项目目录路径

}

proxy_set_header Host $host;

proxy_set_header X-Real-IP $remote_addr;

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

proxy_set_header X-Forwarded-Proto $scheme;

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; #反向代理

}

Z-gril

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【nuxt】服务器渲染部署步骤及【nginx】反向代理

【nuxt】服务器渲染部署步骤及【nginx】反向代理创建文件目录 mkdir -p /home/upload/unit 进入文件目录 cd /home/upload/unit 下载nodeJS wget https://nodejs.org/dist/v8.9.1/node-v8.9.1...
复制链接

扫一扫