전단 의 mock server

중대 형 프로젝트 에서 전단 을 쓰 면서 백 엔 드 를 쓸 수 는 없다.스 택 전체 가 너무 어렵 습 니 다:)
라 일 스 와 같은 개발 모델 은 이미 현재 환경 에 적합 하지 않다.모든 항목 이 앞 뒤 가 분리 된다 고 떠 들 고 있 으 니 이렇게 할 수 밖 에 없다.
나 는 이전에 대학 개 들 을 할 때, mock 데이터 라 는 부분 이 매우 괴 로 웠 다.
비록 전체 앞 뒤 끝 을 내 가 통제 할 수 있 지만 전체 전단 은 하나의 repo 이 고 백 엔 드 는 하나 이기 때문에 내 가 개발 할 때 두 개의 편집 기 를 켜 놓 을 수도 없고 (한 동안 이렇게 한 적 이 있다) 내 컴퓨터 에 그렇게 많은 물건 을 설치 하고 싶 지 않다.
처음에는 해결 방안 이 지루 했다.
백 엔 드 Mock 프로젝트
자기 컴퓨터 에 설치 하기 싫 으 면 원 격 서버 까지.어차피 학생 들 이 혜택 을 주 는 서버 는 매우 싸 고 2 급 도 메 인 을 하나 더 열 어도 아무런 손실 이 없다.
한다 면 한다.
원 격 개발 서버 에서 먼저 백 엔 드 를 끌 어 내 려 데이터 베 이 스 를 만 듭 니 다.laravel 에서 만 들 었 기 때문에 mock 데이터 도 쉽 습 니 다.통째로 떨 어 뜨 렸 다.
그리고 Nginx 에 도 메 인 을 뛰 어 넘 는 header 를 추가 합 니 다.
자, 여기까지 서버 에서 완성 되 었 습 니 다.
불편 하지만 참 을 수 있 겠 죠.그러나 허튼소리 는 앞 에 있다.
전단 에서 요청 을 보 내야 하기 때문에 모든 요청 의 url 은 http://dev.foo.com/ 이 고 생산 환경 서버 는 http://www.bar.com/ 입 니 다.
나 는 모든 요구 에 prefix 를 추가 하고 dev 환경 에서 http://dev.foo.com/ 로 설정 하면 생산 환경 이 바 뀌 는 '똑똑 한' 방법 을 생각해 냈 다.이렇게 모든 요청 의 prefix 는 변수 입 니 다. release 전에 교체 하면 됩 니 다!
천재!
이렇게

// release   
const prefix = 'http://dev.foo.com/'

//      
fetch(`${prefix}/api/users`).then(res => res.json()).then(data => todo(data))

그리고 제 가 문자열 을 고 칠 때 울 었 어 요.☹ 만약 당신 이 소스 코드 를 읽 고 싶다 면, 당신 은 내 가 당시 에 무 너 진 마음 을 느 낄 것 입 니 다. 여기에 아직도 이 방안 의 흔적 이 남아 있 습 니 다. (너무 많은 부분 을 고 쳐 야 합 니 다)
그러나 정말 이지, 비록 이 방안 은 문제 가 상당히 크 지만, 그것 은 확실히 유용 해서 나 를 몇 달 동안 지탱 했다.
이 방안 을 참 기 어 려 운 동시에 나 도 좋 은 해결 방안 을 찾 고 있다.
전단 Mock 프로젝트
저 는 재 학생 이 라 대기업 의 개발 방식 을 알 수가 없어 요.이 통 증 이 발생 한 후 줄곧 이 방면 의 내용 을 주시 하고 있다.
저 는 웹 팩 - dev - server 쪽 에 중간 층 을 만들어 서 이 server 를 완전한 백 엔 드 로 만 들 고 싶 었 습 니 다. 경로 등 을 포함 하여 제 이 슨 으로 돌아 가 고 싶 었 습 니 다.
다른 생각 을 하 느 라 끌 고 다 니 지 않 았 고, 웹 팩 이라는 것 도 좀 복잡 한 것 같 아서 건 드 리 기 싫 었 다.
사실 또 하나의 문제 가 있 습 니 다. 저 는 mock 이라는 큰 회사 가 저 보다 일찍 만 났 을 것 이 라 고 믿 습 니 다. 왜 저 는 이런 가방 을 검색 하지 못 했 습 니까?그들 이 이렇게 하 기 를 원 하지 않 는 것 입 니까? 아니면 더 좋 은 해결 방안 이 있 습 니까?
최근 에 야 비로소 믿 을 만 한 방안 을 찾 았 다. 절 차 는 이렇다.
우선 mock server 를 열 고 경로 기능 만 있 으 며 가짜 데 이 터 를 되 돌려 줍 니 다.
웹 팩 - dev - server 에 proxy 를 추가 하여 server 에 대한 요청 을 모두 proxy 에 전달 합 니 다. 도 메 인 을 뛰 어 넘 는 것 이 존재 하지 않 아 실 감 나 게 모 의 할 수 있 습 니 다.
이 방안 은 아주 좋 습 니 다. 요청 url 을 수정 할 필요 가 없습니다.
한다 면 한다.

