Replit에서 전체 스택 애플리케이션 설정

제가 얼마 전에 배운 프로그래밍 강좌 덕분에 Replit 온라인 개발 플랫폼에 소개를 받았습니다.최근에 나는 이것이 흥미로운 연습이 될 것이라고 생각한다. 내가 Replit 플랫폼을 이용하여 개발 환경을 위탁할 수 있는지 살펴보자. 나는 이 개발 환경을 사용해서 파이톤을 바탕으로 내가 사용한 개발에 호응하고 있다.나는 React to Python책에서 이런 방법을 개술하였으며, 책에서 몇 가지 예를 골라 시험용례로 삼았다.
Replit 플랫폼이 인상적이었지만, 설치, 구성, 실행에 필요한 모든 부품을 어떻게 장착하고 배치하고 실행하는지 찾아내는 데 상당한 학습 과정을 거쳤다.마지막으로, 나는 책의 예로 두 개의 독립된 리플을 세웠다.
첫 번째 모델은 front-end-only application으로 설치가 간단합니다.그러나 두 번째 응용 프로그램은 full-stack example으로 설정이 더욱 도전적이라는 사실이 증명되었다.아직 리플릿 리플에서 여러 서버를 실행하는 방법이 명확하지 않기 때문에, 나는 여기에 나의 해결 방안을 기록하고 싶다.비록 나의 개발 창고는 대다수와 다를 수 있지만, 이곳의 방법은 여전히 많은 상황에 적용된다.

Replit 기초 사항
Replit은 온라인 개발 도구 분야에서 독특합니다. 제가 본 대부분의 다른 도구에 비해 더 많은 옵션과 사용 방법에 대한 제어를 제공하기 때문입니다.너는 거의 모든 프로그래밍 언어를 사용할 수 있다. 더 흔히 볼 수 있는 프로그래밍 언어는 템플릿이 있어 너를 빠르게 입문시킬 수 있다.
새 Replit 프로젝트 (또는 repl) 를 만들려면 Python, TypeScript, Rust 등 적합한 템플릿을 선택한 다음 원본 파일을 추가할 수 있습니다.만약 사용 가능한 Replit 템플릿이 당신의 취향에 맞지 않는다면, Nix 템플릿에서 시작할 수도 있습니다. 이 템플릿은 기본적으로 화이트보드이고, 그 중에서 구축할 수 있습니다.
리플릿의 주요 특징 중 하나는 이 플랫폼에서 만들어진 리플이 쉽게 갈라진다는 것이다.이 기능은 GitHub의 공용 저장소와 거의 동일한 방식으로 작동합니다.원본 코드의 복사본을 얻는 것 외에, 개발 환경 전체를 위한 복사본도 얻을 수 있습니다.만약 리플이 공공이라면, 코드가 다른 사람에게만 읽혀도, 누구나 그것을 보고, 갈라지고, 실행할 수 있습니다.
Replit에서 제공하는 Repl을 만드는 마지막 방법은 GitHub 저장소에서 프로젝트 소스 코드와 Replit 설정을 직접 가져오는 것입니다.
Replit 작업공간에서는 파일 관리자, 코드 편집기, Linux 셸, Markdown viewer 및 웹 브라우저 창에 액세스할 수 있습니다.


기본 설정
전형적인 전체 창고 웹 응용 프로그램은 대중을 대상으로 하는 전방 웹 서버와 전방 응용 서버를 가지고 전방 서버는 이 서버와/또는 프록시를 사용한다.제 예에서 저는 Flask를 백엔드 서버로 사용했습니다. 이것은 매우 간단한 REST API를 가지고 Parcel bundler 개발 프록시 서버를 백엔드로 사용했습니다.
서버를 제외하고 구축 과정에서 사용하는 Python-to-JavaScript transpiler를 설치하고 실행해야 합니다.이 수송기는 내가 사용하는 소포 묶음기와 협조하여 사용한다.
개발 환경을 자동으로 설정하기 위해 다음과 같은 작업을 수행하는 shell script을 만들었습니다.

은

의 특정 버전을 사용해야 하는 파이톤을 설치했습니다.

에는 Transcrypt(Python-JavaScript 전송 프로그램)이 설치되어 있음

은

프로젝트의 JavaScript 개발 및 어플리케이션 종속성 설치
나는 또한 구축 과정을 시작하는 데 사용할 shell script을 만들었는데, 이 과정은 설치에 필요한 의존항을 확보하기 위해 먼저 검사할 것이다.의존항이 설치되지 않으면 구축 스크립트는 개발 서버를 시작하는 npm start 스크립트를 실행하기 전에 설치 스크립트를 자동으로 실행합니다.

