Nuxt.js(Vue SSR)创建项目到服务器(Nginx+PM2)部署详细流程(下)

简介: Nuxt.js(Vue SSR)创建项目到服务器(Nginx+PM2)部署详细流程(下)
  • 找到 nuxt.config.js,添加下面代码:
export default {
  head: {...},
  css: [...],
  // 配置服务器(主要是这个配置)
  server: {
    // port: 8000, // default: 3000
    host: '0.0.0.0', // default: localhost (推荐)
    // host: '0', // 等于 host: '0.0.0.0' 这样配置,在mac上这么配置没问题,但是在window上这么配置有报错。
    timing: false
  },
  • 再次运行项目,生产或开发都行,访问地址就会变成本机的 ip 地址加端口:
╭─────────────────────────────────────────╮
 │                                         │
 │   Nuxt @ v2.14.12                       │
 │                                         │
 │   ▸ Environment: development             │
 │   ▸ Rendering:   server-side            │
 │   ▸ Target:      server                 │
 │                                         │
 │   Memory usage: 29.4 MB (RSS: 74 MB)    │
 │                                         │
 │   Listening: http://10.0.93.169:3000   │
 │                                         │
 ╰─────────────────────────────────────────╯
  • 本地运行项目就到这里结束了,下面需要将项目发布到服务器运行起来。

四、Nuxt.js 上传服务器(Nginx + Node + PM2)

  • 下面的这些操作如果需要测试,可以放在本地机器上进行搭建,把本地电脑当服务器使使。
  • 服务器 安装 Nginx + Node + PM2
  • Nuxt.js 是依赖 Node,所以 服务器 需要安装 Node,装了 Node 就会自带 NPM,然后通过 NPM 安装 PM2:
$ npm install -g pm2
// 可以通过 -h 查询使用方式
$ pm2 -h
  • PM2Node 的进程管理工具。为啥用这个举个例子:运行项目之后,命令行窗口是不能关闭的,如果关闭了就无法访问这个项目地址了,所以需要支持关闭命令行窗口,运行的项目依然能够访问,也就是后台挂起进程,PM2 就可以做到这个事情。
  • 安装好上面环境,在 Nginx 根目录里面通过 Git 拉下来 Nuxt.js 源码,可以新开文件夹存放也是可以的,随你自己
$ git clone xxxxx.git
// 如果存在代码就拉一下代码 保持最新
$ git pull
  • 这里说一下,在网上搜一下会搜到很多只需要导入几个文件就可以运行项目的文章,但是这种方式有时候会出现 编译函数找不到资源文件找不到 之类的问题,所以如果不是特别熟悉 Nuxt.js 的话,直接将整个项目拉下来使用,不需要去单独导入某些文件,这样也完美的避开一些细节上的坑,网上的文章一般都是推荐导入下面几个文件:
.nuxt
static
nuxt.config.js
package.json
package-lock.json
  • 将代码拉到服务器后,需要先走一遍 npm 安装,安装一下依赖包
$ npm install
  • 然后编译项目
$ npm run build
  • PM2 运行项目,后台挂起,你的项目名称,可以随意填个,但是推荐跟项目 package.json 文件里面的 name 字段值一样,这样好区分。。
// 之前是通过 $ npm run dev 或者 $ npm run start,但是命令行窗口不能关闭
// 启动开发环境后台挂起,列举了常用的几种方式,任意选一种
$ pm2 start npm -- run dev
$ pm2 start npm --name "你的项目名称" -- run dev
$ pm2 start ./node_modules/nuxt/bin/nuxt.js 
....
// 启动生产环境后台挂起,列举了常用的几种方式,任意选一种
$ pm2 start npm -- run start
$ pm2 start npm --name "你的项目名称" -- run start
....
// 例如:服务器启动开发环境,开发环境只需要一行命令
$ pm2 start ./node_modules/nuxt/bin/nuxt.js 
// 例如:服务器启动生产环境,生产环境需要先 build 在 start
$ npm run build
$ pm2 start npm --name "nuxt-test" -- run start
// window 电脑注意:上面命令在 MAC 跟 服务器都可以生效,但是在 window 上如果做测试,
// 有部分命令无法生效,我用window 用的少,所以也没去深入折腾,这里给一下建议:
// window 电脑本地测试PM2挂开发环境,生产环境目前上面几种启动方式都无法挂载成功,直接上服务器挂就行了,本地只是用于测试,开发环境也不影响测试。
// 只能通过这行命令启动开发环境,生产环境的命令挂起无效,暂时没解决
$ pm2 start ./node_modules/nuxt/bin/nuxt.js 
  • 然后可以通过 $ pm2 list 查看是否挂起成功,这样显示了就是挂起成功了
┌─────┬──────────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐
│ id  │ name         │ namespace   │ version │ mode    │ pid      │ uptime │ ↺    │ status    │ cpu      │ mem      │ user     │ watching │
├─────┼──────────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤
│ 0   │ nuxt-test    │ default     │ N/A     │ fork    │ 1190     │ 0s     │ 0    │ online    │ 0%       │ 7.8mb    │ den… │ disabled │
└─────┴──────────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘
  • 现在就可以通过你这台电脑或者服务器的 ip 地址加端口号进行访问了,例如:http://10.0.90.164:3000/
  • 如果需要停掉后台挂起,执行删除命令即可,id 就是 $ pm2 list 列表中的 id 值:
// 删除单个挂起进程
$ pm2 delete id
// 删除全面挂起进程
$ pm2 delete all
例如:
$ pm2 delete 0
  • 如果项目修改调整了,上传了新的东西,只需要拉下代码编译后,重启 PM2 对应环境进程即可:
    开发环境 - 初始化:$ git pull + $ npm install + $ pm2 start npm --name "你的项目名称" -- run dev
    生产环境 - 初始化:$ git pull + $ npm install + $ npm run build + $ pm2 start npm --name "你的项目名称" -- run start
    注意:$ pm2 start .... 命令,每次启动都会在 $ pm2 list 列表中新增一个管理进程,所以只需要初始化创建了就行了,后面如果不是通过 $ pm2 delete id 手动删除了,就不需要每次 $ pm2 start ....,只需要重启即可:
    开发环境 - 后续版本更新:$ git pull + $ npm install + $ pm2 restart id
    生产环境 - 后续版本更新:$ git pull + $ npm install + $ npm run build + $ pm2 restart id
  • 额外说一句:如果 PM2 启动项目之后,不知道访问那个地址,那可以先 $ pm2 delete id 删除进程,执行自带的运行方式 $ npm run dev$ npm run start,需要哪个环境就运行哪个命令,运行之后可以拿到访问地址,拿到之后关掉,在通过 PM2 运行访问同意一个地址,注意端口号别变化了,如果端口被占用,会分配一个新的端口:
╭──────────────────────────────────────────╮
 │                                          │
 │   Nuxt @ v2.14.12                        │
 │                                          │
 │   ▸ Environment: production              │
 │   ▸ Rendering:   server-side             │
 │   ▸ Target:      server                  │
 │                                          │
 │   Memory usage: 29.4 MB (RSS: 74.6 MB)   │
 │                                          │
 │   Listening: http://10.0.90.164:3000/    │
 │                                          │
 ╰──────────────────────────────────────────╯
  • 最终通过 PM2 启动挂起之后,现在需要配置一下 Nginx,之前启动是 Node 服务,访问是没问题的,但是现在需要通过 Nginx 反代理到 Node,也就是通过 Nginx 去访问到 Node 的资源地址。
  • 找到 Nginxnginx.conf 文件,在里面添加一个新的服务,以及一个反代理服务
http {
  # 新建一个 nuxt server 服务
  upstream nuxt {
    # 这里就是上面配置的 Node ip + 端口号,之前默认是 localhost:3000
    server 0.0.0.0:3000;
    keepalive 64;
  }
  server {
    listen 8083; #服务器端口
    server_name www.nuxt.com;  #这里对应你服务器的域名
    location / {
        proxy_pass http://nuxt;  #这里对应上面 upstream 中新建的服务名
        index index.html index.htm;
    }
  }
}
  • 配置好这个之后,通过 $ nginx 启动 Nginx 或者 $ nginx -s reload 刷新 Nginx 配置文件生效。
  • 配置好之后,启动 Node,启动 Nginx,这样就可以直接通过 Nodeip + :3000端口 直接访问,也可以通过 Nginxip或域名 + :8083端口 访问了,对外当然是走 Nginx 了,配置一下域名。

  • 到这就完事了,其他就是项目内部的细节配置跟使用了,会写到另外的文章里面去!
  • Nuxt.js(Vue SSR)项目配置以及开发细节
  • 附带 PM2 配置文件的使用,作用就是将生产或开发环境设置到配置文件里面,只需要执行配置文件即可达到效果,当然也可以不用走配置文件,走上面命令行区分生产或开发环境也一样,看自己喜好。

相关文章
|
20天前
|
弹性计算
学生申请阿里云服务器流程,云工开物免费领取云服务器
学生可免费领取或低价购买阿里云服务器。通过“云工开物”计划,学生可申领300元无门槛代金券,用于购买指定云服务器产品。新用户可选38元/年的轻量应用服务器,老用户可选99元/年的ECS服务器,续费同价。具体优惠及操作流程可参考阿里云官方页面。
|
2月前
|
存储 弹性计算 容灾
新手小白如何购买阿里云服务器?2025最新图文流程
本文详细介绍阿里云ECS服务器自定义购买全流程,涵盖付费模式、地域、网络、实例规格、镜像、存储、公网IP、带宽、安全组等配置选择,帮助用户全面了解如何根据需求选购阿里云服务器。
214 2
|
2月前
|
存储 弹性计算 运维
阿里云服务器介绍:什么是ECS、使用场景及租用流程(图解)
阿里云服务器ECS是阿里云提供的虚拟化计算服务,用户可按需租赁使用,无需自建机房。它具备高可用、高安全、弹性伸缩、成本节约等优势,适用于网站搭建、数据应用、运维测试等多种场景。本文详解ECS组成、架构、使用方法及与传统服务器的区别。
342 3
|
17天前
|
Ubuntu 安全 关系型数据库
安装MariaDB服务器流程介绍在Ubuntu 22.04系统上
至此, 您已经在 Ubuntu 22.04 系统上成功地完成了 MariadB 的标准部署流程,并且对其进行基础但重要地初步配置加固工作。通过以上简洁明快且实用性强大地操作流程, 您现在拥有一个待定制与使用地强大 SQL 数据库管理系统。
130 18
|
10天前
|
弹性计算 网络安全 数据库
阿里云服务器购买全攻略:四种方式详解与步骤指引,一文读懂购买流程
阿里云服务器如何租用与购买呢?阿里云服务器有多种购买方式,比较常见的有自定义购买,快速购买,通过活动购买和通过云市场购买,不同的购买方式有不同的购买步骤及适用用户群体。本文将详细介绍阿里云服务器的四种购买途径,并提供图文并茂的操作指南,助您轻松完成云服务器的购买与配置选择。
|
19天前
|
Ubuntu 安全 关系型数据库
安装MariaDB服务器流程介绍在Ubuntu 22.04系统上
至此, 您已经在 Ubuntu 22.04 系统上成功地完成了 MariadB 的标准部署流程,并且对其进行基础但重要地初步配置加固工作。通过以上简洁明快且实用性强大地操作流程, 您现在拥有一个待定制与使用地强大 SQL 数据库管理系统。
92 15
|
20天前
|
弹性计算 安全 Linux
使用阿里云服务器安装Z-Blog博客网站流程,新手一键部署教程
本教程教你如何在阿里云99元服务器上,通过宝塔Linux面板一键部署Z-Blog博客。基于CentOS 7.9系统,从远程连接、安装宝塔面板、开放端口到部署Z-Blog全流程详解,操作简单,新手也能轻松搭建个人博客网站。
263 13
|
27天前
|
存储 域名解析 弹性计算
阿里云上云流程参考:云服务器+域名+备案+域名解析绑定,全流程图文详解
对于初次通过阿里云完成上云的企业和个人用户来说,很多用户不仅是需要选购云服务器,同时还需要注册域名以及完成备案和域名的解析相关流程,从而实现网站的上线。本文将以上云操作流程为核心,结合阿里云的活动政策与用户系统梳理云服务器选购、域名注册、备案申请及域名绑定四大关键环节,以供用户完成线上业务部署做出参考。
|
2月前
|
存储 弹性计算 运维
阿里云服务器全解析:ECS是什么、应用场景、租用流程及优缺点分析
阿里云ECS(Elastic Compute Service)是阿里云提供的高性能、高可用的云计算服务,支持弹性扩展、多样化实例类型和多种计费模式。适用于网站搭建、数据处理、运维测试等多种场景,具备分钟级交付、安全可靠、成本低、易运维等优势,是企业及开发者上云的理想选择。
380 5
|
2月前
|
人工智能 自然语言处理 安全
Python构建MCP服务器:从工具封装到AI集成的全流程实践
MCP协议为AI提供标准化工具调用接口,助力模型高效操作现实世界。
444 1