6강 파이어베이스(Firebase)로 React 프로젝트 배포하기
React와 Firebase로 만드는 Word Cloud 웹앱2019. 1. 9. 06:23
728x90
반응형
1. 빌드(Build)를 위한 웹팩 설정
'use strict'
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: {
main: ['./src/main.js']
},
output: {
path: path.resolve(__dirname, './build'),
filename: '[name].js'
},
module: {
rules: [{
test: /\.js$/,
include: path.resolve(__dirname, './src'),
loaders: 'babel-loader'
}]
},
plugins: [
new CopyWebpackPlugin([{
context: './public',
from: '*.*'
}]),
],
devServer: {
contentBase: './public',
host: 'localhost',
port: 8080
}
}
2. 각종 모듈 재설치
(필요할 시 수행하세요.)
3. 파이어베이스(Firebase) 패키지 설치 및 설정하기
yarn add firebase-tools 명령으로 설치할 수 있습니다.
이 때 firebase init 명령이 동작하지 않으면, 관리자 권한으로 에디터를 실행하세요. 또한 firebase 계정을 변경하고 싶을 때는 firebase logout 및 firebase login 명령을 이용하시면 됩니다.
4. 기존의 build 폴더를 삭제한 뒤에 yarn build으로 재빌드하기
5. 파이어베이스 호스팅 서비스를 이용해 배포하기
6. .gitignore 파일 수정 및 푸시(Push)하기
node_modules
build
.firebase/
firebase.json
.firebaserc
※ 배포 완료 ※
728x90
반응형
'React와 Firebase로 만드는 Word Cloud 웹앱' 카테고리의 다른 글
| 8강 React에 웹 폰트(Web Font) 적용하기 (0) | 2019.01.09 |
|---|---|
| 7강 React로 텍스트 파일(Text File) 업로드 및 상세 페이지로 이동하기 (0) | 2019.01.09 |
| 5강 단어(Word) 데이터 삽입 및 삭제 기능 구현하기 (2) | 2019.01.09 |
| 4강 Firebase 데이터베이스 구축 및 React와 연동하기 (0) | 2019.01.09 |
| 3강 라우터(Router) 활용하기 (0) | 2019.01.09 |
