前言
在网上找的很多教程包括官方的都不够细致，很容易导致出现问题，所以特记录下部署的过程
官方部署文档：部署教学 | Gin-Vue-Admin
准备
前端
配置文件修改
修改前端目录下的.env.production文件
- VUE_APP_SERVER_PORT：根据自己后端项目运行端口设置，我这里使用了8806
- VUE_APP_BASE_PATH：官方设置为了线上ip，经测试设置为本地回环地址也没问题（最好根据官方，我先踩坑）
- VUE_APP_BASE_API：根据nginx设置的代理到后端项目的名称设置，我这里保持不变
- 其他参数不需要理
ENV = 'production' VUE_APP_CLI_PORT = 8080 VUE_APP_SERVER_PORT = 8806 VUE_APP_BASE_API = /api #下方修改为你的线上ip VUE_APP_BASE_PATH = http://127.0.0.1
项目编译
在前端项目gva-project/web下运行npm run build命令执行编译
编译成功后会生成gva-project/web/dist目录
后端
端口修改
后端由于我线上使用了8806端口，所以需要修改config.yaml文件，将system.addr参数设置为8806
后端编译
如果本地是windows环境，需要使用交叉编译，我是直接在Linux上编译的，在后端项目目录gva-project/server下运行go build main.go命令执行编译，编译成功会生成main可执行文件
部署
根据文档部署后端需要可执行文件、config.yaml配置文件以及resource目录三者，前端只需要编译好的dist目录就行。这里演示我就暂时不新建目录去放以上文件了，直接在gva-project项目下演示，实际使用建议按照官方单独出来。
后端运行
后端项目的部署和运行可以参考这篇文章：Golang 项目部署
Nginx配置
前端设置
配置文件中网站根目录root设置为前端编译后的文件目录/.../gva-project/web/dist(绝对路径)
后端代理设置
- 设置代理到后端项目，代理名称注意与前端.env.production文件设置的VUE_APP_BASE_API参数一致，并且代理的替换规则中名称也要与此相同，如图中红圈所示
- 代理地址就是后端运行的地址端口，因此地址为：http://127.0.0.1:8806，如图中黄框所示
附上配置
server { listen 80; server_name gva-test.com; index index.php index.html index.htm default.php default.htm default.html; root /.../gva-project/web/dist; #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则 #error_page 404/404.html; #SSL-END #ERROR-PAGE-START 错误页配置，可以注释、删除或修改 #error_page 404 /404.html; #error_page 502 /502.html; #ERROR-PAGE-END #PHP-INFO-START PHP引用配置，可以注释或修改 include enable-php-73.conf; #PHP-INFO-END #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效 include /www/server/panel/vhost/rewrite/gva-test.com.conf; #REWRITE-END #禁止访问的文件或目录 location ~ ^/(\.user.ini|\.htaccess|\.git|\.svn|\.project|LICENSE|README.md) { return 404; } #一键申请SSL证书验证目录相关设置 location ~ \.well-known{ allow all; } location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; error_log /dev/null; access_log /dev/null; } location ~ .*\.(js|css)?$ { expires 12h; error_log /dev/null; access_log /dev/null; } location /api { #host修改为真实的域名和端口 proxy_set_header Host $http_host; #客户真实ip proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; #客户端真实协议 proxy_set_header X-Forwarded-Proto $scheme; rewrite ^/api/(.*)$ /$1 break; proxy_pass http://127.0.0.1:8806; #设置代理服务器的协义和地址 } access_log /www/wwwlogs/gva-test.com.log; error_log /www/wwwlogs/gva-test.com.error.log; }
运行测试
上一步配置完nginx后，重载配置后便可以访问项目了
