내가 만든 웹사이트를 간단하게 호스팅해보고 싶다면 파이어베이스 호스팅을 추천합니다.
우선 확실하게 파이어베이스로 호스팅을 하는 것에는 한계가 있습니다.
* SSR (서버 사이드 렌더링에 한계가 있다. function 함수로 지원해준다고는 하는데 아직 안정화되지 않았고 자유도가 떨어집니다.)
* SEO( SSR이 되지 않으므로 검색최적화가 되지 않습니다. 개인적인 용도로 어디서든 사용하기 좋습니다. 그래프 표현, api로 정보취합, 엑셀 등 파일처리)
장점도 분명합니다.
* 원버튼으로 호스팅을 5분만에 끝낼 수 있다. 간편함, 효율성
* 윈도우 프로그램보다 웹 프로그램이 더욱 친숙하며 간단하다.
* 웹앱이므로 어디서든 접근할 수 있다. 모바일, PC, 태블릿
* 웹의 활용도가 늘어나서 하드웨어에 직접 관계되지 않는 것은 대부분 지원한다. (웹소켓, 엑셀, 파일처리, 동영상처리, 파싱 등)
저는 엑셀에 대해 자동화로 처리하고 싶은 것이 있었기 때문에 이것을 아주 잘 이용할 수 있었습니다.
생각보다 간단하고 편리합니다.
1. 우선 파이어베이스 콘솔에 들어가서 프로젝트를 하나 만들어줍니다.
https://console.firebase.google.com/?hl=ko
로그인 - Google 계정
이메일 또는 휴대전화
accounts.google.com
다음으로 파이어베이스 호스팅을 이용하려면 Firebase CLI를 설치해야합니다. CLI 는 Command Line Interface의 약자로 터미널에서 명령어를 쳐서 파일 처리 하듯이 명령어를 통해 firebase의 서비스를 이용할 수 있는 인터페이스입니다.
VScode나 MacOS에서 터미널을 열고 웹앱 파일일 들어있는 디렉토리로 가서
npm install firebase-tools
tools를 설치해줍니다.
설치가 완료되었다면
firebase login입력해주고 웹 브라우저로 구글 로그인을 해서 연결해줍니다.
파이어베이스 초기화해줍니다. 거의 끝났습니다.
firebase init
-> Hosting: Configure and deploy firebase hosting sites
-> Use an existing project
-> what do you want to use as your public directory? public
-> configure as a single-page app (rewirete all urls to /index.html)? no
//완료
Firebase initialization complete!그 다음 VScode를 켜서 디렉토리를 봐줍니다.
호스팅을 할 때 public 파일의 index.html 파일이 보여지게 됩니다.
이 화면의 아니라 React.js로 만든 자신의 웹앱이 보이게 하려면
//index.html
..
<body>
<div id="root"></div>
</body>root를 꼭 넣어줍니다. 그래야 App.js로 연동되어 작동됩니다.
이제 마지막을 할 일은 빌드 -> 파이어베이스로 배포입니다.
npm run build
firebase deploy
터미널에서 저 명령어만 입력해주면 빌드가 되고 그것을 파이어베이스에 올릴 수 있게 됩니다.
deploy가 되면 주소가 뜨는데 그 곳으로 이동하면 자신의 앱과 연동된 페이지를 볼 수 있게 됩니다.
파이어베이스 콘솔에도 표시됩니다.
'프로그래밍_' 카테고리의 다른 글
| Docker, 도커를 사용하는 이유와 도커 설치법 (0) | 2023.01.25 |
|---|---|
| React vs Flutter 무엇을 써야 할까 ? - 개발자 언어, 앱 언어, 개발 외주, 로드맵 (0) | 2023.01.11 |
| React.js에서 엑셀 파일 다루기, xlsx 보다는 xlsx-js-style (0) | 2022.12.02 |
| 백엔드, 프론트엔드가 뭡니까? (ft. 직업특징) (0) | 2022.11.30 |
| React.js로 엑셀 다루기, xlsx (0) | 2022.11.28 |
댓글