8가지 무료 React 앱 호스팅 서비스1 min read

따라서 React 앱을 구축했지만 이를 호스팅하는 방법과 위치를 잘 모르겠습니다. 이 기사에서는 8가지 무료 React 호스팅 서비스를 안내하고 배포 방법을 보여줍니다. 이 React 앱 각각을 사용하여 그 과정에서 배운 내용을 알려주세요.

우리는 다음을 사용하여 Figma에서 앱을 구축했습니다. Anima 기능, 반응형 동작, 리치 미디어를 추가할 수 있게 해주는 플러그인 전체 UI에 대해 개발 준비가 완료된 React 코드 내보내기. 설계하고 배포하는 데 하루가 걸렸습니다.

React 앱을 무료로 호스팅할 수 있는 곳

React와 같은 구성 요소 기반 프레임워크의 등장으로 인해 서버리스 호스팅 솔루션의 수가 점점 늘어나고 있습니다. Amazon AWS, Microsoft Azure 및 Google Cloud가 현재 지배적인 플랫폼입니다. 그러나 노력이 덜 필요하고 즉시 시작 및 실행할 수 있으며 대부분 CI/CD가 포함된 전용 프런트엔드 호스팅 서비스로의 전환이 증가하고 있습니다. 테스트한 8개의 무료 React 앱 호스팅 서비스는 다음과 같습니다.

1. 넷티파이

2. Vercel

3. AWS 증폭

4. 파이어베이스

5. GitHub 페이지

6. GitLab 페이지

7. 렌더링

8. 급증

무료 React 앱 호스팅 서비스에 대해 자세히 알아보고 각 서비스를 사용하여 React 앱을 배포한 방법을 보여드리겠습니다. 

넷티파이

배경

Netlify는 2014년에 설립되었으며 처음부터 정적 웹사이트 호스팅에 중점을 두었습니다. 넉넉한 무료 등급으로 인해 많은 개발자의 관심을 끌었습니다. 몇 년 후 Netlify는 가장 인기 있는 JAMstack 및 정적 웹 사이트 호스트 중 하나로 성장했습니다.

사용방법

1. 이상적으로는 GitHub로 등록하거나 로그인하는 것이 좋습니다. 이렇게 하면 프로필의 리포지토리에 액세스하고 신속하게 배포할 수 있습니다.
2. 로그인한 후 “새 사이트 추가”를 클릭하고 “기존 프로젝트 가져오기”를 선택하세요.
3. 그런 다음 공급자로 GitHub를 클릭하십시오.
4. “은행 웹사이트” 또는 프로젝트 이름을 선택하세요.
5. 배포 설정을 미세 조정한 다음(저희 웹사이트의 경우 기본값이 완벽하게 작동함) “사이트 배포”를 클릭하세요.
6. 배포되면 전 세계와 공유할 수 있는 공용 URL에서 볼 수 있습니다. 이야!

여기 Netlify에 배포된 라이브 앱.

장점과 단점

Netlify는 설정 및 배포가 쉬우며 여기서 테스트한 서비스 중 가장 빠른 서비스 중 하나입니다. 한 가지 단점은 공동작업자 및/또는 팀이 필요한 경우 유료 요금제로 업그레이드해야 한다는 것입니다.

Vercel

배경

Vercel(원래 Zeit)는 2015년에 설립되어 빠르게 명성을 얻었습니다. 이들은 웹사이트 구축을 위한 인기 있는 React 프레임워크인 Next.js의 관리자입니다. 비상업적 웹사이트에 무료 계층을 제공할 뿐만 아니라 서버리스 기능을 위해 Edge 네트워크를 사용하는 방법도 제공합니다.

사용방법

1. GitHub로 로그인하거나 등록하세요.
2. “새로 추가…” 드롭다운을 클릭하고 “프로젝트”를 선택합니다.                                                             
3. “은행 웹사이트” 또는 선호하는 React 프로젝트를 선택하세요.
4. 배포 설정에 기본값을 적용한 다음 “배포”를 클릭했습니다.
5. 얼마 후 우리는 웹사이트를 배포했습니다.

여기 라이브 URL.

장점과 단점

