通过使用XShell工具、Nginx环境实现服务器项目构建与发布

前言:

在信息化和数字化的今天,网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行,选择合适的工具和环境至关重要。本文将详细介绍如何通过XShell工具以及Nginx环境来实现服务器项目的构建与发布,为广大开发者提供一条高效、便捷的路径。如果想学习Ubuntu系统下载和学习资料的可以私我,如果需要的人多的话将会发布一篇关于Ubuntu系统的介绍。

一、为什么需要打包项目

浏览器只能识别并运行html、css、js 文件 。 换句话而言,项目中用vue ,react框架做的项目文件,浏览器是不认识的。 而打包的过程就是把 vue 的关键文件打包成 html、css、js 的文件,让浏览器进行识别,并展示我们的项目。

二、打包之后项目可以通过浏览器直接访问吗

通过 npm run build 打包项目之后,打包的文件会被放入到 dist文件夹中,然后我们直接双击 index.html文件,可以发现,浏览器是无法显示项目的。原因是因为一些文件找不到了。 查看我们的url可以发现,其实我们的url是一个file协议。那么对应的文件路径就会编程盘符下的,在我们当前的盘符下没有对应的文件,那么自然是无法找到的。 而想要解决这个问题的话,就需要把我们的项目运行到一个服务器上,并且把项目部署到服务器之中,这样我们就可以访问啦。 而服务器的存在就是为了可以托管我们的项目,从而避免出现模块无法被找到的问题。

三、域名、DNS、公网IP、服务器、Nginx之间的关系

 1. 域名:https://blog.csdn.net/weixin_63152500?type=lately

域名是一个容易识别和记忆的网址,如https://www.zhihu.com/。它是用户访问网站时输入的网址,方便用户记忆和访问,而不需要记住复杂的IP地址。

2. DNS:域名解析服务器

DNS是Domain Name System的缩写,是一个分布式的目录服务,将用户易于记忆的域名与服务器IP地址进行关联。当用户输入域名时,DNS服务器会查询并将域名转换为相应的IP地址,从而帮助用户访问到目标服务器。

3. 公网IP:服务器在网络中的唯一地址

公网IP是服务器在互联网上的唯一地址,当DNS将域名解析为IP地址时,这个IP地址就是公网IP。用户通过这个公网IP地址,可以访问到部署在服务器上的服务。

4. 服务器:服务部署的电脑

服务器是一台高性能的计算机,用于存储、处理和传输数据。在Web服务中,服务器通常用于部署和运行网站和应用程序。用户可以通过访问服务器的公网IP地址或使用域名来访问这些服务。

5. Nginx:网页服务

Nginx是一个高性能的HTTP和反向代理web服务器,特点是占有内存少,并发能力强,有报告表明能支持高达50000个并发连接数。在Web服务中,Nginx通常用于处理大量的并发连接,提供静态文件服务,通过Nginx,可以实现负载均衡、SSL加密、访问控制等功能,提高网站的性能和安全性。

四、XSHELL和XFTP安装

  1. 打开XShell官网,​​​点击所有下载->所有家庭/学校免费版。

  2. 下载地址:

XSHELL和XFTP安装地址icon-default.png?t=N7T8https://www.xshell.com/zh/free-for-home-school/

五、服务器购买

 1、服务器可在华为云,阿里云,腾讯云官网上根据需求选择合适的服务器类型。

华为云对象存储服务器OBS:https://console.huaweicloud.com/console/?region=cn-east-3#/home

 阿里云对象存储OSS:https://www.aliyun.com/product/oss

 腾讯云轻量应用服务器:https://console.cloud.tencent.com/lighthouse/instance/index?rid=1

2、购买后拿到服务器IP,用户名和密码。

3、打开管理控制台,您可以找到服务器的配置选项,然后找到通信或网络相关的设置,进行端口的配置。

如果是自己编写的程序,一般使用1024以后的端口号,到65535.1023之前都是熟知端口。8081端口号通常用于 HTTP 代理或 Web 代理服务器的服务端口,tomcat文件服务器端口号为8060 uni-ui的端口号为8080,前端项目使用8081。

 

六、Xshell连接服务器

  • 双击空白处新建会话,名称自定义,主机填写服务器IP

  •  ctrl+鼠标点击会话,输入服务器用户名和密码

   

  • 显示连接成功  

 

