NextJS 컨테이너 앱 배포 가이드

back4app containers는 next js 애플리케이션을 호스팅하기 위한 강력한 플랫폼입니다 docker화된 next js 앱을 자동으로 배포할 수 있는 기능을 통해, 확장 가능하고 유연한 환경에서 프로젝트를 쉽게 시작할 수 있습니다 이 가이드에서는 back4app containers에서 next js 애플리케이션을 준비하고 배포하는 과정을 안내합니다 간단한 프로젝트부터 더 복잡한 설정까지 모든 것을 다룰 것입니다 필요한 준비 작업부터 시작하여, 애플리케이션을 docker화하고, 로컬에서 테스트하고, github에 프로젝트를 푸시하고, back4app containers에서 프로젝트를 설정하고, 배포를 모니터링하며, 일반적인 문제를 해결하는 방법을 설명합니다 질문이나 의견이 있으시면, slack의 back4app 커뮤니티의 #containers 채널에서 대화에 참여해 주세요 언제든지 community\@back4app com으로 연락하실 수 있습니다 언제든지 back4app 컨테이너에서 샘플로 작동하는 next js 프로젝트를 확인하고 싶다면, 다음 링크로 가세요 https //github com/templates back4app/containers nextjs sample https //github com/templates back4app/containers nextjs sample 1 next js 애플리케이션 준비하기 a 프로젝트 구조 next js 애플리케이션이 모든 필요한 파일과 폴더가 적절하게 구성된 올바른 디렉토리 구조를 따르는지 확인하세요 예를 들어 pages , public , components , 및 styles , 등이 적절히 정리되어 있어야 합니다 애플리케이션의 주요 진입점은 pages/index js 또는 pages/index jsx 파일이어야 합니다 b 의존성 모든 필수 의존성이 package json 파일에 올바른 버전과 함께 나열되어 있는지 확인하십시오 npm install 또는 yarn install 을 사용하여 모든 의존성을 설치했는지 확인하고 package lock json 또는 yarn lock 파일을 생성하십시오 c 빌드 프로세스 빌드 프로세스가 포함된 더 복잡한 프로젝트의 경우, 빌드 스크립트와 구성(예 webpack, babel 또는 next js)이 올바르게 설정되어 있는지 확인하십시오 문제 없이 로컬에서 빌드 프로세스를 실행할 수 있어야 합니다 d 환경 변수 애플리케이션이 환경 변수에 의존하는 경우, 필요한 변수가 정의된 env 파일이 있는지 확인하십시오 back4app containers에 배포할 때 이러한 환경 변수를 배포 설정에서 구성해야 합니다 e 서버 설정(해당되는 경우) next js 애플리케이션에 사용자 정의 서버(예 express)가 포함된 경우, 올바르게 설정되고 next js 애플리케이션을 제공하도록 구성되어 있는지 확인하십시오 서버가 예상대로 작동하는지 로컬에서 테스트하십시오 f 애플리케이션 최적화 번들 크기를 최소화하고 코드 분할을 사용하며 성능 모범 사례를 구현하여 next js 애플리케이션을 최적화하십시오 lighthouse와 같은 도구를 사용하여 애플리케이션을 감사하고 성능 또는 접근성 문제를 해결하십시오 g 크로스 브라우저 호환성 여러 브라우저와 장치에서 애플리케이션을 테스트하여 올바른 렌더링과 기능을 보장합니다 next js 애플리케이션을 철저히 검토하고 준비한 후, 다음 단계로 진행할 수 있습니다 그것은 프로젝트를 위한 dockerfile 을 만드는 것입니다 2 도커화 next js 애플리케이션을 도커화하는 것은 프로젝트의 루트 디렉토리에 dockerfile을 만드는 것을 포함합니다 dockerfile은 애플리케이션의 docker 이미지를 빌드하기 위한 지침을 포함하며, 이는 back4app containers에 배포될 수 있습니다 일반적인 next js 애플리케이션을 위한 dockerfile을 만드는 방법에 대한 자세한 설명은 다음과 같습니다 1 next js 애플리케이션의 루트 디렉토리에 dockerfile(파일 확장자 없이)이라는 새 파일을 만듭니다 2 기본 이미지 정의 from 명령을 사용하여 기본 이미지를 지정하여 dockerfile을 시작합니다 일반적인 next js 애플리케이션의 경우 기본 이미지는 node js 이미지여야 하며, 예를 들어 node 14 또는 node 16입니다 from node 14 3 작업 디렉토리 설정 workdir 명령을 사용하여 docker 컨테이너 내에서 애플리케이션의 작업 디렉토리를 설정합니다 이곳에 애플리케이션 파일이 저장되고 실행됩니다 workdir /app 4 package json 및 package lock json 복사 copy 명령을 사용하여 로컬 머신에서 docker 컨테이너로 package json 및 package lock json 파일을 복사합니다 이 파일들은 애플리케이션의 종속성을 설치하는 데 필요합니다 copy package json / 5 종속성 설치 run 명령을 사용하여 package json 파일에서 애플리케이션의 종속성을 설치합니다 이는 일반적으로 npm ci를 사용하여 수행되며, 이는 package lock json 파일에 지정된 정확한 종속성 버전을 설치합니다 run npm ci 6 프로젝트 파일 복사 copy 명령을 다시 사용하여 로컬 머신에서 docker 컨테이너로 나머지 파일과 폴더를 복사합니다 copy 7 next js 애플리케이션 빌드 run 명령을 추가하여 빌드 스크립트를 사용하여 next js 애플리케이션을 빌드합니다 일반적으로 npm run build를 사용합니다 이는 next 폴더에 next js 애플리케이션의 프로덕션 준비 버전을 생성합니다 run npm run build 8 서버 구성 빌드된 next js 애플리케이션을 제공할 서버가 필요합니다 일반적인 선택은 내장된 next js 서버입니다 먼저, run 명령을 사용하여 docker 컨테이너에 전역적으로 설치합니다 run npm install g next 9 서버 포트 노출 expose 명령을 사용하여 docker 컨테이너 내에서 서버가 실행될 포트를 지정합니다 예를 들어, 포트 3000을 사용할 수 있습니다 expose 3000 10 서버 시작 cmd 명령을 사용하여 빌드된 next js 애플리케이션을 제공하는 서버를 시작하는 명령을 지정합니다 내장된 next js 서버를 사용하면 시작 스크립트와 포트 번호를 지정할 수 있습니다 cmd \["next", "start", " p", "3000"] 전형적인 next js 애플리케이션을 위한 완전한 dockerfile은 다음과 같아야 합니다 from node 14 workdir /app copy package json / run npm ci copy run npm run build run npm install g next expose 3000 cmd \["next", "start", " p", "3000"] 참조용으로 사용할 수 있는 다른 dockerfile 예시 예시 1 nginx 서버 사용 next js 애플리케이션을 제공하기 위해 nginx 서버를 사용하려면 다단계 dockerfile을 생성할 수 있습니다 이 경우 먼저 next js 애플리케이션을 빌드한 다음 생성된 파일을 nginx 서버로 복사합니다 \# stage 1 build the next js application from node 14 as builder workdir /app copy package json / run npm ci copy run npm run build \# stage 2 set up the nginx server from nginx\ stable alpine copy from=builder /app/ next /usr/share/nginx/html copy from=builder /app/public /usr/share/nginx/html/ next/static copy nginx conf /etc/nginx/conf d/default conf nginx 서버를 적절하게 구성하기 위해 적절한 nginx conf 파일을 생성해야 합니다 예시 2 사용자 정의 서버 사용 next js 애플리케이션을 위해 사용자 정의 서버가 설정되어 있다면 dockerfile을 그에 맞게 수정할 수 있습니다 다음은 custom server js 파일을 사용하는 예시입니다 from node 14 workdir /app copy package json / run npm ci copy run npm run build expose 3000 cmd \["node", "server js"] 이 예제에서는 커스텀 서버가 node server js 명령어로 시작됩니다 next js 서버를 사용하지 않고 3 도커 컨테이너 빌드 및 실행 dockerfile을 생성한 후, docker 이미지를 빌드하고 그로부터 컨테이너를 실행할 수 있습니다 다음 명령어를 사용하여 컨테이너를 빌드하고 실행하세요 docker build t your image name docker run p 3000 3000 your image name "your image name"을 docker 이미지의 이름으로 바꾸세요 컨테이너가 실행 중이면, 웹 브라우저에서 http //localhost 3000 http //localhost 3000 에 접속하여 next js 애플리케이션에 접근할 수 있습니다 4 프로젝트를 로컬에서 테스트하기 back4app containers에 next js 애플리케이션을 배포하기 전에, docker를 사용하여 로컬에서 테스트하는 것이 중요합니다 이는 애플리케이션이 예상대로 실행되는지 확인하고 배포 전에 문제를 식별하고 수정하는 데 도움이 됩니다 next js 애플리케이션을 위한 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 로 이동하여 next js 애플리케이션을 확인하세요 모든 것이 예상대로 작동하는지 확인하세요 문제가 발생하면 다음 단계로 진행하기 전에 해결하세요 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 containers에 애플리케이션 배포하기 back4app 계정을 만든 후, 문서에 나열된 단계를 따르세요 1 github 리포지토리를 back4app과 연결하기 https //www back4app com/docs containers/integrate with github 2 배포를 위한 프로젝트 준비하기 https //www back4app com/docs containers/prepare your deployment 요약하자면, 컨테이너는 dockerfile에 자세히 설명된 지침을 따르고 앱을 생성하기 시작합니다 7 배포 모니터링 및 가능한 오류 해결 back4app containers 대시보드에서 배포 로그와 상태를 주의 깊게 살펴보세요 배포 중 발생하는 오류나 문제를 해결하세요 더 복잡한 프로젝트의 경우, 모든 필요한 서비스(예 데이터베이스 또는 외부 api)가 올바르게 구성되고 접근 가능하도록 확인하세요 8 일반적인 문제 해결 back4app containers에서 next js 앱을 실행할 때 발생하는 일반적인 배포 오류는 여기 https //www back4app com/docs containers/troubleshooting next js 애플리케이션을 배포할 때 발생할 수 있는 다른 일반적인 오류는 다음과 같습니다 잘못된 포트 구성 next js 애플리케이션은 back4app containers에 배포될 때 지정된 포트에서 실행되도록 구성되어야 합니다 애플리케이션에 여전히 접근할 수 없는 경우, dockerfile을 확인하여 올바른 포트가 노출되었는지 확인하세요(예 포트 3000의 경우 expose 3000) 호환되지 않거나 누락된 종속성 필요한 모든 종속성이 package json 파일에 나열되어 있고, 그 버전이 서로 및 애플리케이션 코드와 호환되는지 확인하세요 누락되거나 호환되지 않는 종속성은 런타임 오류를 초래할 수 있습니다 잘못된 환경 변수 또는 구성 애플리케이션이 특정 환경 변수 또는 구성 파일에 의존하는지 확인하고, back4app containers 환경에서 올바르게 설정되어 있는지 확인하십시오 dockerfile에서 env 명령을 사용하여 필요한 환경 변수를 설정하십시오 애플리케이션 충돌 또는 처리되지 않은 예외 next js 애플리케이션 코드에서 처리되지 않은 예외나 충돌은 배포 실패 또는 예기치 않은 동작을 초래할 수 있습니다 애플리케이션 로그에서 오류 메시지를 확인하고 코드의 문제를 해결하십시오 docker logs your app name 을 실행하여 오류나 예외가 발생하는지 확인하십시오 sentry와 같은 도구를 사용하여 애플리케이션의 오류를 추적하고 모니터링하십시오 서버 측 렌더링 구성 next js 애플리케이션이 서버 측 렌더링(ssr)을 사용하는 경우, dockerfile에서 ssr 설정이 올바르게 구성되어 있고 애플리케이션이 올바른 진입점을 사용하여 시작되는지 확인하십시오 9 애플리케이션 확장 추가 리소스나 수평/수직 확장이 필요한 더 복잡한 프로젝트의 경우, 증가된 트래픽과 부하를 처리하기 위해 back4app containers 요금제를 업그레이드하는 것을 고려하십시오 10 샘플 애플리케이션 샘플 next js 애플리케이션 프로젝트는 다음 링크를 방문하십시오 https //github com/templates back4app/containers nextjs sample