서버 2대 실행
만약 당신이 무엇을 찾고 있는지, 어디서 찾고 있는지 알고 있다면, 여러 서버를 동시에 일하게 하는 관건은 Replit documentation에 있다.그럼에도 불구하고 그것이 제공한 것은 완전히 명확하지 않고 특정한 문제를 약간 회피했다.
다중 서버 리플이 정상적으로 작동하도록 하는 중요한 관건은 탐지 주소 0.0.0.0을 사용하는 서버가 공공 웹 서버가 될 수 있음을 파악하고 다른 탐지 127.0.0.1을 시작하는 서버가 이 서버의 사유성을 유지할 수 있다는 것이다.
Replit 는 0.0.0.0 을 사용할 때 서버에 대한 공용 요청을 공식 액세스 가능한 IP 주소를 통해 수신합니다.또한 SSL이 자동으로 활성화됩니다.서버가 수신하는 포트에 관계없이 일반 서버는 표준 SSL 포트(443)를 통해 액세스합니다.즉, 내부 서버에 여러 포트를 사용할 수 있지만 일반 서버는 표준 HTTPS 포트를 통해서만 요청을 수락합니다.
이제 백엔드/프런트엔드 포트를 확인했습니다. 이 두 서버를 어떻게 동시에 실행합니까?두 서버 모두 차단 상태이기 때문에 시작 명령만 연결할 수 없습니다. 두 번째 서버 시작 명령은 첫 번째 서버 시작 명령이 끝날 때까지 실행되지 않기 때문입니다.
첫 번째 명령을 갈라서 백엔드에서 실행하는 옵션입니다. 두 번째 명령을 실행할 수 있습니다.비록 이것은 가능하지만, 첫 번째 명령이 더 이상 필요하지 않으면, 그것을 멈추는 편리한 방법이 없다.
이 문제를 해결하기 위해 npm-run-all 팩을 사용했습니다.이 패키지는 여러 개의 npm 스크립트를 병행하여 실행할 수 있으며, 모든 npm 스크립트를 동시에 종료합니다.
나의 package.json 파일의 npm 스크립트는 최종적으로 다음과 같다.

"scripts": {
  "start": "npm-run-all -p -r flask-dev parcel-dev",
  "flask-dev": "python main.py dev",
  "parcel-dev": "NODE_ENV=development parcel --log-level info src/index.html --dist-dir dist/dev --port 8080",
  "build": "NODE_ENV=production parcel build --log-level info src/index.html --no-source-maps --dist-dir dist/prod --no-cache"
},

npm-run-allnpm start 스크립트를 사용하면 다른 두 개의 스크립트를 병렬로 호출할 수 있습니다.-r 또는 --race 옵션을 사용하면 한 프로세스가 종료될 때 이 스크립트가 시작하는 프로세스가 닫힙니다.

지을지 안 지을지.
Replit에서 응용 프로그램을 실행하려면 Replit 작업공간 상단에 밝은 녹색 실행 버튼이 있습니다.이 단추의 실제 기능은 리플을 만드는 데 사용되는 리플릿 템플릿에 의해 정의되지만, .replit 파일에서도 사용자 정의할 수 있습니다.
이 단추를 개발 서버에 시작하는 것은 의미가 있지만, 가장 좋은 것은 아닐 수도 있습니다.Replit은 다른 사용자가 응용 프로그램을 보려고 할 때 기본적으로 같은 단추를 누르기 때문입니다.만약 구축 과정이 시간이 필요하다면, 그들은 구축 과정이 끝나기 전에 응용 프로그램을 시작하는 것을 포기할 수도 있다.
따라서 이러한 상황에서 더욱 빠른 시작을 촉진하기 위해 저는 런 단추를 눌렀을 때 Flask로 미리 구축된 응용 프로그램 파일을 직접 제공하고 명령줄에서 구축 과정을 실행하고 dev 서버를 실행하는 것을 좋아합니다.
그러나 이것은 Flask 서버가 다른 포트에서 시작해야 한다는 것을 의미한다. 이것은 전체 창고 서버로 시작하느냐, 아니면 백엔드 서버로 시작하느냐에 달려 있다.이 점을 실현하기 위해서, 나는 Flask에 조건 시작을 추가했다. 이것은 시작할 때 명령줄 파라미터 dev의 존재에 의존한다.
main.py

...

if __name__ == "__main__":
    # Start up flask in proxied mode if using parcel dev server
    if len(sys.argv) > 1 and sys.argv[1] == 'dev':
        app.run(debug=True, host="127.0.0.1", port=8000)
    else: # Run public server
        app.run(debug=True, host="0.0.0.0", port=8000)

npm 스크립트에서 플라스크를 시작할 때 위에서 설명한 바와 같이

"flask-dev": "python main.py dev"

127.0.0.1 주소를 사용합니다.Replit Run 버튼을 사용하기 시작하면 에서 구성됩니다.replit file은 추가 매개 변수를 사용하지 않고 호출합니다.

run = "python main.py"

이 경우 0.0.0.0 주소에서 시작합니다.

결론
리플릿 사용에 대해 나는 일반적인 조언을 할 수 있다. 그것은 그들의 틀과 싸우지 말라는 것이다.리플릿은 그들이 미리 설치한 일부 공구에 대해 고집을 부리며, 기존의 공구를 무시하지 말고, 이미 익숙해진 공구만 사용하는 것이 좋다.
예를 들어, 내 예에서, 나는 보통 venv을 사용하여 Python 가상 환경을 설정한 다음에 pip을 사용하여 내가 필요로 하는 모든 Python 의존 항목을 설치한다.내가 처음으로 Replit에서 시도했을 때, 결과는 고작 일치하지 않았다.미리 설치된 Poetry package 관리자를 계속 사용할 때 모든 것이 더욱 순조롭게 됩니다.
Replit에 완전한 창고 프로그램을 설치하는 것은 그리 어렵지 않지만, 무엇을 해야 하는지 알아내는 것은 쉽지 않을 것이다.내가 여기에 있는 예가 너에게 이 문제를 어떻게 처리하는지 힌트를 줄 수 있기를 바란다.

리소스

응답 사이트:
https://replit.com

응답 파이썬 전체 스택 프로젝트 소스 코드:
https://github.com/JennaSys/replit_rtp_fullstack

은 Replit의 Python 전체 스택 예제에 반응합니다.
https://replit.com/@JennaSys/replitrtpfullstack

패키지 묶음기:
https://parceljs.org

파이톤을 사용하여 React 응용 프로그램 자습서 만들기
https://leanpub.com/rtptutorial

응답 파이썬 서적:
https://pyreact.com