본문 바로가기
IT_Developers/ReactJS

React.js - 배포를 위한 빌드하기 "npm run build"

by 고코더 2021. 1. 16.

리액트 배포 파일 만들기


 

안녕하세요.

고코더 입니다.

 

 

 1. 리액트를 만들면 이것을 배포하여서 서비스를 게시해야 합니다. 아무리 열심히 만들어도 다른 사람에게 보여주지 못한다면 의미가 없습니다. 리액트로 생성한 프로젝트는 간단한 명령어를 통해 빌드하여 배포할 수 있는 버전으로 만들 수 있습니다. 그 방법을 한번 알아보겠습니다. 

 

 2. 명령 프롬프트로 우리가 만들어놓은 리액트의 폴더로 이동합니다. 그리고 아래와 같은 명령어를 실행합니다. 그럼 알아서 빌드가 진행되고 배포 버전으로 파일들이 만들어집니다. 

npm run build

 

 3. 해당 빌드를 실행하면 프로젝트에 전에 없던 build라는 폴더가 생성됩니다. 이는 말 그대로 빌드된 파일들을 저장하는 폴더입니다. 

C:\react\hello\build

 

 4. 폴더에 접근해보면 사이트를 배포할 때 꼭 필요한 파일들만 모아둔 빌드된 버전이 있습니다. 이 파일을 이용해서 웹서비스에 게시하게 됩니다. 

 

 

 5. 그리고 index.html 파일을 코드 내용을 수정해서 소스를 보면 공백을 다 없애고 자동으로 압축되어 난독화 된 알아볼 수 없는 코드들이 나타납니다. 이렇게 자동으로 최적화된 파일은 리액트를 실행하기에 가장 좋은 최적의 환경을 만들어 줍니다. 

 

<!doctype html><html lang="en">
<head>
<meta charset="utf-8"/>
<link rel="icon" href="/favicon.ico"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="Web site created using create-react-app"/>
<link rel="apple-touch-icon" href="/logo192.png"/>
<link rel="manifest" href="/manifest.json"/>
<title>React App</title>
<link href="/static/css/main.8c8b27cf.chunk.css" rel="stylesheet">
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">
</div>
<script>!function(e){function r(r){for(var n,i,a=r[0],l=r[1],c=r[2],s=0,p=[];s<a.length;s++)i=a[s],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&p.push(o[i][0]),o[i]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(r);p.length;)p.shift()();return u.push.apply(u,c||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,a=1;a<t.length;a++){var l=t[a];0!==o[l]&&(n=!1)}n&&(u.splice(r--,1),e=i(i.s=t[0]))}return e}var n={},o={1:0},u=[];function i(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,i),t.l=!0,t.exports}i.e=function(e){var r=[],t=o[e];if(0!==t)if(t)r.push(t[2]);else{var n=new Promise((function(r,n){t=o[e]=[r,n]}));r.push(t[2]=n);var u,a=document.createElement("script");a.charset="utf-8",a.timeout=120,i.nc&&a.setAttribute("nonce",i.nc),a.src=function(e){return i.p+"static/js/"+({}[e]||e)+"."+{3:"577e0511"}[e]+".chunk.js"}(e);var l=new Error;u=function(r){a.onerror=a.onload=null,clearTimeout(c);var t=o[e];if(0!==t){if(t){var n=r&&("load"===r.type?"missing":r.type),u=r&&r.target&&r.target.src;l.message="Loading chunk "+e+" failed.\n("+n+": "+u+")",l.name="ChunkLoadError",l.type=n,l.request=u,t[1](l)}o[e]=void 0}};var c=setTimeout((function(){u({type:"timeout",target:a})}),12e4);a.onerror=a.onload=u,document.head.appendChild(a)}return Promise.all(r)},i.m=e,i.c=n,i.d=function(e,r,t){i.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,r){if(1&r&&(e=i(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(i.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)i.d(t,n,function(r){return e[r]}.bind(null,n));return t},i.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(r,"a",r),r},i.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},i.p="/",i.oe=function(e){throw console.error(e),e};var a=this.webpackJsonphello=this.webpackJsonphello||[],l=a.push.bind(a);a.push=r,a=a.slice();for(var c=0;c<a.length;c++)r(a[c]);var f=l;t()}([])</script>
<script src="/static/js/2.5bb99f2d.chunk.js"></script>
<script src="/static/js/main.ef0d9c09.chunk.js"></script>
</body>
</html>

 


마무리


 

배포도 참 쉬운 리액트

 

 

 

 

 

댓글0