인형극 및 서버리스 기능으로 링크 미리보기를 구축하십시오

이 튜토리얼에서는 프론트 엔드 애플리케이션과 함께 서버리스 기능을 배포하고 이미지를 생성하고 링크에서 메타 데이터를 잡는 API를 만들 수있는 방법을 확인할 것입니다. 서버리스 기능을 사용하여 개발자는 백엔드 서버를 설정하고 관리하는 고통을 겪지 않고 애플리케이션에서 최신 기능과 기능을 생성하고 구현할 수 있습니다. 이 기능은 클라우드 컴퓨팅 회사에서 호스팅 및 배포됩니다.

NetLify 함수는 NetLify에서 호스팅되는 응용 프로그램을 위해 서버리스 기능을 쉽게 작성하고 배포 할 수 있도록합니다.

키 테이크 아웃

uppeteer 및 netlify 함수를 활용하여 URL에서 메타 데이터 및 스크린 샷을 가져 오는 서버리스 링크 미리보기를 구축합니다. 스타일을위한 Tailwind CSS로 VUE 3 응용 프로그램을 설정하여 현대적이고 반응이 좋은 디자인을 보장합니다. 서버를 관리하지 않고 API 생성과 같은 백엔드 프로세스를 처리하기 위해 NetLify 기능을 구현하고 확장 성 및 배포 용이성을 향상시킵니다. Netlify 기능 내에서 인형극을 사용하여 스크린 샷 캡처 및 웹 페이지에서 메타 데이터 추출과 같은 브라우저 작업을 자동화합니다. 간소화 된 업데이트 및 유지 보수를 위해 GIT 리포지토리에서 지속적인 배포를 활용하여 NetLify에 응용 프로그램을 배포하십시오. 서버리스 기능과 상호 작용하는 VUE 구성 요소를 통합하여 프론트 엔드에 동적으로 링크 미리보기를 표시하여 사용자 경험을 향상시킵니다.

전제 조건 이 튜토리얼을 따라 가려면 javaScript, vue.js, git, github 및 netlify에 익숙해야합니다. 또한 Vetur가 설치된 (IntelliSense 용)와 함께 vs code와 같은 텍스트 편집기와 컴퓨터에 설치된 최근 버전의 노드가 있어야합니다. 여기에 노드를 설치할 수 있습니다. 명령 노드를 실행하여 노드 버전을 확인할 수 있습니다. 당신은 또한 netLify에 대한 계정이 있어야합니다. 아직하지 않은 경우 하나를 만들 수 있습니다.

우리가 구축하는 것 프론트 엔드 애플리케이션으로 서버리스 기능을 쉽게 설정할 수있는 방법을 보여 주려면 사용자 정의 링크 미리보기 구성 요소가있는 앱을 구축합니다.

이 구성 요소는 서버리스 기능에 URL이 포함 된 요청을 보냅니다. 그런 다음이 기능은 PUPPETEER를 사용하여 URL을 사용하여 대상 사이트에서 메타 데이터를 가져오고 사이트의 스크린 샷을 생성합니다.

기능은 메타 데이터와 스크린 샷을 프론트 엔드의 구성 요소로 다시 보내서 응용 프로그램의 링크 미리보기로 표시합니다. 다음은 NetLify에 배포 된 예제 프로젝트에 대한 링크입니다. 그리고 다음은 따라야 할 github 리포입니다 vue 응용 프로그램을 생성하고 설정 우리는 vue cli를 사용하여 vue 3 응용 프로그램을 만들 것입니다. 또한 많은 맞춤 CSS를 쓰지 않고도 앱에 사용할 수있는 클래스를 제공하는 유틸리티 우선 CSS 프레임 워크 인 Tailwind CSS를 설치하고 설정합니다. vue vue 응용 프로그램을 신속하게 발판하려면 Vue Cli를 사용합니다. Vue Cli를 설치하려면 실행 : CLI가 설치되면 다음을 실행하여 프로젝트를 만들 수 있습니다.

이렇게하면 설치를 위해 사전 설정을 선택하라는 메시지가 표시됩니다. 필요한 기능을 선택할 수 있도록 "수동 선택 기능"을 선택합니다. 내가 선택한 옵션은 다음과 같습니다.

이 옵션을 선택한 후 옵션을 나중에 사용할 수 있도록 사전 설정으로 저장할 것인지 묻습니다. y (예) 또는 n (아니오)을 선택하고 설치를 계속하십시오.

