书诚小驿
Series

1.如何使用XShell工具、Nginx代理服务器部署项目

书诚小驿2024/12/05知识库数据库管理与部署

前言

在信息化和数字化的今天，网站和应用的构建与发布已成为企业发展的重要一环。为了确保项目的顺利上线和稳定运行，选择合适的工具和环境至关重要。本文将详细介绍如何通过 XShell 工具以及 Nginx 环境来实现服务器项目的构建与发布，为广大开发者提供一条高效、便捷的路径。

一、为什么需要打包项目

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

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

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

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

  1. 域名：

域名是一个容易识别和记忆的网址，如http://118.178.232.152:8002/open in new window。它是用户访问网站时输入的网址，方便用户记忆和访问，而不需要记住复杂的 IP 地址。

  1. DNS：域名解析服务器

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

  1. 公网 IP：服务器在网络中的唯一地址

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

  1. 服务器：服务部署的电脑

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

  1. Nginx：网页服务

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

四、XSHELL 和 XFTP 安装

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

  2. 下载地址: XSHELL 和 XFTP 安装地址open in new window

五、服务器购买

  1. 服务器可在华为云open in new window，阿里云open in new window，腾讯云open in new window官网上根据需求选择合适的服务器类型。

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

image.png

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

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

image.png

六、Xshell 连接服务器

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

image.png

  1. ctrl+鼠标点击会话，输入服务器用户名和密码

image.png

image.png

  1. 显示连接成功 image.png

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

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

  1. pwd 命令查看当前路径
pwd
  1. 如果是/root 路径要改变成 /
cd /
  1. 首先
sudo apt update
  1. nginx 编译时依赖 gcc 环境
sudo apt install gcc g++
  1. 安装 prce，让 nginx 支持重写功能
 sudo apt search pcre*
  1. 安装 zlib, nginx 使用 zlib 对 http 包内容进行 gzip 压缩
sudo apt install zlib1g zlib1g-dev
  1. 安装 openssl，用于通讯加密
 sudo apt install openssl libssl-dev
  1. 进行 nginx 安装
mkdir nginx
  1. 进入 nginx 文件夹
cd nginx/
  1. 在 nginx 中下载 nginx 压缩包
wget https://nginx.org/download/nginx-1.22.0.tar.gz
  1. 解压 nginx
tar -zxvf nginx-1.22.0.tar.gz
  1. 进入 nginx-1.22.0 目录中查看
cd nginx-1.22.0/
  1. 查看可执行文件
ll

image.png

  1. 在 nginx-1.22.0 目录中检查平台安装环境
./configure --prefix=/usr/local/nginx
  1. 如果不能执行 make 命令，先安装再执行
sudo apt install make
  1. 进行源码编译
make
  1. 安装 nginx
make install
  1. 查看 nginx 配置
/usr/local/nginx/sbin/nginx -t
  1. 若不想执行复杂/usr/local/nginx/sbin/nginx -t 来查看则需要制作软连接，制作 nginx 软连接进入进入 usr/bin 目录
cd /usr/bin/
  1. 制作软连接
ln -s /usr/local/nginx/sbin/nginx nginx
  1. 接下来制作开始配置文件，首先进入到 nginx 的默认配置文件中
vim /usr/local/nginx/conf/nginx.conf

80 改成 8001，并且在该文件在最底部增加配置项（按下 i 进入输入模式）如图：

image.png

image.png

  1. 按下 esc 键，通过:wq!保存并退出

  2. 返回并进入 nginx 目录下

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

cd /
cd nginx/
  1. 在 nginx 文件中创建新的配置文件
 touch nginx.conf
  1. 进入到 nginx.conf 文件
 vim nginx.conf
  1. 写入如下配置
# 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;
}
}
  1. 通过esc wq！保存退出
Esc
:wq
  1. 在 nginx 中创建 dist 文件夹，并进入 dist 文件夹下
mkdir dist
cd dsit/
  1. 在 nginx/dist 文件夹中写如 index.html 进行测试
touch index.html
vim index.html
然后编写 hello world
  1. 通过nginx -s reload重启服务
nginx -s reload
  1. 检查
nginx -t
  1. 在浏览器中通过，'IP'测试访问
nginx -c /etc/nginx/nginx.conf
  1. 重新加载 Nginx 配置的命令
nginx -s reload
  1. 然后打开网页输入服务器 ip 地址就可以访问啦，如果是你的将会显示“hello world ”，如下方地址实例本人亲测：

书诚小驿open in new window

  1. 检查服务是否正常运行
sudo service nginx status

八、使用 XFTP 上传文件

  1. 连接 XFTP

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

image.png

  1. 然后确保右边框是在 dist 文件夹下

image.png

  1. 上传文件

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

  1. 重启 nginx

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

nginx -t
nginx -c /etc/nginx/nginx.conf
nginx -s reload

  1. 这样就成功上传到服务器啦

  2. 域名使用 如果想要使用域名，将域名与服务器绑定，就在 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
  1. 端口被占用

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

  • 查找哪个进程正在使用端口 如 8081 端口：
sudo netstat -tulnp | grep 8001
  • 结束进程 sudo kill -9 [PID]

image.png

  • 然后重启 nginx
nginx -c /etc/nginx/nginx.conf
nginx -t
nginx -s reload
  1. 执行命令的路径有问题

容易忽略产生报错的问题，本人亲自尝试找了半天，就是最最最开始的命令要执行一遍 cd /,不要在 root 下面进行命令，不然过程感觉都是对的没有问题，就是运行打不开项目。

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

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

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

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

如果 fall through 不是故意的：

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

然后 esc :wq 退出

返回文件重新执行 make

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

  1. nginx 官网地址： NGINXopen in new window
最后更新时间' 2025/1/7 09:27:59
目录