新购服务器项目部署指南—— Express + Vue + Nginx+ pm2 Nodejs项目部署全流程

news2024/11/26 22:46:12

目录

  • 一、部署Express项目
    • 1.1、安装Node
    • 1.2、安装pm2进程管理器
    • 1.3、部署Express后端项目
  • 二、部署Vue前端项目
    • 2.1、Nginx的下载安装与SLL配置
    • 2.2、打包Vue项目
    • 2.3、上传项目到Nginx目录
    • 2.4、配置Nginx
  • 附录
    • pm2命令速览
    • Nginx命令速览
  • 最后

书接上回:新购服务器开荒记录(服务器安装宝塔、Nginx、Java、Python、pip、Node、npm)

一、部署Express项目

1.1、安装Node

要部署Express项目,首先要保证服务器已经安装好了Node,可以输入:node --version查看node的版本:

在这里插入图片描述
如果没有安装node,可以使用宝塔安装(推荐),进入软件商店,搜索node,选择node.js版本管理器1.8进行安装:
在这里插入图片描述
安装好后点击设置,点击更新版本列表(列表每24小时与Node.js官网列表同步一次,可点击【更新版本列表】按钮立即与Node.js官网同步版本列表):
在这里插入图片描述
然后选择需要的node版本进行一键安装,一般推荐14或者18版本。

也可以自行下载镜像安装,进入node官网:https://nodejs.org/dist/
选择需要下载的版本号,下载node,一般可以选择v16.18.0,解压后使用以下命令来编译、测试和安装Node.js:

./configure
make
sudo make install

1.2、安装pm2进程管理器

PM2 是开源的基于 Nodejs 的进程管理器,包括守护进程,监控,日志的一整套完整的功能。

PM2 是后台运行程序,关闭窗口后程序不受影响。

安装

npm install pm2 -g

也可以通过宝塔安装。

安装完成后检查是否可用,显示如下提示说明成功

pm -v

在这里插入图片描述

1.3、部署Express后端项目

上传Express项目至opt文件夹,
在这里插入图片描述
上传成功后,cd进入项目中,输入npm i安装项目依赖。
在这里插入图片描述
然后将项目所用的端口号开启一下(我项目用的3001),并且重启防火墙:
开启端口号:firewall-cmd --zone=public --add-port=3001/tcp --permanent
重启防火墙:firewall-cmd --reload

运行效果如下:
在这里插入图片描述
最后,使用pm2运行项目的入口文件:pm2 start app.js,显示如下表示项目运行成功,如果需要看目前运行了哪些项目,可以使用pm2 app.js查看:

在这里插入图片描述
使

二、部署Vue前端项目

2.1、Nginx的下载安装与SLL配置

首先查找Nginx安装的路径,查看是否安装过nginx:
输入:whereis nginx
如果显示地址,说明已经安装过nginx了。可以跳到2.2步。

如果没有安装,首先需要安装一些必要环境,在终端中依次输入以下指令,安装必要的包

yum install gcc-c++ 
yum install -y pcre pcre-devel 
yum install -y zlib zlib-devel 
yum install -y openssl openssl-devel 

下载linux版本的Nginx
官网下载:https://nginx.org/en/download.html

下载稳定版本,我下的是1.22.1
在这里插入图片描述

安装包名为nginx-1.22.0.tar.gz,将其放到服务器的/usr/local/nginx目录下,初始没有nginx文件夹需要新建一个空的nginx。
安装Nginx
首先需要解压Nginx的安装包,先cd /usr/local/nginx到nginx目录,然后使用tar -zxvf nginx-1.22.1.tar.gz解压刚刚下载的安装包。
在这里插入图片描述
然后进入nginx-1.22.1文件夹的configure目录下,输入:

./configure
make
make install

在这里插入图片描述
在这里插入图片描述

进行安装,安装后的完整文件夹如下图所示:
在这里插入图片描述

下一步配置ssl,如果本身没有ssl模块,在安装时要安装ssl模块的nginx:./configure --prefix=/usr/local/nginx --with-http_ssl_module
make进行安装:make
输入以下cp指令:

cp /usr/local/nginx/sbin/nginx /usr/local/nginx/sbin/nginx.bak
cp ./objs/nginx /usr/local/nginx/sbin/

会出现是否覆盖的选项,输入y覆盖掉

最后输入whereis nginx,如果显示地址,说明已经安装过nginx了。

可能遇见的问题
如果提示说无法创建普通文件"/usr/local/nginx/sbin/nginx",需要先暂停nginx再启动:/usr/local/nginx/sbin/nginx -s quit(或者niginx -s stop 或者killall nginx)然后再输入
./configure --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_ssl_module

2.2、打包Vue项目

开发完成后,在终端输入npm run build或者vite build进行打包,不同项目的打包指令和流程可能不相同,需要查看package.json的具体配置。
在这里插入图片描述
打包完成后,会生成一个dist文件夹,就是成功打包。
在这里插入图片描述

