리액트 배포 파일 만들기
안녕하세요.
고코더 입니다.
● 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>
마무리
배포도 참 쉬운 리액트
'IT_Developers > React' 카테고리의 다른 글
| React.js - 리액트 실행(npm start), 정지(npm stop???) 하는 방법 (0) | 2021.01.17 |
|---|---|
| React.js - JSX란? JavaScript + XML? (0) | 2021.01.17 |
| React.js - 기본 생성된 "package.json" 파일 살펴보기 (0) | 2021.01.16 |
| React.js - 리액트 프로젝트 기본 폴더 구조 (0) | 2021.01.15 |
| React.js - 리액트의 기본 create-react-app 설치하고, 실행하기 (0) | 2021.01.15 |
댓글