Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶

这篇具有很好参考价值的文章主要介绍了Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

服务器:Nginx
面板:宝塔面板
个人博客:https://timebk.cn/
原文地址:原文

项目打包

第一步肯定是打包咯,前提是项目已开发好了以及没有啥Bug了哈

npm run build
  • 打包好后,你会在项目根目录下发现多了个 .output 文件夹
  • 打开这个文件夹,将里面的所有文件压缩成压缩包
  • 压缩包格式推荐 .rar ,其它格式尤其是.zip格式可能会造成有中文名的文件的名称乱码,从而会导致项目无法正常访问

上传服务器

前提是你要有个云服务器,推荐安装宝塔面板!

  • 在服务器 wwwroot 文件夹下新建一个文件夹,文件夹名称随意(推荐改成你之后要绑定的域名),这个文件夹将作为项目文件夹
  • 打开该文件夹,将我们的压缩包上传到其根目录,解压

PM2管理器安装

这是一个Node守护进程管理器

  • 咱们点击宝塔面板的 软件商店 ,搜索 PM2,点击安装(若是非面板,访问 PM2官网 ,自行按照文档在终端进行安装)
  • 打开 PM2管理器 ,先点击 Node版本,选择合适的Node版本(注意,宝塔的这个PM2管理器是全局的,可能影响你之前运行的项目)

配置ecosystem.config.js

回到刚刚我们的创建项目文件夹根目录,新建一个 ecosystem.config.js 文件

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: 'guanwang',// 进程名称
      port: '3001',// 启动端口
      script: './server/index.mjs'// 执行文件
      exec_mode: 'cluster',// 开启集群模式,多线程模式
      instances: 'max',// 集群实例数
      autorestart: true // 程序崩溃后自动重启
    }
  ]
  • 注意,设置的端口port你需要在服务器提供商和服务器安全配置里开放此端口

运行项目

  • 进入 PM2管理器项目列表 ,点击 添加项目
  • 启动文件 选择 ecosystem.config.js运行目录 选择 ecosystem.config.js 所在的目录(一般会自动生成),点击 提交
  • 注意,提交后你可能会看到项目列表生成了多个相同名称的集群,不用担心,后续的设置端口监听和删除项目和映射和重启等都只需要点其中一个集群的就可以了
  • 现在,你可以通过 ip + 设置的端口 访问项目了

映射,绑定域名

实际应用中,为了考虑IP保护和方便推广,我们需要为项目绑定域名

  • 进入 PM2管理器 ,点击该项目的其中一个集群的 设置端口 ,输入我们在 ecosystem.config.js 里填写的port,点击提交
  • 点击 映射 ,填写我们解析好后的主域名或二级域名或多个域名,点击提交
  • 现在,我们移步到 网站管理PHP项目 ,可以看到多了一个我们所绑定的域名的项目,它的PHP版本是 静态
  • 接下来你就可以进入这个项目的设置,为它增加SSL了(推荐),当然,你现在可以通过该域名访问当前项目啦

修改项目端口

我们有的时候需要给该项目重新定义一个端口

  • 首先,我们要在 ecosystem.config.js 文件里设置新的 port(端口)
  • 然后,进入 PM2管理器删除该项目 ,对没错,先删除它,若你直接点击重启或者设置端口,很大概率会出现新端口不生效或者项目崩溃!!!
  • 删除后,重新点击 添加项目 ,重做一次【运行项目】和【映射,绑定域名】步骤即可,现在你可以通过 ip + 新的端口号 访问项目了
  • 上方的步骤完成后,请移步到 网站管理PHP项目 ,点击该项目绑定的域名的 设置反向代理,修改 目标URL 的端口号即可,现在你可以通过该域名访问项目了

项目文件更新

部署项目后,也许我们在本地开发了新功能或新页面需要重新部署到服务器

  • 在本地开发好后,使用 npm run build 打包,然后将 .output 文件夹里的所有文件压缩成压缩包(.rar)
  • 推荐先将服务器上面之前上传的项目文件全部删除,哦对了,保留 ecosystem.config.js ,因为这个我们一般不用再改了
  • 删除后,将新的压缩包上传到项目文件夹根目录里,解压
  • 打开 PM2管理器 ,点击该项目集群其中一个的 编辑 ,注意,这里咱们不能点重启,因为我发现直接点重启会项目直接停止运行,且再点击启动也没用
  • 打开 编辑 后,启动文件重新选择成 ecosystem.config.js ,提交,现在,你的项目就正常更新了

后言

因为系统环境不同,Nuxt3项目部署服务器问题千千万,如果你有遇到其它没提到的情况,留言一起探讨吧~文章来源地址https://www.toymoban.com/news/detail-654625.html

