React-Admin - 빌드 및 배포

React-Admin을 빌드 후 배포하는 방법을 알아봅시다.

작성자

홍세민

홍세민

MarcusHong

디렉토리 구조

관리자 페이지는 사용자가 소수이며, 굳이 cors를 허용하지 않을 것이기 때문에 개발 및 관리를 한 프로젝트하는 것이 낫기 때문에 한 프로젝트에서 빌드 및 배포를 하는 방법을 알아본다. client: react-admin server: express

├── client
├── package.json
└── server

package.json

  • dev: 개발시에 사용. react + start와 express + nodemon 가 실행된다.
  • build: react 빌드
  • start: 빌드 후 사용
{
  "name": "openpal-webrtc",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "dev": "concurrently \"npm run dev:server\" \"npm run dev:client\"",
    "start": "node ./server/bin/www",
    "dev:server": "DEBUG=* NODE_ENV=local nodemon ./server/bin/www",
    "dev:client": "node ./server/bin/start-client.js",
    "build": "cd client; npm run build",
  },
  "dependencies": {
    "express": "^4.16.3"
  },
  "devDependencies": {
    "concurrently": "^4.0.1",
    "nodemon": "^1.18.3"
  }
}

start-client.js

개발시에 사용할 스크립트

// server/bin/start-client.js
const args = [ 'start' ]
const opts = { stdio: 'inherit', cwd: 'client', shell: true }
require('child_process').spawn('npm', args, opts)

app.js

빌드된 client를 라우트 할 수 있게 지정한다.

'use strict'

const path = require('path')
const express = require('express')
const app = express()

app.use(express.json({limit: '1mb'}));
app.use(express.urlencoded({extended: false}))

app.use(express.static(path.join(__dirname, 'public')))
app.use(express.static(path.join(__dirname, '../client/build')))
app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '../client/build/index.html'))
})

module.exports = app

빌드 및 배포

설정은 모두 끝났다. 간단히 빌드와 시작을 하면 프로덕션 앱이 시작된다.

$ npm run build
$ npm start

Tags : react_admin 

comments powered by Disqus