一個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