本篇文章初始于前后端分离，前端自己部署前端项目，使用于初学者。想看nginx部署，请直接往最后滚动。

第一步：准备工作

• 一台电脑：虚拟机或云服务器、Xshell 7 软件、Xftp 7 软件、一个前端项目
• 笔者用的虚拟机是VMware Workstation，云服务器是腾讯云，当然也可以用华为云、阿里云。

1. 虚拟机是通过软件模拟的具有完整硬件系统功能的、运行在一个隔离环境中的完整的计算机系统，其本身就是一个文件，是虚拟的linux环境；

2. 服务器是计算机的一种，它比普通计算机运行更快、负载更高、价格更贵。服务器在网络中为其它客户机（如PC机、智能手机、ATM等终端甚至是火车系统等大型设备）提供计算或者应用服务。服务器具有高速的CPU运算能力、长时间的可靠运行、强大的I/O外部数据吞吐能力以及更好的扩展性。根据服务器所提供的服务，一般来说服务器都具备承担响应服务请求、承担服务、保障服务的能力。其特性：可扩展性、易使用性、可用性、易管理性；

3. Xshell是一个强大的安全终端模拟软件，可以通过互联网远程连接服务器，在windows界面下来访问不同系统下的服务器，从而比较好的达到远程控制终端的目的。与secureCRT比较：不会闪屏、可以回滚、键盘映射的兼容性比较好。其特点：有效的保护信息安全性、最好的终端用户体检、支持安全连接的TCP\IP应用、单一屏幕实现多语言、代替不安全的teinet客户端；

4. Xftp是一个强大的SFTP(非加密协议)、FTP(加密协议)文件传输软件，尽管它是为windows系统设计的，用户还可以安全地传输文件到使用Unix\Linux系统主机。特点：与服务器同步、可直接编辑、文件交换协议支持、直接编辑远程文件、增加下载或上传速度、单窗口多回话。

第二步：系统及软件安装、使用

1.虚拟机下载安装、使用

下载地址：点击这里
找下载的文档并打开，双击运行，注意：一般使用个人版，这样一般就免费，否则你懂得，路径可以根据自己的要求选择路径，安装完成后，创建新的虚拟前，需要下载一个镜像（可以去官网下载），这里笔者已经弄完。详细安装虚拟机 点击这里

2.云服务器购买、使用

云服务器可以是阿里云、华为、腾讯云都可以，这里笔者买的是腾讯云就以它为例，第一步百度搜索“腾讯云”，选择适合自己的项目的产品，对于练手，就没99元一年期限就够了，购完成后(建议在购买的过程中，与微信绑定)，登录。购买成功后，进入“腾讯云官网”点击“1”登录，接着点击“2”进入控制台，进入自己购买的服务器点击“进入服务器”点击“3”，接着点击关联管理实例点击“新增关联”选择想要关联的实例即可，此时安全组及与实例关联。接着要设置端口协议了，点击“4”，点击“协议端口”，再点击新建

提交后，就会这里，你就已经配置好外网的访问端口了。假设你的服务器ip为10.22.77.21，那你的外网访问10.22.77.21:8000 此处是案例，地址不具有真实性，若有问题，请及时与笔者联系(解释权归笔者所有)

3.Xshell下载及安装、使用

Xshell下载
xshell如何连接服务器呢？点击这里
1.打开软件点击“红色部分”

2.其它地方不变

3.连接成功后，点击刚起的名字就会自动进入服务器，就可以直接操作服务器终端啦。

4.Xftp下载及安装、使用

Xftp下载
Xftp如何连接服务器呢？ 点击这里
打开如下，红色部分为“新建”

连接服务器

连接成功后，如下图：

注意：这里的dist文件是，vue项目通过npm run build来打包的。想要将二次打包的dist文件部署上去，删除右侧是dist文件，在左侧找到二次打包的dist文件，直接拖拽过去就可以了。

服务器nginx.conf文件配置

这里主要是借助Xshell来操作服务器终端
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303165151613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUyNzcwMg==,size_16,color_FFFFFF,t_70

这里的internet是后端是访问IP+端口，这里我是在vue 的mian.js文件中