思享工具箱

gin-vue-admin 03 项目打包上线

摘要：
目录作者视频思路环境要求1.配置nginx2.打包前台vue代码3.打包后台go代码4.上传代码到服务器5.后台运行power6.访问后台开发场景：1.nginx配置2.后端代码接上面的3.打包后台go代码部署到服务器上3.前端环境配置：作者视频【gin-vue-admin】部署教程：gin-vue-admin本地环境线上环境部署配置教学（1010工作室出品）https://www.bilibil
目录
作者视频

【gin-vue-admin】部署教程：gin-vue-admin本地环境线上环境部署配置教学（1010工作室出品）

https://www.bilibili.com/video/BV1y5411s75A

思路

把vue打包好的dist目录放到gin指定的静态目录里

用nginx代理power到后台监听的8887端口上

例如访问 http://doc.haimait.com/power 就可以访问到后台监听的8887端口上

环境要求 
golang版本 >= v1.11
nginx
centos

后端环境安装文档：
Golang1.14.2 环境的安装

可参考下面的文章：
https://www.cnblogs.com/haima/p/12057933.html

1. 配置nginx

a. 新建在conf.d/doc.haimait.conf文件

server {
  listen 80;
  server_name  doc.haimait.com;

  access_log  /var/log/nginx/doc.haimait.access.log;
  error_log  /var/log/nginx/doc.haimait.error.log;
  client_max_body_size 10m;
  location ~/(.well-known/pki-valtidation) {
      root /usr/share/nginx/html;
  }
 # 访问 http://doc.haimait.com 代理到 http://127.0.0.1:8811 上
  location / {
 #     add_header Access-Control-Allow-Origin *;
 #     add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
 #     add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
      proxy_pass  http://127.0.0.1:8811;
      proxy_redirect     off;
      proxy_set_header   Host             $host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_max_temp_file_size 0;
      proxy_connect_timeout      90;
      proxy_send_timeout         300;
      proxy_read_timeout         300;
      proxy_buffer_size          4k;
      proxy_buffers              4 32k;
      proxy_busy_buffers_size    64k;
      proxy_temp_file_write_size 64k;
      }
 # 访问 http://doc.haimait.com/power 代理到 http://127.0.0.1:8887 上
 location /power {   
      #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 ^/v1/(.*)$ /$1 break;
      proxy_pass  http://127.0.0.1:8887;   #设置代理服务器的协义和地址
      }
      
 
}

#下面是配置https，如不需要可以删除
server {
   #listen       443 ssl;
   #server_name  test2.haimait.com;


   #ssl_certificate /etc/letsencrypt/live/test2.haimait.com/fullchain.pem;
   #ssl_certificate_key /etc/letsencrypt/live/test2.haimait.com/privkey.pem;
   #ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
   #ssl_prefer_server_ciphers on;
   #ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';

location / {
#      add_header Access-Control-Allow-Origin *;
#      add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
#      add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
      proxy_pass  http://127.0.0.1:8811;
      proxy_redirect     off;
      proxy_set_header   Host             $host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_max_temp_file_size 0;
      proxy_connect_timeout      90;
      proxy_send_timeout         300;
      proxy_read_timeout         300;
      proxy_buffer_size          4k;
      proxy_buffers              4 32k;
      proxy_busy_buffers_size    64k;
      proxy_temp_file_write_size 64k;
    }
 location /power {
      #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 ^/v1/(.*)$ /$1 break;
      proxy_pass  http://127.0.0.1:8887;   #设置代理服务器的协义和地址
      }
}

b.重新nginx服务

nginx -s reload

2.打包前台vue代码

a. 修改 web/.env.production文件

  按自己的需要修改,可以不改

  把里面的VUE_APP_BASE_API = '/v1' 改为 VUE_APP_BASE_API = '/power'

  其中power(这里是为了和我的项目名称一致)是你的nginx代理的地址，和nginx里写一致了

  例如你想要按下面的地址访问后台接口

  http://doc.haimait.com/power