七、使用XSHELL工具搭建Nginx环境步骤

 注意当前是在 / 路径下执行,可以使用pwd命令查看,如果是 /root 下要执行 cd / 命令

 1、pwd命令查看当前路径

pwd

 2、如果是/root 路径要改变成 / 

cd /

 3、首先

sudo apt update

4、nginx编译时依赖gcc环境

sudo apt install gcc g++

 5、安装prce,让 nginx支持重写功能

 sudo apt search pcre*

 6、安装zlib, nginx使用zlib对http包内容进行gzip压缩

 sudo apt install zlib1g zlib1g-dev

 7、安装openssl,用于通讯加密

 sudo apt install openssl libssl-dev

 8、进行nginx安装

 mkdir nginx

 9、进入nginx文件夹

cd nginx/

 10、在nginx中下载nginx压缩包

 wget https://nginx.org/download/nginx-1.22.0.tar.gz

 11、解压nginx

 tar -zxvf nginx-1.22.0.tar.gz

 12、进入nginx-1.22.0目录中查看

 cd nginx-1.22.0/

 13、查看可执行文件

 ll

 14、在nginx-1.22.0目录中检查平台安装环境

./configure --prefix=/usr/local/nginx

 15、如果不能执行make命令,先安装再执行

sudo apt install make

 16、进行源码编译

 make

 17、安装nginx

 make install

 18、查看nginx配置

/usr/local/nginx/sbin/nginx -t

19、 若不想执行复杂/usr/local/nginx/sbin/nginx -t来查看则需要制作软连接,制作nginx软连接进入进入usr/bin目录

cd /usr/bin/

 20、制作软连接

 ln -s /usr/local/nginx/sbin/nginx nginx

 21、接下来制作开始配置文件,首先进入到nginx的默认配置文件中

vim /usr/local/nginx/conf/nginx.conf

 80改成8001,并且在该文件在最底部增加配置项(按下i进入输入模式)如图:

22、按下esc键,通过:wq!保存并退出

 23、返回并进入nginx目录下

(注意:若此时找不到nginx文件,可能是cd /与最初进来的路径变化了,看到的是根目录下的文件和目录列表,而不是你最初进入的家目录中的文件和目录列表。所以最开始需要cd /切换路径,此时解决方法退出重进该新建会话)

cd /

cd nginx/

 24、在nginx文件中创建新的配置文件

 touch nginx.conf

 25、进入到nginx.conf文件

 vim nginx.conf

 26、写入如下配置

# muying- datav-report
server{
# 端口
listen 80;
# 域名
server_name localhost;
# 资源地址
root /nginx/dist/;
# 目录浏览
autoindex on;
# 缓存处理
add_header Cache-Control "no-cache, must-revalidate";
# 请求配置
location / {
# 跨域
add_header Access-Control-Allow-Origin *;
# 返回 index.html
try_files $uri $uri/ /index.html;
}
}

 27、通过esc wq!保存退出

Esc

:wq

 28、在nginx中创建dist文件夹,并进入dist文件夹下

 mkdir dist

cd dsit/

 29、在nginx/dist文件夹中写如 index.html进行测试

touch index.html

vim index.html

然后编写 hello world

 30、通过nginx -s reload重启服务

nginx -s reload

 31、检查

nginx -t

 32、在浏览器中通过,'IP'测试访问

nginx -c /etc/nginx/nginx.conf

 33、重新加载 Nginx 配置的命令

nginx -s reload

34、然后打开网页输入服务器ip地址就可以访问啦,如果是你的将会显示“hello world ”,如下方地址实例本人亲测:

大数据驱动的云端智能停车场可视化管理平台icon-default.png?t=N7T8http://118.178.232.152:8001/#/

35、检查服务是否正常运行

 sudo service nginx status

八、使用XFTP上传文件

1、连接XFTP

工具栏的xshell右边的绿色小图标xftp,点击会自动连接

 2、然后确保右边框是在dist文件夹下

 3、上传文件

将打包好的文件拖拽到右边覆盖或者删除重新上传

4、重启nginx

退出后然后重新再执行一遍启动nginx

nginx -t

nginx -c /etc/nginx/nginx.conf

nginx -s reload

5、这样就成功上传到服务器啦

6、域名使用

如果想要使用域名,将域名与服务器绑定,就在nginx下的nginx.conf文件中然后重新启动nginx

listen 80

server_name 域名

