[Node.js] 웹 서버 구축 후 파일 업로드 기능 구현하기

 

 

Node.js v16.13.1

npm v8.3.0을 기준으로 작성된 글입니다.

AWS EC2를 이용한 우분투 환경에서 실행합니다.

 

 

Node.js 설치는 아래를 참고하시면 됩니다.

 

[Node.js] 설치하기

 

---

 

 

Node.js에는 HTTP모듈이 내장되어있습니다.

이를 이용하면 쉽게 웹서버를 구축할 수 있습니다.

 

이번 글에서는 HTTP 모듈로 파일 업로드가 가능한 간단한 웹서버를 만들어 보겠습니다.

 

 

 

 

먼저 코드와, 모듈들을 저장할 폴더를 하나 생성해 줍니다.

 

 

 

 

 

 

그리고 그 폴더 내에 코드를 작성할 js파일과

업로드된 파일을 저장할 폴더를 하나 생성해 줍니다.

 

 

 

 

 

이제 코드를 작성해 보겠습니다.

requrie 메서드를 사용해 사용하고자 하는 모듈들을 적재합니다.

 

var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

 

각각 웹서버를 열기 위한 http 모듈,

업로드되는 파일 분석을 위한 formidable 모듈,

파일 처리를 위한 모듈 fs 모듈입니다.

 

 

 

 

 

 

formidable 모듈은 내장되어있지 않기 때문에 추가 설치가 필요합니다.

아래 명령어를 콘솔에 입력합니다.

$ npm install formidable

 

 

 

 

 

 

이제 HTTP 모듈의 createServer 메서드를 이용해 웹서버를 열어보겠습니다.

3000번 포트로 접속 시 function 함수가 실행되며 HTML로 응답하는 코드입니다.

 

var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead('200', { 'Content-Type': 'text/html;' });
    res.write('Hello World!');
    res.end();
}).listen(3000);

 

 

 

 

 

 

node 명령어로 실행시켜 보겠습니다.

해당 폴더에서 터미널을 열고 명령어를 입력합니다.

 

 

 

그럼 서버가 작동하게 됩니다.

저는 인스턴스의 주소 : 3000로 접속해서 잘 작동하고 있는지 확인해 보겠습니다. 

 

 

 

 

+ 인스턴스의 경우 3000번 포트로 규칙을 추가해주어야 접근이 가능합니다.

인스턴스에 규칙을 추가하는 법은 아래 글을 참고하시길 바랍니다.

 

AWS EC2 인스턴스 인바운드 규칙 추가하기

 

 

 

 

 

 

잘 접속이 되고 "Hello World!"가 뜨면 성공입니다.

 

 

 

 

이제 파일 업로드 코드를 작성해 보겠습니다.

전송 페이지와 전송 완료 페이지로 나누어 각각 처리가 필요합니다.

 

 

 

 

 

먼저 전송 페이지 HTML 코드를 작성해 보겠습니다.

사용자가 업로드할 파일을 고를 수 있는 <input> 태그의 file 타입을 이용해 작성합니다.

또 이를 서버로 전송하기 위해 <form>을 다음과 같이 작성하였습니다. 

 

 

var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function (req, res) {
    res.writeHead('200', { 'Content-Type': 'text/html;' });
    res.write('<form action="fileupload" method ="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"></br></br>');
    res.write('<input type="submit">');
    res.write('</form>');
    res.end();
}).listen(3000);

 

 

<form>의 action 속성을 "fileupload"로 주어 사용자가 버튼을 눌렀을 때

fileupload 페이지(전송 완료 페이지)로 이동되게 할 것입니다. 

 

 

 

 

 

이미 실행 중이던 서버는 Ctrl+C로 종료시켜주는 것을 권장합니다.

잘못된 방법으로 종료 시에 포트 충돌이 나며 실행이 안될 수 있습니다.

이미 포트 오류가 뜬다면 아래 글을 참고 바랍니다.

 

[Node.js] 웹 서버 구축 후 파일 업로드 사이트 만들기

 

 

 

 

 

 

그럼 종료 후 다시 실행시켜 보겠습니다.

 

 

 

 

 

 

 

정상적으로 작동한다면 다음과 같이 

파일 전송 폼이 나타납니다.

 

 

 

 

 

 

 

전송 완료 페이지를 더한 최종 코드입니다.

 

파일을 선택하고 전송 버튼을 누르면 <from> 태그를 통해

서버로 파일이 전송되고 fileupload 페이지로 이동됩니다.

 

그럼 브라우저가 fileupload url로 접속을 요청하고

결과적으로 if문이 실행되며 다른 HTML 문서를 보여주는 것이죠.

 

 

 

var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function (req, res) {
    if (req.url == '/fileupload') {
        var form = new formidable.IncomingForm();
        form.parse(req, function (err, fields, files) {
            console.log(files);
            var f = files.filetoupload;
            var oldpath = f.filepath;
            var newpath = '/home/ubuntu/Upload/save/' + f.newFilename;
            fs.rename(oldpath, newpath, function (err) {
                if (err) throw err;
                res.writeHead('200', { 'Content-Type': 'text/html; charset=utf8'});
                res.write('<h4>파일업로드 완료!</h4>');
                res.write('<hr/>');
                res.write('<h5>원본파일명 : ' + f.originalFilename + ' ->  저장파일명 : ' + f.newFilename + '</h5>');
                res.write('<h5>MIME TYPE : ' + f.mimetype + '</h5>');
                res.write('<h5>파일크기 : ' + f.size + 'bytes</h5>');
                res.end();
            });
        });
    }
    else {
        res.writeHead('200', { 'Content-Type': 'text/html;'});
        res.write('<form action="fileupload" method ="post" enctype="multipart/form-data">');
        res.write('<input type="file" name="filetoupload"></br></br>');
        res.write('<input type="submit">');
        res.write('</form>');
        return res.end();
    }
}).listen(3000);

 

 

 

 

 

if문에서는 파일을 저장하고

파일의 유형, 크기 등을 HTML로 작성하여 브라우저로 전송합니다.

 

 

 

 

 

 

 

 

 

 

 

감사합니다.

 

 

[참고자료]

 

Node.js Tutorial

 

 

---

 

 

공부한 내용을 복습/기록하기 위해 작성한 글이므로 내용에 오류가 있을 수 있습니다.