마카로닉스

2249 No

★리액트 넥스트 NextJS 앱 배포하기 ,

2024-07-01 14:32:58 By 라이트 0 188 댓글수 0 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

1.환경변수와 Next.js 구성

공식문서 :

https://nextjs.org/docs/app/api-reference/next-config-js

환경변수는 개발 및 프로덕션 단계에서 다양한 코드 값을 사용할 수 있도록 도와주는 유용한 기능입니다. Next.js는 이러한 환경변수를 기본적으로 지원합니다. 환경변수를 이해하기 위해서는 Next.js의 구성을 먼저 살펴봐야 합니다.

Next.js 구성 파일: next.config.js

Next.js 프로젝트에서 설정을 변경하려면 루트 폴더에 next.config.js 파일을 추가해야 합니다. 이 파일은 JavaScript 객체를 Node.js의 내보내기 구문을 통해 내보내어 다양한 구성을 할 수 있도록 합니다. 예를 들어, basePath, rewrites, redirects, Webpack 구성 등 여러 설정을 변경할 수 있습니다.

next.config.js

module.exports = {
  env: {
    mongodb_username: "maximilian",
    mongodb_password: "password123",
    mongodb_clustername: "cluster0",
    mongodb_database: "my-site",
    appName: "my-site-dev"
  },
};

환경변수 설정

next.config.js 파일에서 env 키를 사용하여 환경변수를 설정할 수 있습니다. 예를 들어, MongoDB 연결 문자열에 필요한 정보를 환경변수로 설정할 수 있습니다. 이렇게 설정된 환경변수는 코드 내에서 process.env를 통해 접근할 수 있습니다.

const connectionString = `mongodb+srv://${process.env.mongodb_username}:${process.env.mongodb_password}@${process.env.mongodb_clustername}/${process.env.mongodb_database}?retryWrites=true&w=majority&appName=${process.env.appName}`;

단계별 환경변수 설정

Next.js는 개발 단계와 프로덕션 단계에서 다른 환경변수를 사용할 수 있도록 지원합니다. 이를 위해 next.config.js 파일에서 단계별 구분을 추가할 수 있습니다.

const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');


module.exports = (phase) => {
  if (phase === PHASE_DEVELOPMENT_SERVER) {
    return {
      env: {
        mongodb_username: "dev_username",
        mongodb_password: "dev_password",
        mongodb_clustername: "dev_cluster0",
        mongodb_database: "my-site-dev",
        appName: "my-site-dev"
      },
    };
  }
 
  return {
    env: {
      mongodb_username: "prod_username",
      mongodb_password: "prod_password",
      mongodb_clustername: "prod_cluster0",
      mongodb_database: "my-site",
      appName: "my-site-real"
    },
  };
};


//const url = 'mongodb+srv://macaronics:jVPUh2tTjjP5MuQ5@mongo-macaronics.y37mjuf.mongodb.net/nextjsex2Blog?retryWrites=true&w=majority&appName=mongo-macaronics';

이렇게 설정하면 개발 단계에서는 my-site-dev 데이터베이스를, 프로덕션 단계에서는 my-site 데이터베이스를 사용하게 됩니다. 이를 통해 개발과 프로덕션 환경에서 다른 설정을 사용할 수 있으며, 실수로 프로덕션 데이터를 덮어쓰거나 훼손하는 경우를 방지할 수 있습니다.

요약

환경변수는 개발과 프로덕션 단계에서 다른 값을 사용할 수 있게 하여 코드의 유연성을 높여줍니다. next.config.js 파일을 통해 환경변수를 설정하고, 단계별로 다른 설정을 적용하여 안전하고 효율적인 개발 환경을 구축할 수 있습니다.

2.로컬 머신에서 테스트 빌드

빌드 실행

터미널을 열고 npm run build 명령어를 실행하여 프로덕션 최적화 빌드를 생성합니다.
빌드가 완료되면 터미널에 각 페이지의 빌드 정보가 표시됩니다. 서버용으로 구축된 페이지와 100% 정적인 페이지가 구분되어 표시됩니다.
일부 페이지는 용량이 커서 경고가 표시될 수 있습니다. 예를 들어, 게시물 상세 페이지의 용량이 큰 경우 경고가 나타날 수 있습니다.

용량 문제 해결