九、遇到报错如何解决

1、如果nginx安装有问题,重新安装 Nginx

  • 检查nginx是否正常运行

sudo systemctl status nginx 或者 sudo service nginx status

  • 卸载当前损坏的 Nginx 安装(如果有的话)

sudo apt remove nginx

  •  清理旧版本的配置文件和依赖

 sudo apt purge nginx*

  •  更新软件包列表

 sudo apt update

  •  安装nginx

sudo apt install nginx

  •  安装完成后,尝试启动 Nginx 服务

sudo systemctl start nginx

  •  检查 Nginx 服务的状态

 sudo service nginx status

 2、端口被占用

执行nginx -c /etc/nginx/nginx.conf发现端口被占用,如果不是正在使用的项目,或者是服务状态报错可能占用了端口需要找出并删除重启就好了。步骤如下:

  • 查找哪个进程正在使用端口 如8081端口:

sudo netstat -tulnp | grep 8001

  • 结束进程sudo kill -9 [PID] 

  •  然后重启nginx

nginx -c /etc/nginx/nginx.conf

nginx -t

nginx -s reload

 3、执行命令的路径有问题

容易忽略产生报错的问题,本人亲自尝试找了半天,就是最最最开始的命令要执行一遍cd /,

不要在root下面进行命令,不然过程感觉都是对的没有问题,就是运行打不开项目。

4、低版本nginx包

当你安装了一个低版本的nginx包的时候,可能会出现不兼容,执行make命令会报错,会提示有

make下有几个.c文件报错。

使用vim 项目打开进行修改.

当时本人遇到是是说switch下的case需要添加/* fall through */注释来告诉编译器这是故意的。

如果fall through不是故意的:

你需要在每个case块的末尾添加break语句来防止代码继续执行下一个case块。

然后esc :wq退出

返回文件重新执行make

本人亲测毛用没有哈哈,可能是能力不够吧,然后就卸载了nginx安装包,打开nginx官网下载了可以试用的版本,目前这个版本nginx-1.22.0本人亲测有效。

5、nginx官网地址:

NGINXicon-default.png?t=N7T8https://www.nginx-cn.net/

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

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

相关文章

likede 表记录

