ReactJS 컨테이너 앱 실행 가이드

back4app containers는 react 애플리케이션을 호스팅하기 위한 강력한 플랫폼입니다 docker화된 react 앱을 자동으로 배포할 수 있는 기능을 통해, 확장 가능하고 유연한 환경에서 프로젝트를 쉽게 시작할 수 있습니다 이 가이드에서는 back4app containers에서 react 애플리케이션을 준비하고 배포하는 과정을 안내합니다 간단한 프로젝트부터 더 복잡한 설정까지 모든 것을 다룰 것입니다 필요한 준비 작업부터 시작하여, 애플리케이션을 docker화하고, 로컬에서 테스트하며, github에 프로젝트를 푸시하고, back4app containers에서 프로젝트를 설정하고, 배포를 모니터링하며, 일반적인 문제를 해결하는 방법을 설명합니다 질문이나 의견이 있으시면, back4app containers에서 react에 대한 논의를 위해 slack의 #containers 채널에 참여해 주시기 바랍니다 언제든지 back4app community 에 연락하실 수도 있습니다 community\@back4app com 언제든지 back4app containers에서 작동하는 react 프로젝트 샘플을 확인하고 싶다면, 다음 링크로 가세요 https //github com/templates back4app/containers react sample 1 react 애플리케이션 준비하기 a 프로젝트 구조 react 애플리케이션이 모든 필요한 파일과 폴더가 포함된 적절한 디렉토리 구조를 따르는지 확인하십시오 예를 들어, src , public , components , 및 assets ,이 적절하게 정리되어 있어야 합니다 애플리케이션의 주요 진입점은 src/index js 또는 src/index jsx 파일이어야 합니다 b 의존성 모든 필수 의존성이 package json 파일에 올바른 버전과 함께 나열되어 있는지 확인하십시오 npm install 또는 yarn install 을 사용하여 모든 의존성을 설치하여 package lock json 또는 yarn lock 파일을 생성했는지 확인하십시오 c 빌드 프로세스 빌드 프로세스가 포함된 더 복잡한 프로젝트의 경우, 빌드 스크립트와 구성(예 webpack, babel 또는 create react app)이 올바르게 설정되어 있는지 확인하십시오 문제 없이 로컬에서 빌드 프로세스를 실행할 수 있어야 합니다 d 환경 변수 애플리케이션이 환경 변수에 의존하는 경우, 필요한 변수가 정의된 env 파일이 있는지 확인하십시오 back4app containers에 배포할 때 이러한 환경 변수를 배포 설정에서 구성해야 합니다 e 서버 설정(해당되는 경우) react 애플리케이션에 사용자 정의 서버(예 express)가 포함된 경우, react 애플리케이션을 제공하도록 올바르게 설정되고 구성되어 있는지 확인하십시오 서버가 예상대로 작동하는지 로컬에서 테스트하십시오 f 애플리케이션 최적화 번들 크기를 최소화하고, 코드 분할을 사용하며, 성능 모범 사례를 구현하여 react 애플리케이션을 최적화하세요 lighthouse와 같은 도구를 사용하여 애플리케이션을 감사하고 성능 또는 접근성 문제를 해결하세요 g 크로스 브라우저 호환성 여러 브라우저와 장치에서 애플리케이션을 테스트하여 올바른 렌더링과 기능을 보장하세요 react 애플리케이션을 철저히 검토하고 준비한 후, 다음 단계로 진행할 수 있습니다 그것은 프로젝트를 위한 dockerfile 을 만드는 것입니다 2 도커화 react 애플리케이션을 도커화하는 것은 프로젝트의 루트 디렉토리에 dockerfile을 만드는 것을 포함합니다 dockerfile은 애플리케이션의 docker 이미지를 빌드하기 위한 지침을 포함하며, 이는 back4app containers에 배포될 수 있습니다 일반 react 애플리케이션을 위한 dockerfile을 만드는 방법에 대한 자세한 설명은 다음과 같습니다 1 react 애플리케이션의 루트 디렉토리에 dockerfile이라는 이름의 새 파일을 만듭니다(파일 확장자는 없습니다) 2 기본 이미지 정의 from 명령을 사용하여 기본 이미지를 지정하여 dockerfile을 시작합니다 일반적인 react 애플리케이션의 경우 기본 이미지는 node js 이미지여야 하며, 예를 들어 node 14 또는 node 16입니다 from node 14 3 작업 디렉토리 설정 workdir 명령을 사용하여 docker 컨테이너 내에서 애플리케이션의 작업 디렉토리를 설정합니다 이곳에 애플리케이션 파일이 저장되고 실행됩니다 workdir /app 3 package json 및 package lock json 복사 copy 명령을 사용하여 로컬 머신에서 docker 컨테이너로 package json 및 package lock json 파일을 복사합니다 이 파일들은 애플리케이션의 종속성을 설치하는 데 필요합니다 copy package json / 4 종속성 설치 run 명령을 사용하여 package json 파일에서 애플리케이션의 종속성을 설치합니다 이는 일반적으로 package lock json 파일에 지정된 정확한 종속성 버전을 설치하는 npm ci를 사용하여 수행됩니다 run npm ci 5 프로젝트 파일 복사 copy 명령을 다시 사용하여 로컬 머신에서 docker 컨테이너로 나머지 파일과 폴더를 복사합니다 copy 6 react 애플리케이션 빌드 run 명령을 추가하여 빌드 스크립트를 사용하여 react 애플리케이션을 빌드합니다 일반적으로 npm run build를 사용합니다 이렇게 하면 build 폴더에 프로덕션 준비가 완료된 react 애플리케이션 버전이 생성됩니다 run npm run build 7 서버 구성 빌드된 react 애플리케이션을 제공할 서버가 필요합니다 일반적인 선택은 serve입니다 먼저 run 명령을 사용하여 docker 컨테이너에 전역적으로 설치합니다 run npm install g serve 8 서버 포트 노출 expose 명령을 사용하여 docker 컨테이너 내에서 서버가 실행될 포트를 지정합니다 예를 들어, 포트 5000을 사용할 수 있습니다 expose 5000 9 서버 시작 cmd 명령을 사용하여 빌드된 react 애플리케이션을 제공하는 서버를 시작하는 명령을 지정합니다 serve를 사용하면 단일 페이지 애플리케이션을 위해 s 플래그와 빌드 폴더를 소스로 지정할 수 있습니다 cmd \["serve", " s", "build", " l", "5000"] 일반 react 애플리케이션을 위한 완전한 dockerfile은 다음과 같아야 합니다 from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g serve expose 5000 cmd \["serve", " s", "build", " l", "5000"] 참조용으로 사용할 수 있는 다른 dockerfile 예제입니다 예제 1 기본 react 애플리케이션 이 dockerfile은 간단한 react 애플리케이션을 위한 것입니다 package json 파일에서 필요한 패키지를 설치하고, 프로젝트 파일을 복사하며, nginx를 사용하여 react 애플리케이션을 제공하고 포트 80을 노출합니다 cmd는 nginx 서버를 시작하는 명령을 지정합니다 \# stage 1 build the react application from node 14 as build workdir /app copy package json / run npm install copy run npm run build \# stage 2 serve the react application using nginx from nginx\ stable alpine copy from=build /app/build /usr/share/nginx/html \# copy the default nginx conf provided by the docker image copy nginx/nginx conf /etc/nginx/conf d/default conf expose 80 cmd \["nginx", " g", "daemon off;"] 예제 2 사용자 정의 서버가 있는 react 애플리케이션 이 dockerfile은 사용자 정의 서버(예 express)를 사용하는 더 복잡한 react 애플리케이션을 위한 것입니다 package json 파일에서 필요한 패키지를 설치하고, 프로젝트 파일을 복사하며, 사용자 정의 서버를 위해 포트 8000을 노출합니다 cmd는 사용자 정의 서버를 시작하는 명령을 지정합니다 \# base image from node 14 \# working directory workdir /app \# copy package json and package lock json and install dependencies copy package json / run npm ci \# copy the rest of the project files copy \# expose the server port expose 8000 \# command to start the server cmd \["npm", "run", "server"] 4 프로젝트를 로컬에서 테스트하기 back4app containers에 react 애플리케이션을 배포하기 전에, docker를 사용하여 로컬에서 테스트하는 것이 중요합니다 이는 애플리케이션이 예상대로 실행되는지 확인하고 배포 전에 문제를 식별하고 수정하는 데 도움이 됩니다 react 애플리케이션을 위한 docker 이미지 빌드하기 터미널에서 프로젝트의 루트 디렉토리로 이동한 후, 다음 명령을 실행합니다 여기서 your app name 을(를) 애플리케이션의 이름으로 바꿉니다 docker build t your app name 로컬에서 docker 컨테이너 실행하기 다음으로, docker 컨테이너를 로컬에서 시작하기 위해 다음 명령을 실행합니다 이 명령은 컨테이너의 노출된 포트(예 3000)를 로컬 머신의 포트(예 3000)에 매핑합니다 docker run p 3000 3000 your app name 애플리케이션 테스트하기 웹 브라우저를 열고 http //localhost 3000 http //localhost 3000 로 이동하여 react 애플리케이션을 확인합니다 모든 것이 예상대로 작동하는지 확인하세요 문제가 발생하면 다음 단계로 진행하기 전에 해결하세요 5 프로젝트를 github에 푸시하기 프로젝트의 루트 디렉토리에 gitignore 파일을 생성하여 불필요하거나 민감한 파일을 리포지토리에서 제외합니다 (예 node modules , env , build , 등) git 리포지토리를 초기화하고, 프로젝트 파일을 커밋한 후, 원격 리포지토리(예 github)에 푸시합니다 git add git commit m "initial commit" git remote add origin \<your remote repo url> git push u origin master``` 6 back4app 컨테이너에 애플리케이션 배포하기 back4app 계정을 생성한 후, docs에 나열된 단계를 따를 수 있습니다 1 github 리포지토리를 back4app과 연결하기 2 배포를 위한 프로젝트 준비하기 요약하자면, 컨테이너는 dockerfile에 자세히 설명된 지침을 따르며 애플리케이션을 생성하기 시작합니다 7 배포 모니터링 및 가능한 오류 해결하기 back4app containers 대시보드에서 배포 로그와 상태를 주의 깊게 살펴보세요 배포 중 발생하는 오류나 문제를 해결하세요 더 복잡한 프로젝트의 경우, 모든 필요한 서비스(예 데이터베이스 또는 외부 api)가 올바르게 구성되고 접근 가능하도록 확인하세요 8 일반적인 문제 해결하기 back4app 컨테이너에서 react 앱을 실행할 때 발생하는 일반적인 배포 오류는 다음과 같습니다 여기 react 애플리케이션을 배포할 때 발생할 수 있는 다른 일반적인 오류는 다음과 같습니다 npm run build 대신 npm start 사용 개발 시나리오에서는 npm start를 사용하는 것이 권장되지만, 프로덕션 환경에서는 npm run build를 사용하는 것이 더 적합합니다 또한 이 빌드 명령은 메모리 소비를 줄이는 결과를 가져옵니다 nginx를 사용하여 정적 파일 제공 또 다른 좋은 방법은 nginx와 같은 애플리케이션 서버를 사용하여 정적 파일을 제공하는 것입니다 잘못된 포트 구성 react 애플리케이션은 back4app 컨테이너에 배포될 때 지정된 포트에서 실행되도록 구성되어야 합니다 애플리케이션에 여전히 접근할 수 없는 경우, dockerfile을 확인하여 올바른 포트가 노출되었는지 확인하십시오 (예 포트 5000의 경우 expose 5000) 호환되지 않거나 누락된 종속성 필요한 모든 종속성이 package json 파일에 나열되어 있고, 그 버전이 서로 및 애플리케이션 코드와 호환되는지 확인하십시오 누락되거나 호환되지 않는 종속성은 런타임 오류를 초래할 수 있습니다 유효하지 않은 환경 변수 또는 구성 애플리케이션이 특정 환경 변수나 구성 파일에 의존하는지 확인하고, back4app 컨테이너 환경에서 올바르게 설정되어 있는지 확인하십시오 dockerfile에서 env 명령을 사용하여 필요한 환경 변수를 설정하십시오 애플리케이션 충돌 또는 처리되지 않은 예외 처리되지 않은 예외 또는 react 애플리케이션 코드의 충돌은 배포 실패 또는 예기치 않은 동작을 초래할 수 있습니다 애플리케이션 로그에서 오류 메시지를 확인하고 코드의 문제를 해결하십시오 docker logs your app name 을 실행하여 오류나 예외가 발생했는지 확인하십시오 sentry와 같은 도구를 사용하여 애플리케이션의 오류를 추적하고 모니터링하십시오 서버 측 렌더링 구성 react 애플리케이션이 서버 측 렌더링(ssr)을 사용하는 경우, dockerfile에서 ssr 설정이 올바르게 구성되어 있고 올바른 진입점을 사용하여 애플리케이션이 시작되는지 확인하십시오 back4app containers에서 react 애플리케이션을 배포하는 동안 다른 문제가 발생하면, back4app 지원 팀에 연락하십시오 community\@back4app com 9 애플리케이션 확장 추가 리소스나 수평/수직 확장이 필요한 더 복잡한 프로젝트의 경우, 증가된 트래픽과 부하를 처리하기 위해 back4app containers 요금제를 업그레이드하는 것을 고려하십시오 10 샘플 애플리케이션 샘플 django 애플리케이션 프로젝트는 다음을 방문하십시오 https //github com/templates back4app/containers python flask sample