Golang学习日志 ━━ 部署Gin-Vue-Admin到windows系统并启用IIS服务，顺便学习如何设置IIS反向代理

gin-vue-admin是一套国人用golang开发的后台管理系统，总体还是值得推荐的，这里记录一下如何安装到windows服务器。
官网：https://www.gin-vue-admin.com/
ngix配置方案参考：Gin-Vue-Admin 线上部署
只用golang方案参考：gin-vue-admin 不使用 nginx，发布到windows平台

环境

本例截图中使用的是vscode工具编辑web，使用liteide工具编辑go代码。

1. 下载并安装node

• 快速开始 | 环境配置 | 前端环境

• 通过安装Element UI/Plus来学习vue之如何创建项目、搭建vue脚手架、npm下载等

2. 下载并安装golang

• 快速开始 | 环境配置 | 后端环境
• Golang学习日志 ━━ LiteIDE的主要配置
• Golang学习日志 ━━ 下载及安装

使用说明
需要本地具有 git node golang 环境
node版本 >= 16.14.2
golang版本 >= v1.18
mysql 引擎需要是 innoDB
IDE推荐：Goland
各位在clone项目以后，最好前往七牛云申请自己的空间地址。
替换掉项目中的七牛云公钥，私钥，仓名和默认url地址，以免发生测试文件数据错乱

配置

前端

修改前端目录下的.env.development或.env.production文件

1. 开发环境配置

ENV = 'development'
VITE_CLI_PORT = 8080
VITE_SERVER_PORT = 8888
VITE_BASE_API = /api
VITE_BASE_PATH = http://127.0.0.1
VITE_EDITOR = vscode
// VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
// 如果使用docker-compose开发模式，设置为下面的地址或本机主机IP
//VITE_BASE_PATH = http://177.7.0.12
1
2
3
4
5
6
7
8
9

2. 生产环境配置

ENV = 'production'
VITE_CLI_PORT = 8080
VITE_SERVER_PORT = 8888
VITE_BASE_API = /api
#下方修改为你的线上ip
VITE_BASE_PATH = https://demo.gin-vue-admin.com
1
2
3
4
5
6

• VITE_SERVER_PORT：后端运行端口设置，默认为8888，如果端口被占用，可进行改动。
  此处的端口号主要用于开发环境使用，比如表单生成器前端视图web/src/view/systemTools/formCreate/index.vue中所写的${basePort}，其对应的值就是VITE_SERVER_PORT，官方建议在生产环境中要在视图文件中将该端口${basePort}删除，否则会在前端请求时暴露后端的端口号。具体学习及理解请参考文章：《Golang学习日志 ━━ Gin-Vue-Admin在windows自带IIS服务器上的配置合集》所涉及表单生成器配置的部分。
• VITE_BASE_PATH：线上ip，尽早将默认值修改为127.0.0.1或实际生产环境下的域名。
• VITE_BASE_API：反向代理到后端项目的名称，默认为/api。

后端

1. 找到配置文件
   
2. 注意web和server配置中端口号保持一致，默认都是8888
   

编译

前端

开发环境参考官网即可：快速开始 | 初始化 | npm i 安装依赖

生产环境则编译前后端后再执行。

1. 打开终端
   
2. 输入npm run build

开发环境下只需要执行npm run serve就能使用了，不需要考虑反向代理等，参考官方：初始化 | WEB项目 | 启动项目。
开发环境下关闭运行使用命令：ctrl + c

4. 生成dist目录

（前面几个截图已经存在该目录）

后端

官网参考：快速开始 | 初始化 | server

1. 输入 go build main.go
   在后端项目目录server下运行go build main.go命令执行编译
   
   
2. 生成 server.exe 执行文件
   

部署

本文重点为IIS配置，ngix配置参考：Gin-Vue-Admin 线上部署。

顺序：先打开后端，后打开前端，否则前端的api请求无处可去。

前端

将web目录下执行npm run build所得到dist文件夹上传到服务器，然后设置proxy，把请求映射到后端即可。

官网提示过于简单：项目上线 | 前端

