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

튜토리얼
JavaScript React

저자는 크리에이티브 커먼즈를 기부 대상으로 선택하여 기부를 위한 글쓰기 프로그램의 일환으로 받았습니다.

참고: 이 자습서는 React 및 App 플랫폼을 사용하여 정적 자산 및 사이트를 배포하는 방법을 보여줍니다. React 애플리케이션에 동적 백엔드 코드가 있는 경우 공식 문서의 App 플랫폼 React 샘플을 확인하십시오.

소개

디지털오션의 앱 플랫폼은 소스 저장소에서 응용 프로그램을 구성하고 배포할 수 있는 플랫폼 서비스 (PaaS) 제품입니다. 응용 프로그램을 구성한 후에는 DigitalOcean이 모든 변경 사항에 대해 응용 프로그램을 빌드하고 배포하여 최소한의 구성으로 완전한 웹 서버 및 배포 파이프라인의 이점을 제공합니다. 이는 React 애플리케이션을 배포하는 빠르고 효율적인 방법일 수 있으며, 백엔드가 없는 사이트를 빌드하는 데 React를 사용하는 경우 App 플랫폼의 무료 티어를 사용할 수 있습니다.

이 튜토리얼에서는 무료 스타터 티어를 사용하여 React 애플리케이션을 DigitalOcean 앱 플랫폼에 배포할 것입니다. Create React App으로 애플리케이션을 빌드하고 코드를 GitHub 리포지토리에 푸시한 다음, 애플리케이션을 DigitalOcean 앱으로 구성할 것입니다. 앱을 소스 코드에 연결하고 프로젝트를 일련의 정적 파일로 배포할 것입니다.

이 튜토리얼을 마치면 React 애플리케이션을 GitHub 리포지토리의 메인 브랜치로 푸시할 때마다 자동으로 배포하도록 구성할 수 있을 것입니다.

필수 사항

단계 1 — 리액트 프로젝트 생성

이 단계에서는 Create React App을 사용하여 리액트 애플리케이션을 생성하고 배포 가능한 버전을 빌드하게 됩니다.

시작하려면 로컬 머신에서 Create React App을 사용하여 새 응용 프로그램을 만듭니다. 터미널에서 다음 명령을 실행하여 digital-ocean-app라는 응용 프로그램을 빌드합니다:

  1. npx create-react-app digital-ocean-app

npx 명령은 머신에 다운로드하지 않고 Node 패키지를 실행합니다. create-react-app 스크립트는 모든 종속성을 설치하고 digital-ocean-app 디렉터리에 기본 프로젝트를 빌드합니다. Create React App에 대한 자세한 내용은 튜토리얼 How To Set Up a React Project with Create React App을 확인하십시오.

코드가 종속성을 다운로드하고 기본 프로젝트를 만듭니다. 완료까지 시간이 걸릴 수 있습니다. 완료되면 성공 메시지가 표시됩니다. 사용하는 경우 버전이 약간 다를 수 있습니다 yarn 대신 npm을 사용할 경우:

Output
Success! Created digital-ocean-app at your_file_path/digital-ocean-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd digital-ocean-app
  npm start

Happy hacking!

기본 프로젝트가 준비되었으므로 서버에서 프로젝트가 어떻게 나타날지 테스트하기 위해 로컬로 실행합니다. 먼저 디렉토리로 이동하십시오:

  1. cd digital-ocean-app

npm start 스크립트를 사용하여 프로젝트를 실행합니다:

  1. npm start

명령을 실행하면 로컬 개발 서버의 URL이 포함된 출력을 받게됩니다:

Output
Compiled successfully!

You can now view digital-ocean-app in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.110:3000

Note that the development build is not optimized.
To create a production build, use npm build.

http://localhost:3000에 브라우저를 열고 프로젝트를 찾을 수 있습니다:

터미널에서 CTRL+C 또는 ⌘+C를 입력하여 프로젝트를 중지합니다.

이제 작동하는 React 애플리케이션이 있으므로 코드를 GitHub 저장소에 푸시할 수 있습니다.

단계 2 — 코드를 GitHub에 푸시하기

앱을 배포하려면, App Platform은 호스팅된 코드 저장소에서 소스 코드를 검색합니다. 이 단계에서는 React 앱 코드를 GitHub 저장소에 푸시하여 App Platform이 나중에 액세스할 수 있도록 합니다.

GitHub 계정에 로그인합니다. 로그인한 후에는 새 저장소를 만듭니다. 이름을 digital-ocean-app으로 지정합니다. 저장소를 비공개 또는 공개로 만들 수 있습니다:

Create React App은 프로젝트를 git으로 자동 초기화하므로 코드를 직접 GitHub에 푸시할 수 있습니다. 먼저 다음 명령을 사용하여 사용할 저장소를 추가합니다:

  1. git remote add origin https://github.com/your_name/digital-ocean-app.git

다음으로 다음과 같이 main 브랜치로 푸시하려는 것을 선언합니다:

  1. git branch -M main

마지막으로 코드를 저장소에 푸시합니다:

  1. git push -u origin main

코드를 푸시할 때 GitHub 자격 증명을 입력합니다.

코드를 푸시하면 성공 메시지가 표시됩니다. 메시지는 다소 다를 수 있습니다:

Output
Counting objects: 22, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (22/22), done.
Writing objects: 100% (22/22), 187.50 KiB | 6.94 MiB/s, done.
Total 22 (delta 0), reused 0 (delta 0)
To github.com:your_name/digital-ocean-app.git
   4011c66..647d2e1  main -> main

이제 코드를 GitHub 저장소에 복사했습니다.