CD Link-Previewer를 실행하여 새로 생성 된 프로젝트를 입력하십시오 Tailwind CSS를 설치하고 설정하십시오 테일 윈드를 설치하려면 PostCSS 7 호환성 빌드를 사용할 것입니다. Tailwind는 Postcss 8에 따라 달라 지므로 글을 쓰는 시점에 아직 VUE 3에 의해 지원되지 않습니다. 이전의 Tailwind 설치를 제거하고 호환성 빌드를 다시 설치하십시오. :

<span>npm install -g @vue/cli
</span>

테일 윈드 구성 파일을 만듭니다 다음, tailwind.config.js 및 postcss.config.js 파일을 생성하십시오

이것은 프로젝트의 루트에서 최소 Tailwind.config.js 파일을 만듭니다. 프로덕션에서 사용되지 않은 스타일을 제거하도록 테일 윈드를 구성하십시오 tailwind.config.js 파일에서 모든 페이지 및 구성 요소에 대한 경로로 퍼지 옵션을 구성하여 Tailwind가 프로덕션 빌드에서 사용하지 않은 스타일을 흔들 수 있습니다 :

vue create link-previewer

CSS 파일에 Tailwind를 포함하십시오 > ./src/assets/css/main.css 파일을 만들고 @TailWind 지시문을 사용하여 Tailwind의 기본, 구성 요소 및 유틸리티 스타일을 포함시킵니다 : .

테일 윈드는 구성된 설계 시스템을 기반으로 생성 된 모든 스타일로 빌드 타임에 이러한 지시문을 교환합니다. 마지막으로 CSS 파일이 ./src/main.js 파일에서 가져 오는지 확인하십시오 :

그리고 그게 바로 우리는 서버를 실행할 수 있습니다 :

Please pick a preset: Manually <span>select features
</span>? Check the features needed <span>for your project: Choose Vue version, Babel, PWA, Router, Vuex, Linter
</span>? Choose a version of Vue.js that you want to start the project with: <span>3.x
</span>? Use <span>history mode for router? (Requires proper server setup for index fallback in production) Yes
</span>? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where <span>do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
</span>

이제 앱이 실행 중이 었으므로 제공된 URL로 이동하면 VUE의 기본 데모 앱이 표시되고 Tailwind의 프리 플라이트베이스 스타일이 적용되었음을 알 수 있습니다.

Tailwind CSS Intellisense Extension을 설치하십시오 더 부드러운 개발 경험을 위해서는 CODE에 대한 Tailwind CSS Intellisense Extension을 설치하십시오.

기본 앱 구조

다음은 프로젝트 폴더가 어떻게 생겼는지에 대한 개요입니다.

Netlify 함수에 대한 빠른 소개 netlify functions는 서버리스 기능을 작성하고 배포하는 프로세스를 단순화하는 NetLify 제품입니다. 제품의 홈페이지에 따르면 에 익숙합니다 API 엔드 포인트로 작동하는 서버 측 코드를 배포하거나 이벤트에 응답하여 자동으로 실행되거나 백그라운드에서보다 복잡한 작업을 처리합니다.

<span>npm install -g @vue/cli
</span>

기본 Netlify 기능 파일은 다음 구문으로 처리기 메소드를 내 보냅니다.

NetLify는 함수를 호출/호출 할 때 이벤트 및 컨텍스트 매개 변수를 제공합니다. 함수의 엔드 포인트가 호출되면 핸들러는 다음과 같은 이벤트 객체를 수신합니다.

컨텍스트 매개 변수에는 함수가 호출 된 컨텍스트에 대한 정보가 포함됩니다. 함수 내에서 우리는 두 가지 중요한 속성을 가진 객체를 반환합니다.

이 경우 statusCode,이 경우 200입니다 바디,

stringified

기능은 /.netlify/functions/hello의 사이트에서 호출되며 성공시 200 개의 상태 코드와 "Hello, World!"라는 메시지를 반환합니다.

이제 Netlify 기능이 어떻게 작동하는지에 대한 아이디어를 얻었으므로 실제로 보자.

첫 번째 netlify 함수 생성 첫 번째 NetLify 함수를 만들려면 프로젝트 디렉토리에 새 파일 함수/hello.js를 생성하고 다음을 입력합니다.

일단 기능 파일을 만들면 로컬로 기능을 실행하기 위해 필요한 구성을 만들어야합니다. 설정 netlify 구성 우리는 프로젝트 폴더의 루트에 netlify.toml 파일을 생성하여 NetLify가 우리의 함수를 찾을 위치를 알려줍니다.

vue create link-previewer