Vercel는 배포 과정 중 설치 부분을 캐시하는 데 시간이 좀 필요하지만 그 이후에는 가장 빠른 서비스 중 하나입니다. 푸시하는 모든 브랜치에 대한 미리보기 배포를 표시하고 캐싱 덕분에 빠르게 수행됩니다.

AWS 증폭

배경

AWS는 방대한 클라우드 제품 모음이며 Amplify는 이들 중 일부를 쉽게 얻을 수 있는 방법으로 광고됩니다. AWS Amplify를 사용하면 사용 사례가 발전함에 따라 광범위한 AWS 서비스를 활용할 수 있는 유연성을 통해 AWS에서 풀 스택 애플리케이션을 신속하게 구축, 제공 및 호스팅할 수 있습니다.

사용방법

1. AWS에 가입하거나 로그인한 다음 AWS Amplify를 검색하고 “시작하기”를 클릭하세요.
2. GitHub를 선택하고 승인합니다(저는 “은행 웹사이트” 저장소에만 허용했습니다).
3. “최근 업데이트된 저장소” 섹션에서 저장소를 선택합니다.
   1. 빌드 설정에서 기본 디렉토리 우리 앱이 거리 이렇게: 그런 다음 빌드 설정은 다음과 같아야 합니다.
4. 다음 단계에서 ‘저장 및 배포’를 클릭하세요.
5. 잠시 후 웹사이트가 배포되어 사용할 준비가 됩니다.

그리고 우리는 라이브입니다! 여기 URL.

장점과 단점

편집해야합니다 기본 디렉토리 배포 사양에서는 기본적으로 인식되지 않습니다. UI가 조금 투박한 느낌이 들지만 이는 개인 취향입니다. 다른 많은 AWS 웹 서비스가 가까이에 있기 때문에 AWS Amplify에는 엄청난 잠재력이 있습니다.

파이어베이스

배경

Firebase는 실시간 저장 플랫폼으로 가장 잘 알려진 Google 서비스입니다. 그러나 정적 웹 사이트와 Express.js 마이크로서비스 또는 API를 위한 호스팅 옵션도 있으며 팀이 작업 중인 지점에 대한 미리 보기 URL를 지원합니다. Netlify, Vercel 등과 마찬가지로 CDN 네트워크를 통해 배포된 콘텐츠를 제공합니다.

사용방법

1. 설치 Firebase 도구 와 npm install -g firebase-tools.
2. 다음을 사용하여 Firebase에 로그인하세요. Firebase 로그인. 로그인하면 다음과 같은 메시지가 표시됩니다.
3. 프로젝트 디렉토리로 이동하여 실행 Firebase 초기화, 다음과 같은 내용이 표시됩니다. 선택적 GitHub 작업 배포를 통해 Firebase 호스팅용 파일을 구성하는 옵션을 선택하세요. 그런 다음 CLI에서 바로 프로젝트를 생성하거나 Firebase UI를 사용하여 프로젝트를 생성하고 나중에 연결할 수 있습니다. 명령줄에서 프로젝트를 생성했으며, 결과 질문에 대한 답변은 다음과 같습니다.                                                                  그 후 간단한 `firebase.json` 및 `.firebaserc` 파일이 생성됩니다.
4. 그런 다음 실행 Firebase 배포 실제로 파일을 배포하려면 거리예배 규칙서. 디렉토리가 누락된 경우 다음을 실행하십시오. npm 실행 빌드 먼저 파일을 생성합니다. 는 Firebase 배포 명령은 아래 예와 유사한 출력을 생성해야 합니다.

이제 할 수 있습니다 웹사이트 보기 URL에서 제공됩니다. 이야! 

장점과 단점

Firebase는 매우 간단하지만 프로젝트 내부에 Firebase를 설정할 때 답변해야 할 질문이 다소 혼란스럽습니다. 운 좋게도 위 섹션에서 답변을 드렸지만 계속 진행하기 전에 실제 Firebase 기능에 대한 이해가 필요합니다. 그 외에도 Firebase는 배포가 빠르고 배포된 파일을 미리 볼 수 있는 URL를 생성할 수 있습니다. CLI를 사용하여 GitHub Action 배포를 통해 쉽게 자동화할 수도 있습니다.

GitHub 페이지

배경

