첫째, 전희
이전과 분리의 종료 후의 nginx + 바람둥이 방법에 의해 개발 된 인터넷 프로젝트를 사용하기위한 업계 표준 방법이되었다 대규모 분산 아키텍처, 유연한 컴퓨팅 아키텍처의 미래를위한 것입니다 효과적인 디커플링, 전면과 분리의 후 단부 (당신은 또한 중간 nodejs를 추가 할 수 있습니다) 마이크로 서비스 아키텍처 (예컨대 다양한 클라이언트 : 브라우저 등, 차량 단말기, 안드로이드, IOS) 다중 터미널 서비스 및 고체 토대. 이 단계는 원숭이 성인 패스에서 시스템 아키텍처의 진화이다.
핵심 아이디어는 아약스를 통해 restuful API를 HTML 페이지에 대한 프런트 엔드 인터페이스가 백엔드 호출 및 JSON 데이터의 상호 작용을 사용합니다.
인터넷 아키텍처, 용어에서 :
웹 서버 : 일반적으로 nginx를, 서버의 아파치 종류로, 그들은 일반적으로 정적 자원을 구문 분석 할 수 있습니다 의미합니다.
응용 프로그램 서버 : 같은 바람둥이, 부두가, 수지 등의 서버가 동적 자원 정적 자원을 해결할 수 있습니다 해결할 수 있지만, 능력이 더 좋은 웹 서버에 정적 리소스를 구문 분석에 일반적으로 의미합니다.
일반적으로 전용 웹 서버가 네트워크 외부에서 액세스 할 수있는 응용 프로그램 서버는 네트워크에 액세스 할 수 있습니다.
둘째, 수술 전문 기업 (개발자 분리)
이전 JavaWeb 프로젝트는 주로 자바 프로그래머 Dangdie 어머니, 그러나 또한 백엔드와 참여, 프런트 엔드에 참여.
시대의 발전과 함께, 많은 중소 기업들이 점차 바로 앞, 백엔드 엔지니어 일의 바로 뒤쪽 끝을 전면 및 더 경계 지점의 후단과 더 명확, 프론트 엔드 엔지니어로 시작했다. 수술을 전문으로 소위 산업, 사람한다면 아무것도, 그는 결국 아무것도 잘.
그리고 중소 기업은 작은 기업은 만능이 필요하지만, 개인 및 전문 개발, 나는 별도의 추천, 전문가가 필요합니다.
1, 백 엔드 자바 엔지니어를위한 :
기반 자바, 디자인 패턴, JVM 원리, 봄 + springmvc 원칙과 소스, 리눅스, MySQL의 트랜잭션 격리 및 잠금 장치, MongoDB를, HTTP / TCP에 초점을 맞추려면, 멀티 스레드, 분산 아키텍처, 유연한 컴퓨팅 아키텍처, 마이크로 아키텍처 서비스, 자바 성능 최적화 및 관련 프로젝트 관리.
그래서 세 높은 (높은 동시성, 고 가용성, 고성능), 보안, 스토리지, 비즈니스와 :의 백 엔드를 추구.
2 프론트 엔드 엔지니어 :
HTML5에 집중, CSS3, JQuery와, AngularJS와, 부트 스트랩, reactjs, vuejs, 웹팩, 이하 / 말대꾸, 꿀꺽, nodejs, 구글 V8 엔진, 자바 스크립트 멀티 스레딩, 모듈, 측면 지향 프로그래밍, 디자인 패턴, 브라우저 호환성 , 성능 최적화, 등등.
프론트 엔드는 추구 : 페이지 성능, 등등 속도와 부드러운, 호환성, 사용자 경험과.
수술을 전문으로 산업, 그래서 당신의 핵심 역량은 인생에 무엇을 넣어 말, 더 이상 받고있을 것입니다 인생은 다시 무엇을 할 것이다. 그리고 양쪽 끝의 개발은 결국, 당신은 무엇을 생각, 아무것도 당신이 좋은 더 깊은 없습니다.
엔지니어의 양쪽 다음의 우수성 전체 스택을 팀을 구축하기 위해, 각 분야, 독립적 인 지배 구조에 더 집중하도록 팀은 이전에와 바이 사이드 팀 후에 나누어 져 있습니다.
셋째, 원시 시대 (다양한 결합)
우리는 프로젝트의 번호를 사용하는 경우 거의 가지고는 JavaWeb 배경 프레임, springmvc / 스트럿츠 + 봄 + 스프링 JDBC / 등등 / MyBatis로 및 최대 절전 모드입니다.
대부분의 프로젝트는 세 계층, 제어 계층, 비즈니스 계층, 지속 층으로 분할 자바 백엔드이다. 레이어 제어 매개 변수를 수신 할 책임이 전화 관련, 비즈니스 계층의 데이터를 캡슐화하고, 경로 및 JSP 페이지를 렌더링 할 수 있습니다. 그런 아이디어의 MVC 세트를 재생, 백그라운드 데이터를 표시합니다 여러 탭 또는 JSP 페이지 필기 자바 표현을 사용합니다.
우리는이 상황을보고 : 수요가 완료 코드를 완성 설정, 시험 테스트, 이상 후 무엇인가? 를 게시하려면? 당신이 바로, 프로덕션 환경에서 웹 컨테이너에 같은 일식 받는다는 같은 도구를 사용하거나 전쟁 패키지로 표시된 코드를 넣어, 다음 전쟁 패키지를 게시해야합니까?
발표가 끝난 후에는 웹 컨테이너를 시작하려면, 서비스를 제공하기 시작했다, 당신이 당신의 웹 사이트에 관련 등 도메인 이름, DNS를 구성, 이번에는 (당신이 웹 사이트입니다 가정) 방문 할 수 있습니다. 그런 다음 우리는 당신의 앞을보고 백엔드 코드는 가방의 모든 전쟁 아닌가요? 당신의 JS, CSS, 사진, 다양한 타사 라이브러리를 포함, 그렇지?
음, 여기 당신은 브라우저에서 웹 사이트 도메인 (www.xxx.com)를 입력 한 다음 무슨 일이 일어 났는가? 자신의 신발에 검색 할 수있는 가난한 재단, 나는 아 말을 건조 픽업 (기업이 질문에 얼굴이 문제는 많은이기도하다).
DNS 서버 네트워크 IP 외부 서버가 도메인 이름에있는 브라우저는 HTTP (다음은 TCP / IP입니다) tcp3 악수를 한 후, 서버에 HTTP 요청을 보내, TCP 프로토콜을 통해 데이터를 전송하기 시작, 서버 가져 요청 후, 서비스를 제공하는 매개 변수를 수신 한 후, 브라우저, 브라우저에 응답을 반환하기 시작했다 그리고 당신은 사용자에게 제공 콘텐츠 형식에 의한 콘텐츠를 구문 분석 돌아왔다.
그리고 우리가 보면, 이제 당신의 가정 (100 개) 사진을 보유하고 있다고 가정하자, 이번에는, 그것은 사용자로부터 HTTP 요청이 보인다, 사실, 한번도, 사용자 첫번째 방문, 브라우저 캐시에있을 때, 당신의 100 개 사진은, 브라우저는 우리가 메모리의 비용 소켓을 만들어야합니다, 서버가이 요청을 수신, (누군가가 긴, 여기에서 논의되지 않은 연결도 짧은 질문에 http 나에게 말했다) 요청 (100) HTTP 요청에 부착 서버, JSP의 통증 점에 사 용 TCP 전송 (미터를 재생
이전 javaWeb 트래픽이 때문에 덜 까다로운 성능 요구 사항이 높은 아니며, 때문에 대부분의 프로젝트는, 사용자에게 데이터를 보여 JSP 페이지를 사용하지만, 지금은 빅 데이터의 시대이기 때문에, 인터넷 프로젝트에 대한 성능 요구 사항이 증가하고, 따라서됩니다 전면 및 후면 끝이 함께 결합되어 원래의 아키텍처 패턴은 우리를 만날 점점 수 없었다, 그래서 우리는 크게로드 할 수있는 능력을 향상시키는 방법을 분리 할 수있는 방법을 찾을 필요가있다.
서버 등과 같은 HTTP 요청 CSS, JS, 이미지 등 다양한 HTTP 요청을 수신하고 있기 때문에 (1)는 동적 자원 정적 자원 서버 압력 모두 함께 연결된다. 서버 상황이 발생되면, 전면에 종료된다 다시, 사용자 환경이 좋지 않습니다.
2, 좋은 UI 디자인 한 후, 프론트 엔드 엔지니어는 HTML, HTML로 디자인 컷에 대해서만 책임이 것은 (페이지 JS 코드를 많이 될 것입니다 종종 있기 때문에) 높은 오류율로 엔지니어 자바 JSP 페이지로 설정해야 수정 양측은 때 문제의 비 효율성 시너지 효과를 개발해야합니다.
3, JSP (등 바람둥이, 부두, 수지,로) 실행해야합니다, 그래서 성능까지 말할 것도없고, (HTTP 동시의 nginx가 5w의 단일 인스턴스는, 이러한 장점을 사용했다고한다) 자바 지원의 nginx 웹 서버에서 사용할 수 없습니다.
네, 첫 번째 요청의 JSP가 웹 서버에서 서블릿으로 컴파일해야, 첫 번째 실행 속도가 느려질 수 있습니다.
(5), 서블릿, JSP에 액세스하는 각 요청 후 출력 스트림 HTML 페이지이며, 높은 효율 (~ 할 때마다 요 프로) 직접 HTML 아니다.
6, 프런트 엔드 엔지니어, 페이지를 수정 고충 많이 발생하는 곤경에있을 때, JSP로 표현 내부에 더 라벨이 있습니다.
7 많은 JSP 페이지의 내용은 동 기적으로로드되어 있기 때문에, 응답 속도가 느린 경우.
8, 프론트 엔드 엔지니어는 자바 IDE (예를 들어 일식), 및 백엔드 개발 환경의 다양한 구성 할 필요를 사용해야합니다, 당신은 프론트 엔드 엔지니어의 감정 않는 것으로 간주했다.
고통 점의 위의 수에 따라, 우리는 전체 프로젝트 앞으로 체중 이동, 전면과 후면 끝의 진정한 디커플링을 개발하는 것이 바로해야합니다!
다섯째, 개발 모델
옛날 방식이 전 :
1, 제품 경험을 / 리더십 / 고객은 필요
2, UI 디자인을 만들려면
3, 프론트 엔드 엔지니어는 HTML 페이지를 할
4, 백엔드 엔지니어는 HTML 페이지 JSP 페이지로 설정합니다 (전면 및 HTML JSP를 설정하기 위해 수행해야 엔드를 백업하는 다른 프론트 엔드의 강한 의존성의 후단. HTML이 변경되면, 더 많은 고통, 낮은 효율의 개발)
5, 통합 문제
6 전단 재
7, 백엔드 재
8 번째 통합
9, 성공적인 통합
10 일 납품
새로운 방법 :
1, 제품 경험을 / 리더십 / 고객은 필요
2, UI 디자인을 만들려면
(3), 전면과 후면이 종료 컨벤션 파라미터 데이터 인터페이스 및
도 4는 전면과 후면이 평행 개발 종료한다 (NO 강한 의존성 요구 변경 요청을 변경하는 경우, 병렬 전방 및 후방 단부를 개발할 수만큼 양측 코드를 변경하지 않는 인터페이스 및 파라미터 상수, 높은 효율의 발전)
(5) 통합 전면 및 후면 말단
도 6에서, 프론트 페이지를 조정
7, 성공적인 통합
8, 배달
여섯째, 요청 방법
옛날 방식이 전 :
1, 클라이언트 요청
도 2는 서블릿 서버 또는 제어기의 요청을 수신한다 (라우팅을 제어하고 페이지를 렌더링 백엔드 권리를, 후단의 상당 부분의 전체 프로젝트 개발)
3, 서비스, DAO 비즈니스 로직 코드 완료를 호출
4, JSP를 반환
5, JSP 일부 동적 코드를 보여
새로운 방법 :
1 브라우저에 요청을 전송
2 직접 HTML 페이지 (프런트 엔드 제어 라우팅 페이지를 렌더링 우측 전방 전체 프로젝트를 다시 개발)
3, HTML 페이지 서버 인터페이스 호출을 담당 (간단하고 효율적인 JSON 형식 데이터 JSON 데이터 형식을 XML 돌아가서 다시 교체 등등과 AJAX 통해) 데이터를 생성
4 페이지 역학 효과를 보여주는 동작 DOM 파싱, HTML을 채웠다.
단계는 새로운 방법을 요청 요약하면 :
동시 브라우저 요청 ---> 웹 서버 클러스터 (의 nginx) ---> 응용 프로그램 서버 클러스터 (바람둥이) ---> 파일 / 데이터베이스 / 캐시 / 메시지 큐 서버 클러스터 많은 수의
당신이 하위 모듈을 재생할 수 있지만, 또한 다음 스키마 업그레이드를 준비하기 위해, 작은 클러스터 중 하나에 사업에 의해 분할 할 수 있습니다.
세븐, 전후 분리 혜택
도 1을 참조하면, 전방 및 후방 단부의 nginx를 사용하는 사실 디커플링, 프런트 엔드 서버 일 수있다. 프런트 엔드 / WEB 서버가 CSS를 넣어, JS, 이미지 등 정적 리소스의 일련의 (심지어 CSS, JS, 같은 알리 구름 OSS와 같은 특정 파일 서버로 이미지 및 기타 자원 및 CDN 가속을 사용할 수 있습니다)에, 프론트 엔드 페이지 참조 및 점프 및 라우팅을 제어하기위한 책임이 서버는 전체 응답 속도를 빠르게하기 위해 비동기 인터페이스 (데이터 공급자를 상상하는 바람둥이)이 바람둥이를 사용하여 백엔드 / 서버 응용 프로그램의 첫 페이지의 백 엔드를 호출합니다. (우리는 nodejs로 프론트 엔드 기술 프레임 워크들을 사용해야 반응, 라우터, 반응, REDUX, 웹팩)
(2)는, 신속하게 서로 현상에 책임을 전가하지 않습니다 문제를 찾을 수있는 버그를 발견했다. 페이지 로직, 점프 오류, 브라우저 호환성 문제, 스크립트 오류 때문에 페이지의 스타일과 모든 프런트 엔드 엔지니어에 대한 책임을 져야합니다. 인터페이스 데이터 오류, 데이터가 성공적으로 제출되지, 응답 시간 제한 문제는 모든 백엔드 엔지니어에 의해 해결했다. 서로를 방해하지 않고 양측은 서로 앞면과 가족의 뒷면을 사랑 해요.
같은 Taobao의와 전면 및 후면 엔드 서버가 매일 + 태양 광 발전의 매일 얼마나 많은 수십억을 견뎌하려면 + 프런트 엔드 서버 클러스터 홈 2000이 필요합니다 동안 많은 동시 경우 3. 나는 수평 확장 할 수 있습니다. (알리의 기술 정상 회의로 이동, 그들이 자신을 작성하는 웹 컨테이너에 있습니다 경청했다하더라도 그는 안티 동시 HTTP 10 만 2,000 동시 HTTP 200 만 그들은 또한 예지 피크에 따라 무제한으로 확장 할 수의 단일 인스턴스, 끔찍한, 그것은 집입니다 ...)
4 동시 환원 백엔드 서버 / 부하 압력. 모든 다른 인터페이스 HTTP 이외에도 모든 전방의 nginx로 전송 요청 기준의 nginx 프록시 톰캣 역방향 인터페이스 Tomcat을 호출 요청한다. 그리고 페이지에 대한 첫 번째 요청에 추가하여, 브라우저는 로컬 캐시의 큰 숫자를 호출합니다.
5 백 엔드 서비스를 일시적으로 나가거나 다운 될 경우에도, 첫 페이지는 정상 방문 수 있지만 데이터가 그것을 솔질하지 않습니다.
앱 관련 서비스가있는 경우, 인터페이스를 공유 할 수 있도록 6, 어쩌면 당신은 한 일부 코드 리팩토링을 통해, 당신은 또한 효율성을 향상, 인터페이스를 많이 재사용 할 수 있습니다, 마이크로 채널 등 관련 응용 프로그램이 필요합니다. (멀티 애플리케이션)
이 비동기 적으로로드되어 있기 때문에 7, 뭔가 더는 페이지 표시를 두려워하지 않습니다.
8, nginx를 서버, 프론트 엔드 업그레이드를 다시 시작하고 더 완벽하지 않고, 뜨거운 배포 페이지를 지원합니다.
도 9는 코드 가독성 및 유지 보수성 향상 (함께 결합 된 전방 및 후방 단부를 코드는 상당히 격렬한 판독).
전방 및 후방 단부가 다소 의존 이전 강도보다, 병렬로 개발 될 수 있기 때문에 (10)는, 발전 효율을 향상한다.
11의 nginx 인증서, HTTPS를 사용하여 엑스트라 넷 액세스, 만 열려있는 포트 80 및 443에 배치, 다른 모든 포트 (포트 검사에서 해커를 방지하기 위해), 인트라넷 사용 HTTP, 성능 및 보안이 보장 마감했다.
12, 선단 컴포넌트 코드 재사용 컴포넌트의 다수는, 밖으로, 발전 효율을 향상시킬 것이다!
여덟 노트
1 일 열린 회의 요구 사항은 엔지니어가 모든 프런트 엔드 엔지니어로 풀 타임 테스트를 행동하지 않는, 전면과 후면 끝, 및 테스트 케이스 (이차원)를 쓸 수있는 좋은 인터페이스 문서, 백엔드 엔지니어를 개발할 필요에 참여해야, 크롬을 사용하는 것이 좋습니다 테스트 플러그 우편 배달부 또는 soapui 또는 JMeter를, 서비스 계층은 JUnit을 쓰기를 얻을 수 있습니다. PS : 전단 시험 장치는 재생할 수 있는가?
(2)는, 상기 인터페이스는 분명히 인터페이스 방법은 내부 사용자의 CONTROLER를 호출하는 것입니다 호출 인터페이스에서 자바 없습니다.
3, 작업 부하를 줄이고 성능과 확장 성을 개선하기 위해, 백엔드 팀을 팀의 프런트 엔드의 작업 부하를 증가했다.
네, 우리는 중첩 된 페이지, 페이지 매김, 페이지 점프 제어와 유사 해결하기 위해 프런트 엔드 프레임 워크의 번호가 필요합니다. (프레임의 선단을 가진자는 상술 한).
5. 프로젝트가 작거나 간단한 네트워크 프로젝트는, 당신은 어떤 프레임 워크없이 확신 할 수 있지만, 프로젝트 네트워크 프로젝트를 벗어나면, 허 덜걱 소리합니다.
정적 페이지를 생성하는 등의 템플릿 프레임 워크와 유사한 속도 / 프리 마커의 사용에 사람들이 전에 6, 보는 사람의 눈은 현명한 지혜를 참조하십시오.
7,이 문서의 주요 목적은 JSP가 네트워크 사외 큰 자바 웹 프로젝트에서 제거 할 말을하는 것입니다, JSP로 완전히 어떤 학생 친구, JSP / 서블릿 자바 웹 및 기타 관련 기초 나에, 배울 수없는 말을하지 않았다 이 프레임 워크를 작성하는 것을 기반으로 springmvc 마스터 감옥, 당신은 생각하십니까?
8, 관련 권한을 확인하는 경우 등의 페이지 수에, 다음 인터페이스에서 관련 데이터는 아약스를 통해 얻을 수 있습니다.
두 프런트 엔드 백 엔드 로직을 위해 할 수있는 위해 9, 내 충고는 프런트 엔드를 넣어하는 것입니다, 그 이유는 무엇입니까? 당신은 컴퓨팅 리소스의 논리를 계산해야하기 때문에, 백 - 엔드 로직에 배치하면 컴퓨팅 자원을 소비 할 대역폭 및 메모리 및 CPU를 실행하는 등, 당신이 기억해야하는 서버 컴퓨팅 자원이 제한되어 있지만, 당신은 앞을 넣어 경우 , 클라이언트의 컴퓨팅 자원을 사용하여 서버의 부하가 (높은 동시성 시나리오) 드롭 수 있도록. 이것은, 데이터 유효성 검사와 유사한 전면과 후면 끝이 수행해야합니다!
(10)는, 전면는 사용자에게 친숙한 백 엔드 요구 타임 아웃 및 백엔드 서비스 중단의 경우에 대처하는 메커니즘을 가질 필요가있다.
나인, 확장 된 읽기
(1) 사실, JS, CSS, 사진 정적 리소스 이런 종류의이 종류에 넣어 유사한 것으로 간주 될 수있다 (알리 클라우드 파일 서버를 OSS는 일반 및 서버 운영 시스템, 스토리지 PB 수준의 파일을 도달 한 후, 또는 단일 경우 심각한 성능 문제가있을 것입니다 IO는 비행과 같은 페이지 속도를 열 수 있도록 폴더 내의 파일의 수는 나라에 있는지, 다음 OSS (국가 자식 노드 가속)에 CDN으로) 3-5 만명에 도달 어떤 장소, 당신의 nginx 부하가 더욱 감소된다.
2, 당신은 nginx를 그냥 브라우저에 페이지 정적 리소스를 반환하기 때문에 국내 검색 엔진 스파이더가 크롤 반면, 현서 최적화의 혜택 nodejs에 도움이 또한 게이트웨이 nodejs 사용하고, 경량 마이크로 서비스 아키텍처를 재생하려면 정적 데이터는 좋은 검색 엔진 지원을받을 수없는 응용 프로그램을 만드는 페이지의 js를 해결하지 않습니다. Nginx에이 페이지를 렌더링하는 조립되지 않기 때문에, 당신은 다시 브라우저에 정적 페이지를 넣어 다음 브라우저 렌더링의 부담을 증가 렌더링 작업을 완료해야합니다. 브라우저 시작 요청이 nginx를 통해 배포, URL 요청은 페이지 렌더링 nodejs에 대한 조립 통합 분포를 nodejs하는, API 요청은 백 엔드 서버, 완전 관해에 직접 전송됩니다.
당신이 도메인 간 문제가있는 경우 3. CORS의 spring4 완벽한 해결책이 될 수 있지만, 일반적으로 사용하지 않을의 nginx, 당신 않는 한 프런트 엔드 프록시 크로스 도메인 문제를 반대로 두 개의 서비스 도메인에 백엔드 서비스. JSONP 방법도 잃었습니다. (이 분산 시스템이기 때문에) 보안 문제에 대한 단일 지점 토큰 메커니즘을 수행하는 캐시를 사용하여 멀티 터미널 응용 프로그램을 재생 토큰 메커니즘을 사용하려면, 바람둥이 기본 세션 메커니즘을 제거하기 위해 관심을 지불 할 경우 4, JWT에서 찾을 수 있습니다.
도 5를 참조하면, 프로젝트의 전단 모의 시험 백엔드 서비스의 가용성 및 안정성을 보장하기 위해 상세한 테스트 케이스가 필요 (후단을 시뮬레이션하는 가상의 테스트 객체를 구성 독립적으로 개발되고 테스트 될 수있다)을 첨가 할 수있다.
X. 요약
전후 단부는 별도의 개발 모델하지만 아키텍처 패턴 (전후 단부 분리 구조) 단순히이다. 코드 라인과 전면 및 후면 별도의 전면 및 후면 끝이 전면과 프로젝트의 단부를 구별 할 필요가 분리되어있는 경우에만 있다고 생각하지 마십시오. 프런트 엔드 및 백 엔드 프로젝트는이 개 프로젝트의 프로젝트 두 개의 다른 서버에, 필요는 별도의 두 개의 서로 다른 프로젝트, 두 개의 서로 다른 코드베이스, 다른 개발자를 배포 할 수 있습니다. 전면 및 후면 끝 엔지니어가 병렬 개발을 달성하기 위해 계약 대화 형 인터페이스를 필요로 배포 종료 후 독립적 인 개발의 필요성은 HTTP 아약스 요청을 호출하여 백 엔드의 프론트 엔드는 편안한 API를 호출합니다. 프론트 페이지는 스타일과 분석 및 동적 데이터 렌더링에 초점 및 특정 백엔드 비즈니스 로직에 초점을 맞출 필요가있다.
(이 분산 시스템이기 때문에) 보안 문제에 대한 단일 지점 토큰 메커니즘을 수행하는 캐시를 사용하여 멀티 터미널 응용 프로그램을 재생 토큰 메커니즘을 사용하려면, 바람둥이 기본 세션 메커니즘을 제거하기 위해 관심을 지불 할 경우 4, JWT에서 찾을 수 있습니다.
링크 : HTTPS : //www.jianshu.com/p/c86cee16b418