2.3、上传项目到Nginx目录

查找Nginx安装的路径,输入:whereis nginx,找到nginx的目录,将打包好的文件夹(即dist文件夹)上传至/usr/local/nginx/html目录下:

2.4、配置Nginx

进入nginx/conf目录,在其中找到名为nginx.conf的文件,打开,找到server部分:

  1. 端口号 listen (输入要监听的端口号,我的是5173);
  2. 域名配置 server_name (输入自己服务器的ip 例如:127.0.0.1 如果有域名可以输入域名);
  3. 前端项目存放地址 root:(打包后的vue项目文件夹例如:html/dist);
    在这里插入图片描述

配置好后,启动Nginx,在nginx下的sbin目录下输入./nginx,既可以检查配置正常启动。

附录

pm2命令速览

npm install pm2 -g     # 全局安装pm2
pm2 start app.js -i 4  # 后台运行pm2,启动4个app.js 
                       # 也可以把'max' 参数传递给 start
                       # 正确的进程数目依赖于Cpu的核心数目
pm2 start app.js --name my-api # 命名进程
pm2 list               # 显示所有进程状态
pm2 monit              # 监视所有进程
pm2 logs               # 显示所有进程日志
pm2 stop all           # 停止所有进程
pm2 restart all        # 重启所有进程
pm2 reload all         # 0 秒停机重载进程 (用于 NETWORKED 进程)
pm2 stop 0             # 停止指定的进程
pm2 restart 0          # 重启指定的进程
pm2 startup            # 产生 init 脚本 保持进程活着
pm2 web                # 运行健壮的 computer API endpoint (http://localhost:9615)
pm2 delete 0           # 杀死指定的进程
pm2 delete all         # 杀死全部进程

Nginx命令速览

./nginx -s reload 重启nginx
./nginx 启动nginx

最后

💖 个人简介:人工智能领域研究生,目前主攻文本生成图像(text to image)方向

📝 个人主页:中杯可乐多加冰

🔥 限时免费订阅:文本生成图像T2I专栏

🎉 支持我:点赞👍+收藏⭐️+留言📝

另外,我们已经建立了微信T2I学习交流群,如果你也是T2I方面的爱好者或研究者可以私信我加入。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1257484.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

不幸被封号!后续来了...

之前发文说过,视频号“技术领导力”被封号3天,无法直播了;购物车被禁用7天。经过多渠道申诉、跟官方沟通均无效。 对事件不了解的可以看这里《被封号了~》,简单来说就是转播了某位大V的直播,因为某些说不清道不明的原因…

快速了解软件工程学概述(5种软件过程模型)

