springboot 2. x 통합 react 배치 nginx 완벽 결합

글 목록

1. 사고방식

1.1 springboot 마이크로 서비스 관련

1.2 전단 반응, VUE 관련 패키지 배치

1.3 전단 은 어떻게 백 엔 드 를 통합 합 니까?nginx 로

1. 사고방식
1.1 springboot 마이크로 서비스 관련

예 를 들 어 저 는 springboot 에 모두 3 개의 마이크로 서비스 ABC 가 있 습 니 다. A: A 서 비 스 는 전단 과 상호작용 을 합 니 다. 포트 는 8080 B: A 서비스 가 생산 하 는 메 일, 정보 등 은 모두 B 서 비 스 를 방문 하 는 것 입 니 다. 이때 A 크로스 서 비 스 는 B 를 호출 하고 B 의 포트 는 8081 C: A 서비스 인터페이스의 검색, 예 를 들 어 elasticsearch 등 과 관련 된 것 은 모두 C 서비스 에 있 습 니 다. 이때 A 크로스 서 비 스 는 C 를 호출 합 니 다.C 의 포트 는: 8082

그러나 전단 페이지 와 상호작용 하 는 것 은 A 서비스의 8080 포트 만 있 습 니 다. A 포트 가 BC 를 어떻게 호출 하 는 지 모두 가 알 고 있 고 여러 가지 방식 도 있 습 니 다. 여기 서 주로 전단 과 백 엔 드 의 8080 통합

을 말 합 니 다.
1.2 전단 리 액 트, VUE 관련 패키지 배치

일반적으로 전단 개발 은 VUE 와 react 이 고 개발 할 때 절 차 는 다음 과 같은 세 가지 가 있다.

. 설치 관련 의존 명령 은: npm install

. 명령 작 동 명령 을 사용 하 는 것 은 npm run dev 일반적으로 전단 의 개발 자 들 은 3000 개의 포트 로 작 동 합 니 다. 예 를 들 어 http://localhost:3000 그 다음 에 안에서 개발 을 테스트 하지만 진정 으로 온라인 에 배치 하려 면 포장 해 야 합 니 다. 바로 아래 의 네 번 째 단계

입 니 다.

포장 하면 dist 폴 더 가 나타 납 니 다. html 와 정적 파일 이 있 습 니 다. 명령 은 npm run build

입 니 다.

하지만 저 는 요점 을 말씀 드 리 겠 습 니 다. react 나 vue 로 개발 할 때 포장 발표 할 때 모든 경로 요청 (AJAX 요청) 을 8080 포트 에 보 내야 합 니 다. 예 를 들 어 다음 두 가지 설정 은 전단 개발 환경 과 온라인 환경

입 니 다.

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8080"'
})

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  BASE_API: '"http://localhost:8080"'
}

1.3 전단 은 어떻게 백 엔 드 를 통합 합 니까?nginx 를 사용 하 다
구체 적 으로 nginx 를 어떻게 설치 하 는 지 는 말 하지 않 겠 습 니 다. 인터넷 에 많은 것들 이 있 습 니 다. 제 가 말 하고 자 하 는 것 은 vue 나 react 를 nginx 에 어떻게 배치 하 는 지 입 니 다.

nginx 디 렉 터 리 에 있 는 nginx.conf 파일 찾기

설정 을 수정 하 는 것 은 주로 http 아래 에 server 를 추가 하 는 것 입 니 다. 다음 과 같이 추가 해 야 합 니 다. listen 뒤의 포트 번 호 는 바로 위 에서 언급 한 전단 포트 번호 입 니 다. 본질 적 으로 3000 과 차이 가 없습니다. 여 기 는 제 가 3000 8055 만 있 기 때문에 모든 포트

로 바 꿀 수 있 습 니 다.

server {
    listen       8055;
    server_name  localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

다 된 가방 을 nginx 위 에 두 고 상기 두 단 계 를 마 친 후에 방금 1.2 다 된 가방 을 사실은 dist 폴 더 입 니 다. 그리고 dist 폴 더 안의 모든 물건 을 nginx 디 렉 터 리 아래 html 폴 더 에 넣 습 니 다. 그림 은 제 nginx 목록 에 기 록 된 모든 내용 입 니 다 (주: 유용 한 열 을 주 웠 습 니 다)

├─conf
    fastcgi.conf
    fastcgi_params
    koi-utf
    koi-win
    mime.types
    nginx.conf
    scgi_params
    uwsgi_params
    win-utf
├─contrib
├─docs
├─html
│  └─static
│  └─index.html
├─logs
└─temp

마지막 으로 nginx 서버 를 시작 하고 주 소 를 입력 하면 됩 니 다.http://localhost:8055

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

springboot 2. x 통합 react 배치 nginx 완벽 결합

좋은 웹페이지 즐겨찾기