Web projects currently in hand are separated from the front and back, so sometimes the Vue framework is switched.

“

The front-end and back-end applications were finally deployed in K8S in the form of containers, for which I built a Devops process based on Gitlab Flow.

In Devops practice, container deployment becomes the silver bullet and de facto standard.

However, in the stage of feature development and self-testing, container mirroring should not be used too much. Meanwhile, in order to shield learning costs (not all colleagues can handle containers, nginx and centos), the front and rear end teams also need a friendly verification environment of joint debugging and self-testing.

The friendliest and most handy Web server is IIS (the back-end API has been deployed to IIS using WebDeploy). This article documents the posture of hosting Vue front-end applications using IIS.

Prerequisites: install IIS, url-rewrite Module!!

1. Deploy the Vue application

Take the Vue Todo application on Github as an exampleyarn build

If build succeeds, you’ll see that a dist static resources folder is generated.

2. Create a web. Config

Copy the DIST folder generated by YARN to a random location and add the following web.config file, which is actually the result of our configuration on the IIS URl-rewrite module.

<? xml version="1.0" encoding="utf-8"? ><configuration>
    <system.webServer>
        <rewrite>
            <rules>
 <rule name="Handle History Mode and custom 404/500" stopProcessing="true">  <match url="(. *)" />  <conditions logicalGrouping="MatchAll">  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />  </conditions>  <action type="Rewrite" url="/" />  </rule>  </rules>  </rewrite>  <httpErrors>  <remove statusCode="404" subStatusCode="1" />  <remove statusCode="500" subStatusCode="1" />  <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />  <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />  </httpErrors>  <modules runAllManagedModulesForAllRequests="true"/>  </system.webServer> </configuration> Copy the code

3. Deploy the Vue application on IIS

Click ok

4. Run the Vue application


Nice! Your Vue static application is now running on IIS.

But, in the front and back end separation mode, our Vue application not only has static resources, But also makes dynamic API requests.

“

Generally, the API request path after Webpack is /, and it tries to request API resources under the same domain name, but they do not exist.

We need to proxy API requests applied to Vue to real back-end addresses.

5. Reverse proxy back-end API request

The Vue application site also acts as part of a reverse proxy server.

Assume that the actual back-end API address is deployed on address 10.200.200.157:8091 and the API prefix is/API.

Using the URL-rewrite Module to reverse proxy the Vue API request to the real back end:

Go to Site Functionality View -> Url Rewrite -> Add site rules

The result of the Url rewrite is the following web.config file

<? xml version="1.0" encoding="utf-8"? ><configuration>
<! -- To customize the asp.net core module uncomment and edit the following section.  For more info see https://go.microsoft.com/fwlink/?linkid=838655 -->
  <system.webServer>
 <rewrite>  <rules>  <clear />  <rule name="ReverseProxyInboundRule" stopProcessing="true">  <match url="api/([_0-9a-z/-]+)" />  <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />  <action type="Rewrite" url="Http://10.200.200.157:8091/ {R: 0}" />  </rule>  <rule name="ResourceToIndex" stopProcessing="true">  <match url="(. *)" />  <conditions logicalGrouping="MatchAll" trackAllCaptures="false">  <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />  <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />  </conditions>  <action type="Rewrite" url="/" />  </rule>  </rules>  </rewrite>  <httpErrors>  <remove statusCode="404" subStatusCode="1" />  <remove statusCode="500" subStatusCode="1" />  <error statusCode="404" path="/survey/notfound" responseMode="ExecuteURL" />  <error statusCode="500" path="/survey/error" responseMode="ExecuteURL" />  </httpErrors>   </system.webServer> </configuration> <! --ProjectGuid: 068855e8-9240-4f1a-910b-cf825794513b-->Copy the code

Note: The yellow background is the reverse proxy rule ReverseProxyInboundRule. Note that the reverse proxy rule precedes the static resource rule ResourceToIndex.

This completes the whole process of hosting Vue applications using IIS in a separate development mode.

This solves an early sprint development pain point for the front and back end teams, which I’ve defined as a productivity tool class for interested readers to try.