目录 1 、什么是软件?特点有哪些 ? 2 、 软件危机 定义: 软件危机产生的原因 消除软件危机的方法 3 、软件工程 1.软件工程的介绍 (1)概念 (2)本质特征 (3)软件工程方法学(方…

什么样的CRM系统更值得使用?

CRM系统发展到了2023年,经过了无数次迭代与更新,各种概念开始层出不穷。当您的企业准备实施一套CRM系统,在选型前有个问题需要思考:您到底需要什么样的CRM系统? CRM系统早已经从当初的管理客户关系变为了“十项全能”—…

死磕MybatisPlus系列:Mapper的奇妙之旅

Mybatis Plus源码解析系列篇之Mapper的奇妙之旅 一、MybatisPlus初体验 MybatisPlus是一个基于mybatis的开源orm框架,其内置的Mapper、Service让开发者仅需简单的配置,就能获得强大的CRUD能力;其强大的条件构造器,可以满足各类需…

Walrus 0.4发布:单一配置、多态运行,体验下一代应用交付模型

今天,我们高兴地宣布云原生统一应用平台 Walrus 0.4 正式发布,这是一个里程碑式的版本更新。新版本采用了全新的应用模型——仅需进行单一配置,即可在多种模态的基础设施及环境中运行包括应用服务及周边依赖资源在内的完整应用系统。“You bu…

keil5下使用RAM运行程序的配置过程

本用例是展示HC32F4A0片上2M flash的擦除和读写功能,由于默认配置是程序写入flash中,并从flash中运行程序,所以需要将程序配置为从RAM中运行,这样才能正确运行此程序。默认配置如下: 可以看到MCU的内部flash为2M&#…

Arraylist案例

Arraylist是使用最频繁的一个集合,它与数组类似,不同之处在于它可以动态改变长度,不够了可以扩容。 案例: 我的思考: 首先多个菜品信息可以用Arraylist 来存储,那我们需要再创建一个菜品类Food&#xff0…

uni-app+ts----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点(点击tab跳转对应的元素位置)

uni-app----微信小程序锚点定位 、自动吸顶、滚动自动选择对应的锚点&#xff08;点击tab跳转对应的元素位置&#xff09; html代码部分 重点是给元素加入【 :id“‘item’ item.id”】 <view class"radiusz bg-white pt-[30rpx] z-[999]"><u-tabs:list&q…

长期用台灯影响视力吗?备考专用护眼台灯推荐

大家都知道台灯作为一种小范围的桌面照明灯具&#xff0c;在夜晚能给我们带来很大的帮助&#xff0c;不管是办公、还是学习、阅读都需要它提供照明。那么长期使用台灯会影响视力吗&#xff1f;其实台灯一般都眼睛都是没有伤害的&#xff0c;真正对眼睛有伤害的是不正确的使用台…

MySQL(免密登录)

简介: MySQL免密登录是一种允许用户在没有输入密码的情况下直接登录到MySQL服务器的配置。这通常是通过在登录时跳过密码验证来实现的。 1、修改MySQL的配置文件 使用vi /etc/my.cnf&#xff0c;添加到【mysqld】后面 skip-grant-tables #配置项告诉mysql跳过权限验证&#…

win10屏幕录制神器,让你轻松上手!

屏幕录制成为了人们日常生活中越来越重要的一部分&#xff0c;无论是游戏录制、在线会议记录&#xff0c;还是教程演示&#xff0c;屏幕录制都能够有效地帮助人们捕捉并分享关键信息。随着windows 10系统的普及&#xff0c;许多用户已经开始探索这个系统中的屏幕录制功能。接下…

CRM的智能招投标对企业有什么意义?

如今CRM系统的生态系统越来越壮大&#xff0c;这些工具的集成极大地丰富了CRM系统的应用场景&#xff0c;例如CRM系统集成企业微信等社交媒体为获客提供便利&#xff1b;再比如CRM集成ChatGPT提高邮件内容质量&#xff0c;对于经常接触招投标项目的业务人员来说&#xff0c;在C…

企业营销管理能够实现自动化吗?怎么做?

当今企业面临着越来越多的营销难题&#xff1a;如何有效培育潜在客户、如何提高营销活动的效果、如何优化营销资源的分配......企业的营销管理怎么做&#xff1f;或许CRM系统营销自动化会起到作用。 客户细分&#xff1a; 企业可以通过CRM的客户细分功能&#xff0c;根据客户…

C#中openFileDialog控件的使用方法

目录 一、OpenFileDialog基本属性 二、使用 OpenFile 从筛选的选择中打开文件 1.示例源码 2.生成效果 3. 其它示例 三、使用 StreamReader 以流的形式读取文件 1.示例源码 2.生成效果 四、一种新颖的Windows窗体应用文件设计方法 在C#中&#xff0c;OpenFileDialog控件…

核密度估计法(KDE)的概念,应用,优点,缺点,以及与正态分布(高斯分布)的区别,以及与概率分布的区别联系。看完你就真正捋清这些概念了

文章目录 前言一、核密度估计法&#xff08;KDE&#xff09;是什么&#xff1f;二、核密度估计法的步骤如下&#xff1a;三、核密度的应用&#xff1a;四、核密度估计法的优点&#xff1a;五、核密度估计法的缺点&#xff1a;六、核密度估计法和正态分布的区别在于&#xff1a;…

UE4/UE5 c++绘制编辑器场景直方图(源码包含场景中的像素获取、菜单添加ToolBar)

UE4/UE5 c场景直方图 UE4/UE5 C绘制编辑器场景直方图绘制原理&#xff1a;元素绘制坐标轴绘制 源码处理 UE4/UE5 C绘制编辑器场景直方图 注&#xff1a;源码包含场景中的像素获取、菜单添加ToolBar 实现效果&#xff1a; 这个是用于美术统计场景中像素元素分布&#xff0c;类…

fastjson和jackson序列化的使用案例

简单记录一下一个fastjson框架和jackson进行序列化的使用案例&#xff1a; 原json字符串&#xff1a; “{“lockCount”:”{1:790,113:1,2:0,211:0,101:1328,118:8,137:0,301:0,302:0}“,“inventoryCount”:”{1:25062,113:2,2:10000,211:2,101:11034,118:9,137:40,301:903914…

如何查看电脑版Office的有效期

有时候点击Office账户看不到有效期信息&#xff0c;那么如何查看呢&#xff0c;其实用一条命令就可以查看。 首选WinR运行&#xff0c;输入cmd回车&#xff0c;然后输入下面的命令&#xff1a; cscript “C:\Program Files\Microsoft Office\Office16\ospp.vbs” /dstatus当然…

文章解读与仿真程序复现思路——电力自动化设备EI\CSCD\北大核心《考虑氢储一体化协同的综合能源系统低碳优化》

这个标题涉及到考虑了多个方面的能源系统优化&#xff0c;其中关键的关键词包括"氢储一体化"、"协同"、"综合能源系统"和"低碳优化"。以下是对这些关键词的解读&#xff1a; 氢储一体化&#xff1a; 氢储存&#xff1a; 指的是氢气的存…