Gin-Vue-Admin online deployment

foreword

Many tutorials found on the Internet, including the official ones, are not detailed enough, which can easily lead to problems, so I specially record the deployment process

Official Deployment Documentation: Deployment Teaching | Gin-Vue-Admin

Prepare

front end

Configuration file modification

Modify the .env.production file in the front-end directory

• VUE_APP_SERVER_PORT: According to the running port setting of my own backend project, I used 8806 here
• VUE_APP_BASE_PATH: The official setting is an online ip, and it is no problem to set it to a local loopback address after testing (preferably according to the official, I will step on the pit first)
• VUE_APP_BASE_API: According to the name setting of the proxy to the backend project set by nginx, I keep it unchanged here
• Other parameters do not need to be

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

project compilation

Run the npm run build command under the front-end project gva-project/web to execute compilation

After successful compilation, the gva-project/web/dist directory will be generated

rear end

port modification

 Backend Since I use port 8806 online , I need to modify the config.yaml file and set the system.addr parameter to 8806

backend compilation

If the local environment is Windows, you need to use cross-compilation. I compiled it directly on Linux. Run the go build main.go command in the back-end project directory gva-project/server to execute the compilation. If the compilation is successful, the main executable file will be generated .

deploy

According to the documentation, the backend requires executable files, config.yaml configuration files, and the resource directory. The frontend only needs the compiled dist directory. For the demonstration here, I will not create a new directory to put the above files for the time being. I will directly demonstrate it under the gva-project project. The actual use suggestions are released separately according to the official.

backend running

The deployment and operation of the backend project can refer to this article: Golang project deployment

Nginx configuration 

front end settings

In the configuration file, the root directory of the website is set to the compiled file directory of the front end /.../gva-project/web/dist (absolute path)

Backend proxy settings

• Set the proxy to the back-end project. Note that the proxy name is consistent with the VUE_APP_BASE_API parameter set in the front-end .env.production file , and the name in the replacement rule of the proxy should also be the same, as shown in the red circle in the figure
• The proxy address is the address port running on the backend, so the address is: http://127.0.0.1:8806 , as shown in the yellow box in the figure

Attach configuration

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;
}

run test

After configuring nginx in the previous step, you can access the project after reloading the configuration