一个vue+ go-echo前后端分离的项目的上线

背景

这是一个web前后端分离项目的上线过程。解决了跨域问题~

所用技术

• 前端vue全家桶（cli3）+axios
• 后端go echo (换成beego、gin操作也一样)
• 服务器nginx,操作系统ubuntu

目标

• 前后端分离
• 拒绝npm run dev/yarn serve
• 成功上线~~

布署工具

• Xshell
• Xftp

前端

前端用的axios,一定会遇到跨域的问题。 这里先说一下axios的一个坑，发送POST请求的时候,如果不是发json数据,一定要先设置一下:

headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
复制代码

添加参数为:

 var params = new URLSearchParams();
            params.append('userid', this.userid); //你要传给后台的参数值 key/value
            params.append('password', this.password);
            params.append('schoolname', this.schoolname);
            axios({
                method: 'post',
                url: '/login',
                data: params
           }).then(...)
复制代码

还有一点，最好不要在url这个字段上直接写:http://127.0.0.1:1222/xx/xx，这样有一个坏处，如果布署到生产环境（线上服务器），比如是111.111.111.111 goweb服务端口是:1222,最后请求的地址不会是你想的111.111.111.111:1222,而是127.0.0.1:1222,自然是不行的。

开发环境与生产环境

开发环境的服务器大多数情况和生产环境的不一致，接上面的部分，URL写成/login。 我先说一下开发环境理想的情况吧。

1. axios 请求/login
2. 前端自动代理成:127.0.0.1:1222/login 但是实际中，怕login与vue-router中的login有冲突,也有可能有人直接ajax，所以可以在url:login前加/api, 现在的步骤是这样的：
3. axios请求/login
4. 请求变成api/login
5. 请求被处理成127.0.0.1:1222/login

只要把3中的 127.0.0.1:1222/login换成111.111.111.111:1222/login就是正式的生产环境啊！

下面说下实现:

在main.js中这么写

const isPro = Object.is(process.env.NODE_ENV, 'production')
const URL= isPro ? 'http://111.111.111.111:1222' : 'api/'
axios.defaults.baseURL = URL;
复制代码

注： build产生的dist代码即是生产环境下的代码 上面代码的作用是:

• 在开发环境下将/xxx的请求换成 api/xxx 再通过下面的vue.config.js中的devserver将将/api/xxx的请求换成 localhost:1222/xxx;
• 在生产环境下将/xxx的请求换成 111.111.111.111:1222/xxx

vue.config.js这么写(在根目录下新建)~

module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:1222',
          ws: true,
          changeOrigin: true,
          pathRewrite: {
            '/api/': '/'
          }
        },
      }
    }
  }
复制代码

上面代码的作用是，将/api/xxx的请求换成 localhost:1222/xxx

后端

后端没有前端那么麻烦echo里有实现的跨域中间件，直接上就OK

e.Use(middleware.CORS())
复制代码

然后go的布署是真的要吹一波，在winodws下直接可以编译出linux的代码，在main.go所在的目录下直接打开命令行输入:

set GOOS=linux

set GOPACH=amd64

go build 
复制代码

当然liux直接 go build main.go 会出现一个项目名无后缀的文件。比如我的是xin (赵信信爷的意思) 直接在linux下 ./xin 就可运行。但是在服务器中，还是要后台运行 nohup ./xin & 后端就结束了

查看要用的端口有没有被使用：lsof -i:端口号

最后的nginx当http静态文件服务器

用XFTP把vue生成的dist文件夹下的文件上传到指定的地址，然后简单的配置一下就可以跑了

server {
        client_max_body_size 4G;
        listen 80;  #侦听80端口
        location /{
            root /var/www/html; #网站放这里
        }
    }
复制代码

EOF