개발/react

next.js 서버 관련 메모들

coens 2024. 7. 19. 21:56

- - 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