b. 编译前台vue代码

npm build

c. 把打包好的dist文件夹复制到sever/resource/dist

3.打包后台go代码

a. 修改serve/config.yaml里后台服务监听的端口

由于我的8888端口被占用了，所以修改为8887，大家按自己需要，可以不修改.

这里将addr: 8888 修改为addr: 8887

# system configuration
system:
  use-multipoint: false
  env: 'public'  # Change to "develop" to skip authentication for development mode
  addr: 8887
  db-type: "mysql"  # support mysql/sqlite

b. 在serve/core/server.go文件里加入下面的代码

Router.Static("/admin", "./resource/dist") #指定表太文件目录

由于这里把静态文件的目录名写为admin了，所以访问登陆页面index.html时要加一个admin

如：http://doc.haimait.com/power/admin

gin-vue-admin 03 项目打包上线第1张

c.编译main.go 为 power

go build -o power main.go

4. 上传代码到服务器

上传下面的文件到服务器上

├── config
│ └── config.go
├── config.yaml
├── resource
│ ├── dist
├── power

gin-vue-admin 03 项目打包上线第2张

5. 后台运行power

nohup ./power >> access.log 2>&1 &

6. 访问后台

由于我在gin路由里把静态文件的目录名写为admin了，所以访问登陆页面index.html时要加一个admin

http://doc.haimait.com/power/admin

gin-vue-admin 03 项目打包上线第3张

开发场景：

前端本地开发，对接线上部署好后台服务接口 的开发方式

前端代码跑在本地 访问线上部署好的go后端接口服务

前端代码在本地npm run serve跑启来，

go后端代码跑在服务器线上，api接口用nginx 域名代理

1. nginx 配置

把域名 http://test.ibanana.club/power 代理到go服务的接口地址 http://127.0.0.1:8887 上

server {
  listen 80;
  server_name  test.ibanana.club;

  access_log  /var/log/nginx/lkbackend.test.access.log;
  error_log  /var/log/nginx/lkbackend.test.error.log;
  client_max_body_size 10m;
  location ~/(.well-known/pki-validation) {
      root /usr/share/nginx/html;
      index  index.html index.htm;    #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推
  }
  location / {
   #   add_header Access-Control-Allow-Origin *;
   #   add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept";
   #   add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
      proxy_pass  http://127.0.0.1:8822;
      proxy_redirect     off;
      proxy_set_header   Host             $host;
      proxy_set_header   X-Real-IP        $remote_addr;
      proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_max_temp_file_size 0;
      proxy_connect_timeout      90;
      proxy_send_timeout         300;
      proxy_read_timeout         300;
      proxy_buffer_size          4k;
      proxy_buffers              4 32k;
      proxy_busy_buffers_size    64k;
      proxy_temp_file_write_size 64k;
      }
  location ~ ^/power/ {
      proxy_set_header   Host             $http_host;
      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 ^/power/(.*)$ /$1 break;
      proxy_pass  http://127.0.0.1:8887;   
      }
}

2. 后端代码接上面的 3.打包后台go代码 部署到服务器上

3.前端环境配置：

a.方法一：

web/vue.config.js里

devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            // 把key的路径代理到target位置
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'
                //target: `http://127.0.0.1:8887`, //代理到 目标路径
                target: `http://test.ibanana.club`, //代理到 目标路径
                changeOrigin: true,
                pathRewrite: { // 修改路径数据
                    ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除
                }
            }
        },
    },

web/.env.development里

ENV = 'development'
VUE_APP_BASE_API = 'power'

实现请求的后台地址为：
http://localhost:8080/power/powerSupplyStation/getPowerSupplyStationList?page=1&pageSize=10

gin-vue-admin 03 项目打包上线第4张

b.方法二：

web/vue.config.js里

devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            // 把key的路径代理到target位置
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'
                //target: `http://127.0.0.1:8887`, //代理到 目标路径
                target: `http://test.ibanana.club/power`, //代理到 目标路径
                changeOrigin: true,
                pathRewrite: { // 修改路径数据
                    ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除
                }
            }
        },
    },

web/.env.development里

ENV = 'development'
VUE_APP_BASE_API = ''

实际访问的地址：

http://localhost:8080/substation/getSubstationList?page=1&pageSize=10

gin-vue-admin 03 项目打包上线第5张

c.方法三：

web/vue.config.js里

devServer: {
        port: 8080,
        open: true,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            // 把key的路径代理到target位置
            // detail: https://cli.vuejs.org/config/#devserver-proxy
            [process.env.VUE_APP_BASE_API]: { //需要代理的路径   例如 '/api'
                //target: `http://127.0.0.1:8887`, //代理到 目标路径
                target: `http://test.ibanana.club/power`, //代理到 目标路径
                changeOrigin: true,
                pathRewrite: { // 修改路径数据
                    ['^' + process.env.VUE_APP_BASE_API]: '' // 举例 '^/api:""' 把路径中的/api字符串删除
                }
            }
        },
    },

web/.env.development里

ENV = 'development'
VUE_APP_BASE_API = '/power'

实现请求的后台地址为：
http://localhost:8080/power/substation/getSubstationList?page=1&pageSize=10

gin-vue-admin 03 项目打包上线第6张

经过上面三种写法测试最终于访问到的后台根域名接口地址还是 http://test.ibanana.club/power

标签：#http代理#nginx#access#host#header | 浏览：524 | 发布日期：

免责声明：文章转载自《gin-vue-admin 03 项目打包上线》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇iOS 改变UITextField中光标颜色基于node的前端项目编译时(react vue 打包)内存溢出问题下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

nginx自动检测后台服务器健康状态

转自http://www.iyunv.com/thread-38535-1-1.html 公司业务线上对后端节点的健康检查是通过nginx_upstream_check_module模块做的，这里我将分别介绍这三种实现方式以及之间的差异性。 一、ngx_http_proxy_module 模块和ngx_http_upstream_module模块（自带）严...

FastDFS分布式图片服务器搭建

一：Fastdfs简介 1. 什么是FastDFS FastDFS 是用 c 语言编写的一款开源的分布式文件系统。FastDFS 为互联网量身定制， 充分考虑了冗余备份、负载均衡、线性扩容等机制，并注重高可用、高性能等指标，使用 FastDFS 很容易搭建一套高性能的文件服务器集群提供文件上传、下载等服务。  FastDFS 架构包括 Tracker se...

使用nginx-prometheus-exporter 监控nginx

因为nginx 已经提供了stub_status 模块，一般我们可以基于此进行监控，目前官方提供了一个exporter 尽管有一些限制（web必须使用8080）。以下是一个简单的学习使用 环境准备 docker-compose 文件 注意使用了ranadeeppolavarapu 提供的nginx 镜像（很方便，可以学习各种nginx 插件的使用）...

Linux下查看Nginx的并发连接数和连接状态-乾颐堂

Linux下查看Nginx等的并发连接数和连接状态。 1、查看Web服务器（Nginx Apache）的并发请求数及其TCP连接状态：  netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' 或者： netstat -n | awk '/^tcp/ {++state[$NF...

[Linux] nginx记录多种响应时间

官网介绍$request_time – Full request time, starting when NGINX reads the first byte from the client and ending when NGINX sends the last byte of the response body$upstream_connect_tim...

统信操作系统 安装nginx

注意：我们的安装包 因为统信 是 ubantu的 所以对应ubantu nginx 1、在/home目录输入命令新建npf文件夹mkdir npf进入npf 目录输入命令新建nginx-server文件夹mkdir nginx-server 2、将以下安装包上传到nginx-server 下 pcre-8.38.taropenssl-1.0.2n.tarz...

最新文章

随机推荐

思享工具箱导航