수정하기 - Vercel 배포 시 파일 업로드 기능을 추가하는 방법은?

닉네임

비밀번호

제목

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

Vercel은 서버리스 플랫폼으로, 정적 사이트와 서버리스 함수(Functions)를 사용하여 백엔드 로직을 처리할 수 있습니다. 파일 업로드 기능을 구현하려면, 클라이언트에서 파일을 선택하고 서버리스 함수를 통해 그 파일을 처리하는 구조로 접근할 수 있습니다. 다음은 Vercel에서 파일 업로드 기능을 추가하는 방법에 대한 단계별 안내입니다.           1. 프로젝트 초기화    먼저, Vercel 프로젝트를 설정합니다. 새로운 프로젝트를 만들거나 기존 프로젝트를 사용할 수 있습니다.    ```bash  npx create-next-app my-upload-app  cd my-upload-app  ```           2. 파일 업로드 폼 추가    클라이언트에서 파일을 업로드할 수 있는 폼을 만듭니다. `pages/index.js` 파일을 열고 다음과 같이 수정합니다:    ```jsx  import { useState } from 'react';    export default function Home() {    const [file, setFile] = useState(null);      const handleFileChange = (event) => {      setFile(event.target.files[0]);    };      const handleSubmit = async (event) => {      event.preventDefault();        const formData = new <a href='https://sangseek.com/sangseeks/FormData/ko'>FormData</a>();      formData.append('file', file);        const response = await fetch('/api/upload', {        method: 'POST',        body: formData,      });        if (response.ok) {        const data = await response.json();        console.log(data);      } else {        console.error('Upload failed.');      }    };      return (      <div>        <h1>File Upload</h1>        <form onSubmit={handleSubmit}>          <input type="file" onChange={handleFileChange} />          <button type="submit">Upload</button>        </form>      </div>    );  }  ```           3. 서버리스 함수 생성    파일 업로드를 처리할 서버리스 함수를 만듭니다. `pages/api/upload.js` 파일을 생성하고 다음 코드를 추가합니다:    ```javascript  import formidable from 'formidable';  import fs from 'fs';    export const config = {    api: {      bodyParser: false,    },  };    const uploadHandler = (req, res) => {    const form = new formidable.IncomingForm();      form.parse(req, (err, fields, files) => {      if (err) {        res.status(500).json({ error: 'Error while uploading file' });        return;      }        // 파일 처리 로직 (예: 저장)      const tempPath = files.file.path;      const newPath = `./uploads/${files.file.name}`;            fs.rename(tempPath, newPath, (err) => {        if (err) {          res.status(500).json({ error: 'File saving failed' });          return;        }        res.status(200).json({ message: 'File uploaded successfully' });      });    });  };    export default uploadHandler;  ```           4. 업로드 디렉토리 생성    `uploads` 디렉토리를 생성하여 파일을 저장할 위치를 마련합니다. 프로젝트 루트에 `uploads` 폴더를 생성하세요.    ```bash  mkdir uploads  ```           5. 배포    이제 변경 사항을 커밋하고 Vercel에 배포할 수 있습니다. Vercel CLI를 사용하거나 GitHub와 같은 플랫폼에 푸시하여 자동으로 배포할 수 있습니다.    ```bash  git add .  git commit -m "Add file upload functionality"  vercel deploy  ```           6. 파일 업로드 기능 테스트    배포가 완료되면, 웹 브라우저를 열고 제공된 URL에 접속하여 파일 업로드 기능을 테스트합니다. 파일을 선택하고 "Upload" 버튼을 클릭하여 파일이 성공적으로 업로드되는지 확인합니다.           주의사항    - Vercel은 서버리스 구조이므로, 업로드된 파일은 서버의 파일 시스템에 오래 저장되지 않습니다. 배포가 업데이트될 때마다 파일들이 사라질 수 있습니다. S3와 같은 클라우드 스토리지 서비스를 고려하<a href='https://sangseek.com/sangseeks/십시오/ko'>십시오</a>.  - 파일의 크기 제한 및 <a href='https://sangseek.com/sangseeks/형식 검증/ko'>형식 검증</a>을 구현하는 것이 좋습니다.  - 실제 환경에서는 업로드된 파일에 대한 보안 및 오류 처리 로직을 강화할 필요가 있습니다.    이 과정을 통해 Vercel 프로젝트에 간단한 파일 업로드 기능을 추가할 수 있습니다.