netlify는 이제 빌드 시간에 함수 폴더의 함수를 찾아 배포합니다. netlify cli 를 설치하십시오 NetLify에 배치하지 않고도 기능을 로컬로 실행하려면 NetLify CLI를 설치해야합니다. CLI를 통해 우리는 로컬에서 훌륭한 Netlify 기능으로 프로젝트를 배포 할 수 있습니다.

CLI를 설치하려면 Node.js 버전 10 이상이 있는지 확인한 다음 실행하십시오.

Please pick a preset: Manually <span>select features
</span>? Check the features needed <span>for your project: Choose Vue version, Babel, PWA, Router, Vuex, Linter
</span>? Choose a version of Vue.js that you want to start the project with: <span>3.x
</span>? Use <span>history mode for router? (Requires proper server setup for index fallback in production) Yes
</span>? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where <span>do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
</span>

이것은 NetLify CLI를 전 세계적으로 설치하므로 모든 디렉토리에서 NetLify 명령을 실행할 수 있습니다. 버전, 사용법 등을 얻으려면 실행할 수 있습니다.

netlify dev 로 앱을 실행하십시오 Netlify CLI로 로컬로 프로젝트를 실행하려면 Dev 서버를 중지하고 (활성 인 경우) 실행하십시오.

그리고 다음은 다음과 같습니다.

면밀히 살펴보면 몇 가지 일이 일어나고 있습니다 :
• • netlify는 .env 파일에서 빌드 프로세스로 환경 변수를 주입하려고 시도한 다음 NetLify 함수에 의해 액세스 할 수 있습니다. 이 경우 .env 파일이 없으므로 프로세스에 정의 된 기본값을로드합니다.

    둘째, Functions 디렉토리에있는 기능을로드하거나 배포합니다. Functions Server는 다르고 임의의 포트에 배포됩니다 - 36647. 마지막으로, 응용 프로그램이 구축 된 프레임 워크를 자동으로 감지하고 응용 프로그램을 배포하기 위해 필요한 빌드 프로세스를 실행합니다. 이 경우 "Vue.js를 사용하여 Netlify Dev 시작"을 볼 수 있습니다. 또한 React 및 기타 인기있는 프레임 워크를 지원합니다

    그런 다음 NetLify는 http : // localhost : 8888에서 개발 서버를 시작합니다
  • 이제 서버가 시작되었고 기능이 발전되었으므로 호출/호출 할 수 있습니다. 기본적 으로이 경로를 사용하여 기능에 액세스 할 수 있습니다 : /.netlify/functions/.

    주목해야 할 중요한 사항 중 하나는 기능 서버가 실행중인 포트를 지정할 필요가 없다는 것입니다. 위의 기본 경로를 사용하여 기능 서버와 통신 할 수 있습니다. NetLify는 무대 뒤에서 URL과 포트를 자동으로 해결합니다.

    http : // localhost : 8888/.netlify/functions/hello에 GET 요청을 보내면 { "메시지": "Hello, World!"

  • 대단해! 우리의 첫 번째 서버리스 기능은 작동합니다! 미리보기 함수를 만듭니다 api

    이제 NetLify 기능이 작동하므로 미리보기 API를 구축하기 시작할 수 있습니다. 다음은 우리의 기능 API가 할 일에 대한 빠른 요약입니다.
  는 프론트 엔드에서 전송 될 대상 URL을 수신합니다. 는 데이터를 PUPPETEER에게 전달합니다 Puppeteer는 새로운 헤드리스 브라우저 인스턴스를 시작합니다 인형극은 브라우저에서 새 페이지를 열고 대상 URL로 탐색합니다. 인형극은 대상 페이지 에 대한 설명을 위해

이제 우리는 기능 API가 무엇을할지에 대한 기본 아이디어를 얻었으므로 기능을 만들 수 있습니다. NetLify 기능을 위해 인형극을 설치하고 설정하여 시작하겠습니다. 인형극을 설치하고 구성하십시오 인형극은 헤드리스 크롬 또는 크롬 브라우저를 제어하기위한 고급 API를 제공하는 노드 라이브러리입니다. 전체 (비 헤드리스) 크롬 또는 크롬을 사용하도록 구성 할 수도 있습니다. Puppeteer를 사용하여 브라우저에서 수동으로 할 수있는 대부분의 작업을 수행 할 수 있습니다. 인형극에 대한 자세한 내용은 Puppeteer 문서에서 찾을 수 있습니다.