GitHub Pages는 꽤 오랫동안 사용되어 왔으며 GitHub에서 직접 문서나 개인 웹사이트를 게시하는 쉬운 방법입니다. 정적 콘텐츠에 적합하며 많은 사람들이 최소한의 투자로 간단한 사이트를 배포하는 데 사용합니다. 프로젝트가 공개된 경우 무료로 사용할 수 있으며 웹사이트를 호스팅하는 빠르고 저렴한 방법입니다.

사용방법

편집해야 한다는 점에 유의하세요. App.jsx 우리가 전화하는 곳 라우터 그리고 추가하세요 기본 이름 저장소 이름과 일치하도록 합니다. 그래서 이 방법이다 App.jsx 다음과 같이 보여야 합니다:                                                                                        우리는 기본 이름 GitHub 페이지는 `https://GITHUB_USERNAME.gitlab.io/REPO_NAME` 형식의 URL에 웹사이트를 배포하기 때문입니다. 웹사이트는 기본 이름을 설정하지 않으면 제대로 작동하지 않습니다. 반응 라우터 돔.

1. 코드를 변경한 후 설치해야 합니다. gh-페이지 패키지:
2. 그리고, 사전 배포 그리고 배포 스크립트 패키지.json:
3. 그런 다음 간단히 실행합니다. npm 실행 배포. 트리거됩니다 npm 실행 빌드 그리고 그것은 사용할 것입니다 gh-페이지 의 내용을 공개하기 위해 거리 GitHub의 별도 지점으로 호출됩니다. gh-페이지.
4. 마지막으로, gh-페이지 아래와 같이 GitHub 페이지에 사용됩니다.

여기 라이브 URL.

장점과 단점

사용자 이름과 다른 프로젝트를 배포하는 경우 GitHub가 포함된 무료 도메인의 하위 디렉터리 내에 배포됩니다. 그런 다음 하위 디렉터리 내부에 있는 논리를 지원하는 추가 코드를 작성해야 합니다.

우리 사용 사례에서는 기본적으로 지속적인 배포를 지원하지 않지만 설정할 수는 있습니다. 일단 설정되면 변경 사항을 빠르게 배포할 수 있습니다.

GitLab 페이지

배경

GitHub와 마찬가지로 GitLab에는 자체 호스팅 솔루션이 있으며 이를 GitLab Pages라고 합니다. GitHub 페이지보다 GitLab 페이지에 지속적인 배포를 설정하는 것이 더 쉽습니다.

사용방법

1. GitLab에 가입하거나 로그인하세요.
2. 아직 GitLab에 저장소가 없다면 저장소를 추가하세요. 당신은 할 수 있습니다 내가 거기에 추가한 것을 포크해라 
   GitHub 페이지와 유사하게 App.jsx 우리가 전화하는 곳 라우터 그리고 추가하세요  기본 이름 저장소 이름과 일치하도록 합니다. 이것이 최종 변경 사항입니다.                                                               우리는 기본 이름 GitLab 페이지는 웹사이트를 다음 형식의 URL에 배포하기 때문입니다. https://GITLAB_USERNAME.gitlab.io/REPOSITORY_NAME. 웹사이트는 기본 이름을 설정하지 않으면 제대로 작동하지 않습니다. 반응 라우터 돔.
3. 프로젝트를 편집하고 GitLab에 푸시한 후 설정 > 페이지로 이동하면 저장소를 GitLab 페이지에 배포하기 위한 4단계 마법사가 표시됩니다. 
4. 마법사의 첫 번째 단계는 빌드 이미지를 입력하는 것입니다. Node.js LTS를 사용하겠습니다.
5. 다음으로 사전 빌드 명령을 입력하겠습니다. 그만큼 npm ci 여기서는 충분할 것입니다.
6. 이제 빌드 단계입니다. 우리는 통과해야 — –dist-dir 공개 왜냐하면 GitLab 페이지는 웹사이트가 대중 예배 규칙서. 다른 디렉토리로는 벗어날 수 없습니다. 죄송합니다.
7. 새로 생성된 커밋 .gitlab-ci.yml GitLab에 웹 사이트 배포 방법을 알려주는 파일입니다.
8. 이제 저장소의 CI/CD -> 파이프라인 섹션으로 이동하여 새로 추가된 파이프라인이 수행되는 것을 관찰합니다.
9. 잠시 후 파이프라인 작업이 완료되고 웹 사이트가 GitLab 페이지에 배포됩니다.

