Netlify에 Next.js 앱 배포 [개인 블로그 웹사이트 구축 4부]

"개인 블로그 웹사이트 구축하기"시리즈의 네 번째 파트입니다. 이 시리즈에서는 Railway에 블로그 콘텐츠를 보관할 무료 CMS를 설정하고 Next.js의 정적 사이트 생성 및 TailwindCSS를 사용하여 기사를 표시하고 Netlify에서 호스팅하는 React 앱을 만듭니다.

모든 기사:



이제 드디어 앱을 온라인에 올릴 시간입니다!

먼저 Git 리포지토리(Next.js 앱을 만드는 동안 자동으로 생성)를 GitHub에 푸시해야 합니다. github.com으로 이동하여 로그인합니다(아직 하지 않았다면 계정을 만드십시오). 오른쪽 상단 모서리를 클릭하여 새 저장소를 만듭니다.



이름을 추가하고 리포지토리를 비공개로 할지 공용으로 할지 결정하고 만들기를 클릭합니다. 당신은 이런 것을 볼 수 있습니다



이제 터미널로 이동하여 앱의 루트 폴더에서 모든 파일을 커밋합니다(환경 변수를 .env 파일에 넣은 다음 .gitignore 에 추가해야 함). 이제 리포지토리를 GitHub에 푸시해 보겠습니다.

git remote add origin YOUR_GITHUB_REPOSITORY
git push -u origin main

완료되면 GitHub에서 파일을 볼 수 있어야 합니다.



이제 Netlify에 배포할 준비가 되었습니다. netlify.com로 이동하여 로그인합니다. GitHub로 로그인하는 것이 좋습니다. 새 사이트를 만들 수 있는 대시보드로 이동해야 합니다.



"기존 프로젝트 가져오기"를 선택한 다음 GitHub에 연결하고 리포지토리를 선택합니다.



다음과 같은 내용이 표시되어야 합니다.



모든 기본값을 그대로 두고 사이트 배포를 클릭합니다. 배포가 진행 중임을 알 수 있습니다. 완료될 때까지 몇 분 정도 기다리십시오.




배포가 실패한 경우 실패한 배포를 클릭하고 다시 시도하십시오. 철도는 때때로 처음에 연결을 거부하는 문제가 있습니다.




완료되면 새 웹사이트의 주소가 표시됩니다.



이 주소로 이동하면 온라인에서 작업을 볼 수 있습니다!



이제 저장소에 무언가를 푸시할 때마다 Netlify가 자동으로 앱을 다시 빌드합니다. 기억하다! CMS에서 무언가를 변경해도 재구축이 트리거되지 않으므로 새로운 콘텐츠를 원할 경우 Netlify 대시보드의 배포 탭에서 수동으로 Netlify에서 앱을 재구축해야 합니다.



이 자동 재구축이 작동하는 것을 보기 위해 사이트 레이아웃을 약간 변경해 보겠습니다.

현재 귀하의 사이트에 부족한 것은 멋진 내비게이션 바, 기본 바닥글 및 일부 모바일용 반응 조정입니다. components 디렉터리에 두 개의 새 구성 요소를 만듭니다.
Navbar.jsx

import Link from "next/link";
import React from "react";

const Navbar = () => {
  return (
    <nav className="z-0 w-full">
      <div className="z-10 bg-blue-500 shadow">
        <div className="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8">
          <div className="flex flex-col sm:flex-row items-center justify-between gap-4 p-2 font-mono">
            <Link href="/">
              <a className="flex-shrink-0">
                <h1 className="font-bold text-xl uppercase text-white">
                  My Personal Blog
                </h1>
              </a>
            </Link>
            <div>
              <div className="flex gap-2">
                <Link href="/">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    Home
                  </a>
                </Link>
                <Link href="/about">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    About
                  </a>
                </Link>
                <Link href="/contect">
                  <a className="px-3 py-2 text-sm font-medium text-white hover:underline hover:underline-offset-4 hover:text-white hover:font-bold transition duration-150 ease-in-out cursor-pointer focus:outline-none focus:text-white focus:bg-gray-700 ">
                    Contact
                  </a>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;

및 Footer.jsx

import React from "react";

const Footer = () => {
  return (
    <footer className="bg-blue-500 py-8 w-full">
      <div className="flex flex-wrap justify-center">
        <div className="text-sm text-white font-mono font-semibold py-1">
          Copyright © YOUR_NAME 2022
        </div>
      </div>
    </footer>
  );
};

export default Footer;

이제 새로 생성된 구성 요소를 사용하도록 pages/_app.js 파일을 조정하십시오.

function MyApp({ Component, pageProps }) {
  return (
    <div className="flex flex-col items-center bg-white">
      <Navbar />
      <Component {...pageProps} />
      <Footer />
    </div>
  );
}

마지막으로 pages/index.js를 약간 변경하여 다양한 화면 해상도에서 게시물 목록을 더 잘 표시합니다.

export default function Home({ posts }) {
  return (
    <section className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 my-8 mx-4">
      {posts.map((post) => (
        <BlogPostPreview post={post} key={post.attributes.slug} />
      ))}
    </section>
  );
}

이제 모든 파일을 커밋하고 변경 사항을 GitHub에 푸시합니다.

git push

몇 분 정도 기다렸다가 Netlify에서 호스팅되는 웹사이트를 확인하세요.



더 좋아 보이지 않나요?

오늘은 여기까지입니다. 귀하의 웹사이트가 어딘가로 이동하기 시작합니다! 시리즈의 다음 부분에서는 특정 태그 기능에 대한 간단한 모든 게시물 표시를 구현합니다. 그때 만나!