재우니의 블로그

React App 을 Surge 사이트에 배포하는 방법에 대해 알아보고자 합니다.


해당 사이트는 https://surge.sh/ 이며 배포하는 방법이 매우 쉽습니다. 이는 단지 html , css , js 로 구성된 소스는 전부 무료로 사용이 가능하며, 배포시에는 서브도메인 별도로 제공해 줍니다.



React App 을 개발하면 이를 배포하기 위해 build 명령어를 사용할 필요가 있는데요. 


npm run build 명령어를 실행하면 build 폴더가 생성되면서 해당 폴더 내에 optimized 되어 소스가 저장됩니다.

해당 build 폴더의 내용을 surge 사이트에 배포해 보겠습니다.


 ✘ shimjaewoon@shimjaewoonui-MacBook-Air  ~/desktop/work/react/react-firebase-authentication-medium   master ●  npm run build


> react-firebase-login-page@0.1.0 build /Users/shimjaewoon/Desktop/work/react/react-firebase-authentication-medium

> react-scripts build


Creating an optimized production build...

Compiled successfully.


File sizes after gzip:


  102.72 KB  build/static/js/2.bedea15b.chunk.js

  963 B      build/static/js/main.b8e3b39a.chunk.js

  761 B      build/static/js/runtime~main.fdfcfda2.js

  538 B      build/static/css/main.1e30fbfc.chunk.css


build 폴더에 접속합니다.


  shimjaewoon@shimjaewoonui-MacBook-Air  ~/desktop/work/react/react-firebase-authentication-medium  master ● cd build


이제 배포해 보죠.


 shimjaewoon@shimjaewoonui-MacBook-Air  ~/desktop/work/react/react-firebase-authentication-medium/build   master ●  surge


   Running as shimpark@gmail.com (Student)


        project: /Users/shimjaewoon/Desktop/work/react/react-firebase-authentication-medium/build/

         domain: bent-planes.surge.sh

         upload: [] 100% eta: 0.0s (15 files, 1414697 bytes)

            CDN: [====================] 100%

             IP: 45.55.110.124


   Success! - Published to bent-planes.surge.sh



bent-planes.surge.sh 도메인을 제공해 주며, 해당 도메인을 통해 접속하면 배포된것을 확인하실 수 있습니다.


도움 받은 사이트 주소

https://daveceddia.com/deploy-create-react-app-surge/