react, cra 2, typescript 기반 pwa 프로젝트 개발 에서 배치 (3)

이 글 은 이 시리즈 의 마지막 글 로 최근 건물 주가 설치 하 느 라 바 빠 서 비둘기 에 게 오랫동안 당 한 글 이기 도 하 다.이 글 은 주로 이 프로젝트 의 배치 부분 을 말 하 는데 다음 과 같다.

이 프로젝트 를 nginx 서버 에 어떻게 배치 합 니까?

인증 서 를 설정 하여 https 프로 토 콜 에서 실행 하도록 합 니 다.

프로젝트 회고
이것 은 creat - react - app 2 를 기반 으로 한 pwa 프로젝트 입 니 다.메 인 화면 에 추가 할 수 있 고 오프라인 으로 실행 할 수 있 습 니 다.프로젝트 주소: browseExpbyReact
이 내용 은 사실 이 프로젝트 에서 완전히 벗 어 날 수 있 음 을 보면 다음 과 같은 내용 은 대부분 개인 spa 프로젝트 의 간단 한 배치 에 적용 된다.
어떻게 배치 합 니까?
이 프로젝트 가 완 료 된 후 어떻게 서버 에 배치 합 니까?이 프로젝트 에서 사용 하 는 웹 서버 는 nginx 입 니 다.nginx 는 비동기 웹 서버 로 비동기 이벤트 드라이브 로 요청 을 처리 하 며 성능 을 위 한 HTTP 서버 입 니 다.우선, 프로젝트 에 접근 할 수 있 도록 프로젝트 에 역방향 에이 전 트 를 설정 하고 서버 에 대한 접근 에이 전 트 를 프로젝트 에 연결 해 야 합 니 다.그리고 저희 프로젝트 는 pwa 프로젝트 이기 때문에 인증 서 를 설정 하고 https 로 업그레이드 하여 pwa 의 특성 을 체험 할 수 있 도록 해 야 합 니 다.
먼저 백 엔 드 서 비 스 를 작성 합 니 다.
우선 프로젝트 의 입구 페이지 에 접근 할 수 있 도록 백 엔 드 서 비 스 를 작성 해 야 합 니 다. express 를 사용 하여 서 비 스 를 간단하게 작성 할 수 있 습 니 다.

const fs = require('fs')
const path = require('path')
const express = require('express')

const app = express();

app.use(express.static(path.resolve(__dirname, './build')))
app.get('*', function(req, res) {
  const html = fs.readFileSync(path.resolve(__dirname, './build/index.html'), 'utf-8')
  res.send(html)
})

app.listen(3003, function() {
  console.log('server listening on port 3003!')
})

express 를 통 해 우 리 는 로 컬 3003 포트 에서 서 비 스 를 열 어 프로젝트 를 방문 합 니 다.그리고 ftp 와 같은 도 구 를 사용 하여 프로젝트 를 서버 에 전송 하고 이 node 서 비 스 를 실행 해 야 합 니 다.그럼 현재 우리 프로젝트 는 서버 의 3003 포트 에서 실행 되 고 있 습 니 다.
역방향 에이전트 설정
우리 의 프로젝트 는 이미 서버 의 3003 포트 에서 실행 되 고 있 기 때문에 우 리 는 서버 에 대한 접근 을 서버 에 역방향 으로 프 록 시 127.0.0.1:3003 로 설정 해 야 합 니 다.nginx 에 해당 하 는 폴 더 에 관련 프로필 을 추가 합 니 다. 보통 nginx 폴 더 에 있 는 conf. d 폴 더 입 니 다. 이 항목 은 etc/nginx/conf.d 에 추 가 됩 니 다.etc / nginx / conf. d 파일 에 이 프로젝트 에 대한 설정 파일 holyzheng-top-3002 을 새로 만 듭 니 다. 이 이름 은 보통 일정한 약속 이 있 습 니 다. 프로젝트 를 구분 하 는 데 편리 합 니 다. 제 습관 은 - - 입 니 다.이 파일 에 내용 추가:

