Amplify로 Vite.js 프로젝트 빌드 및 배포

마지막 프로젝트에서 vite.js을 사용하기로 결정했습니다. 우리는 이제 우리가 IT를 사랑했다고 주장할 수 있습니다! 우리는 파일을 제공하는 것과 관련하여 vite의 속도를 좋아했으며 매우 직관적이고 프로젝트에 적합하다는 것을 알았습니다.

그러나 vite를 사용한 개발은 웹 앱에서의 호스팅과 관련하여 상당한 문제를 암시했습니다. 사실 vite는 모듈 기반이고 css 코드 분할이 있어 프로젝트 호스팅을 어렵게 만들었습니다.

Amplify에서 처음 호스팅을 시작했을 때 환경이 완전히 비어 있고 서비스에서 페이지 콘텐츠를 가져오지 않는 문제가 있었습니다.

SPA에 대해 AWS가 제안하는 리디렉션을 사용하여 초기 문제를 수정했습니다.</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>

Beware with this redirect link as it's position on teh rewrites and redirects can affect the performance of the page.

따라서 재작성 및 리디렉션 페이지는 다음과 같이 표시됩니다.



그런 다음 amplify에서 vite 생성 폴더dist를 찾을 수 있도록 빌드 설정을 조정해야 했습니다.

빌드 파일은 다음과 같이 생겼습니다.

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build --prod
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

이 단계를 따른 후 웹 페이지를 올바르게 호스팅할 수 있었지만 amplify는 일부 웹 페이지를 가져오는 데 여전히 임의의 문제가 있었습니다. 예를 들어 리디렉션이 작동하지 않아 Amplify CloudFrontURL이 페이지를 찾을 수 없다고 주장하는 빈 페이지로 이동했습니다.

분명히 코드의 일부가 발견되지 않았습니다. 이것은 며칠 동안 우리를 붙잡고 해결책을 찾기 위해 고군분투한 문제입니다. 문제는 vite.config.js에서 프로젝트의 기반을 추적할 수 없도록 만드는 몇 가지 사항을 변경해야 한다는 것입니다.

우리vite.config.js는 이렇게 생겼습니다. base: './index.html'를 추가하면 우리가 가진 임의의 404의 실수를 고칠 수 있었습니다.

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import mkcert from 'vite-plugin-mkcert'

export default defineConfig({
  server: { https: true },
  plugins: [react(), mkcert()],
  base: './index.html',
  build: {
    input: {
      app: './index.html', // default
    },
  },
  resolve: {
    alias: {
      './runtimeConfig': './runtimeConfig.browser',
    }
  }
})

이 솔루션이 동일한 문제로 어려움을 겪고 있는 누군가에게 도움이 되기를 바랍니다.