웹서버 설정에 대해서 모르겠습니다..

Question

현재까지 3일정도 삽질을 하다가 도저히 안되겠어서 글 올려봅니다.. 선배님들 도와주세요...상황: 졸업작품을 위해 연구실 서버에 올린 상황. 아파치 연결까지 했지만 https인증을 받아야 react-kakao-map을 사용할 수 있다고 해서 어차피 할거 https받아보자! 라고 호기롭게 도전했다가 아무것도 못한 상황입니다.. 잘 되던 백엔드도 동작하질 않아요..https 사용을 위해 ssl 인증까지 받아놓은 상태입니다. ServerName publicmarket.shop ServerAlias www.publicmarket.shop Redirect permanent / https://publicmarket.shop/ ServerName publicmarket.shop ServerAlias www.publicmarket.shop DocumentRoot /var/www/html/publicMarket Options Indexes FollowSymLinks AllowOverride All Require all granted SSLEngine on SSLCertificateFile /etc/letsencrypt/live/publicmarket.shop/fullchain.pem SSLCertificateKeyFile /etc/letsencrypt/live/publicmarket.shop/privkey.pem ProxyPreserveHost on ProxyPass / http://localhost:3000/ ProxyPassReverse / http://localhost:3000/ ProxyPass /api http://[ip]:4000/ ProxyPassReverse /api http://[ip]:4000/ Include /etc/letsencrypt/options-ssl-apache.conf 이게 제가 설정한 아파치 설정입니다. 계획 속으로는 http를 통해서 들어온 도메인을 https로 넘겨서 밑에 https에서 설정하는 게 목표였습니다.하면 할수록 서버가 동작하질 않고, 지금은 프론트만 보여진 상태로 백엔드가 동작하질 않습니다. Proxy error: Could not proxy request /api/v1/products?skip=0&searchTerm= from publicmarket.shop to https://[ip]:4000. 프론트의 콘솔에 보면 이 에러가 항상 있고, 웹 페이지에서보면 WebSocketClient.js:13 WebSocket connection to wss://publicmarket.shop/ws' failed: 도 항상 있습니다.그렇지만 저는 webSocket을 사용하질 않습니다. 찾아보니까 리액트에서는 자체적으로 websocket을 사용하지 않는다고 해서 저걸 지워보려고도 해보고, webpack.config.js 를 만들어서 socketURL = ""도 해봤는데 동작하질 않습니다.src/index.js에서도app.listen(`${process.env.PORT}`, '0.0.0.0', (req, res) => {console.log(`${process.env.PORT}`, "에서 서버 실행중");}); 를 해보고,proxy.js라는 파일을 만들어서 적용도 해봤습니다.const {createProxyMiddleware} = require('http-proxy-middleware') const dotenv = require("dotenv"); dotenv.config(); module.exports = function(app) { app.use( "/api", createProxyMiddleware({ target: process.env.SERVER_URL, changeOrigin: true, }) ) }프론트에서도 문제가 있는건가 싶어서const axiosInstance = axios.create({ baseURL: process.env.REACT_APP_BASE_URL });부분도 제 백엔드 넣었습니다만 여전히 에러가 나옵니다..여기에 잇는 a링크도 전부 다 들어갔는데 해결이 안됩니다..아직 개발 1년차라 모자란 중생이기에 조그만한 힌트라도 주시면 감사하겠습니다.ㅜ

저지능자 · Answer

ProxyPreserveHost on ProxyPass / http://localhost:3000/ ProxyPassReverse / http://localhost:3000/이걸 보아하니, npm run dev로 리액트 개발 서버를 실행 하신 것 같군요그렇게 리액트 개발 서버를 실행하면 변경 된 사항이 실시간으로 보여지지요.개발 서버 실행을 하면 웹소켓을 통해 실시간으로 변경 될 때 마다 반영 시켜주기 때문입니다.서버에 배포 할 때는 그렇게 하는 게 아니라 빌드를 해서 정적 리소스만을 배포 하는 것입니다.npm run build 명령을 통해 생겨난 폴더 (아마도 build 폴더 일 것입니다)의 내용을 배포 해야 합니다.그런데 여기서 또 문제가 생길 것입니다.가령 /hello 라는 페이지를 만들었다고 가정 해보면, 웹서버에서는 <루트폴더>/hello 혹은 <루트폴더>/hello/index.html 같은 파일을 찾게 될 것입니다.하지만 그런 파일은 아마 없을겁니다.파일을 못 찾을 때에는 index.html 파일을 응답하도록 해주면 해결 될 것입니다.P.S. Apache Http에서 웹소켓을 사용하기 위해선 관련 설정이 필요한 줄로 압니다.https://xestinf.tistory.com/75이런 식으로 해야 합니다.물론 제가 말씀 드린 대로 빌드 해서 배포 하면 굳이 알 필요 없는 정보이지만, 나중에 필요 할 수 도 있으니 그냥 이런 게 있다고 알려드리고 싶었습니다.앞서 언급한 [리액트 개발 서버]라 함은, 정확히는 Webpack dev server 혹은 vite dev server를 지칭하고자 한 것입니다. 그냥 이해하기 쉽게 리액트 개발 서버라고 말씀 드린 것 뿐입니다.리액트는 개발자가 여러 모듈을 작성하고, 도구를 통해 그 모듈을 js로 변환하면서, 하나로 합치는 등의 과정을 거쳐서 실제 웹 브라우저에서 동작할 수 있도록 만들어집니다.예전 기준으로 말씀드리자면 babel과 webpack을 사용해서 그러한 환경을 제공했습니다. 변환하는 것은 babel, 변환 된 모듈들을 합치는 것은 webpack이 합니다.webpack과 비슷한 기능을 하는 도구로 vite도 있는데, 더 빠르고 간단해서 요즘 인기 있는 도구입니다.webpack과 vite에서는 변환 및 병합을 실시간으로 진행해주는 개발 서버를 제공해주고 있습니다.

으아악밥먹자 · Answer

웹서버가 떠있고 응답도 잘 하고 있습니다.웹서버 <-> WAS(Node 앱)간 통신이 의심됩니다.웹서버 로그를 확인하여 웹서버가 왜 500 리스폰스를 클라이언트에 내려줬는지 확인합니다.(당연히 질문에 포함되어있어야 했어요. 실무에서도 문제 발생시 가장 먼저 찾는 건 로그입니다.)간단한 구성이므로 사실 문제가 생길 여지 자체가 적어 원인을 파악하는 게 오히려 어렵습니다. 그냥 무난하게 의심해보자면... WAS가 정확히 어떤 IP, Port를 물고있는지 확인해보세요. 웹서버 설정과 맞지 않게 설정되어있을 수 있습니다.wss는 당장은 무시하세요.

웹서버 설정에 대해서 모르겠습니다..

2개의 답변

Q&A 목록