虚拟机Windows Server IIS部署WebApi Nginx部署Vue

要先准备好WebApi 项目，Vue项目，本地测试好。

然后通过虚拟机模仿真的服务器，本文也会把虚拟机称作服务器。

工作流程：

1.安装VMware 

2.安装Windows Sever 系统服务器

3.服务器中安装IIS ，相关.Net环境，我使用的是Sqlite，没有安装数据库环境

4.通过IIS部署WebApi项目

5.服务器安装Nginx(没安装Node.js)

6.通过Nginx部署Vue项目

以上工作资源较多，本文主要说一下遇到的问题和对整个部署的感悟。

经过以上工作，可以在自己电脑上，只通过浏览器访问虚拟机服务器的IP+端口，访问到自己做的网站。

想访问一个网站要运行的软件资源对比：

开发时：

Visual Studio(运行后端代码)  + Visual Studio Code(运行前端代码) + 浏览器(显示网站)

部署后：

浏览器(显示网站)  

不过部署后多了一个服务器

踩坑：

webapi部署后怎么进入swagger界面：

IIS部署好WebApi后访问地址提示找不到 localhost 的网页

webapi部署后遇到浏览器报错：HTTP Error 5OO.0- ASPNET Core lIS hosting failure (in-process)

浏览器报错：HTTP Error 5OO.0- ASPNET Core lIS hosting failure (in-process)

vue项目路由问题：

在nginx上部署好后可以进入vue项目主界面，但是点击其他标签切换界面时返回404

Nginx部署Vue项目，网页界面返回404 Not Found

通信梳理：

互联网就是靠IP+端口进行通信。

浏览器如何访问服务器上的Nginx:

 Nginx下载好默认是80，我改成了81端口，打开conf文件下的配置文件nginx.conf：

刚下载完nginx，就是没有把vue的静态文件放到nginx目录下的时候，可以在服务器本机通过localhost:81访问到nginx的主页，也可以在同一个局域网内通过服务器IP+81访问：

Nginx 如何访问Vue：

部署可以理解成：

在开发环境中，运行vs code，Vue项目运行在原来的脚手架服务上，生产环境下就得把Vue整到Nginx上，Nginx接替了脚手架继续运行Vue项目。可以参考：Nginx对于Vue的工作
然后部署的工作资源很多这里不赘述。

把vue生成的dist目录下文件整合到Nginx目录中后，就可以通过【服务器的IP+端口访问】或者【http://localhost:81/】vue网站：

1.服务器的IP：

2.localhost:

Vue如何访问IIS

vue已经放到了Nginx中，所以这里也是通过nginx这个平台访问后端，又因为后端Api部署到IIS上，所以这里访问IIS。

还是在nginx的配置文件中，因为我的后端Api已经部署到IIS上，所以这里配置的是IIS的端口，起作用的就是我选中的部分：

iis端口：

IIS如何访问WebApi:

这部分就是IIS部署的工作了，只要把WebApi项目部署到IIS的网站上，WebApi就可以通过网站的端口访问，网站的端口不要和WebApi的端口相同，随便设置就好，不冲突就行。

WebApi的端口可以通过配置文件设置：

总体流程：

浏览器 → Nginx 81端口 → Vue前端 (Nginx 81端口) → IIS (5009端口) → WebAPI应用程序 (5000端口)

*浏览器通过服务器的IP和端口访问到服务器上的Nginx

*Nginx访问到Vue前端，呈现出网页

*网页请求通过Nginx找到IIS

*IIS把请求传递到WebApi程序

-结尾-

一点个人浅见，未必周全，权当抛砖引玉。若有疏漏之处，还请大家一起指正讨论。