카테고리 없음

next.js 서버는 어디에서 구동을 시켜야하나요?

김영수 2024. 11. 16. 22:19

 

I currently have WEB(Ec2) - WAS(ec2) - RDS on AWS.
I have a springboot application on WAS and NGINX on WEB. Where should I run the next.js server?
I'm also wondering if it's common for companies to deploy next.js applications with vercel as well!

 

현재 aws에 web(Ec2) - was(ec2) - rds 이렇게 되어있고
was에는 스프링부트 애플리케이션, web에는 nginx가 띄워져 있습니다. next.js 서버는 어디에서 구동을 시켜야하나요?
혹시 기업에서 next.js 애플리케이션도 vercel로 배포하는게 일반적인지도 궁금합니다!

 

답:

You can deploy your Next.js server in a few ways within your current AWS setup:

1. Deploy on WEB (EC2 with NGINX)

  • Run the Next.js server on the same WEB EC2 instance where NGINX is running.
  • Update the NGINX configuration to reverse-proxy requests to your Next.js application (e.g., route /api or /requests to the Next.js server).
  • Advantages:
    • Simplifies architecture by avoiding additional instances.
    • Efficient use of your existing resources.
  • Considerations: Ensure the EC2 instance can handle the increased load from both NGINX and Next.js.

2. Deploy on a Separate EC2 Instance

  • Provision a new EC2 instance specifically for the Next.js application.
  • Use NGINX on your WEB EC2 to forward requests to this new instance.
  • Advantages:
    • Better isolation and scalability for your Next.js application.
  • Considerations: Increases cost due to an additional EC2 instance.

3. Deploy with AWS Fargate or Elastic Beanstalk

  • Containerize the Next.js application with Docker.
  • Use AWS Fargate or Elastic Beanstalk to manage deployment and scaling.
  • Advantages:
    • Flexible scaling and reduced operational overhead.
    • Integrates well with the rest of your AWS setup.
  • Considerations: Requires containerization and additional configuration.

Deploying with Vercel

It's common for companies to deploy Next.js applications on Vercel, as it is the platform designed by the creators of Next.js.

Advantages of Vercel:

  • Automatic optimizations (e.g., serverless functions, static site generation).
  • Simplifies deployment pipelines with CI/CD out of the box.
  • Edge network for global CDN distribution.
  • No need to manage infrastructure.

Considerations:

  • Vendor lock-in: Your Next.js deployment becomes dependent on Vercel.
  • Pricing: Costs can rise if traffic grows significantly.
  • Integration: Ensure it works smoothly with your AWS-based backend APIs and data layer.

Recommendation

If your AWS infrastructure is already established and tightly integrated, hosting Next.js within AWS (e.g., WEB EC2 or a new instance) might be more straightforward. However, if you prioritize ease of deployment and global distribution, consider using Vercel and integrate it with your AWS backend through APIs.

 

현재 AWS 설정 내에서 몇 가지 방법으로 Next.js 서버를 배포할 수 있습니다:

1. WEB에 배포(NGINX가 있는 EC2)
NGINX가 실행 중인 동일한 WEB EC2 인스턴스에서 Next.js 서버를 실행합니다.
Next.js 애플리케이션에 대한 요청을 역방향으로 프록시하도록 NGINX 구성을 업데이트합니다(예: /api 또는 / 요청을 Next.js 서버로 라우팅).
장점:
추가 인스턴스를 피하여 아키텍처를 간소화합니다.
기존 리소스를 효율적으로 사용할 수 있습니다.
고려 사항: EC2 인스턴스가 NGINX와 Next.js의 증가된 부하를 모두 처리할 수 있는지 확인합니다.

 

2. 별도의 EC2 인스턴스에 배포하기
Next.js 애플리케이션 전용으로 새 EC2 인스턴스를 프로비저닝합니다.
WEB EC2에서 NGINX를 사용하여 이 새 인스턴스로 요청을 전달합니다.
장점:
Next.js 애플리케이션의 격리 및 확장성이 향상됩니다.
고려 사항: 추가 EC2 인스턴스로 인해 비용이 증가합니다.

 

3. AWS Fargate 또는 Elastic Beanstalk를 통한 배포
Docker로 Next.js 애플리케이션을 컨테이너화하세요.
배포 및 확장을 관리하기 위해 AWS Fargate 또는 Elastic Beanstalk를 사용합니다.
장점:
유연한 확장 및 운영 오버헤드 감소.
나머지 AWS 설정과 잘 통합됩니다.
고려 사항: 컨테이너화 및 추가 구성이 필요합니다.
Vercel로 배포
Vercel은 Next.js 개발자가 설계한 플랫폼이기 때문에 회사에서 Vercel에 Next.js 애플리케이션을 배포하는 것이 일반적입니다.

Vercel의 장점:

자동 최적화(예: 서버리스 기능, 정적 사이트 생성).
즉시 사용 가능한 CI/CD로 배포 파이프라인을 간소화합니다.
글로벌 CDN 배포를 위한 엣지 네트워크.
인프라를 관리할 필요가 없습니다.
고려 사항:

공급업체 종속성: Next.js 배포가 Vercel에 종속됩니다.
가격: 트래픽이 크게 증가하면 비용이 증가할 수 있습니다.
통합: AWS 기반 백엔드 API 및 데이터 레이어와 원활하게 작동하는지 확인하세요.
권장 사항
AWS 인프라가 이미 구축되어 있고 긴밀하게 통합되어 있다면 AWS 내에서 Next.js를 호스팅하는 것이 더 간단할 수 있습니다(예: WEB EC2 또는 새 인스턴스). 그러나 배포의 용이성 및 글로벌 배포를 우선시하는 경우, Vercel을 사용하고 API를 통해 AWS 백엔드와 통합하는 것을 고려하세요.

 

질문2:

Tell me how to deploy a Next.js server in was.

was 에서 Next.js 서버를 배포하는 방법을 알려주세요.

 

To deploy a Next.js server on your WAS (EC2) instance in AWS, follow these steps:

1. Prepare Your Next.js Application

  1. Build the Next.js Application:
    • Run the following command locally to generate the production build:
npm run build

 

Ensure you’ve configured your Next.js app to use environment variables for any API connections or configurations.

2. Test the Production Build Locally:

  • Start the server locally to confirm it works:
     
npm start
 

2. Set Up the WAS EC2 Instance

  1. SSH into Your WAS EC2 Instance:
    • Access your EC2 instance:
       
ssh -i "your-key.pem" ec2-user@your-ec2-public-ip

 

2. Install Required Software:

  • Update the instance:
     
sudo yum update -y

 

Install Node.js (if not already installed):

curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

 

Install pm2 to manage your Next.js process:

sudo npm install -g pm2

 

3. Upload Your Next.js Application

  1. Transfer Files to the EC2 Instance:
    • Use scp to copy your Next.js files to the instance:
       
scp -i "your-key.pem" -r ./your-nextjs-project ec2-user@your-ec2-public-ip:/home/ec2-user

 

Alternatively, use a Git repository:

git clone https://github.com/your-repo.git

 

2. Install Dependencies on EC2:

  • Navigate to your project directory: 
  •  
cd /home/ec2-user/your-nextjs-project

 

Install Node.js dependencies:

npm install

 

4. Run the Next.js Server

4. Next.js 서버 실행

  1. Start the Server with PM2:   1.PM2로 서버를 시작합니다:

    Next.js 애플리케이션을 시작합니다: 
    • Start the Next.js application:
pm2 start npm --name "nextjs-app" -- start

 

Save the PM2 process list to ensure it starts on reboot:

재부팅 시 시작되도록 PM2 프로세스 목록을 저장하세요.

pm2 save
pm2 startup

 

2. Check the Application:

  • Open your browser and access the application using the EC2 instance's public IP (e.g., http://your-ec2-public-ip:3000).

2.애플리케이션을 확인합니다:
브라우저를 열고 EC2 인스턴스의 공용 IP(예: http://your-ec2-public-ip:3000)를 사용하여 애플리케이션에 액세스합니다.

5. Configure NGINX as a Reverse Proxy

NGINX를 역방향 프록시로 구성하기

  1. Install NGINX:
    • If not already installed: 
    •  
sudo yum install -y nginx

NGINX를 설치합니다:
아직 설치하지 않은 경우:

 

 

 

2. Update NGINX Configuration:

2. NGINX 구성 업데이트:
NGINX 구성 파일을 편집합니다:

  • Edit the NGINX configuration file:
sudo nano /etc/nginx/nginx.conf

 

Add a server block to route requests to your Next.js app:

서버 블록을 추가하여 요청을 Next.js 앱으로 라우팅합니다:

server {
    listen 80;

    server_name your-domain.com;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

 

3. Restart NGINX:

  • Restart the NGINX service to apply changes:
sudo systemctl restart nginx

3. NGINX를 재시작합니다:
변경 사항을 적용하려면 NGINX 서비스를 재시작합니다:

6. Secure Your Application

  1. Add a Domain Name:
    • Point your domain name to your EC2 instance using an Elastic IP.
  2. Install an SSL Certificate:
    • Use Certbot to enable HTTPS:
sudo amazon-linux-extras enable epel
sudo yum install -y certbot python3-certbot-nginx
sudo certbot --nginx -d your-domain.com -d www.your-domain.com

 

6. 애플리케이션 보안
도메인 이름을 추가합니다:

1.Elastic IP를 사용하여 도메인 이름을 EC2 인스턴스로 가리키세요.
2.SSL 인증서를 설치합니다:
Certbot을 사용하여 HTTPS를 활성화합니다:

7. Monitor and Scale

  • Use CloudWatch to monitor your EC2 instance's health and performance.
  • If traffic increases, consider autoscaling or moving to a containerized setup with AWS Elastic Beanstalk or Fargate.

By following these steps, your Next.js application will be live on AWS and accessible to users.

 

7. 모니터링 및 확장
CloudWatch를 사용하여 EC2 인스턴스의 상태와 성능을 모니터링하세요.
트래픽이 증가하면 자동 확장하거나 AWS Elastic Beanstalk 또는 Fargate를 사용하여 컨테이너화된 설정으로 이동하는 것을 고려하세요.
이 단계를 수행하면 Next.js 애플리케이션이 AWS에서 실행되고 사용자가 액세스할 수 있습니다.