1. 上传前端目录至服务器
   将dist文件夹上传到服务器，无论作根目录也好，还是普通目录或者虚拟目录都可以。截图显示的是本地开发环境，所以dist目录隐藏很深~~
   
   这时，在浏览器中打开dist所在网址，应该就可以看到页面了，但验证码无法显示。
   
   说明向后端的api请求失败了。
   
   还记得前面写到过的后端端口号是8888么？这里只是向默认80端口请求，所以需要在IIS上进行反向代理，将80端口的请求映射到8888端口去。

2. 安装反向代理插件和url重写插件
   IIS实现反向代理需要安装两个插件。
   ARR组件： 微软 | Application Request Routing
   URL重写组件：微软 | URL Rewrite

3. 设置反向代理

• 第一步：激活ARR组件
  
  
  

• 第二步：编写url重写规则

url重写规则可以设置在服务器、网站根目录和任意子目录，但因为api请求网址是127.0.0.1:8888/api/xxxx，这意味着重写规则只能设置在网站根目录（设置在服务器当然也行，但不是全局的，没这必要）。

我之前有个错误思路，认为既然是dist打开的网站，那么为了避免干扰其他目录，就在dist目录下编写url重写规则…蠢啊！这导致了只可能127.0.0.1/xxx/dist/api/xxx这种形式的请求才可能被重写。

根据实际情况填写，截图时为生产环境，所以用127.0.0.1

这里的意思就是将开头为api的所有请求映射到8888端口去。

反向代理及本入站规则的流程：

1. 访问 www.demo.com/abc 打开页面，IIS发送数据给客户端；
2. 点击某链接后访问 www.demo.com/api/xx/yy ，IIS收到访问请求；
3. 探测到地址中有 ^api/(.*) 后，IIS访问本地的 http://127.0.0.1:8888/{R:1} ，获取数据后返回给客户端；
4. Golang执行文件监听 :8888 端口，发现有访问，根据规则返回数据。

所以本图中的 127.0.0.1 与上几个图中的 127.0.0.1 不同用途：

1. 上几个图中的 127.0.0.1 是客户端访问的域名地址；
2. 这里的 127.0.0.1 是IIS反向代理的访问地址。

至此前端配置好了。

当然，还可以在条件里进行一些更苛刻的限制，避免在实际使用时触发某些意外，参考此图：

注意：
匹配 URL 是 HTTP_HOST 后面的部分，不以 / 开头，不包含 QueryString。
条件中的{URL}也是 HTTP_HOST 后面的部分，但是它以 / 开头，不包含 QueryString。

后端

官网提示：项目上线 | 后端

将可执行文件和config.yaml 以及 resource 文件夹上传至服务器。
三者最好放在同一路径下，最终服务器目录结构可能如下

    ├── breakpointDir  // 后续断点续传自动生成
    ├── chunk   // 后续断点续传自动生成
    ├── fileDir   // 后续断点续传自动生成
    ├── finish   // 后续断点续传自动生成
    ├── resource
    │   └── 子目录文件					
    ├── dist
    │   └── 子目录文件
    ├── gin-vue-admin
    ├── config.yaml
1
2
3
4
5
6
7
8
9
10

执行可执行文件，后端启动。

初始化

前端

刷新之前的前端网址，界面如下，此时的验证码已经出现了。

点击前往初始化按钮，按照要求一步步操作就万事大吉了。

初始化 | INIT | 初始化数据

后端

后端接收到来自前端的请求。

数据库等技术方案不在此处赘述。

参考学习：

部署

Golang学习日志 ━━ Gin-Vue-Admin在windows自带IIS服务器上的配置合集
Gin-Vue-Admin 线上部署
gin-vue-admin 不使用 nginx，发布到windows平台
【gin-vue-admin】部署教程：gin-vue-admin本地环境线上环境部署配置教学

反向代理

IIS做反向代理，详细步骤和解析！
IIS反向代理设置
Windows Server IIS+ARR反向代理（配置反向代理服务器）
IIS反向代理配置教程(最终完整版本)
IIS 8.0 设置反向代理教程
IIS进行URL重写——实现https重定向，文件类型隐藏访问重写，nodejs等服务重写等等
IIS URL Rewrite（URL 重写）－踩过的坑