수정하기 - Vercel 배포 중에 정적 파일을 어떻게 추가하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

Vercel에 정적 파일을 배포하는 것은 간단한 프로세스입니다. 다음은 정적 파일을 Vercel 프로젝트에 추가하는 방법에 대한 단계별 가이드입니다.           1. 프로젝트 구조 <a href='https://sangseek.com/sangseeks/설정/ko'>설정</a>    Vercel 프로젝트의 루트 디렉토리에서 `public`이라는 폴더를 생성합니다. Vercel은 `public` 폴더에 있는 모든 파일을 정적 파일로 처리하고, 이 폴더의 파일은 URL을 통해 직접 접근할 수 있습니다.    ```  my-vercel-project/  |-- public/  |   |-- images/  |   |   |-- my-image.png  |   |-- styles/  |   |   |-- styles.css  |   |-- <a href='https://sangseek.com/sangseeks/favicon/ko'>favicon</a>.ico  |-- pages/  |-- ...  ```           2. 정적 파일 추가    `public` 폴더 내에 필요한 정적 파일(예: 이미지, CSS, JS 파일 등)을 추가합니다. 위의 예제처럼 구성하실 수 있습니다. 예를 들어, `my-image.png` 파일을 `public/images` 폴더에 넣었다면, 이 파일은 `/images/my-image.png` 경로에서 접근할 수 있습니다.           3. 파일 사용    정적 파일을 HTML 파일이나 JavaScript 파일에서 사용할 수 있습니다. 예를 들어:             HTML 파일에서 사용하기    ```html  <img src="/images/my-image.png" alt="My Image">  <link rel="stylesheet" href="/styles/styles.css">  ```             JavaScript 파일에서 사용하기    ```javascript  const imageUrl = '/images/my-image.png';  const imageElement = document.createElement('img');  imageElement.src = imageUrl;  document.body.appendChild(imageElement);  ```           4. 배포하기    정적 파일을 추가한 후에는 Vercel에 배포합니다. 배포는 다음과 같은 명령어로 수행할 수 있습니다.    ```bash  vercel deploy  ```    Vercel CLI를 사용하여 간편하게 배포할 수 있으며, 이 과정에서 `public` 디렉토리에 있는 정적 파일들도 함께 배포됩니다.           5. 확인하기    배포가 완료되면, Vercel이 주는 URL로 이동하여 정적 파일에 접근하고 제대로 표시되는지 확인합니다.           추가 사항    - Vercel은 정적 파일 호스팅을 자동으로 처리하지만, 특정 파일의 캐싱이나 설정을 조정할 필요가 있는 경우 `vercel.json` 파일을 통해 추가적인 설정을 할 수 있습니다.  - 파일 이름에 대한 대소문자 구분이 있으므로, URL 경로를 작성할 때 주의해야 합니다.    이 방법을 통해 Vercel에 정적 파일을 추가하고 관리할 수 있습니다.