264 Deploying a Vue App（部署WebAPI和VUE）

步骤

一、CoachWebAPI IIS部署（后端）

1、发布ASP.NET WebAPI程序

a）修改Program.cs中的Swagger部分，如下

// Configure the HTTP request pipeline.
//if (app.Environment.IsDevelopment())
//{
    app.UseSwagger();
    //app.UseSwaggerUI();
    app.UseSwaggerUI(c =>
    {
        c.SwaggerEndpoint("swagger/v1/swagger.json", "v1");
        c.RoutePrefix = "";
    });
//}

注释掉if语句是为了能够在服务器部署好以后，Prod环境中也可以看到Swagger页面；

app.UseSwaggerUI括号中的部分是为了去掉开发时候URL中index.html前面显示的swagger，可以直接用IP地址:端口号＋index.html访问此页面:

b）右击项目点击Publish按钮发布程序，设置如下

根据实际需要可以更新上面的参数，然后点击Save保存，最后点击Publish发布即可：

2、安装IIS

Control Panel-Programs-Turn Windows features on or off

弹出的对话框中选中如下两项，然后点击OK等待完成

3、部署

a）安装.NET 8 Runtime

Download .NET 8.0 Runtime (microsoft.com)

b）IIS部署

首先将发布好的应用程序文件夹拷贝到C:\inetpub下

inetpub文件是网络信息服务器文件夹，此Internet信息服务（简称IIS）是Windows系统中的WEB信息服务器，也是Internet信息服务，它可用于构建网站和调试网站。

然后打开IIS，右击Sites添加Site，参数设置如下，点击OK完成：

点击新建好的site，点击右侧Default Document

将index.html调整到最上方

最后点击Application Pools，双击CoachWebAPI，参数设置如下，点击OK完成：

此时我们可以浏览网站，运气好的话可以正常使用了，如果运气不好，出现如下界面：

我们可以修改web.config中hostingModel，从InProcess改为OutofProcess

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
      <handlers>
        <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
      </handlers>
      <aspNetCore processPath=".\CoachWebAPI.exe" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="OutofProcess" />
    </system.webServer>
  </location>
    <system.webServer>
        <defaultDocument>
            <files>
                <clear />
                <add value="index.html" />
                <add value="index.htm" />
                <add value="Default.htm" />
                <add value="Default.asp" />
                <add value="iisstart.htm" />
                <add value="default.aspx" />
            </files>
        </defaultDocument>
    </system.webServer>
</configuration>
<!--ProjectGuid: 42105224-fea8-4209-9faf-30ab9e1a2e09-->

总结两个关键点：

1、Program.cs中swagger部分修改；

2、web.Config修改；

二、CoachWebApp IIS部署（前端）

1、Vue项目中调用的API访问路径全部替换为部署好的WebAPI的地址

比如'http://localhost:5216/api/Users/Login'

替换为'http://10.111.16.221:8089/api/Users/Login'

2、IIS中右击Sites添加site

参考上面步骤，不需要设置Application Pools和Default Document。

3、更新WebAPI项目中appsettings.production.json文件的Jwt:Issuer/Jwt:Audience为实际使用的IP

    //"Issuer": "https://localhost:5216",
    //"Audience": "http://localhost:5173",
    "Issuer": "http://10.111.16.221:8089",
    "Audience": "http://10.111.16.221:8088",