서버 측 렌더링 애플리케이션 문제 해결

터미널 창을 열고 다음 명령을 실행합니다. 앱 ID, 브랜치 이름 및 작업 ID를 자신의 정보로 변경합니다. 작업 ID에는 조사 중인 실패한 빌드의 빌드 번호를 사용합니다.

aws amplify get-job --app-id abcd1234 --branch-name main --job-id 2

터미널 출력의 , job, steps stepName: "BUILD" 섹션에서 미리 서명된 아티팩트URL를 찾습니다. 다음 예제 출력에서는 URL가 빨간색으로 강조 표시됩니다.

"job": {
    "summary": {
        "jobArn": "arn:aws:amplify:us-west-2:111122223333:apps/abcd1234/main/jobs/0000000002",
        "jobId": "2",
        "commitId": "HEAD",
        "commitTime": "2024-02-08T21:54:42.398000+00:00",
        "startTime": "2024-02-08T21:54:42.674000+00:00",
        "status": "SUCCEED",
        "endTime": "2024-02-08T22:03:58.071000+00:00"
    },
    "steps": [
        {
            "stepName": "BUILD",
            "startTime": "2024-02-08T21:54:42.693000+00:00",
            "status": "SUCCEED",
            "endTime": "2024-02-08T22:03:30.897000+00:00",
            "logUrl": "https://aws-amplify-prod-us-west-2-artifacts.s3.us-west-2.amazonaws.com/abcd1234/main/0000000002/BUILD/log.txt?X-Amz-Security-Token=IQoJb3JpZ2luX2V...Example

를 복사URL하여 브라우저 창에 붙여 넣습니다. artifacts.zip 파일이 로컬 컴퓨터에 다운로드됩니다. 이 파일이 빌드 출력입니다.

du 디스크 사용량 명령을 실행하여 디렉터리의 크기를 검사합니다. 다음 예제 명령은 compute 및 static 디렉터리의 크기를 반환합니다.

du -csh compute static

다음은 compute 및 static 디렉터리의 크기 정보가 포함된 출력의 예입니다.

 29M    compute
3.8M    static
 33M    total

compute 디렉터리를 열고 node_modules 폴더를 찾습니다. 폴더 크기를 줄이기 위해 업데이트하거나 제거할 수 있는 파일의 종속성을 검토합니다.

앱에 런타임에 필요하지 않은 바이너리가 포함된 경우 빌드 후 앱의 amplify.yml 파일에서 빌드 섹션에 다음 명령을 추가하여 해당 바이너리를 삭제합니다.

- rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
- rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

다음은 프로덕션 빌드를 실행한 후 이러한 명령이 추가된 amplify.yml 파일의 빌드 명령 섹션의 예입니다.

frontend:
  phases:
    build:
      commands:
         -npm run build
         
         // After running a production build, delete the files
         - rm -f node_modules/@swc/core-linux-x64-gnu/swc.linux-x64-gnu.node
         - rm -f node_modules/@swc/core-linux-x64-musl/swc.linux-x64-musl.node

앱의 next.config.js 파일을 열고 다음과 standalone 같이 output 옵션을 로 설정합니다.

** @type {import('next').NextConfig} */
const nextConfig = {
  // Other options
  output: "standalone",
};

module.exports = nextConfig;

터미널 창을 열고 다음 명령을 실행하여 앱을 빌드합니다.

next build

다음 명령을 실행하여 .next/static 폴더를에 복사합니다.next/standalone/.next/static.

cp -r .next/static .next/standalone/.next/static

다음 명령을 실행하여 public 폴더를에 복사합니다.next/standalone/public.

cp -r public .next/standalone/public

다음 명령을 실행하여 Next.js 서버를 시작합니다.

node .next/standalone/server.js

5단계에서 명령을 실행하고 서버를 시작하는 데 걸리는 시간을 기록해 둡니다. 서버가 포트에서 수신 대기 중인 경우 다음 메시지를 인쇄해야 합니다.

Listening on port 3000

6단계에서 서버를 시작한 후 다른 모듈을 로드하는 데 걸리는 시간을 기록해 둡니다. 예를 들어와 같은 라이브러리를 로드하는 데 10~12초bugsnag가 걸립니다. 로드되면 확인 메시지가 표시됩니다[bugsnag] loaded.

6단계와 7단계의 기간을 함께 추가합니다. 이 결과는 Compute 앱의 로컬 초기화/시작 시간입니다.