여기 결과.

장점과 단점

패키지 설치 속도가 느리고 작동하려면 추가 코드를 추가해야 하지만 마법사는 배포 단계가 4단계이므로 매우 직관적입니다.

렌더링

배경

Render는 2019년에 출시되는 새로운 제품입니다. 사람들이 서비스(정적 웹 사이트 포함)를 배포하는 방식을 혼란에 빠뜨리려고 노력하고 있습니다. 지금까지 그들은 잘 지내고 있으며 숫자도 늘어나고 있습니다.

사용방법

1. Render에 가입하거나 로그인하세요.
2. “새로 만들기” 버튼을 누르고 “정적 사이트”를 선택하여 새로운 정적 웹사이트를 생성하세요.
3. 배포하려는 저장소를 선택합니다.
4. 유지 방사; 원사 빌드 빌드 설정에서 빌드 명령을 실행합니다. 안타깝게도 다음에서는 작동하지 않습니다. npmci; npm 실행 빌드 다른 서비스와 마찬가지로요. “게시 디렉터리”를 다음으로 변경합니다. 거리 “정적 사이트 만들기”를 클릭하세요.
5. 잠시 후 Render가 코드를 배포합니다.

여기 Render의 라이브 URL.

장점과 단점

정말 빠르지만 `npm ci` 및 `npm run build` 명령을 사용하는 프로젝트에서는 제대로 작동하지 않습니다. ‘yarn’만 작동하는 것 같습니다.

급증

배경

Surge는 한동안 존재해 왔습니다. 기본적으로 해당 서비스는 사용이 간편하며 정적 웹 사이트를 배포하는 데 한두 개의 명령만 있으면 됩니다. 무료이지만 월 30$의 유료 플랜을 제공합니다. 도구의 금욕주의가 그것을 빛나게 만드는 것입니다. 복잡한 설정은 필요하지 않습니다. ‘surge’를 설치하고 ‘surge’로 실행하면 됩니다.

사용방법

1. 준비하려면 실행하세요. npm 실행 빌드 내부에 정적 파일을 생성하려면 거리 예배 규칙서. 는 급증 이를 배포에 사용합니다.
2. 실행 npm install –글로벌 서지
3. 그런 다음 실행 급증.

참고할 몇 가지 사항:
처음 실행하는 경우 Surge를 사용하여 계정을 만들어야 합니다. 걱정하지 마세요. 쉽습니다. 이메일과 원하는 비밀번호를 입력하시면 됩니다.

그런 다음 “project”를 입력하라는 메시지가 표시됩니다. 거리 예배 규칙서. 그냥 추가하시면 됩니다 거리 배포 중인 저장소 내에서 서지를 실행한 경우 제공된 경로로 이동합니다.

그런 다음 웹사이트의 미래 URL를 입력하세요. 독특한 것을 시도해 보세요. 왜냐면 급증 제안된 내용이 나에게 적합하지 않았습니다.

URL 입력 후, 급증 다음의 콘텐츠를 배포할 예정입니다. 거리 지정된 URL로 넘어갑니다. 내가 얻은 것은 다음과 같습니다.

장점과 단점

빠르고 간단하며 별도의 인터페이스를 채택할 필요가 없습니다. 하지만 앱에 사용 가능한 URL를 제안하지 않습니다.

각 호스팅 서비스 배포 시간

최고의 무료 React 호스팅 서비스 3개

1. 넷티파이
2. Vercel
3. 급증

주요 시사점

이러한 무료 React 앱 호스팅 서비스를 각각 테스트한 결과 Netlify가 최고라고 생각합니다. 필요할 수 있는 많은 기능을 갖춘 빠른 ​​배포를 제공합니다. 그 바로 뒤에는 많은 기능이 있고 초기 배포 후 상당히 빠른 Vercel가 있습니다. 그런 다음 업그레이드하기로 결정하면 상당히 저렴할 수 있는 최소 배포 도구인 Surge가 있습니다.

프런트엔드 빌드를 자동화하고 앱을 10배 더 빠르게 출시하세요. 자세히 알아보기.