Netlify에 프런트엔드 애플리케이션을 배포하는 방법은 무엇입니까?

프론트엔드 애플리케이션을 배포하는 것은 오늘날 큰 일이 아닙니다. 최신 기술과 호스팅 플랫폼으로 몇 분 안에 사이트를 배포할 수 있습니다. 많은 호스팅 플랫폼이 있습니다. 그러나 우리는 이 기사에서 Netlify에 관심이 있습니다.

Netlify에 프론트엔드 애플리케이션을 배포해 보겠습니다.

프론트엔드 애플리케이션

React, Vue, Angular 등과 같은 다양한 프론트엔드 라이브러리와 프레임워크가 있습니다. 그리고 좋은 소식은 모두 동일한 패키지 패키지를 사용한다는 것입니다. 다른 라이브러리 및 프레임워크로 빌드되는 모든 프론트엔드 애플리케이션에 대한 배포는 유사합니다. 따라서 우리는 이러한 라이브러리와 프레임워크를 사용하는 것이 좋습니다.

라이브러리나 프레임워크 없이 프론트엔드 애플리케이션을 만들 수도 있습니다. 이것은 옛날 옛적에 프론트엔드 애플리케이션을 구축하는 전통적인 방법입니다. 하지만, 지금은 많이 변하고 있습니다. 따라서 다양한 방식으로 프론트엔드 애플리케이션을 구축할 수 있습니다. 하지만 배포 프로세스는 모든 종류의 프론트엔드 애플리케이션에 대해 동일합니다.

라이브러리로 구축된 프론트엔드 애플리케이션과 라이브러리나 프레임워크가 없는 프론트엔드 애플리케이션을 배치하는 것을 보게 될 것입니다. React 및 Plain JavaScript를 사용하여 배포를 위한 최소한의 프론트엔드 애플리케이션을 빌드해 보겠습니다.

설정

배포 데모를 위해 간단한 React 및 JavaScript 응용 프로그램을 만들 것입니다. 당신은 또한 그들을 따라 만들 수 있습니다. 또는 이미 프론트엔드 애플리케이션이 있는 경우 배포 섹션으로 건너뜁니다.

Netlify에 배포하는 동안 모든 프론트엔드 애플리케이션의 진입점은 index.html 이어야 한다는 것을 기억해야 합니다.

라이브러리나 프레임워크를 사용하여 애플리케이션을 만들었다면 걱정할 필요가 없습니다. 기본적으로 라이브러리와 프레임워크는 빌드 프로세스 에서 index.html 파일을 생성합니다. 그러나 일반 JavaScript 응용 프로그램이 있는 경우 응용 프로그램에 대한 항목으로 index.html 파일을 만들어야 합니다.

리액트 애플리케이션

다음 명령어를 실행하여 React 앱을 만듭니다.

 npx create-react-app demo

배포하기 전에 원하는 대로 앱을 업데이트할 수 있습니다. 방금 홈페이지에서 한 줄의 텍스트를 업데이트했습니다. 그것은 중요하지 않습니다. :).

일반 자바스크립트 애플리케이션

아래 단계에 따라 간단한 JavaScript 애플리케이션을 만드십시오.

• demo 라는 폴더를 만듭니다.
• index.html , styles.css 및 script 라는 세 개의 파일을 만듭니다 . js .
• 여기에서 index.html 은 애플리케이션의 진입점입니다.

창의력을 발휘하고 앱을 업데이트하십시오. 나는 단지 응용 프로그램에 간단한 것들을 추가하고 있습니다.

배포

Netlify에 프론트엔드 애플리케이션을 배포할 때 두 가지 옵션이 있습니다. GitHub, GitLab, BitBucket 등의 애플리케이션을 Netlify에 직접 배포할 수 있습니다. 또는 Netlify CLI(명령줄 인터페이스)를 사용하여 배포할 수 있습니다. 애플리케이션을 배포하기 위해 모든 것을 알아야 하는 것은 아닙니다. 그러나 배포에 대한 다양한 옵션이 있다는 점은 좋습니다.