$ npm install --save faker
$ npm install -g json-server

프로젝트 디 렉 터 리 에 mock 디 렉 터 리 를 만 든 다음 경로 와 데 이 터 를 만 듭 니 다.

// mock/db.js
'use strict'
const faker = require('faker')

module.exports = function() {
    let data = {
        'activity': [
            {
                id: 0,
                title: faker.lorem.words(),
                img: faker.image.image()
            }
        ]
    }
    return data
}

경로 파일 은 주로 /api/* 에 대한 요청 을 /* 로 옮 깁 니 다. 주로 간단 합 니 다.

{
    "/api/": "/"
}

그리고 이 mock server 를 한번 해 주세요.

$ json-server mock/db.js --routes mock/routes.json --port 9999

나머지 는 웹 팩 쪽 설정 입 니 다.핵심 은 이것들 이다.

const config = require('./webpack.config')
config.devServer = {
    hot: true,
    inline: true,
    proxy: {
        '/api/*': {
            target: 'http://127.0.0.1:9999',
            secure: false
        }
    }
}
module.exports = config

자, 배치 도 됐 습 니 다.

$ webpack-dev-server --process --colors --hot --inline --devtool eval --config webpack.dev.config.js

모든 일 을 다 하고 테스트 만 남 았 다.
입구 파일 을 찾 아 테스트 해 보 세 요:

fetch('/api/activity').then(res => res.json()).then(data => console.log(data))

ok。나 를 이렇게 몇 달 동안 괴 롭 혔 던 앞 뒤 가 마침내 완전히 갈 라 졌 다.
문제.
이 프로 세 스 의 가장 큰 문 제 는 json - server 라 는 것 이다. 순수한 RESTful server 이기 때문이다.마찬가지 로 위의 설정 을 예 로 들 면:

GET /api/activity
POST /api/activity {title: 'foo', image: '/foo.jpg'}
PUT /api/activity/1 {title: 'bar', image: '/bar.jpg'}
DELETE /api/activity/1

RESTful 에 대해 알 면 알 수 있 습 니 다. 각각 가 져 오기, 만 들 기, 업데이트, 삭제 작업 에 대응 합 니 다.
물론 더 많은 json - server 설정 이 있 습 니 다. 예 를 들 어 조회, 관계 등 은 다음 에 제 가 링크 를 드 리 겠 습 니 다.
이 물건 들 은 디자인 이 매우 좋다 고 말 할 수 있다.하지만 문제 다.
낡은 시스템 은 전혀 사용 할 수 없다.디자인 이 좋 지 않 은 시스템 은 사용 할 수 없습니다.
백 엔 드 가 제멋대로 일 수도 있어!REST API 를 지 키 지 않 으 면 이 전단 mock 은 routes.json 로 만 조정 할 수 있 지만 더 많은 경우 조정 할 수 없습니다.
그래서 이 mock server 방안 은 백 엔 드 에 대한 요구 가 엄격 합 니 다.
References

웹 전단 Mock 서버 를 어떻게 구축 하 셨 습 니까?

JSON Server

faker.js

Egghead.io free video tutorial - Creating demo APIs with json-server

프론트 mock server