인형극을 시작하려면 프로젝트에 설치하겠습니다. 지역 개발 및 생산을위한 인형극 Puppeteer는 API와 함께 작동하는 것을 보장하는 최근 버전의 Chromium (~ 170MB MacOS, ~ 282MB Linux, ~ 280MB Windows)을 다운로드합니다. 우리는 생산을 위해 전체 인형극 패키지를 사용할 수 없습니다. Netlify 함수는 최대 크기가 50MB이고 크롬 패키지가 너무 크기 때문입니다. IRE Aderinokun 의이 매우 유용한 기사 덕분에 우리는 여전히 현지 및 생산에서 인형극과 함께 일할 수 있습니다. 우리가해야 할 일은 다음과 같습니다.

로컬 배치의 경우 Puppeteer를

개발 종속성으로 설치하십시오

인형극자가 로컬 및 생산량 모두에서 작동하려면 꼭두각시의 종속성 로 인형극 코어와 Chrome-Aws-Lambda를 설치해야합니다.

꼭두각시와 인형극의 차이점을 여기에서 확인할 수 있습니다. 그러나 주요 차이점은 Puppeteer-Core가 설치시 Chromium을 자동으로 다운로드하지 않는다는 것입니다.

Puppeteer-Core는 브라우저를 다운로드하지 않기 때문에 Netlify 기능에서 사용할 수있는 AWS Lambda 및 Google Cloud 기능의 크롬 이진 인 Chrome-Aws Lambda를 설치합니다. 이들은 생산에서 작동 할 패키지입니다

이제 패키지를 설치 했으므로 기능을 만들어 봅시다.

Puppeteer에 이미 설치된 브라우저를 사용하십시오 로컬에서 작업하기 위해 전체 브라우저를 설치하는 인형극이 문제가되는 경우 네트워크 나 대역폭 문제로 인해 발생할 수 있습니다. 인형극에 이미 설치된 크롬 또는 크롬 브라우저를 사용하는 해결 방법이 있습니다. 우리에게 필요한 것은 로컬 컴퓨터의 브라우저로가는 길입니다. 우리는 이것을 ExecutablePath로 사용하여 Puppeteer.launch () 메소드로 전달됩니다. 이것은 인형극자에게 브라우저 실행 파일을 찾을 위치를 알려줍니다. 실행 가능한 경로를 어디에서 찾을 수 있는지 정확히 모르는 경우 브라우저를 열고 Chrome : // 버전으로 이동하여 Chrome 버전을 표시하십시오.

경로를 복사하고 프로젝트의 루트에서 .env 파일을 만듭니다.

<span>npm install -g @vue/cli
</span>

.env 파일의 내용을 얻으려면 다른 패키지를 설치합니다. DOTENV : .

이제 패키지를 성공적으로 설치 했으므로 NetLify 기능을 만들어 봅시다. 생성 예약 함수를 만듭니다 새 파일을 만듭니다. ./functions/generate-preview.js : 위의 코드에서 우리는 여러 가지 일을하고 있습니다. 먼저, 이벤트의 요청 페이로드에서 대상을 얻습니다. 이것은 사후 요청과 함께 전송됩니다. 다음으로 Chrome-Aws Lambda 패키지를 사용하여 브라우저를 시작합니다. Puppeteer.launch () 메소드를 사용하여이를 수행합니다. 이 방법은 객체를 몇 가지 선택적 특성을 가진 인수로 간주합니다. 우리 가이 방법으로 전달하는 중요한 속성은 ExecutablePath입니다.

우리는 ExecutablePath를 process.env.excecutable_path ||에 할당합니다 chromium.ExecutablePath를 기다릴 수있는 패키지가 사용 가능한 헤드리스 브라우저를 찾을 수 있습니다. 브라우저가 시작되면 Browser.newPage () 메소드를 사용하여 브라우저에서 새 페이지를 열 수 있습니다. 또한 Page.SetViewPort () 메소드를 사용하여 페이지에 대한 원하는 브라우저 뷰포트를 설정했습니다.

기능을 실행할 때 Await 키워드를 사용하고 있음을 알 수 있습니다. 인형극이 비동기식으로 작동하고 일부 기능이 실행되기까지 시간이 걸릴 수 있기 때문입니다.

우리는 또한 Page.emulatemediaFeatures () 메소드를 사용하여 Puppeteer와 함께 페이지의 미디어 기능을 정의하는 것과 같은 작업을 수행 할 수 있습니다. 그것이 우리가 선호하는 컬러 체계를 어두운 곳으로 설정하는 방법입니다 사이트 메타 데이터 및 스크린 샷을 얻으십시오