하나하나 살펴보도록 하겠습니다.

깃허브

우리는 GitHub를 사용하여 코드를 호스팅하고 있습니다. 필수 항목이 아니므로 사용하지 않아도 됩니다. 원하는 대로 다른 플랫폼을 사용할 수 있습니다.

배포할 애플리케이션에는 두 가지 유형이 있습니다. 그러나 프로세스는 둘 다 비슷해 보입니다. 둘 다 보여주긴 하지만. 여기에는 주로 두 단계가 있습니다. 그들은

• 코드를 GitHub에 푸시합니다.
• Netlify를 사용하여 GitHub에서 애플리케이션을 배포합니다.

첫 번째 부분은 React 와 JavaScript 애플리케이션 모두에 공통적입니다. 첫 번째 단계부터 배포 프로세스를 시작하겠습니다.

GitHub에 코드가 없다고 가정합니다. GitHub에 코드가 있는 경우 푸시 코드 부분을 건너뛸 수 있습니다. git 도구가 필요합니다. 컴퓨터에 git 설치되어 있지 않다면 계속하기 전에 git 설치해야 합니다.

#1. GitHub에 코드 푸시

• GitHub 계정으로 이동하여 demo 라는 리포지토리를 만듭니다.

• repo가 ​​생성되면 다음과 같이 볼 수 있습니다.

이제 위에서 만든 저장소에 코드를 푸시해야 합니다. 코드를 푸시하려면 repo 또는 아래 명령에 제공된 명령을 따를 수 있습니다.

• 터미널 또는 cmd를 엽니다.
• 프로젝트 디렉토리로 이동합니다.
• git init 으로 git init
• 로컬 git git add . 변경 사항을 git add .
• git commit -m 'Completed application' 메시지로 변경 사항을 커밋합니다.
• 원격 저장소를 로컬 저장소 git remote add origin 'your_repo_path' 와 연결합니다. your_repo_path 를 원격 저장소로 바꿉니다. [email protected]:hafeezulkareem/demo.git 과 유사하게 저장소에서 찾을 수 있습니다 [email protected]:hafeezulkareem/demo.git
• 이제 코드를 푸시합니다. git push -u origin main
• 그게 다야; 코드를 GitHub에 푸시했습니다.

repo에서 다음과 같은 코드를 볼 수 있습니다.

코드를 GitHub에 푸시하는 첫 번째 단계를 완료했습니다. 일반 JavaScript 애플리케이션을 배포하는 경우 코드는 다음과 같을 수 있습니다.

다음 단계로 이동하여 애플리케이션을 Netlify에 배포해 보겠습니다.

#2. Netlify에 GitHub 코드 배포

Netlify에 계정이 없으면 새로 만드십시오.

• Netlify 웹사이트로 이동합니다.
• 계정에 로그인합니다.
• 아래와 같이 New site from Git 버튼을 볼 수 있습니다.

• 버튼을 클릭하여 배포를 시작합니다.
• 다음과 같은 배포 페이지로 이동합니다.

• 페이지에서 다른 코드 호스팅 플랫폼을 사용할 수 있습니다. 우리는 GitHub를 사용하고 있습니다. 클릭하십시오.
• 다음과 같이 GitHub 계정에 로그인할 수 있는 새 창이 열립니다.

• Netlify 인증을 위해 GitHub 계정에 로그인합니다.
• GitHub 계정에 로그인하면 Authorized 라는 메시지가 표시되어 창이 닫힙니다.
• 이제 주어진 검색 창에서 저장소 이름을 검색하십시오.

• 저장소를 검색할 때 Netlify에 대한 저장소 액세스 권한을 부여하지 않았기 때문에 나타나지 않습니다. GitHub에서 Configure Netlify 라는 버튼을 볼 수 있습니다 .

• 버튼을 클릭하고 GitHub 계정 비밀번호를 입력하여 액세스를 확인하십시오.