문제가 되는 페이지를 확인합니다. 예를 들어, [slug].js 페이지의 경우 클라이언트 사이드 코드에 영향을 미치지 않는 서버 사이드 코드가 포함되어 있을 수 있습니다.
post-content.js 컴포넌트를 확인하여 서드 파티 패키지의 용량을 검토합니다. ReactMarkdown과 SyntaxHighlighter 등의 패키지가 포함된 경우가 있습니다.
react-syntax-highlighter 패키지의 용량이 큰 경우, 라이트 빌드를 사용하여 용량을 줄일 수 있습니다.

다음과 같이 용량이 큰 라이브러리를 사용한 경우에는 해당 라이브러리를 npmjs 에서 찾아서 가벼운 라이브러리로 변경해 준다

https://www.npmjs.com/package/react-syntax-highlighter

post-content.js

import ReactMarkdown from 'react-markdown';
import Image from 'next/image';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { atomDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

import PostHeader from './post-header';
import classes from './post-content.module.css';

function PostContent(props) {
  const { post } = props;

  const imagePath = `/images/posts/${post.slug}/${post.image}`;

  const customRenderers = {
    // img(image) {
    //   return (
    //     <Image
    //       src={`/images/posts/${post.slug}/${image.src}`}
    //       alt={image.alt}
    //       width={600}
    //       height={300}
    //     />
    //   );
    // },
    p(paragraph) {
      const { node } = paragraph;

      if (node.children[0].tagName === 'img') {
        const image = node.children[0];

        return (
          <div className={classes.image}>
            <Image
              src={`/images/posts/${post.slug}/${image.properties.src}`}
              alt={image.alt}
              width={600}
              height={300}
            />
          </div>
        );
      }

      return <p>{paragraph.children}</p>;
    },

    code(code) {
      const { className, children } = code;
      const language = className.split('-')[1]; // className is something like language-js => We need the "js" part here
      return (
        <SyntaxHighlighter
          style={atomDark}
          language={language}
          children={children}
        />
      );
    },
  };

  return (
    <article className={classes.content}>
      <PostHeader title={post.title} image={imagePath} />
      <ReactMarkdown components={customRenderers}>{post.content}</ReactMarkdown>
    </article>
  );
}

export default PostContent;

===>

import ReactMarkdown from 'react-markdown';
import Image from 'next/image';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark';

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';

import PostHeader from './post-header';
import classes from './post-content.module.css';

// Register the languages
SyntaxHighlighter.registerLanguage('js', js);
SyntaxHighlighter.registerLanguage('css', css);


~

1)라이트 빌드 사용

PrismLight와 특정 스타일을 임포트합니다

import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import atomDark from 'react-syntax-highlighter/dist/cjs/styles/prism/atom-dark';

2)필요한 언어만 선택하여 임포트합니다

import js from 'react-syntax-highlighter/dist/cjs/languages/prism/javascript';
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';

// Register the languages
SyntaxHighlighter.registerLanguage('js', js);
SyntaxHighlighter.registerLanguage('css', css);

변경 사항을 저장하고 npm run build를 다시 실행합니다.
빌드 결과를 확인하여 용량이 줄어들었는지 확인합니다.

웹사이트 테스트

npm run dev를 실행하여 개발 서버를 가동하고, 변경 사항으로 인해 문제가 발생하지 않았는지 확인합니다.
게시물 페이지 등에서 코드 하이라이트가 정상적으로 작동하는지 확인합니다.

요약

npm run build 명령어를 통해 프로덕션 최적화 빌드를 생성하고 빌드 결과를 확인합니다.
서드 파티 패키지의 용량 문제를 해결하기 위해 라이트 빌드를 사용합니다.
필요한 언어만 선택하여 임포트하여 용량을 최적화합니다.
빌드 후 웹사이트를 테스트하여 변경 사항이 정상적으로 작동하는지 확인합니다.
용량 최적화와 코드 검증을 통해 애플리케이션의 배포 준비를 완료합니다.

3. Next.js 애플리케이션 배포 요약

