Spring Cloud Gray 前端生产部署记录

反向代理配置

$ vim vue.config.js

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        //target: `http://127.0.0.1:${port}/mock`,
        target: 'http://192.168.1.22:9200',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: '',
        }
      },
      //'/api': {
        //target: 'http://192.168.1.22:9200',
        //changeOrigin: true,
        //ws: true,
        //pathRewrite: {
          //'^/api': '',
        //},
      //}
    },
    disableHostCheck: true,
    //after: require('./mock/mock-server.js')
  },

关闭Mock

$ vim src/main.js
/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online! ! !
 */
//import { mockXHR } from '../mock'
//if (process.env.NODE_ENV === 'production') {
  //mockXHR()
//}

编译

production编译可提升访问速度

$ npm run build:prod

Nginx配置

server {
    listen       9527;
    server_name  localhost;

    location / {
        root   /home/yezhou/spring-cloud-gray-webui/dist;
        index  index.html index.htm;
    }

    location /prod-api/ {
        proxy_set_header Host $host;
        proxy_set_header x-forwarded-for $remote_addr;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://192.168.1.22:9200/;
    }
}

测试

curl -X POST http://192.168.1.22:9200/gray/user/login -H 'Content-Type:application/json' -d '{"username":"admin", "password":"abc123"}'
{
    "code":"0",
    "message":"operation is success",
    "data":{
        "token":"eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MDU4NTQ3NjksInVzZXJfbmFtZSI6ImFkbWluIiwiYXV0aG9yaXRpZXMiOlsiYWRtaW4iXSwianRpIjoiNjRmNGEyNzEtNDgyYy00ODNhLTg3MWUtYjUwNWVkZTQ3N2JjIiwiY2xpZW50X2lkIjoiZ3JheS1zZXJ2ZXIiLCJzY29wZSI6W119.Lzo0zXtSYOsqtMvN_J8QUGQku9Hdl8BKmriMehbLZZqj9D9eGrt9ROfyngNWi9UmCtVbtO8ubIBB-WbvCGLxUp1WZwCOIF6wyF13MZ6H6XIF1skf3t7nzORUqKTkxDVvkkKy0eX--Z2sfO4TiST8acXzxqXgn1xccZIa1kPb1dvQ8duBlwbQPlpLkqxQfc0R1JBeaDj8Fua19xC0vLUtKuGL6l0cTtgpTuaDAXp8NAvKv8eB2W4BLgqa0ner0_2_VPENz7-HQxlFbufeEMdIrtclSoLuQj9mxH9_mOeK1eNUod2UOfY-gWTud0gfkkYEb02JLaqtcn4u7D7sKFOQ6w"
    }
}

版权声明:
作者:Joe.Ye
链接:https://www.appblog.cn/index.php/2023/03/27/spring-cloud-gray-frontend-production-deployment-record/
来源:APP全栈技术分享
文章版权归作者所有,未经允许请勿转载。

THE END
分享
二维码
打赏
海报
Spring Cloud Gray 前端生产部署记录
反向代理配置 $ vim vue.config.js devServer: { port: port, open: true, overlay: { warnings: false, errors: true }, ……
<<上一篇
下一篇>>
文章目录
关闭
目 录