• 다음과 같은 액세스 페이지로 이동합니다.

• 아래로 스크롤하면 Repository Access 라는 섹션이 표시됩니다.

• 두 가지 옵션이 있습니다. 모든 리포지토리 또는 필요한 일부 리포지토리에 대한 액세스 권한을 부여할 수 있습니다. 전체가 아니라 배포 중인 저장소에 대한 액세스 권한을 부여하는 것이 좋습니다.
• 다음과 같이 저장소만 선택 옵션을 선택합니다 .

• 아래 드롭다운을 클릭하고 배포할 저장소를 검색합니다. 그것을 선택하십시오.

• 저장 버튼을 클릭합니다.
• Netlify 배포 페이지로 리디렉션됩니다. 그리고 새로운 저장소를 볼 수 있습니다.

• 저장소를 클릭합니다.
• 배포할 분기, 패키지 설치 명령 등과 같은 다양한 세부 정보가 표시됩니다.

• master 이외의 다른 분기에 전체 코드가 있는 경우 드롭다운에서 분기를 선택하여 업데이트합니다.
• 마지막으로 사이트 배포 버튼을 클릭합니다. 대시보드로 리디렉션됩니다.
• 사이트를 배포하는 데 약간의 시간이 걸립니다.

• 배포되면 게시된 사이트가 표시됩니다.

그게 다야

Netlify에 사이트를 성공적으로 배포했습니다. 사이트 URL을 클릭하면 라이브로 볼 수 있습니다.

사이트 및 도메인 설정을 원하는 대로 업데이트할 수 있습니다. 그러나 여기서 이야기할 또 다른 전체 주제를 다루지 않을 것입니다. 아래는 배포 후의 일반 JavaScript 응용 프로그램입니다.

배포 프로세스에는 차이가 없습니다. 그러나 응용 프로그램의 진입점(예: index.html ) 을 잊지 마십시오.

이제 프론트엔드 애플리케이션을 배포하는 또 다른 방법에 대해 알아볼 시간입니다.

#삼. Netlify CLI를 사용하여 코드 배포

Netlify CLI는 터미널 또는 명령줄에서 프런트엔드 애플리케이션을 배포하기 위한 명령줄 인터페이스입니다. 몇 가지 추가 단계(위의 방법)를 수행하고 싶지 않을 때 유용합니다. 위의 방법과 마찬가지로 React (모든 라이브러리 또는 프레임워크) 또는 JavaScript 애플리케이션을 배포할 수 있습니다.

여기에서 Netlify CLI 의 전체 문서를 얻을 수 있습니다. 그러나 애플리케이션을 배포할 필요는 없습니다. 상급 레벨로 올라갈 때 참고하시면 됩니다.

Netlify CLI를 사용하여 배포하는 방법을 살펴보겠습니다.

우선, 우리는 그것을 우리 기계에 설치해야합니다. 노드 패키지로 제공됩니다. 따라서 npm 사용하여 설치할 수 있습니다. 다음 명령을 사용하여 설치해 보겠습니다.

 npm install netlify-cli -g

-g 플래그는 패키지를 전역적으로 설치하여 어디서나 액세스할 수 있도록 하는 것입니다. 다음 이미지와 비슷한 것을 볼 수 있습니다.

Netlify CLI를 사용하여 React 및 일반 JavaScript 애플리케이션을 배포하는 단계를 살펴보겠습니다.

• React(또는 다른 라이브러리 또는 프레임워크) 애플리케이션의 빌드 명령을 실행합니다. 일반 JavaScript 응용 프로그램의 경우 명령을 실행할 필요가 없습니다.

 npm run build

• 빌드 명령은 사용 중인 라이브러리나 프레임워크에 따라 다를 수 있습니다.
• 다음과 같이 빌드 폴더가 표시됩니다.

• React 애플리케이션의 경우 디렉토리를 빌드 폴더로 변경하고, JavaScript 애플리케이션의 경우 프로젝트 폴더로 변경합니다.