order微服务 tb_order 表负责记录当前的订单信息 tb_order_collect 表记录当前点位的营收情况 由XXL-JOB通过es进行统计 tb_order_month_collect 表记录一个月供应商的收支情况 通过tb_order_collect 进行统计 production微服务 tb_job 补货警戒值的设置 (目前来…

使用CSS3 + Vue3 + js-tool-big-box工具,实现炫酷五一倒计时动效

时间过得真是飞速,很快又要到一年一度的五一劳动节啦,今年五天假,做好准备了吗?今天我们用CSS3 Vue3 一个前端工具库 js-tool-big-box来实现一个炫酷的五一倒计时动效吧。 目录 1 先制作一个CSS3样式 2 Vue3功能提前准备 3…

数值分析复习:Richardson外推和Romberg算法

文章目录 Richardson外推Romberg(龙贝格)算法 本篇文章适合个人复习翻阅,不建议新手入门使用 本专栏:数值分析复习 的前置知识主要有:数学分析、高等代数、泛函分析 本节继续考虑数值积分问题 Richardson外推 命题&a…

使用Gitee进行社交登录的流程

使用Gitee进行社交登录 创建Gitee第三方应用流程: 鼠标移动到个人头像上,点击账号设置 点击账号设置,选择左边目录下数据管理的第三方应用 然后选择创建应用 根据要求填写 填写好了上面的要求之后,点击创建应用,这样&…

多项式和Bezier曲线拟合

目录 1. 多项式拟合2. Bezier曲线拟合3. 源码地址 1. 多项式拟合 在曲线拟合中,多项式拟合方法的性能受到三个主要因素的影响:采样点个数、多项式阶数和正则项。 采样点个数 N N N:从Figure 1中可以看出较少的采样点个数可能导致过拟合&…

【Linux】解决ubuntu20.04版本插入无线网卡没有wifi显示【无线网卡Realtek 8811cu】

ubuntu为Realtek 8811cu安装驱动,解决wifi连接问题 1、确认无线网卡的型号-Realtek 8810cu2、下载并配置驱动 一句话总结:先确定网卡的型号,然后根据网卡的型号区寻找对应的驱动下载,下载完成之后在ubuntu系统中进行编译&#xff…

RBA认证是什么?RBA认证的流程是怎么样的

RBA认证,即“责任商业联盟”认证,英文全称是Responsible Business Alliance。这是一个为电子行业或以电子为主要组成部分的行业及其供应链制定的社会责任审核标准。该标准旨在确保工作环境的安全、工人受到尊重并富有尊严、商业营运合乎环保性质并遵守道…

python 对图片进行操作

Pillow是一个强大的图像处理库,它提供了许多用于打开、操作和保存图像的功能。 Image模块: Image模块提供了用于打开、创建、编辑和保存图像的基本功能。可以使用Image.open()函数来打开图像文件,或者使用Image.new()函数来创建新的图像,还可…

用Python将原始边列表转换为邻接矩阵

👽发现宝藏 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 在图论和网络分析中,图是一种非常重要的数据结构,它由节点&#xff…

MATLAB中normxcorr2函数的用法(模板匹配和对象识别)

normxcorr2 是 MATLAB 中的一个函数,用于计算两个矩阵的归一化互相关。这个函数在图像处理和计算机视觉中特别有用,尤其是在模板匹配和对象识别方面。 函数签名 在 MATLAB 中,normxcorr2 函数的基本调用形式如下: C normxcorr…

虚拟现实(VR)的应用场景

虚拟现实(VR)技术创建和体验三维虚拟世界的计算机仿真技术。用户通过佩戴VR头显等设备,可以完全沉浸在虚拟世界中,并与虚拟世界中的物体进行交互。VR技术具有广泛的应用前景,可以应用于各行各业。以下是一些VR的应用场…

海康智能相机FTP本地存图流程

背景:近期一个新项目需要使用到智能相机,借助智能相机算法直接输出检测结果并将相机图像进行本地化保存和展示。由于申购目标智能相机未到,暂时使用测试智能相机。 目标智能相机型号:海康智能相机MV-SC3050XC 当前测试相机型号…

【Applied Algebra】隐藏子群问题和Shor算法的新视角

隐藏子群问题和Shor算法的新视角 隐藏子群问题是指给定一个群和一个函数,该函数对于群的一个子群是常数,并且对于子群的任何两个不同的左陪集有不同的值,问题是找到这个子群.HSP是许多量子算法的基础,其中最著名的是Shor的算法,它可以用来分解大整数和计算离散对数,这直接威胁到…

【sping】在logback-spring.xml 获取项目名称

在日志文件中我们想根据spring.application.name 创建出的文件夹。 也不想死在XML文件中。 application.yml spring:application:name: my-demo logback-spring.xml <springProperty name"application_name" scope"context" source"spring.app…

【Redis】Zset 数据类型

文章目录 常用命令zaddzcard & zcountzrange & zrevrangezpopmax & bzpopmaxzpopmin & bzpopminzrank & zrevrankzscore & zremzremrangebyrank & zremrangebyscorezincrby 多个集合间的交互命令交集 & zinterstore并集 & sunionstore 内部…

淘宝客链接转换接口阿里妈妈佣金转换:功能、使用与优缺点详解

淘宝客链接转换接口详解 随着互联网的发展&#xff0c;电子商务行业日益繁荣&#xff0c;淘宝作为国内最大的电商平台之一&#xff0c;其链接转换接口也受到了广泛关注。淘宝客链接转换接口是一种将淘宝商品链接转换成特定形式的短链接或推广链接的工具&#xff0c;方便用户进…

模版初阶【C++】

✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅✅ ✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨ &#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1f33f;&#x1…

AI人工智能培训老师叶梓:大数据治理的关键工具:开源数据血缘分析系统

在大数据时代&#xff0c;数据的产生和传播速度日益加快&#xff0c;数据之间的关系也变得日益复杂。为了更好地管理和理解数据之间的关系&#xff0c;数据血缘分析系统应运而生。本文将介绍几个开源的数据血缘分析系统&#xff0c;它们在数据治理、数据质量管理和数据隐私保护…

Apache Answer 开源问答社区安装体验

Answer 是由 SegmentFault 思否团队打造的一款问答平台软件,后端使用 Go 语言编写,于2022年10月24日(程序员节)正式开源。你可以免费使用 Answer 高效地搭建一个问答社区,并用于产品技术问答、客户支持、用户交流等场景。 2023年10月9日,Answer 顺利通过投票,以全票通过…