gin-vue-admin 03 項目打包上線

目錄

• 作者視頻
• 思路
• 環境要求
• 1. 配置nginx
• 2.打包前台vue代碼
• 3.打包后台go代碼
• 4. 上傳代碼到服務器
• 5. 后台運行power
• 6. 訪問后台
• 開發場景：
  • 1. nginx 配置
  • 2. 后端代碼接上面的 3.打包后台go代碼 部署到服務器上
  • 3.前端環境配置：

作者視頻

【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

c.編譯main.go 為 power

go build -o power main.go

4. 上傳代碼到服務器

上傳下面的文件到服務器上

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

5. 后台運行power

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

6. 訪問后台

由於我在gin路由里把靜態文件的目錄名寫為admin了，所以訪問登陸頁面index.html時要加一個admin

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

---

開發場景：

前端本地開發，對接線上部署好后台服務接口 的開發方式

前端代碼跑在本地 訪問線上部署好的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

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

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

經過上面三種寫法測試最終於訪問到的后台根域名接口地址還是 http://test.ibanana.club/power