Install
URL Rewrite
Works With: IIS 7, IIS 7.5, IIS 8, IIS 8.5, IIS 10
URL Rewrite : The Official Microsoft IIS Site
At present, the computer IIS is version 6, and the following method is not suitable for operation. Currently deployed with Nginx, it is enough.
nginx configuration reference:
reference:
The company's current Web project is a SPA application, which is developed using front-end and back-end separation, so sometimes the Vue framework is used.
In Devops practice, container deployment has become a good recipe and a de facto standard.
However, during the development and self-testing stages, do not use mirrors indiscriminately. The front-end and back-end teams also need a friendly joint debugging + self-testing verification environment . The most friendly and convenient web server is undoubtedly IIS. (The back-end API has been deployed using WebDeploy. to IIS), this article records the steps of using IIS to host Vue applications.
Prerequisites: Install IIS, Url Rewrite Module!!!
1. Deploy Vue application
Let's take the Vue Todo application on Github as an example and execute yarn build
If the build is successful, you will find that a dist static resource folder is generated.
2. Create web.config
Copy the dist folder generated by yarn to C:\dist , and add the following web.config file. This file 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>
3. Deploy Vue application on IIS
Click OK
4. Run the Vue application
Nice! Now your Vue static application is running on IIS.
But, in the front-end and back-end separation mode, our Vue application not only has static resources, but also initiates dynamic api requests.
Under normal circumstances, the api request path after webpack packaging is /, it will try to request api resources under the same domain name, but they do not actually exist.
We need to proxy api requests to the Vue application to the real backend address.
5. Reverse proxy dynamic api request
The Vue application site also acts as part of a reverse proxy server.
Assume that the real backend api address is deployed at the 10.200.200.157:8091 address, and the api request is prefixed with /api .
Next, use the Url Rewrite Module reverse proxy api to request to the real backend:
Click Site Function View ---> Url Rewriting ---> Add Inbound Rules
The result of URL rewriting is actually 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-->
Note: The yellow background line is the reverse proxy rule ReverseProxyInboundRule. Note that the reverse proxy rule must be in front of the static resource rule ResourceToIndex.
In this way, we have completed the entire process of using IIS to host Vue applications in the front-end and back-end separation development mode.
reference:
Common IIS errors