다음으로 대상 URL로 이동하여 제목, 설명 및 스크린 샷을 얻을 수 있습니다.

위의 코드에서, 우리는 TryCatch 블록을 사용하여 코드를 래핑하여 대상 URL로 탐색하는 AWAIT Page.goto (TargetUrl)부터 시작하여 오류를 포착 할 수 있으며 오류를 포착 할 수 있습니다. 우리의 프론트 엔드로 보내십시오. 유효하지 않은 URL을 제공함으로써 오류가 발생할 수 있습니다 URL이 유효 한 경우 Page. $ Eval () 메소드를 사용하여 제목을 가져옵니다.이 방법은 JavaScript의 일반적인 문서와 유사합니다. 제목 태그의 CSS 선택기 (헤드> 제목)를 첫 번째 인수로 전달합니다. 또한 두 번째 인수로서 EL => el.textContent 함수를 전달합니다. 여기서 EL은 우리가 함수로 전달하는 매개 변수이며 제목 요소입니다. 이제 title.textContent를 사용하여 값을 얻을 수 있습니다.

이 모든 것이 괄호 (())에 싸여 있고 우리는 || 페이지 후 null. $ eval. 이것은 페이지가 페이지의 제목을 얻지 못하는 경우 제목이 null이 할당되도록합니다. 페이지의 설명을 얻으려면 Page.evaluate () 메소드를 사용하여 클라이언트 측 JavaScript를 실행하고 할당 된 변수에 값을 반환 할 수 있습니다. 우리는 함수와 인수를 page.evaluate () 메소드에 전달합니다. 함수 내에서 우리는 document.querySelector를 사용하여 와 같은 다양한 메타 설명을 가져 오기 위해 " /> OpenGraph 설명. 요소를 얻은 후, 우리는 3 배 연산자를 사용하여 컨텐츠를 가져 와서 요소가 존재하는 경우 설명 객체에 추가하거나 요소가 존재하지 않으면 널을 추가합니다. 설명을 받으면 Page.screenshot () 메소드를 사용하여 페이지의 스크린 샷을 가져 와서 Browser.close (). 마지막으로, 우리는 신체 속성의 페이지 세부 정보를 200 인 JSON 객체를 보내고 있습니다. 이전 단계에서 오류가 발생하면 캐치 블록에 잡히고 400의 상태 코드를 보냅니다. 대신 오류 메시지.

테스트 및 배포 함수 API 테스터를 사용하여 기능을 테스트하겠습니다. 브라우저에 Postman 또는 Talend API 테스터를 설치하거나 VS 코드의 API 테스터 인 Thunder Client Extension을 사용할 수 있습니다. 당신은 또한 컬을 사용할 수 있습니다 :

netlify dev 명령을 사용하여 함수를 실행하십시오

functions 서버 또는 기본값에 대한 포트를 사용하여 요청을 보낼 수 있습니다. NetLify Dev 서버의 경우 8888 포트가 기능에 요청을 보냅니다. http : // localhost : 8888/.netlify/functions/generate-prreview를 사용하여 신체의 대상이 포함 된 개체와 함께 게시물 요청을 보냅니다.

우리가 요청을 보낼 때, 우리가받는 응답은 다음과 같습니다.

우리는 미리보기 데이터를 포함하는 JSON 객체를 얻습니다

<span>npm install -g @vue/cli
</span>

이제 서버리스 기능이 작동하므로 프론트 엔드에서 어떻게 사용할 수 있는지 봅시다.

클라이언트에서 링크 미리보기 기능을 구축합니다 생성 예약 함수와 상호 작용하려면 TargetUrl이 포함 된 게시물 요청을 보내야합니다.

우리는 일반 링크를 표시 할 LinkPreview 구성 요소를 생성합니다. 이러한 구성 요소는 대상 URL을 소품으로 전달합니다. 응용 프로그램에 구성 요소가 장착되기 전에 TargetUrl과 함께 게시물 요청을 서버리스 함수로 보내고 미리보기 데이터를 가져오고 링크에 호버링되면 표시됩니다.

. 링크 미리보기 구성 요소 만들기 먼저, 링크 미리보기 구성 요소 SRC/Components/LinkPreviewer.Vue <script>에서는 서버리스 기능에 요청을 보내서 링크 미리보기 데이터를 가져 와서 PreviewData 객체에 데이터를 저장합니다. 템플릿의 뒷부분에서 이것을 사용하여 데이터를 표시합니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477228599.png" class="lazy" alt="인형극 및 서버리스 기능으로 링크 미리보기를 구축하십시오" > </script>

