前言：
一、为什么需要打包项目
二、打包之后项目可以通过浏览器直接访问吗
三、域名、DNS、公网IP、服务器、Nginx之间的关系
1. 域名：https://blog.csdn.net/weixin_63152500?type=lately
2. DNS：域名解析服务器
3. 公网IP：服务器在网络中的唯一地址
4. 服务器：服务部署的电脑
5. Nginx：网页服务
四、XSHELL和XFTP安装
-
打开XShell官网，点击所有下载->所有家庭/学校免费版。
-
下载地址:
XSHELL和XFTP安装地址
https://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、打开管理控制台，您可以找到服务器的配置选项，然后找到通信或网络相关的设置，进行端口的配置。
六、Xshell连接服务器
- 双击空白处新建会话，名称自定义，主机填写服务器IP
- ctrl+鼠标点击会话，输入服务器用户名和密码
- 显示连接成功
七、使用XSHELL工具搭建Nginx环境步骤
1、pwd命令查看当前路径
2、如果是/root 路径要改变成 /
3、首先
4、nginx编译时依赖gcc环境
5、安装prce，让 nginx支持重写功能
6、安装zlib, nginx使用zlib对http包内容进行gzip压缩
7、安装openssl，用于通讯加密
8、进行nginx安装
9、进入nginx文件夹
10、在nginx中下载nginx压缩包
11、解压nginx
12、进入nginx-1.22.0目录中查看
13、查看可执行文件
14、在nginx-1.22.0目录中检查平台安装环境
15、如果不能执行make命令，先安装再执行
16、进行源码编译
17、安装nginx
18、查看nginx配置
19、 若不想执行复杂/usr/local/nginx/sbin/nginx -t来查看则需要制作软连接，制作nginx软连接进入进入usr/bin目录
20、制作软连接
21、接下来制作开始配置文件，首先进入到nginx的默认配置文件中
80改成8001，并且在该文件在最底部增加配置项（按下i进入输入模式）如图：
22、按下esc键，通过:wq!保存并退出
23、返回并进入nginx目录下
（注意：若此时找不到nginx文件，可能是cd /与最初进来的路径变化了，看到的是根目录下的文件和目录列表，而不是你最初进入的家目录中的文件和目录列表。所以最开始需要cd /切换路径，此时解决方法退出重进该新建会话）
24、在nginx文件中创建新的配置文件
25、进入到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！保存退出
28、在nginx中创建dist文件夹，并进入dist文件夹下
29、在nginx/dist文件夹中写如 index.html进行测试
30、通过nginx -s reload重启服务
nginx -s reload
31、检查
32、在浏览器中通过，'IP'测试访问
33、重新加载 Nginx 配置的命令
34、然后打开网页输入服务器ip地址就可以访问啦，如果是你的将会显示“hello world ”，如下方地址实例本人亲测：
大数据驱动的云端智能停车场可视化管理平台http://118.178.232.152:8001/#/
35、检查服务是否正常运行
八、使用XFTP上传文件
1、连接XFTP
工具栏的xshell右边的绿色小图标xftp，点击会自动连接
2、然后确保右边框是在dist文件夹下
3、上传文件
将打包好的文件拖拽到右边覆盖或者删除重新上传
4、重启nginx
退出后然后重新再执行一遍启动nginx
5、这样就成功上传到服务器啦
6、域名使用
如果想要使用域名，将域名与服务器绑定，就在nginx下的nginx.conf文件中然后重新启动nginx
九、遇到报错如何解决
1、如果nginx安装有问题，重新安装 Nginx
- 检查nginx是否正常运行
- 卸载当前损坏的 Nginx 安装（如果有的话）
- 清理旧版本的配置文件和依赖
- 更新软件包列表
- 安装nginx
- 安装完成后，尝试启动 Nginx 服务
- 检查 Nginx 服务的状态
2、端口被占用
执行nginx -c /etc/nginx/nginx.conf发现端口被占用，如果不是正在使用的项目，或者是服务状态报错可能占用了端口需要找出并删除重启就好了。步骤如下：
-
查找哪个进程正在使用端口 如8081端口：
- 结束进程sudo kill -9 [PID]
- 然后重启nginx
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官网地址：
NGINXhttps://www.nginx-cn.net/