빌드 준비:
- npm run build 명령어를 실행하여 프로젝트를 빌드합니다. .next 폴더가 생성되고, 프로덕션 빌드 파일이 포함됩니다.
로컬 프로덕션 서버 테스트:
- npm start 명령어를 실행하여 로컬에서 프로덕션 서버를 실행하고, localhost:3000에서 애플리케이션이 제대로 작동하는지 확인합니다.
코드 버전 관리 설정:
- Git을 설치하고 초기화 (git init).
- 프로젝트 파일을 스테이징하고 커밋 (git add .와 git commit -m "Initial commit").
GitHub에 코드 푸시:
- GitHub에 저장소를 생성.
- 로컬 저장소와 원격 저장소를 연결 (git remote add origin [URL]).
- 코드를 푸시 (git push origin main).
Vercel을 사용한 배포:
- Vercel 계정을 생성하고 GitHub와 연동.
- Vercel에서 새로운 프로젝트를 생성하고 GitHub 저장소를 임포트.
- 환경 변수와 빌드 설정을 검토하고 배포 (Deploy 버튼 클릭).
자동 재배포:
- 코드 변경 후 GitHub에 푸시하면 Vercel이 자동으로 재배포.
- 예: 변경 후 git add ., git commit -m "Update message", git push origin main.
MongoDB Atlas와 연결:
- MongoDB Atlas의 네트워크 접근 설정에서 모든 IP의 연결을 허용하여 배포된 애플리케이션이 데이터베이스에 접근할 수 있게 합니다.

주요 단계 및 명령어 정리

빌드 및 로컬 테스트:

npm run build
npm start

Git 초기화 및 커밋:

git init
git add .
git commit -m "Initial commit"

GitHub 저장소 연결 및 푸시:

git remote add origin [GitHub URL]
git push origin main

Vercel 배포:
- Vercel에서 GitHub 저장소를 임포트하여 배포 설정.
코드 변경 후 자동 재배포:

git add .
git commit -m "Update message"
git push origin main

MongoDB Atlas 네트워크 설정:
- MongoDB Atlas의 네트워크 접근에서 모든 IP 허용.

위의 과정을 통해 Next.js 애플리케이션을 효과적으로 배포하고 관리할 수 있습니다. Vercel과 GitHub를 사용하면 배포 과정이 간단하고 자동화되어 생산성을 높일 수 있습니다.

1. Vercel

Vercel은 Next.js 개발 팀에서 만든 플랫폼으로 빌드, 배포, 호스팅 서비스를 제공합니다 ¹. Vercel의 가장 큰 장점은 기본적으로 HTTPS와 CDN이 적용된 상태로 배포되며, git repository에 연결하면 변경된 코드를 메인 브랜치에 병합 시 코드를 빌드 후 배포해주기 때문에 CI/CD 자동화에 대한 환경을 고려하지 않아도 됩니다 ².

비상업적 용도로 사용할 경우, Vercel은 무료로 사용할 수 있습니다 ². 하지만 무료 요금제에는 몇 가지 제약사항이 있습니다 ²:

하루 최대 100회 배포
월간 사용 가능한 대역폭 (Bandwidth) 최대 100GB
프로젝트 당 도메인 50개 제한

팀 Repository를 Vercel에 배포하는 경우에는 유료 결제가 들어간다고 합니다 ¹. 자세한 내용은 Vercel 홈페이지에서 확인하실 수 있습니다 ².

2.netlify

Netlify는 웹 애플리케이션 및 정적 웹사이트를 위한 호스팅 및 서버리스 백엔드 서비스를 제공하는 플랫폼입니다 ¹. Netlify는 깃허브(Github), 깃랩(GitLab) 등과 계정 연동 및 쉬운 호스팅을 제공하고 CDN, Continuous Deployment(지속적 배포), One-Click HTTPS 제공 등 고성능 사이트 / 웹 응용 프로그램을 제작하는데 필요한 쉽고 빠른 다양한 서비스들을 제공합니다 ².

Netlify의 가격은 다음과 같습니다:

자세한 내용은 Netlify 홈페이지에서 확인하실 수 있습니다

Netlify의 트래픽 및 용량에 따른 가격 정보는 다음과 같습니다:

이 외에도 Netlify는 다양한 추가 기능을 제공하며, 이에 따라 가격이 달라질 수 있습니다 ². 자세한 내용은 Netlify의 공식 웹사이트에서 확인하실 수 있습니다

Netlify의 유료 요금제는 다음과 같습니다:

추가적으로, 멤버 추가, 대역폭 추가, 빌드 시간 추가 등의 추가 기능에 대한 비용이 발생할 수 있습니다 ¹. 자세한 내용은 Netlify의 공식 웹사이트에서 확인하실 수 있습니다 ¹.

React

★리액트 넥스트 NextJS 앱 배포하기 ,

PHRASE

Level 60 라이트

댓글 ( 0)

댓글 남기기

Categories

React Recent List more

Tags Widget

Welcome

React 목록 more

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30