위의 코드에서, 우리는 targeturl을 구성 요소로 전달할 소품으로 얻습니다.

setup ()에서 우리는 대상과 같은 구성 요소 소품에 액세스하기 위해 인수로 소품을 전달합니다. 그런 다음 ref : const previewData = ref ({})를 사용하여 반응성 PeviewData 객체를 만듭니다. 새로운 GeneratePreview () 함수에서 Fetch를 사용하여 TargetUrl이 포함 된 게시물 요청을 서버리스 기능으로 보냅니다. 이 함수는 오류가 발생하면 응답을 반환하거나 NULL을 반환합니다.

다음으로, 구성 요소가 장착되기 전에 함수를 실행하려면 onbeforemount () 후크를 사용합니다. 우리는 인수로 비동기 기능을 통과합니다. 함수 내에서 GeneratePreview () 함수에 previewData.Value를 할당합니다. 설명 (Desc, OG, Twitter)은 설명 속성에서 얻습니다. 미리보기에 표시 될 설명을 얻으려면 (desc || OG || 트위터 || "")에 previewData.Value.Description을 할당합니다. 이렇게하면 값이있는 첫 번째 속성이 설명에 할당됩니다.

템플릿에 미리보기 데이터를 표시하려면 다음을 수행하십시오.

위의 코드에서, 본질적으로 Base64 문자열 인 이미지를 표시하려면 이미지 유형과 같은 데이터와 함께 문자열을 전달하고 src- ""속성으로 인코딩해야합니다. <it> 그것은 우리의 linkpreviewer.vue 구성 요소에 관한 것입니다. 실제로 보자. ./src/views/home.vue : <p> <.> home.vue 파일에서 기본적으로 Demolinks 배열을 사용하여 LinkPreviewer 구성 요소 목록을 렌더링합니다. <an> 우리는 또한 <input> 요소가 있으며,이 요소는 목록에 더 많은 linkpreviewer 구성 요소를 동적으로 추가하는 데 사용합니다. <our> 여기에 우리의 간단한 앱이 현재 어떻게 보이는지 </our></an></.></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;npm install -g @vue/cli &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> </p> 달콤한! 우리의 앱은 작동합니다. NetLify CLI를 사용하여 로컬로 운영 했으므로 CLI를 사용하여 NetLify에 배포 할 수있는 방법을 살펴 보겠습니다. <the> 앱을 NetLify에 배포하는 <p> <ploy> 앱을 NetLify에 배포하기 전에 생산을위한 앱을 구축해야합니다. </ploy></p> <our> 이것은 앱을 구축하고 프로덕션에 배포 할 수있는 Dist/ Folder를 만듭니다. <need> 다음으로, 우리는 NetLify 계정에 로그인해야합니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">vue create link-previewer </pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <you> 이것은 브라우저에서 NetLify 계정에 로그인합니다. <p> </p> <p> <the> 응용 프로그램을 승인 한 후 프로젝트를 새 사이트에 연결할 수 있습니다. Netlify는 우리에게 많은 질문을 할 것입니다 : </the></p> <p> <like> 당신은 무엇을하고 싶습니까? "새 사이트 만들기 및 구성"을 선택하십시오. </like></p> 팀? <site> 고유 사이트 이름을 선택 하시겠습니까? <publ> 게시 디렉토리 (예 : "Public"또는 "Dist"또는 ".")를 제공하십시오. Dist. 를 입력하십시오 <p> 그 후 NetLify는 파일을 업로드하여 새 사이트에 배포합니다. <g> github <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907477777669.png" class="lazy" alt="인형극 및 서버리스 기능으로 링크 미리보기를 구축하십시오" >를 사용하여 배포하십시오 또는 대안으로 GitHub에서 사이트를 배포하기로 결정할 수 있습니다. Github에 로그인하고 새 저장소를 만들고 URL을 새로 작성한 repo에 복사하는 것입니다. </g></p> <p> 그런 다음 프로젝트 폴더에서 다음 명령을 실행합니다.</p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;npm install -g @vue/cli &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <p> 참고 : 인증 문제로 인해 터미널에서 repo를 푸시하지 않을 수 있으며 다음과 같은 GIT로부터 메시지를받을 수 있습니다.“2021 년 8 월 13 일에 비밀번호 인증 지원이 제거되었습니다. 대신 개인 액세스 토큰을 사용하십시오.” 즉, PAT (Personal Access Token)를 만들어 로그인하는 데 사용해야합니다.이를 위해 Github 토큰 설정으로 이동하여 새 토큰을 생성해야합니다. 원하는 모든 권한을 선택하십시오. 저장소에 액세스 할 수 있는지 확인하십시오. PAT를 생성 한 후 복사하여 어딘가에 저장하십시오. 그런 다음 git push -u origin main 명령을 다시 시도하고 비밀번호를 요청할 때 PAT에 붙여 넣으십시오. <push> 일단 프로젝트를 Github로 밀고 나면 Github에서 새 사이트를 만들기 위해 NetLify로 가십시오. <to> 단계를 따라 저장소를 선택하고 프로젝트의 빌드 설정을 입력하십시오. VUE 프로젝트의 경우 빌드 명령은 NPM 실행 빌드이고 배포 디렉토리는 Dist입니다. <em> </em> 그 후 <click> 배포 사이트를 클릭하십시오 <will> netlify가 사이트를 배포하고 제공된 배포 링크를 클릭하여 사이트를 미리 볼 수 있습니다. 상단 메뉴에서 기능으로 넘어 가서 기능을 볼 수 있습니다. </will></click></to></push></p> <p> </p> <a> 더 자세한 내용과 로그를 볼 수있는 함수를 선택할 수 있습니다. <p> </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173907478579627.png" class="lazy" alt="인형극 및 서버리스 기능으로 링크 미리보기를 구축하십시오" > 달콤한! <link> 다음은 NetLify에 배포 된 데모에 대한 링크입니다 : https://lnkpreviewr.netlify.app > </p> 결론 <able> 우리는 NetLify 함수를 사용하여 NetLify를 사용하여 서버리스 기능을 작성하고 배포 할 수있었습니다. 또한 VUE 프론트 엔드의 기능과 상호 작용할 수있는 방법도 보았습니다. 이번에는 스크린 샷을 사용하여 다른 사이트에서 데이터를 가져 와서 링크 미리보기 구성 요소를 구축했지만 훨씬 더 많은 작업을 수행 할 수 있습니다. 서버리스 기능을 사용하면 백엔드 서버를 설정하는 데 귀찮게하지 않고도 프론트 엔드에서 더 많은 일을 할 수 있습니다. <resources> 추가 읽기와 자원 <resources> 여기에 내가 유용한 몇 가지 리소스와 콘텐츠가 있습니다.<ul> <ub> 프로젝트 github repo 튜토리얼 - netlify 함수 Serverless 함수로 UP 및 실행 - Jamstack Explorers (netlify.com) <pup> PUPPETEER GOOGE DEVELOPERS를 시작하는 <pup> netlify-aws-lambda 함수에서 인형극을 사용하는 방법 <pup> Netlify Serverless 함수로 API에서 크롬을 자동화하기 위해 인형극을 사용하는 방법 - Space Jelly <questions> 인형극 및 서버리스 함수 에 대한 자주 묻는 질문 (FAQ) <deb> 서버리스 함수에서 인형극 코드를 디버깅하려면 어떻게 서버리스 기능에서 인형극 코드를 디버깅하는 것이 서버리스 아키텍처의 특성으로 인해 약간 까다로울 수 있습니다. 그러나 "Console.log"기능을 사용하여 값을 인쇄하고 코드 실행을 추적 할 수 있습니다. 또한 브라우저에서 모든 콘솔 출력을 로그인하기 위해 "page.on ( 'console', msg => console.log (msg.text ())) 함수를 사용할 수도 있습니다. 서버리스 기능 제공 업체의 대시 보드에서 로그를 확인하는 것을 잊지 마십시오. <li> 서버리스 함수 내에서 인형극의 오류를 어떻게 처리 할 수 ​​있습니까? </li> <li> 서버리스 함수 내에서 꼭두각시에서 오류 처리는 응용 프로그램이 원활하게 실행되도록 중요합니다. . Try-Catch 블록을 사용하여 오류를 처리 할 수 ​​있습니다. 캐치 블록에서 오류 메시지를 기록하고 선택적으로 오류 메시지로 응답을 보낼 수 있습니다. 이렇게하면 발생할 수있는 모든 문제를 추적하고 수정할 수 있습니다. </li> NetLify 외에 다른 서버리스 제공 업체와 인형극을 사용할 수 있습니까? <li> 예, 다른 서버리스 제공 업체와 함께 Puppeteer를 사용할 수 있습니다. AWS Lambda, Google Cloud 기능 및 Azure 기능. 그러나 설정 프로세스는 제공자에 따라 다를 수 있습니다. AWS Lambda 용 Chrome-Aws Lambda와 같은 인형극의 맞춤형 빌드를 사용해야 할 수도 있습니다. </li> Serverless 함수에서 인형극의 성능을 최적화하려면 꼭두각시 자의 성능을 최적화하려면 어떻게해야합니까? 서버리스 함수에서는 몇 가지 전략을 사용할 수 있습니다. 먼저 여러 호출에서 브라우저 인스턴스를 재사용하십시오. 둘째, 모든 네트워크 요청이 완료되도록 'NetworkIdle0'대기 옵션을 사용하십시오. 셋째, 페이지로드 속도를 높이기 위해 이미지, CSS 및 글꼴과 같은 인형극의 불필요한 기능을 비활성화합니다. <li> </li> 서버리스 함수에서 인형극과 함께 스크린 샷을 어떻게 가져갈 수 있습니까? </deb></questions></pup></pup></pup></ub> </ul> <h2> 서버리스 기능에서 인형극을 사용하여 스크린 샷을 찍을 수 있습니까? 간단합니다. "page.screenshot ()"함수를 사용하여 현재 페이지의 스크린 샷을 찍을 수 있습니다. 스크린 샷 유형 (JPEG 또는 PNG), 품질 및 전체 페이지를 포함할지 여부 또는 뷰포트를 포함시킬 수 있습니다.<pup> Puppeteer를 사용하여 서버리스 함수에서 양식 제출을 자동화 할 수 있습니까? <h3 id="예-Puppeteer를-사용하여-서버리스-함수의-양식-제출을-자동화-할-수-있습니다-page-type-함수를-사용하여-입력-필드와-page-click-함수를-채우면-버튼이나-링크를-클릭-할-수-있습니다-양식-제출-후-인형극을-사용하여-결과-페이지를-탐색하고-필요한-데이터를-추출-할-수-있습니다"> 예, Puppeteer를 사용하여 서버리스 함수의 양식 제출을 자동화 할 수 있습니다. "page.type ()"함수를 사용하여 입력 필드와 "page.click ()"함수를 채우면 버튼이나 링크를 클릭 할 수 있습니다. 양식 제출 후, 인형극을 사용하여 결과 페이지를 탐색하고 필요한 데이터를 추출 할 수 있습니다. </h3> <p> 서버리스 함수에서 인형극을 사용하여 동적 웹 사이트를 긁어내는 방법은 무엇입니까? JavaScript 생성 컨텐츠를 렌더링 할 수 있으므로 서버리스 기능의 동적 웹 사이트. "page.evaluate ()"함수를 사용하여 페이지 컨텍스트에서 JavaScript 코드를 실행하고 필요한 데이터를 추출 할 수 있습니다. </p> <h3 id="서버리스-함수에서-Puppeteer로-탐색-및-페이지-리디렉션을-어떻게-처리-할-수-있습니까"> 서버리스 함수에서 Puppeteer로 탐색 및 페이지 리디렉션을 어떻게 처리 할 수 ​​있습니까? </h3> Puppeteer를 사용하여 서버리스 함수에서 웹 응용 프로그램을 테스트 할 수 있습니까? <p> </p> 예, Puppeteer를 사용하여 서버리스 기능으로 웹 응용 프로그램을 테스트 할 수 있습니다. Puppeteer는 브라우저 자동화를위한 고급 API를 제공하므로 엔드 투 엔드 테스트에 적합합니다. 사용자 상호 작용을 시뮬레이션하고, 결과 페이지 상태를 확인하고, 스크린 샷을 찍을 수도 있습니다. <h3 id="서버리스-함수에서-인형극과-쿠키와-세션을-어떻게-처리-할-수-있습니까"> 서버리스 함수에서 인형극과 쿠키와 세션을 어떻게 처리 할 수 ​​있습니까? </h3> <p> 쿠키 ​​처리 서버리스 기능에서 인형극과의 세션은 "page.cookies ()"및 "page.setcookie ()"함수를 사용하여 수행 할 수 있습니다. 이러한 기능을 사용하여 각각 쿠키를 얻고 설정할 수 있습니다. 이것은 세션을 유지하거나 다른 쿠키로 응용 프로그램의 동작을 테스트하는 데 유용합니다.</p></pup> </h2></resources></resources></able></a></publ></site></you></need></our></the></it>

위 내용은 인형극 및 서버리스 기능으로 링크 미리보기를 구축하십시오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!