평생 공부만 해야할듯

React + Electron 환경으로 프로그램을 만들어야 하는 일이 생겼습니다.

개발에서는 React 서버가 구동되고나서 Electron을 실행해야 정상적으로 프로그램에서 작동하는데요. 

이 부분을 한방에 처리하고자 했는데 wait-on 이후 실행이 되지 않는 문제가 있었습니다.

"scripts": {
    "start": "concurrently \"npm run react:start\" \"npm run electron:start\"",
    "electron:start": "wait-on tcp:localhost:3000 && mode=dev electron .",
    "react:start": "react-scripts start",
    "react:build": "react-scripts build",
    "build": "npm run react:build && electron-builder --publish=always"
  },

electron . 을 실행하면 정상적으로 프로그램이 실행되는데 wait-on으로 3000포트가 뜨는걸 기다렸다가 실행하는 부분은 계속 대기만 하고 있는 상태였습니다.

wait-on tcp:localhost:3000 && mode=dev electron .

검색 결과 Node 17에서는 아래와 같은 오류를 유발할 수 있는 주요 변경사항을 도입했다고 하는데요.

Error connecting to TCP host:localhost port:3000 Error: connect ECONNREFUSED ::1:3000

즉 localhost가 아닌 127.0.0.1 이라는 포트로 접근을 해야 됩니다.

"electron:start": "wait-on tcp:127.0.0.1:3000 && electron ."

이렇게 변경 후 다시 yarn start나 npm run start 명령어를 입력하시면 프로그램이 정상적으로 실행되는것을 확인할 수 있습니다.

Oracle Cloud 에 인스턴스를 만들고 서버 설정을 하고 있었습니다.

/etc/nginx/nginx.conf 파일을 아래와 같이 수정하고 GET, POST를 열어두고 nginx 를 다시 실행했습니다.

sudo systemctl restart nginx

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  _;
        # root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        # location / {
        # }

        location / {
            limit_except GET POST {
                deny all;
            }
            proxy_http_version 1.1;
            proxy_set_header    Host            $host;
            proxy_set_header    X-Real-IP       $remote_addr;
            proxy_pass http://localhost:8080;
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }

원하는 대로면 도메인이나 서버 IP로 접속을 하면 띄워놓은 8080 서버로 전달을 해주는건데.. 아래 같이 error 화면만 주구장창 나오고 502 Bad Gateway 오류가 발생했습니다.

nginx error 로그를 확인해보니 권한이 없다고 보이네요.

cat /var/log/nginx/error.log

to 127.0.0.1:8080 failed (13: Permission denied) while connecting to upstream, client:

구글 검색 결과 SELinux 때문이라고 해서 아래 명령어를 입력하면 문제 없이 해결된다고 하여 설정하니 문제가 없네요.

setsebool -P httpd_can_network_connect 1

https://stackoverflow.com/questions/23948527/13-permission-denied-while-connecting-to-upstreamnginx

근본적으로 정책을 변경하는 것 이기에 문제가 발생하지만 당장은 해결되었네요.. 

정상적인 방식으로 해결하는 방법을 확인하여 다시 작성해보도록 하겠습니다.

React 로 웹 페이지를 작업하고 있고, 간단하게 테스트 프로젝트를 배포하기 위해 Firebase Hosting 서비스를 자주 사용하고 있습니다.

# 문제

React환경에서 React Router를 사용하여 페이지를 보여주고 있는데요, 로컬 환경에서 잘 되던 페이지 이동이 Firebase Hosting에 올라가면 404 Page Not Found가 발생합니다.

무조건 발생한건 아니고 특정 /example/1 이런식의 / 루트가 아닌 경로로 접근해서 브라우저를 새로고침 하면 /example/1이라는 경로에 해당하는 파일이 없기 때문에 오류를 발생하는거죠.

# 문제해결

이런 오류를 해결하기 위해서는 React Router 환경에 맞게 firebase.json을 수정해줄 수 있습니다.

아래와 같이 rewrites 부분을 추가 하여 모든 요청에 대해서 /index.html 을 바라보도록 수정하면 해당 오류는 발생하지 않습니다.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

이런 오류를 그냥 넘기지 말고 해결해두면 개발자의 입장에서 신뢰도가 올라갈 것이라고 생각합니다 :)