Nuxt.js在centos7上的发布部署

本文涉及的产品
.cn 域名,1个 12个月
简介: Nuxt.js在centos7上的发布部署

前言


刚有个需求,开发个官网,涉及到SEO,但是vue开发的项目基本上是单页面应用,客户端渲染的,不利于搜索优化。 但是有成熟的SSR技术,也就是服务端渲染,本文使用Nuxt.js开发,部署和传统的vue部署略有区别。


源码微调


这个问题会出现,就是发布了后,服务器上可以访问,对外不能访问,需要对外暴露端口,设置 0.0.0.0 任何域名都可访问。

修改package.json文件,添加内容


//上面的不用动
  ,
  "config": {
    "nuxt": {
      "host": "0.0.0.0",
      "port": "3000"
    }
  }


1dc618a0ed9580ce8bfa6facb208c08f.png


build


在项目目录下执行


npm run build

5d4c6812c8535adbb050f4ddf2e1bce8.png


项目上传到centos服务器


复制文件和目录


.nuxt

assets (有的没有这个)

static

nuxt.config.js

package.json

46a9d80a6e05e4e3b19d57a0ee70bcdf.png

在项目部署目录下执行


1:【前提: centos上安装 node】


例如下载到/usr/local/src目录下


wget https://npm.taobao.org/mirrors/node/v14.13.1/node-v14.13.1-linux-x64.tar.xz

解压


# xz格式,先用xz解压
xz -d node-v14.13.1-linux-x64.tar.xz
# 再用tar解压
tar xvf node-v14.13.1-linux-x64.tar


设置环境变量


vim ~/.bashrc

在文件末尾添加内容并保存


export PATH=/usr/local/src/node-v14.13.1-linux-x64/bin:$PATH

使配置生效


source ~/.bashrc

查看安装版本


[root@master site]# node -v
v14.13.


2:【安装pm2】


npm stall -g pm2

pm2想了解更多的话,可以点击此处


2:【下载依赖】

在项目目录下执行


npm install

1dc618a0ed9580ce8bfa6facb208c08f.png


3:【使用pm2启动项目】

在项目目录下执行

pm2 start npm --name "boshi-web" -- run start

注意:boshi-web是给项目起的名字,命名随意,有空格的话,加双引号就可以了,不要使用单引号。加单引号的话,在使用“pm2 list”进行查看时,会看到项目进程的名字中也会带有单引号,但使用双引号就没问题。

5d4c6812c8535adbb050f4ddf2e1bce8.png


测试访问


http://服务器ip地址:3000

如:http://192.168.196.111:3000


nginx域名代理


方式1:


server {
        listen    80;
        server_name   域名地址;
        location / {
      proxy_pass http://ip:3000;
       }
   }


备注


ip可以使 服务器内网地址或外网地址,没用容器安装nginx也可以是127.0.0.1


方式2:


http {
  //其他代码略
    upstream 任意服务名A {
        # 这里指向宿主机中启动的官网服务
       server    ip:3000;
    }
   server {
        listen    80;
        server_name   你的域名地址;
        location / {
      proxy_pass http://任意服务名A ;
       }
   }    
}
相关文章
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
11 2
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
若依修改,若依部署在本地运行时的注意事项,后端连接了服务器,本地的vue.config.js要先改成localhost:端口号与后端匹配,部署的时候再改公网IP:端口号
|
3天前
|
前端开发 NoSQL 数据库
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
部署常用的流程,可以用后端,连接宝塔,将IP地址修改好,本地只要连接好了,在本地上前后端跑起来,前端能够跑起来,改好了config.js资料,后端修改好数据库和连接redis,本地上跑成功了,再改
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的高校宿舍信息管理系统小程序附带文章源码部署视频讲解等
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电影交流平台小程序附带文章源码部署视频讲解等
12 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的电器维修系统小程序附带文章源码部署视频讲解等
8 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生校园兼职微信小程序附带文章源码部署视频讲解等
12 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的二手物品交易平台附带文章源码部署视频讲解等
10 1
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的机电公司管理信息系统附带文章源码部署视频讲解等
10 0
|
3天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的汉中茗茶微系统设计与实现附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的汉中茗茶微系统设计与实现附带文章源码部署视频讲解等
9 0