到了这里,关于Nuxt3 全栈 项目服务器部署 全网最全最细保姆级教程 解决各种小坑 时光小灶的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 如何快速搭建自己的阿里云服务器(宝塔)并且部署springboot+vue项目(全网最全)

    对于新手或者学生党来说,有时候就想租一个云服务器来玩玩或者练练手,duck不必花那么多钱去租个服务器。这些云服务厂商对学生和新手还是相当友好的。下面将教你如何快速搭建自己的阿里云服务器,完成云服务器的部署。 现在阿里云对于新用户来说,还是挺仗义的,

    2024年02月04日
    浏览(84)
  • 创建网站教程:服务器环境搭建(MySQL+Jdk+Nginx...),前后端项目部署(技术栈:SSM+Vue),域名+备案【全网最简单】

    【如有建站方面的需求欢迎 添加微信 ,接私单 】 2024/4/26记,本文写于1年前,当时建站经验不够丰富,文章逻辑混乱,近期重新编写,希望能帮助更多小伙伴,搭建属于自己的网站。 我主要以我部署的个人网站:www.pbjlovezjy.com 为例,来讲解如何搭建一个网站,源码如果需要

    2024年04月26日
    浏览(61)
  • Nuxt3如何新建项目

    1.新建一个文件目录 nuxt-app 2.命令行cd到目录下运行 npx nuxi init nuxt-test 回车运行下 nuxt-test是文件名自己随意 3.再cd nuxt-test到目录下 运行npm install 4.运行完成后 npm run dev 启动项目 显示以下页面 1.在app.vue根目录同级新建pages文件夹 再新建一个index页面(新建文件目录参考官方文档

    2024年02月13日
    浏览(44)
  • nuxt3:我们开始吧-开发-配置-部署

    一、背景介绍 2022 年 11 月 16 日,全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行,并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于  Vite 、 Vue3  和  Nitro  的 Nuxt 框架的现代重写,具有一流的 Typescript 支持,是两年多研究、社区反馈、创新和实验的结果。为每个人提供了

    2023年04月12日
    浏览(44)
  • Nuxt3 + Naive UI 的SSG项目分享(一)

    自从Vue3发布后,学习Vue3就形成了一个趋势和热潮。 Vue3相比Vue2,引入tree-shaking,使得打包的整体体积变小了;在兼顾vue2的options API的同时还推出了composition API,大大增加了代码的逻辑组织和代码复用能力;采用proxy替换了之前的defineProperty,proxy有多达13种拦截方法;增加了

    2023年04月09日
    浏览(34)
  • nuxt3项目使用pdfjs-dist预览pdf

    使用的包的源代码是 pdfjs - npm 但是我们实际上项目中使用的是pdfjs打包后的dist文件,也就是pdfjs-dist - npm 所以我们需要使用这个命令 我们可以克隆pdfjs这个包来看源代码,里面有使用的例子,也可以根据源代码自己打包生成你想要的版本的pdfjs-dist,官方文档强调了对于新旧

    2024年02月09日
    浏览(30)
  • Nuxt3项目中的问题汇总-刷新页面useFetch无返回

    坑有千千万,汇总下目前的解决办法,也因为对框架的不够深入,掌握得有限,大家有更好的,请指教【抱拳】 浏览器刷新的时候页面没有显示数据,接口data无返回。本身nuxt的useFetch在参数不变的情况下,数据是不会重新从后台接口去请求数据的,会直接拿上一次的结果。

    2024年02月11日
    浏览(39)
  • 部署 ssm 项目到云服务器上(购买云服务器 + 操作远程云服务器 + 服务器中的环境搭建 + 部署项目到服务器)

    推荐的做法:买一个云服务器。(主要是要有一个外网 IP) 好处:① 方便 (如果自己搭建,就比较麻烦)、② 便宜 (如果只是为了学习使用,最低配置的服务器完全够用,不到 50 元就能买一年使用权)、③ 有外网 IP ,可以部署项目(有了外网 IP,我们部署的项目,别人

    2024年02月11日
    浏览(70)
  • Nuxt3打包部署到Linux(node+pm2安装和运行步骤+nginx代理)

    最近,我们项目组的工作接近尾声,需要把项目部署上线。由于前端第一次使用Nuxt3框架,后端也是第一次部署Nuxt3项目,所以刚开始出现了很多问题。在我上网搜索很多教程后,得到了基本的流程。 1.服务器安装node.js环境 Nuxt3官方文档 https://nuxt.com/docs/getting-started/installati

    2024年02月11日
    浏览(43)
  • java-----web项目部署到新服务器以及服务器的部署

    目录 一、服务器安装jdk1.8  二、安装mysql5.7 2.1下载mysql  2.2修改root账号密码 2.3设置远程登录 三、项目的部署 3.1导入数据库 3.2将项目打成jar包 3.3项目上传 服务器部署项目的方式,本次以打成jar包的形式讲解(以springboot项目为例) 首先服务器要有jdk1.8和mysql5.6及以上的版本

    2024年02月06日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包