Gin-Vue-Admin 线上部署

前言

在网上找的很多教程包括官方的都不够细致，很容易导致出现问题，所以特记录下部署的过程

官方部署文档：部署教学 | 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后，重载配置后便可以访问项目了