vue + go - echo 앞 뒤 가 분 리 된 항목 의 온라인

배경
이것 은 웹 전후 단 분리 항목 의 온라인 과정 이다.크로스 오 버 문 제 를 해 결 했 습 니 다.
사용 하 는 기술

전단 vue 온 가족 통 (cli 3) + 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 으로 씁 니 다.개발 환경 이 이상 적 인 상황 부터 말씀 드 리 겠 습 니 다.

axios 요청 /login

전단 자동 대리: 127.0.0.1:1222/login 그러나 실제 적 으로 login 과 vue - router 의 login 이 충돌 할 까 봐 ajax 를 직접 사용 할 수도 있 기 때문에 url: login 전에 /api 를 추가 할 수 있 습 니 다. 현재 절 차 는 다음 과 같 습 니 다.

axios 요청 /login

요청 이 api/login

로 변경 되 었 습 니 다.

요청 이 처리 되 었 습 니 다 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 에서 Liux 코드 를 직접 컴 파일 할 수 있 습 니 다. main. go 가 있 는 디 렉 터 리 에서 명령 행 입력 을 직접 열 수 있 습 니 다.

set GOOS=linux

set GOPACH=amd64

go build 

물론 liux 직접 go build main.go 항목 이름 에 접미사 가 없 는 파일 이 나타 납 니 다.예 를 들 어 저 는 xin (조신 신 신 나리 의 뜻) 입 니 다. Liux 에서 직접 실행 할 수 있 습 니 다. / xin 은 실행 할 수 있 습 니 다.하지만 서버 에 서 는 백 엔 드 실행 nohup ./xin & 백 엔 드 가 끝 났 습 니 다.
사용 할 포트 가 사용 되 었 는 지 확인 하기: lsof -i: 마지막 nginx http 정적 파일 서버
vue 에서 생 성 된 dist 폴 더 의 파일 을 지정 한 주소 로 XFTP 로 업로드 한 다음 간단하게 설정 하면 도망 갈 수 있 습 니 다.

server {
        client_max_body_size 4G;
        listen 80;  #  80  
        location /{
            root /var/www/html; #     
        }
    }

EOF