Gatsby 애플리케이션을 DigitalOcean 애플리케이션 플랫폼에 배포하는 방법

Gatsby 애플리케이션을 DigitalOcean 애플리케이션 플랫폼에 배포하는 방법

2022-06-01 last update

31 minutes reading Development GatsbyJS JavaScript
저자는 /dev/colorWrite for DOnations 계획의 일부로 기부를 받았다.

소개


이 강좌에서는 Digital Ocean의 GatsbyApp Platform 응용 프로그램을 배치합니다.응용 프로그램 플랫폼은 Platform as a Service으로 응용 프로그램을 자동으로 구축, 배치, 관리할 수 있다.Gatsby 등 static site generator의 속도와 결합할 때 이것은 서버 프로그래밍이 필요 없는 확장 가능한 JAMStack 솔루션을 제공합니다.
이 강좌에서 로컬 컴퓨터에 예시적인Gatsby 프로그램을 만들고 코드를 GitHub으로 전송한 다음 응용 프로그램 플랫폼에 배치합니다.

선결 조건


  • 로컬 컴퓨터에서는 Node.js을 실행하는 개발 환경이 필요하다.이 강좌는 노드에서 테스트를 진행하였다.js버전 14.16.0과 npm버전 6.14.11.macOS나 Ubuntu 20.04에 이 소프트웨어를 설치하려면 How to Install Node.js and Create a Local Development Environment on macOS의 절차 또는 How To Install Node.js on Ubuntu 20.04의 PPA 사용 부분에 따라 설치하십시오.

  • Git을 로컬 컴퓨터에 설치합니다.자습서 Contributing to Open Source: Getting Started with Git에 따라 컴퓨터에 Git를 설치하고 설정할 수 있습니다.

  • GitHub의 계정으로 Create your Account page에 액세스하여 계정을 만들 수 있습니다.

  • A DigitalOcean account .

  • Gatsby CLI tool이 로컬 컴퓨터에 다운로드되었습니다.Step 1 of the How To Set Up Your First Gatsby Website 강좌에서 이 동작을 어떻게 실행하는지 배울 수 있습니다.

  • JavaScript를 이해하면 유용합니다.JavaScript에 대한 자세한 내용은 How To Code in JavaScript series에서 확인할 수 있습니다.React를 이해하지 않아도 시작할 수 있지만 기본 개념을 익히는 것이 도움이 됩니다.learn React with this series을 선택할 수 있습니다.
  • 단계 1 - 개츠비 프로젝트 만들기


    이 절에서 예시Gatsby 응용 프로그램을 만들고 나중에 App Platform에 배치합니다.
    먼저 GitHub 클론에서 기본 Gatsby starter 를 사용합니다.터미널에서 다음 명령을 사용하여 이 작업을 수행할 수 있습니다.
    1. git clone https://github.com/gatsbyjs/gatsby-starter-default
    게이츠비 입문 사이트는 응용 프로그램 작성에 필요한 샘플 코드를 제공합니다.개츠비 응용 프로그램 만들기에 대한 자세한 내용은 How To Set Up Your First Gatsby Website을 보십시오.cd 클론을 gatsby-starter-default 디렉토리로 재구매한 후 다음을 수행합니다.
    1. cd gatsby-starter-default
    그리고 노드 종속 항목을 설치합니다.
    1. npm install
    응용 프로그램을 다운로드하고 종속 항목을 설치한 후 텍스트 편집기에서 다음 파일을 엽니다.
    1. nano gatsby-config.js
    방금 Gatsby’s config file을 열었습니다.여기서 사이트의 메타데이터를 변경할 수 있습니다.title키로 이동하여 Gatsby Default StarterSave the Whales으로 변경합니다. 아래 강조 표시된 줄과 같습니다.
    개츠비 이니시에이터 기본값/개츠비 구성.회사 명
    module.exports = {
      siteMetadata: {
        title: `Save the Whales`,
        description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author: `@gatsbyjs`,
      },
      plugins: [
        `gatsby-plugin-react-helmet`,
        {
          resolve: `gatsby-source-filesystem`,
          options: {
            name: `images`,
            path: `${__dirname}/src/images`,
          },
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
          resolve: `gatsby-plugin-manifest`,
          options: {
            name: `gatsby-starter-default`,
            short_name: `starter`,
            start_url: `/`,
            background_color: `#663399`,
            theme_color: `#663399`,
            display: `minimal-ui`,
            icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
          },
        },
        // this (optional) plugin enables Progressive Web App + Offline functionality
        // To learn more, visit: https://gatsby.dev/offline
        // `gatsby-plugin-offline`,
      ],
    }
    
    파일을 닫고 저장합니다.원하는 텍스트 편집기에서 색인 파일을 엽니다.
    1. nano src/pages/index.js
    '고래 구하기'테마를 계속하려면 Hi peopleAdopt a whale today으로, Welcome to your new Gatsby site.Whales are our friends.으로 변경하고 마지막 <p> 태그를 삭제하십시오.
    gatsby starter 기본값/src/페이지/인덱스.회사 명
    import React from "react"
    import { Link } from "gatsby"
    import { StaticImage } from "gatsby-plugin-image"
    
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const IndexPage = () => (
      <Layout>
        <SEO title="Home" />
        <h1>Adopt a whale today</h1>
        <p>Whales are our friends.</p>
        <StaticImage
          src="../images/gatsby-astronaut.png"
          width={300}
          quality={95}
          formats={["AUTO", "WEBP", "AVIF"]}
          alt="A Gatsby astronaut"
          style={{ marginBottom: `1.45rem` }}
        />
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </Layout>
    )
    
    export default IndexPage
    
    파일을 저장하고 닫습니다.너는 게츠비 우주인의 그림을 고래의 GIF 이미지로 대체할 것이다.GIF를 추가하기 전에 GIF 디렉토리를 만들고 다운로드해야 합니다.src 디렉토리로 이동하여 gifs 파일을 만듭니다.
    1. cd src/
    2. mkdir gifs
    새로 만든 gifs 폴더로 이동합니다.
    1. cd gifs
    다운로드 a whales GIF from Giphy:
    1. wget https://media.giphy.com/media/lqdJsUDvJnHBgM82HB/giphy.gif
    Wget은 인터넷에서 파일을 다운로드할 수 있는 실용적인 도구입니다.Giphy은 GIF를 관리하는 사이트입니다.
    다음은 giphy.gif에서 whales.gif으로 이름을 변경합니다.
    1. mv giphy.gif whales.gif
    GIF 이름을 변경하면 항목의 루트 폴더로 이동한 다음 색인 파일을 다시 엽니다.
    1. cd ../..
    2. nano src/pages/index.js
    이제 GIF를 사이트 홈 페이지에 추가합니다.StaticImage 가져오기 및 요소를 제거하고 다음 강조 표시된 행으로 대체합니다.
    gatsby starter 기본값/src/페이지/인덱스.회사 명
    import React from "react"
    import { Link } from "gatsby"
    
    import whaleGIF from "../gifs/whales.gif"
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    
    const IndexPage = () => (
      <Layout>
        <SEO title="Home" />
        <h1>Adopt a whale today</h1>
        <p>Whales are our friends.</p>
        <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
            <img src={whaleGIF} alt="Picture of Whale from BBC America" />
        </div>
        <Link to="/page-2/">Go to page 2</Link> <br />
        <Link to="/using-typescript/">Go to "Using TypeScript"</Link>
      </Layout>
    
    여기서 고래 GIF를 가져오고 <div> 요소 사이의 이미지 태그에 포함합니다.alt은 카드 리더기 GIF의 출처를 알려 줍니다.
    색인 파일을 닫고 저장합니다.
    이제 사이트가 제대로 작동하는지 확인하기 위해 로컬에서 실행됩니다.프로젝트의 루트 디렉터리에서 개발 서버를 실행하려면:
    1. gatsby develop
    사이트가 구축되면 localhost:8000을 브라우저의 검색 표시줄에 넣습니다.브라우저에서 다음 렌더링 내용을 찾을 수 있습니다.

    이 섹션에서 Gatsby 응용 프로그램의 예시를 만들었습니다.다음 절에서는 App Platform이 액세스할 수 있도록 코드를 GitHub로 전송합니다.

    2단계 - 코드를 GitHub로 밀어넣기


    이 강좌의 이 부분에서 코드를 git에 제출하고 GitHub으로 업그레이드합니다.그곳에서 Digital Ocean의 응용 프로그램 플랫폼은 귀하의 사이트 코드를 방문할 수 있습니다.
    프로젝트의 루트 디렉터리로 이동하여 새 git 저장소를 만듭니다.
    git init
    
    다음에 수정된 모든 파일을git에 추가합니다.
    1. git add .
    마지막으로 다음 명령을 사용하여 모든 변경 사항을 git에 커밋합니다.
    1. git commit -m "Initial Commit"
    이것은git 버전 제어에 이 버전의 프로그램을 제출합니다.-m은 문자열 매개 변수를 받아들여 제출한 메시지로 사용합니다.
    참고: 이전에 이 컴퓨터에 git를 설정하지 않았다면 다음 출력을 받을 수 있습니다.
    *** Please tell me who you are.
    
    Run
    
      git config --global user.email "[email protected]"
      git config --global user.name "Your Name"
    
    to set your account's default identity.
    Omit --global to set the identity only in this repository.
    
    계속하기 전에 이 정보를 제공하기 위해 두 개의 git config 명령을 실행하십시오.git에 대한 더 많은 정보를 알고 싶으시면 저희 How To Contribute to Open Source: Getting Started with Git 강좌를 보십시오.
    다음 출력을 받게 됩니다.
    Output
    [master 1e3317b] Initial Commit 3 files changed, 7 insertions(+), 13 deletions(-) create mode 100644 src/gifs/whales.gif
    파일을 제출한 후 GitHub로 이동하여 로그인합니다.로그인 후, create a new repository은 게이츠비 디지털 해양 응용 프로그램 플랫폼에 전화를 걸었다.저장소를 개인 또는 공용으로 설정할 수 있습니다.

    새 repo를 만들면 명령줄로 돌아가서 원격 repo 주소를 추가합니다.
    1. git remote set-url origin https://github.com/your_name/gatsby-digital-ocean-app-platform
    GitHub에서 your_name을 사용자 이름으로 변경해야 합니다.
    다음을 사용하여 main 브랜치로 전송할 것을 선언합니다.
    1. git branch -M main
    마지막으로 코드를 새로 만든 재구매로 밀어넣습니다.
    1. git push -u origin main
    자격 증명을 입력하면 다음과 같은 내용이 출력됩니다.
    Output
    Counting objects: 3466, done. Compressing objects: 100% (1501/1501), done. Writing objects: 100% (3466/3466), 28.22 MiB | 32.25 MiB/s, done. Total 3466 (delta 1939), reused 3445 (delta 1926) remote: Resolving deltas: 100% (1939/1939), done. To https://github.com/your_name/gatsby-digital-ocean-app-platform * [new branch] main -> main Branch 'main' set up to track remote branch 'main' from 'origin'.
    이제 GitHub 계정의 코드를 액세스할 수 있습니다.
    이 섹션에서는 코드를 원격 GitHub 저장소로 푸시합니다.다음 절에서는 GitHub에서 Gatsby 응용 프로그램을 응용 프로그램 플랫폼에 배치합니다.

    3단계 - Digital Ocean 애플리케이션 플랫폼에 Gatsby 애플리케이션 배포


    이 단계에서 Digital Ocean 응용 프로그램 플랫폼에 응용 프로그램을 배치할 것입니다.DigitalOcean account이 생성되지 않은 경우
    DigitalOcean control panel을 열고 화면 상단의 만들기 버튼을 선택한 다음 드롭다운 메뉴에서 적용을 선택합니다.

    응용 프로그램을 선택하면 GitHub에서 저장소를 읽어들입니다.GitHub 아이콘을 클릭하고 Digital Ocean에 저장소에 대한 액세스 권한을 부여합니다.Best Practice는 배포할 저장소만 선택하는 것입니다.

    Digital Ocean으로 리디렉션됩니다.Repository 필드로 이동하여 배포할 항목과 지점을 선택하고 Next 를 클릭합니다.

    주의: 지점 아래에 자동 배치 코드 변경을 나타내는 예선 상자가 있습니다.이것은 모든 변경 사항을 GitHub 저장소로 전송하면 Digital Ocean이 자동으로 이 변경 사항을 배치한다는 것을 의미합니다.
    다음 페이지에서는 응용 프로그램을 설정해야 합니다.이 경우 모든 사전 설정이 올바르므로 다음을 클릭할 수 있습니다.

    응용 프로그램을 구성한 후 이름을 지정합니다. 예를 들어 고래 구하기:

    이름을 선택하고 다음을 클릭하면 결제 계획 페이지로 이동합니다.응용 프로그램이 정적 사이트이기 때문에 시작 계획을 선택할 수 있습니다. 이 계획은 무료입니다.

    이제 Starter 응용 프로그램 시작 버튼을 클릭합니다.몇 분을 기다린 후에 응용 프로그램을 배치할 것입니다.
    응용 프로그램 제목 아래에 나와 있는 URL로 이동합니다.게이츠비 프로그램이 성공적으로 배치되었음을 발견할 수 있습니다.

    결론


    이 강좌에서 GIF를 사용하여Gatsby 사이트를 만들고 이 사이트를 DigitalOcean App Platform에 배치합니다.Digital Ocean 응용 프로그램 플랫폼은 개츠비 프로젝트를 배치하고 공유하는 간편한 방식이다.이 제품에 대한 자세한 내용은 official documentation for App Platform을 참조하십시오.