이 단계에서는 프로젝트를 GitHub에 푸시하여 DigitalOcean Apps를 사용하여 액세스 할 수 있도록합니다. 다음으로 프로젝트를 사용하여 새 DigitalOcean 앱을 만들고 자동 배포를 설정합니다.

단계 3 — DigitalOcean 앱 플랫폼으로 배포

이 단계에서는 React 애플리케이션을 DigitalOcean 앱 플랫폼에 배포합니다. GitHub 리포지토리를 DigitalOcean에 연결하고 프로젝트를 빌드하도록 구성한 다음 초기 프로젝트를 빌드합니다. 프로젝트가 활성화되면 변경 사항마다 새로운 빌드가 트리거되고 업데이트됩니다.

이 단계를 완료하면 DigitalOcean에서 연속 전달을 사용하여 애플리케이션을 배포할 수 있습니다.

시작하려면 DigitalOcean 계정에 로그인하고 만들기 버튼을 누르고 앱을 선택하십시오:

다음으로 GitHub 리포지토리를 연결하라는 메시지가 표시됩니다. 아직 연결하지 않은 경우 사용자 이름과 암호로 로그인하여 DigitalOcean이 리포지토리에 액세스 할 수 있도록 허용해야합니다:

계정을 연결하면 GitHub 인증 화면에서 연결하려는 리포지토리를 선택하십시오. 이 경우 digital-ocean-app 리포지토리를 사용하지만 원하는 경우 더 많은 리포지토리를 연결할 수 있습니다:

저장소를 선택한 후, DigitalOcean 인터페이스에 다시 연결합니다. 저장소 목록에서 digital-ocean-app을 선택한 다음 다음을 누릅니다. 이렇게 하면 앱이 GitHub 저장소에 직접 연결됩니다:

이제 저장소를 선택했으므로 DigitalOcean 앱을 구성해야 합니다. 이 예제에서는 서버를 설정하기 위해 지역 필드에서 뉴욕을 선택하여 북미에 기반을 둘 것이며, 배포 브랜치는 메인입니다. 앱에 대해서는 물리적 위치에 가장 가까운 지역을 선택하십시오:

이 튜토리얼에서는 코드 변경 자동배포를 확인합니다. 이렇게 하면 코드를 업데이트할 때마다 앱이 자동으로 다시 빌드됩니다.

다음을 눌러 앱 구성 화면으로 이동합니다.

다음으로 실행할 애플리케이션 유형을 선택합니다. React는 정적 에셋을 빌드하므로 정적 사이트를 유형 필드의 드롭다운 메뉴에서 선택합니다.

참고: Create React App은 Gatsby와 같은 정적 사이트 생성기가 아니지만, 서버에서 Ruby나 PHP와 같은 서버 측 코드를 실행할 필요가 없으므로 정적 에셋을 사용합니다. 무료 티어에서는 응용 프로그램 코드를 실행하지 않습니다.

당신은 또한 사용자 정의 빌드 스크립트를 사용할 수도 있습니다. 그러나 이 경우에는 기본 npm run build 명령을 유지하십시오. 품질 보증(QA) 또는 프로덕션 환경을 위한 다른 빌드 스크립트가 있는 경우 사용자 정의 빌드 스크립트를 만들 수도 있습니다:

다음을 눌러 완료 및 시작 페이지로 이동하십시오.

여기서 가격 요금제를 선택할 수 있습니다. 무료 스타터 티어는 정적 사이트를 위해 제공되므로 해당 항목을 선택하십시오:

스타터 앱 시작 버튼을 누르면 DigitalOcean이 앱을 빌드하기 시작합니다.

앱은 귀하의 저장소에서 npm ci 및 npm build 스크립트를 실행할 것입니다. 이렇게 하면 모든 종속성이 다운로드되고 JavaScript, HTML 파일 및 기타 자산의 컴파일된 및 최소화된 버전이 있는 build 디렉터리가 생성됩니다. 또한 package.json에서 사용자 정의 스크립트를 만들고 앱 플랫폼의 명령어를 구성 요소 탭에서 업데이트할 수도 있습니다.

빌드가 실행되는 데 몇 분이 걸릴 수 있지만 완료되면 성공 메시지와 새 사이트에 대한 링크를 받게됩니다. 링크는 고유한 이름을 가지고 약간 다를 것입니다:

실시간 앱을 눌러 브라우저에서 프로젝트에 액세스할 수 있습니다. 로컬에서 테스트한 프로젝트와 동일하지만 이제 안전한 URL로 웹에서 실시간으로 사용할 수 있습니다:

이제 프로젝트가 구성되었으므로 연결된 저장소에 변경 사항을 가할 때마다 새 빌드를 실행합니다. 이 경우 main 브랜치에 변경 사항을 푸시하면 DigitalOcean이 자동으로 새 배포를 실행합니다. 로그인할 필요가 없습니다. 변경 사항을 푸시하는 즉시 실행됩니다:

이 단계에서 App Platform에서 새로운 DigitalOcean 앱을 생성했습니다. GitHub 계정을 연결하고 앱을 main 브랜치로 빌드하도록 구성했습니다. 애플리케이션을 구성한 후 애플리케이션을 변경할 때마다 새로운 빌드가 배포될 것임을 알게 되었습니다.

결론

DigitalOcean의 App Platform은 응용 프로그램을 신속하게 배포할 수 있는 편리한 도구를 제공합니다. 초기 설정을 수행한 후에는 변경 사항이 있을 때마다 앱이 자동으로 배포됩니다. 이를 React와 함께 사용하여 웹 애플리케이션을 신속하게 시작할 수 있습니다.

A possible next step for a project like this would be to change the domain name of the app. To do this, take a look at the official documentation for App Platform.

Source:
https://www.digitalocean.com/community/tutorials/how-to-deploy-a-react-application-to-digitalocean-app-platform