동일한 익스프레스 서버에서 클라이언트와 API를 모두 실행하는 방법은 무엇입니까?

Question

API 끝점을 사용하는 React/Redux 앱이 있습니다. 나는 현재 한 서버에서 React/Redux 클라이언트를 렌더링하고 다른 서버에서는 내 API를 렌더링하고있다. 둘 다 express를 사용한다. 같은 서버에서 어떻게 둘 다 실행할 수 있습니까? 난 그냥 내 클라이언트에 대한 정적 인 역할을하고 GET/POST/등 추가 할 것이라고. 이렇게 서버 :

//... 

app.use(express.static('dist')); 

app.get('/api/users', function(req, res) { 
    //... 
    }) 

app.post('/api/users', function(req, res) { 
    //... 
    }) 

const PORT = process.env.PORT || 3000; 

app.listen(PORT, function() { 
    console.log(`Listening on port ${PORT}...`); 
}); 

모든 도움을 주시면 감사하겠습니다. 감사!!

Answer 1

Express documentation에 설명 된대로 잘 작동한다고 제안했지만 정적 파일을 제공하려는 경우 Nginx 역방향 프록시를 사용하는 것이 좋습니다. Nginx는 정적 파일을 제공하는 데 아주 좋습니다. HTTPS를 나중에 사용하기로 결정하면 Nginx를 실행하는 시스템에 대한 인증서 만 있으면되고 나머지는 HTTP를 통해 수행 할 수 있습니다.

기본적으로이 같은보고의 Nginx 및 설정 귀하의 설정을 설치하는 것 :

이

upstream api_pool { 
    server localhost:3000; 
    # feel free to add as many other servers to this pool as you'd like 
} 

server { 
    listen  80; 
    server_name localhost; 

    root /www/static_stuff; 

    location/{ 
    } 

    location /api { 
     proxy_pass http://api_pool; 
     proxy_http_version 1.1; 
     proxy_set_header Upgrade $http_upgrade; 
     proxy_set_header Connection 'upgrade'; 
     proxy_set_header Host $host; 
     proxy_set_header X-Real-IP $remote_addr; 
     proxy_cache_bypass $http_upgrade; 
    } 
} 

다시 시작 Nginx에는 config 변경 사항을 적용, 그래서/www /에서 static_stuff의 모든 정적 물건을 배치 (또는 무엇이든 당신 루트 디렉토리를 만들기로 결정한 후 포트 3000에서 익스프레스 서버를 시작하십시오.

이제 style.css 파일을/www/static_stuff에 놓습니다. 웹 브라우저에서 localhost/style.css를 가리키면 /www/static_stuff/style.css 파일이 제공됩니다. 웹 브라우저에서 localhost/api/some_express_route를 가리키는 것은 웹 브라우저에서 localhost : 3000/some_express_route를 가리키는 것과 같습니다.

경고! 이 설정 파일을 시도하지는 않았지만 Nginx 경로를 사용하기로 결정했다면 작동하지 않습니다. 알려 주시면 테스트 환경을 만들어 드리겠습니다.