• 다음 단계로 이동하기 전에 Netlify 계정을 만들어야 합니다. Netlify로 이동하여 하나의 계정을 만들고 다음 단계로 이동합니다.
• 이제 CLI를 사용하여 로그인해야 합니다. 다음 명령어를 실행하여 로그인해 봅시다.

 netlify login

• 위의 명령은 기본 브라우저에서 새 탭을 열어 Netlify 계정에 로그인합니다. Netlify 사이트로 이동합니다.
• 자격 증명을 입력하고 로그인합니다. 로그인한 후 CLI를 인증 하라는 메시지가 표시됩니다.

• 인증 을 클릭하여 자신을 인증합니다. 그 후에 성공 메시지가 표시됩니다.

• 이제 애플리케이션을 배포할 시간입니다. 다음 배포 명령을 실행합니다.

 netlify deploy

• 기존 사이트를 선택하거나 새 사이트를 만들지 묻는 메시지가 표시됩니다. 새 사이트 만들기 및 구성을 선택(위쪽 및 아래쪽 화살표 사용)하고 Enter 키를 누릅니다 .

• 그런 다음 선택하는 팀 이 표시되고 화살표를 사용하여 선택하고 Enter 키를 누릅니다 .

• 이제 사이트의 하위 도메인을 입력할 수 있습니다. 하지만 필수 사항은 아닙니다. Netlify는 남겨두면 무작위로 선택합니다. 나중에 원하면 변경할 수 있습니다. 지금은 비워두겠습니다.

• 배포할 디렉터리를 입력하라는 메시지가 표시됩니다. 우리는 이미 대상 디렉토리로 이동했습니다. 엔터를 치자. 다른 디렉토리도 입력할 수 있습니다. 그러나 그것은 간단하지 않습니다. 따라서 먼저 대상 디렉터리로 이동한 다음 배포하는 것이 좋습니다.

• 다음과 같이 초안 URL에 대한 사이트를 배포합니다.

• 초안 URL에서 사이트를 확인하고 모든 것이 올바른지 확인할 수 있습니다.
• 사이트를 확인한 후 다음 명령을 사용하여 프로덕션에 배포할 수 있습니다.

 netlify deploy --prod

• 디렉토리에 대해서만 묻습니다. 디렉토리를 입력합니다. 같은 디렉토리에 있다면 Enter 키를 누르 십시오 .
• 그게 다야 사이트 배포가 완료되었습니다. 사이트에 방문하시면 확인하실 수 있습니다.

• 그리고, 여기 결과가 있습니다.

Netlify CLI를 사용하여 Netlify에 사이트 배포를 완료했습니다. Netlify 대시보드에서 사이트 설정을 업데이트할 수 있습니다.

결론

휴! 그것은 긴 것입니다. 이 내용을 완전히 읽은 후에는 Netlify에 프론트엔드 애플리케이션을 배포하기 위해 다른 가이드가 필요하지 않습니다.

Netlify에 애플리케이션을 배포하는 방법에는 두 가지가 있습니다. 무엇을 따를 것인가? 첫 번째 방법을 사용하면 약간의 이점이 있습니다. Netlify는 사이트 저장소에 새 코드를 푸시할 때마다 빌드를 업데이트합니다. 단, CLI 방식의 경우 수동으로 해야 합니다.

우리는 항상 우리가 처한 상황에 따라 다른 방법보다 한 가지 방법을 사용합니다. 어쨌든 두 배포 방법을 모두 알고 있습니다. 따라서 방법에 대해 걱정할 필요가 없습니다. 가장 적합한 것을 선택하십시오.

참고: 기사에 표시된 데모 사이트는 일정 시간이 지나면 공개적으로 사용하지 못할 수 있습니다.

Netlify의 대안이 필요하십니까? 이러한 최고의 정적 사이트 호스팅 플랫폼을 확인하십시오.

행복한 배포