upstream browseexpreact {
  server 127.0.0.1:3003; #   ，       
}

server {
  listen 80; # http     
  server_name browseexpreact.holyzheng.top; #      ip  
  error_page 405 =200 @405; #          POST  
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$host$1 permanent; #  http      https
}

이 설정 은 이 서버 의 http (기본 포트 80) 에 대한 프 록 시 를 서버 127.0.0.1:3003 에서 실행 중인 인 스 턴 스, 즉 우리 의 프로젝트 로 되 돌 리 는 것 을 의미 합 니 다.
https 로 업그레이드
https 로 업그레이드 하려 면 먼저 서버 업 체 에 인증 서 를 신청 한 다음 에 인증 서 를 로 컬 에 다운로드 한 다음 에 자신의 서버 에 업로드 해 야 합 니 다. 보통 nginx 폴 더 아래 cert 폴 더 에 놓 여 있 습 니 다. 이 항목 은 /etc/nginx/cert 입 니 다.인증서 가 서버 에 업로드 되면 설정 을 수정 합 니 다:

upstream browseexpreact {
  server 127.0.0.1:3003; #   
}

server {
  listen 80; # http     
  server_name browseexpreact.holyzheng.top; #      ip  
  error_page 405 =200 @405; #          POST  
  location @405 {
    proxy_pass http://browseexpreact;
  }
  rewrite ^(.*) https://$host$1 permanent; #  https      https
}

#        
server {
  listen 443;
  server_name browseexpreact.holyzheng.top;
  #                  ，      
  ssl on;
  ssl_certificate /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.crt;
  ssl_certificate_key /etc/nginx/cert/cert-1540814527008_browseexpreact.holyzheng.top.key;
  ssl_session_timeout 5m;
  ssl_protocols SSLv2 SSLv3 TLSv1;
  ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
  ssl_prefer_server_ciphers on;

  if ($ssl_protocol = "") { #           
    rewrite ^(.*) https://$host$1 permanent;
  }

  location / {
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;

    proxy_set_header Host $http_host;
    proxy_set_header X-Nginx-Proxy true;

    proxy_pass http://browseexpreact; #       
  }
}

인증서 설정 에 대해 서 는 인증 서 를 신청 할 때 알림 이 있 습 니 다. 해당 설정 을 자신의 프로필 로 복사 하면 됩 니 다.설정 에 https 요청 (기본 값 443 끊 기) 에 대한 설정 이 추가 되 었 습 니 다. 서버 에 대한 https 요청 (기본 값 443 끊 기) 을 서버 에 프 록 시 127.0.0.1:3003 로 되 돌 리 는 인 스 턴 스 가 우리 의 프로젝트 입 니 다.지금까지 https 요청 을 통 해 프로젝트 를 방문 할 수 있 습 니 다.
프로젝트 를 배경 으로 계속 실행 합 니 다.
현재 우 리 는 서버 의 콘 솔 을 닫 으 면 express 서비스 가 끊 어 지고 이 프로젝트 에 다시 접근 할 수 없다 는 것 을 알 게 되 었 습 니 다. 그래서 우 리 는 express 서 비 스 를 지속 적 으로 배경 으로 실행 할 수 있 는 도구 가 필요 합 니 다.이 항목 에서 선택 한 도 구 는 PM2 입 니 다.PM2 는 부하 균형 기능 을 가 진 node 응용 프로 세 스 관리자 로 프로 세 스 가 계속 실행 되 고 있 으 며 서버 에서 여러 node 프로젝트 를 동시에 관리 할 수 있 습 니 다.상용 기본 명령 어:

npm install pm2 -g ：     。
pm2 start app.js ：     ，     app.js。
pm2 restart  [name or id] ：     。
pm2 list :            
pm2 delete [name or id] ：    

PM2 를 통 해 우 리 는 우리 의 프로젝트 를 서버 에서 지속 적 으로 실행 할 수 있다.그리고 우 리 는 https 를 통 해 우리 의 프로젝트 에 접근 할 것 을 요청 할 수 있 습 니 다.