- - npm deploy 만들기
{
"scripts": {
"build": "next build",
"deploy": "next build && rsync -avzc --delete .next package.json package-lock.json public next.config.js user@your-server-ip:/path/to/your/app/"
}
}
- swc로 컴파일 하도록 함
npm install --save-dev @swc/plugin-emotion
npm install @emotion/react @emotion/styled
// next.config.mjs 파일 수정
/** @type {import('next').NextConfig} */
const nextConfig = {
swcMinify: true,
compiler: {
emotion: {
// 이 옵션은 @emotion/react를 사용할 때 필요합니다
importMap: {
'@emotion/react': {
styled: {
canonicalImport: ['@emotion/styled', 'default'],
styledBaseImport: ['@emotion/styled', 'default']
}
}
}
},
styledComponents: true,
reactRemoveProperties: { properties: ['^data-test$'] },
removeConsole: {
exclude: ['error'],
},
},
};
export default nextConfig;
- pm2로 서버 서비스 관리
// 1. Install PM2 globally
npm install pm2 -g
// 2. Update package.json
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"prod": "pm2 start node_modules/next/dist/bin/next --name next-app -- start -p 3000"
}
}
// 3. For a custom server, create a server.js file
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
const parsedUrl = parse(req.url, true)
handle(req, res, parsedUrl)
}).listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
// 4. PM2 configuration file (ecosystem.config.js)
module.exports = {
apps: [{
name: 'next-app',
script: 'server.js',
instances: 'max',
autorestart: true,
watch: false,
max_memory_restart: '1G',
env: {
NODE_ENV: 'production'
}
}]
}
// 5. build, prod 실행
npm run build
npm run prod
## pm2 명령들
pm2 start next-app : 시작
pm2 restart next-app : 재시작
pm2 stop next-app : 중지
pm2 logs next-app : 로그 확인
pm2 show next-app : 특정 프로세스의 상세 정보 확인:
pm2 delete next-app : 삭제
pm2 list : 목록 보기
pm2 stop all : 모든 PM2 프로세스 중지
pm2 delete all : 모든 PM2 프로세스 삭제
pm2 monit : PM2 대시보드 실행 (프로세스 모니터링)
'개발 > react' 카테고리의 다른 글
REACT NATIVE에서 FIREBASE설정 (0) | 2023.04.09 |
---|---|
React Recoil (0) | 2023.04.09 |