Puppeteer＆ServerLess関数を使用してリンクプレビューターを構築します

このチュートリアルでは、フロントエンドアプリケーションと一緒にサーバーレス関数を展開する方法を確認し、リンクから画像を生成してメタデータをつかむAPIを作成します。 サーバーレス関数を使用すると、開発者はバックエンドサーバーのセットアップと管理の痛みを経験することなく、アプリケーションに最新の機能と機能を作成および実装できます。機能は、クラウドコンピューティング会社によってホストおよび展開されます。

NetLify関数は、NetLifyでホストされているアプリケーションのサーバーレス関数を簡単に作成および展開します。

キーテイクアウト

PuppeteerとNetlify関数を使用して、URLからメタデータとスクリーンショットを取得するサーバーレスリンクプレビューターを構築します。

スタイリング用のTailwind CSSを使用してVUE 3アプリケーションを設定し、モダンでレスポンシブなデザインを確保することから始めます。

ネットリフィー関数を実装して、サーバーを管理せずにAPI作成などのバックエンドプロセスを処理し、スケーラビリティを向上させ、展開の容易さを処理します。
• NetLify関数内の操り人形師を使用して、スクリーンショットのキャプチャやWebページからメタデータの抽出など、ブラウザタスクを自動化します。
Netlifyにアプリケーションを展開し、合理化された更新とメンテナンスのためにGITリポジトリからの継続的な展開を活用します。
• ServerLess関数と対話するVUEコンポーネントを組み込むことにより、ユーザーエクスペリエンスを強化して、フロントエンドでリンクプレビューを動的に表示します。
• 前提条件
このチュートリアルに続くには、JavaScript、vue.js、git、github、およびnetlifyに精通する必要があります。また、veturがインストールされた（Intellisense用）veturを備えたテキストエディター（VSコードなど）と、マシンにインストールされているノードの最近のバージョンも必要です。ここにノードをインストールできます。コマンドノードを実行して、端末を実行してノードのバージョンを確認できます。
• Netlifyにアカウントも用意する必要があります。まだ持っていない場合は、作成できます
何を構築しているのか
• フロントエンドアプリケーションでサーバーレス関数を簡単にセットアップする方法を示すために、カスタムリンクPreviewerコンポーネントを備えたアプリを構築します。
• このコンポーネントは、サーバーレス関数にURLを使用してリクエストを送信します。この関数は、Puppeteerを使用して、URLを使用してターゲットサイトからメタデータを取得し、サイトのスクリーンショットを生成します。

この関数は、メタデータとスクリーンショットをフロントエンドのコンポーネントに戻し、アプリケーションのリンクプレビューとして表示します。

Netlifyに展開されたプロジェクトのサンプルへのリンクは次のとおりです。そして、これをフォローするためのgithubリポジトリは次のとおりです

VUEアプリケーションを作成してセットアップします

Vue CLIを使用してVUE 3アプリケーションを作成します。また、多くのカスタムCSSを作成することなくアプリに使用できるクラスを提供するユーティリティファーストCSSフレームワークであるTailwind CSSをインストールしてセットアップします。

vue

をインストールしてセットアップします

vueアプリケーションをすばやく足場にするには、Vue CLIを使用します。 Vue CLIをインストールするには、実行：

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

CLIがインストールされたら、実行してプロジェクトを作成できます。

これにより、インストール用のプリセットを選択するようになります。必要な機能を選択できるように、「手動で選択された機能」を選択します。これが私が選択したオプションを紹介します：

vue create link-previewer

これらのオプションを選択した後、後で使用するためのプリセットとしてオプションを保存するかどうかを尋ねられます。 y（yes）またはn（no）を選択し、インストールを続行します。

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>

CD Link-Previewerを実行して、新しく作成されたプロジェクトに入ります Tailwind CSS

をインストールしてセットアップします TailwindはPostcss 8に依存するため、TailwindをインストールするにはPostcss 7互換性ビルドを使用します。これは、執筆時点ではVue 3でまだサポートされていません。 ：

tailwind構成ファイルを作成

次に、Tailwind.config.jsとpostcss.config.jsファイルを生成します

これにより、プロジェクトのルートに最小限のtailwind.config.jsファイルが作成されます。

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

テールワインドを構成して、生産で未使用のスタイルを削除します

tailwind.config.jsファイルで、すべてのページとコンポーネントへのパスでパージオプションを構成するため、テールウィンドは生産ビルドでツリーシェイク未使用のスタイル：

npx tailwindcss init <span>-p
</span>

CSSファイルにTailwindを含めます

./src/assets/css/main.cssファイルを作成し、@tailwindディレクティブを使用して、Tailwindのベース、コンポーネント、ユーティリティスタイルを含めます：

Tailwindは、構成された設計システムに基づいて生成するすべてのスタイルとビルド時にこれらのディレクティブを交換します。

最後に、CSSファイルが./src/main.jsファイルにインポートされていることを確認してください：

<span>// ./tailwind.config.js
</span>module<span>.exports = {
</span>  <span>purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
</span>  <span>...
</span><span>}
</span>

そしてそれだけで、サーバーを実行できます：

<span>/* ./src/assets/css/main.css */
</span><span><span>@tailwind base;</span>
</span><span><span>@tailwind components;</span>
</span><span><span>@tailwind utilities;</span>
</span>
<span>body{
</span>  <span><span>@apply bg-gray-50;</span>
</span><span>}
</span>

アプリが実行されているので、提供されているURLに移動すると、Vue用のデフォルトのデモアプリを表示し、TailwindのPreflight Baseスタイルが適用されていることを確認する必要があります。

<span>// ./src/main.js
</span><span>import <span>{ createApp }</span> from 'vue'
</span><span>import <span>App</span> from './App.vue'
</span><span>import './registerServiceWorker'
</span><span>import router from './router'
</span><span>import store from './store'
</span><span>import './assets/css/main.css'
</span>
<span>createApp(App).use(store).use(router).mount('#app')
</span>

Tailwind CSS Intellisense拡張機能

<span>npm run serve
</span>

をインストールします

よりスムーズな開発エクスペリエンスについては、VSコードのTailwind CSS Intellisense拡張機能をインストールします。

基本的なアプリ構造

プロジェクトフォルダーがどのように見えるかの概要は次のとおりです。

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

netlify関数の簡単な紹介

Netlify Functionsは、サーバーレス関数の作成と展開のプロセスを簡素化するNetlify製品です。製品のホームページによると、以前は次のとおりです

APIエンドポイントとして機能するサーバー側コード、イベントに応じて自動的に実行される、またはバックグラウンドでより複雑なジョブを処理するサーバーサイドコードを展開します。

基本的なnetlify関数ファイルは、次の構文を使用してハンドラーメソッドをエクスポートします。

Netlifyは、関数が呼び出された/呼び出されたときにイベントとコンテキストのパラメーターを提供します。関数のエンドポイントが呼び出されると、ハンドラーは次のようなイベントオブジェクトを受信します：

vue create link-previewer

一方、コンテキストパラメーターには、関数が呼び出されたコンテキストに関する情報が含まれています。

関数内で、2つの重要なプロパティを備えたオブジェクトを返しています。

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>

ステータスコード、この場合は200です

ボディ、これは

stringified

オブジェクトです。

この関数は、[/.netlify/functions/helloのサイト]から呼び出され、成功すると、200ステータスコードと「hello、world！」というメッセージを返します。
• 機能がどのように機能するかについてのアイデアがあるので、実際にそれらを見てみましょう。
最初のnetlify関数の作成

最初のnetlify関数を作成するには、プロジェクトディレクトリに新しいファイル関数/hello.jsを作成し、以下を入力します。

関数ファイルを作成したら、関数をローカルに実行するために必要な構成を作成する必要があります。

Netlify Configurationを設定します

プロジェクトフォルダーのルートにnetlify.tomlファイルを作成します。これにより、Netlifyが関数を見つける場所を指示します。

Netlifyは、ビルド時に関数フォルダーに関数を見つけて展開するようになります。

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

netlify cli

をインストールします

Netlifyに展開することなくローカルに機能を実行するには、Netlify CLIをインストールする必要があります。 CLIを使用すると、いくつかの優れたNetlify機能をローカルでプロジェクトを展開できます。

CLIをインストールするには、node.jsバージョン10以降があることを確認して、実行してください。

これにより、Netlify CLIがグローバルにインストールされるため、任意のディレクトリからNetlifyコマンドを実行できます。バージョン、使用法などを取得するには、実行できます。

npx tailwindcss init <span>-p
</span>

netlify dev

でアプリを実行します

netlify CLIでプロジェクトをローカルに実行するには、開発サーバーを停止します（アクティブな場合）。

そして、ここに私たちが見るべきものがあります：

<span>// ./tailwind.config.js
</span>module<span>.exports = {
</span>  <span>purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
</span>  <span>...
</span><span>}
</span>

よく見ると、そこにいくつかのことが起こっているのがわかります：

• netlifyは、.envファイルから環境変数をビルドプロセスに挿入しようとします。これは、netlify関数によってアクセスできます。この場合、.ENVファイルはないため、プロセスで定義されたデフォルトをロードします。

第二に、関数ディレクトリにある関数をロードまたは展開します。関数サーバーは、別のランダムなポートに展開されます-36647。

• 最後に、アプリケーションが構築されているフレームワークを自動的に検出し、アプリケーションを展開するために必要なビルドプロセスを実行します。この場合、「vue.jsを使用したNetlify devを起動する」を見ることができます。また、Reactやその他の一般的なフレームワークもサポートしています

netlifyは、http：// localhost：8888。
• で開発サーバーを起動します

サーバーが開始され、関数がロードされたので、呼び出し/呼び出します。デフォルトでは、このルートを使用して関数にアクセスできます。

注意すべき重要なことの1つは、関数サーバーが実行されているポートを指定する必要がないということです。上記のデフォルトルートを使用して、関数サーバーと通信できます。 Netlifyは、舞台裏のURLとポートを自動的に解決します。

http：// localhost：8888/.netlify/functions/helloにgetリクエストを送信する場合、{"メッセージ"： "hello、world！"}。

素晴らしい！最初のサーバーレス関数は機能します！

プレビュー関数api

を作成します

Netlify関数が機能したので、プレビューAPIの構築を開始できます。これは、私たちの関数APIがやろうとしていることの簡単な要約です：

フロントエンドから送信されるターゲットURLを受信します

データをpupeTeer

に渡します その後、

pupteerは新しいヘッドレスブラウザインスタンス

を起動します

Puppeteerはブラウザで新しいページを開き、ターゲットURLに移動します

• Puppeteerは、ターゲットページの説明のために
• ページのスクリーンショットをキャプチャします
• スクリーンショットデータをフロントエンドに送り返します
機能APIが何をするかについての基本的なアイデアが得られたので、関数の作成を開始できます。 NetlifyFunctions用のPuppeteerをインストールしてセットアップすることから始めましょう。
• Puppeteer
をインストールして構成します
• Puppeteerは、ヘッドレスクロムまたはクロムブラウザーを制御するための高レベルAPIを提供するノードライブラリです。また、完全な（非ヘッドレス）クロムまたはクロムを使用するように構成することもできます。操り人形師を使用してブラウザで手動でできることをほとんどすることができます。操り人形師の詳細については、操り人形師のドキュメントをご覧ください。
• 操り人形師を始めるために、プロジェクトにインストールします。

地元の開発と生産のための操り人形

Puppeteerは、APIを使用することが保証されているChromium（〜170MB MacOS、〜282MB Linux、〜280MB Windows）の最近のバージョンをダウンロードします。

フルパペットパッケージを生産に使用することはできません。これは、NetlifyFunctionsの最大サイズが50MBで、Chromiumパッケージが大きすぎるためです。

IRE Aderinokunによるこの非常に有用な記事のおかげで、地元でも生産の両方で操り人形師と協力することもできます。これが私たちがしなければならないことです：
PuppeteerをA *ローカル展開のため： Puppeteerがローカルでおよび生産中に動作するには、PupeTeer-CoreとChrome-Aws-Lambdaを

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

生産依存関係

として設置する必要があります。 ここでは、操り人形師と操り人形師のコアの違いをチェックできます。ただし、主な違いは、Pupteer-Coreがインストール時にChromiumを自動的にダウンロードしないことです。

Puppeteer-Coreはブラウザをダウンロードしないため、Netlify関数で使用できる「AWS LambdaおよびGoogle Cloud関数のクロムバイナリ」であるChrome-aws-lambdaをインストールします。これらは、生産で機能するパッケージです：

パッケージをインストールしたので、関数を作成しましょう。

vue create link-previewer

既にインストールされているブラウザをPupteterer

に使用します

Puppeteerがローカルで動作する完全なブラウザをインストールすることが問題になる場合、ネットワークや帯域幅の懸念が遅いためかもしれません。既にインストールされているChromeまたはChromiumブラウザーをPuptetererに使用する回避策があります。

必要なのは、ローカルマシンのブラウザへのパスです。これを実行可能ファイルとして使用します。これは、puperteer.launch（）メソッドに渡します。これは、ブラウザの実行可能ファイルをどこで見つけるかを操り人形に伝えます。

実行可能パスを正確に見つける場所がわからない場合は、ブラウザを開いてChrome：//バージョン/に移動してChromeのバージョンを表示します。
パスをコピーして、プロジェクトのルートで.ENVファイルを作成します。

.envファイルのコンテンツを取得するには、別のパッケージをインストールします - dotenv：

パッケージを正常にインストールしたので、netlify関数を作成しましょう。

Generate-Preview関数を作成

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>

新しいファイル、./Functions/generate-preview.js：

を作成します

上記のコードでは、多くのことを行っています。最初に、event.bodyのリクエストペイロードからターゲットを取得します。これは、POSTリクエストで送信されます。

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

次に、Chrome-aws-lambdaパッケージを使用してブラウザを起動します。これは、puppeteer.launch（）メソッドを使用して行います。この方法は、いくつかのオプションのプロパティを含む引数としてオブジェクトを取り入れます。この方法に渡す重要なプロパティは、実行可能ファイルです。

executablePathをprocess.env.excutable_pathに割り当てます|| Chrom.executablePathを待っています。パッケージが利用可能なヘッドレスブラウザを起動できるようにします。

ブラウザが起動したら、browser.newpage（）メソッドを使用してブラウザで新しいページを開きます。また、page.setviewport（）メソッドを使用して、ページの目的のブラウザビューポートを設定します。
関数を実行するときに、待ち合わせキーワードを使用していることに注意してください。これは、操り人形師が非同期に動作し、いくつかの機能が実行されるまでに時間がかかる場合があるためです。

ページのメディア機能を定義するなど、Page.EmulateMediaFeatures（）メソッドを使用して、Puppeteerを使用して、メディア機能オブジェクトの配列を採用しています。それが私たちがより好まれた色のスchemeを暗くする方法です

サイトメタデータとスクリーンショットを取得します
次に、ターゲットURLに移動し、タイトル、説明、スクリーンショットを取得します。

上記のコードでは、TryCatchブロックを使用してコードをラップして、ターゲットURLに移動するawait page.goto（targeturl）から始めて、エラーをキャッチしてキャッチできます。フロントエンドに送信します。無効なURLを提供することによりエラーが発生する可能性があります

URLが有効な場合、ページを使用してタイトルを取得します。$ eval（）メソッドは、JavaScriptの通常のdocument.querySelectorメソッドに似ています。最初の引数としてタイトルタグのCSSセレクター（ヘッド>タイトル）を渡します。また、関数el => el.TextContentを2番目の引数として渡します。ここで、ELは関数に渡すパラメーターであり、タイトル要素です。これで、title.textcontentを使用して値を取得できます。
これがすべて括弧（（））に包まれていることに注意してください。ページの後にnull。$ eval。これは、ページの場合、タイトルがnullに割り当てられるようにするためです。$ eval（）は、ページのタイトルを取得できません。

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

ページの説明を取得するには、page.evaluate（）メソッドを使用します。これにより、クライアント側のJavaScriptを実行し、割り当てられた変数 - 説明に値を返すことができます。

asと引数をpage.evaluate（）メソッドに渡します。関数内でdocument.queryselectorを使用して、などのさまざまなメタ説明を取得します。 = "" /> opengraph説明

要素を取得した後、3次演算子を使用してコンテンツを取得し、要素が存在する場合は説明オブジェクトに追加するか、要素が存在しない場合はnullです。

説明を取得したら、page.screenshot（）メソッドを使用してページのスクリーンショットを使用し、browser.close（）。

最後に、ボディプロパティのページの詳細を200のステータスコードでJSONオブジェクトを送信します。前のステップのいずれかでエラーが発生した場合、キャッチブロックに巻き込まれ、400のステータスコードを送信します。代わりにエラーメッセージ。

テストと展開関数

APIテスターを使用して関数をテストしましょう。ブラウザにPostmanまたはTalend APIテスターをインストールするか、VSコードのAPIテスターであるThunder Client拡張機能を使用できます。

curl：

を使用することもできます

Netlify devコマンドを使用して関数を実行します。

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

関数サーバーのポートを使用してリクエストを送信するか、netlify devサーバー用のデフォルト：8888ポートを送信して、関数にリクエストを送信できます。 http：// localhost：8888/.netlify/functions/generate-previewを使用して、体内にターゲットを含むオブジェクトを使用してPOSTリクエストを送信します：

リクエストを送信するとき、ここに私たちが得た応答があります。

vue create link-previewer

プレビューデータを含むJSONオブジェクトを取得します：

サーバーレス機能が機能したので、フロントエンドでどのように使用できるか見てみましょう。

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>

クライアントにリンクプレビュー機能を構築します
Generate-Preview関数と対話するには、TargetUrlを含む投稿リクエストを送信する必要があります。
通常のリンクを表示するLinkPreviewコンポーネントを作成します。これらのコンポーネントは、ターゲットURLをプロップとして渡されます。コンポーネントがアプリケーションに取り付けられる前に、TargetUrlをサーバーレス関数にPOSTリクエストを送信し、プレビューデータを取得し、リンクにホバリングしたら表示します。

リンクプレビューコンポーネントの作成

まず、リンクプレビューコンポーネントSRC/コンポーネント/linkpreviewer.vue。

を作成しましょう

<script>では、サーバーレス関数にリクエストを送信し、PreviewDataオブジェクトにデータを保存して、リンクプレビューデータを取得します。これを後でテンプレートで使用してデータを表示します。 </script>

上記のコードでは、コンポーネントに渡される小道具としてターゲットルールを取得します。

次に、Ref：const previewdata = ref（{}）を使用して、リアクティブなpeviewdataオブジェクトを作成します。新しいGeneratePreview（）関数では、Fetchを使用して、ServerLess関数にTargetUrlを含むPOSTリクエストを送信しています。この関数は、エラーが発生した場合に応答またはnullを返します。 次に、コンポーネントがマウントされる前に関数を実行するには、onbeforemount（）フックを使用します。非同期関数を引数として渡します。関数内で、previewdata.valueをgeneratepreview（）関数に割り当てます。説明（DESC、OG、Twitter）は、説明プロパティから取得されます。

プレビューで表示される説明を取得するには、previewdata.value.description（desc || og || twitter || ""）に割り当てます。このようにして、値を持つ最初のプロパティが説明に割り当てられます。

これを実行して、テンプレートにプレビューデータを表示します。

上記のコードでは、基本的にBase64文字列である画像を表示するために、画像タイプなどのデータと一緒に文字列を渡し、src- ""属性にエンコードする必要があります。

linkpreviewer.vueコンポーネントにとっては、それについてです。動作しているのを見てみましょう。 in./src/views/home.vue：

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

home.vueファイルでは、基本的にリンクのデモリンクアレイを使用して、コンポーネントのターゲットプロップに渡すlinkpreviewerコンポーネントのリストをレンダリングしています。 また、要素もあります。これを使用して、LinkPreviewerコンポーネントをリストにダイナミックに追加します。

これが私たちのシンプルなアプリが今どのように見えるかです。

vue create link-previewer

甘い！私たちのアプリは機能します。 Netlify CLIを使用してローカルで実行しているので、CLIを使用してNetlifyを展開する方法を見てみましょう。

アプリを展開して
アプリを展開してNetLifyを展開する前に、プロダクションのためにアプリを構築する必要があります。

これにより、アプリが構築され、生産に展開できるDIST/フォルダーが作成されます。

次に、Netlifyアカウントにログインする必要があります。

これにより、ブラウザのnetlifyアカウントにログインします。

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は、たくさんの質問をしてくれます：

何をしたいですか？ [新しいサイトを作成して構成]を選択します

<span>npm uninstall tailwindcss postcss autoprefixer
</span><span>npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
</span>

チーム？ 。

を選択します

一意のサイト名を選択しますか？ 。

を選択します 公開ディレクトリ（「パブリック」または「dist」または「」など）を提供してください。 dist。

を入力します

この後、Netlifyはファイルをアップロードして新しいサイトに展開します。

github
を使用して展開します
• または、Githubからサイトを展開することを決定できます。あなたがしなければならないのは、GitHubにログインし、新しいリポジトリを作成し、URLを新しく作成したリポジトリにコピーすることです。
• 次に、プロジェクトフォルダーで次のコマンドを実行します。

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

  注：認証の問題のためにターミナルからレポをプッシュできない場合があり、このようなGitからメッセージが表示される場合があります。代わりに個人的なアクセストークンを使用してください。」これは、個人的なアクセストークン（PAT）を作成し、それを使用してログインする必要があることを意味します。それを行うには、GitHubトークン設定に移動して新しいトークンを生成します。必要なすべてのアクセス許可を選択します。リポジトリにアクセスできることを確認してください。パットを生成した後、コピーしてどこかに保存します。次に、Git Push -U Origin Main Commandをもう一度試して、パスワードを求められたときにPATに貼り付けてください。 プロジェクトをGitHubにプッシュしたら、GitHubから新しいサイトを作成するためにNetlifyに向かいます。

  手順に従ってリポジトリを選択し、プロジェクトのビルド設定を入力します。 VUEプロジェクトでは、ビルドコマンドはNPM実行ビルドであり、展開ディレクトリはDIST。

  その後、[展開]サイトをクリックしてください。

  Netlifyはサイトを展開し、提供されている展開リンクをクリックしてサイトをプレビューできます。トップメニューの関数にアクセスすることで、関数を見ることができます。

  関数を選択して、詳細とログを表示できます。

  

  甘い！

  Netlifyに展開されているデモへのリンク：https：//lnkpreviewr.netlify.app

  結論
  NetLify関数を使用して、NetLifyを使用してサーバーレス関数を作成および展開できました。また、Vue Front Endの関数とどのように対話できるかを見てきました。今回は、スクリーンショットを使用して他のサイトからデータを取得し、リンクPreviewerコンポーネントを構築しましたが、さらに多くのことができます。サーバーレス関数を使用すると、バックエンドサーバーのセットアップに煩わされることなく、フロントエンドでさらに多くのことができます。

  さらなる読み取りとリソース

  ここに私が便利だと思ったいくつかのリソースとコンテンツがあり、あなたもそうすると思います：

  • プロジェクトGithub Repo
  • チュートリアル - netlify関数
  サーバーレス関数を使用してアップして実行しています - Jamstack Explorers（netlify.com）
  Puppeteer Google開発者を始めましょう
  netlify-aws-lambda関数で操り人形師を使用する方法
  netlify serverless関数を使用してAPIでChromeを自動化するために操り人形師を使用する方法 - Space Jelly
  操り人形師とサーバーレス関数に関するよくある質問（FAQ）
  サーバーレス関数で操り人形師コードをデバッグするにはどうすればよいですか？
  サーバーレス関数でのパペットのデバッグは、サーバーレスアーキテクチャの性質のために少し難しい場合があります。ただし、「Console.Log」関数を使用して値を印刷し、コードの実行を追跡できます。 「page.on（“ Console ’、MSG => console.log（msg.text（）））関数を使用して、ブラウザからすべてのコンソール出力を記録することもできます。サーバーレス機能プロバイダーのダッシュボードのログを確認することを忘れないでください。
  サーバーレス関数内の操り人形師のエラーを処理するにはどうすればよいですか？ 。トライキャッチブロックを使用してエラーを処理できます。キャッチブロックでは、エラーメッセージをログにして、オプションでエラーメッセージを使用して応答を送信できます。これにより、発生する可能性のある問題を追跡および修正できます。 AWS Lambda、Google Cloud Functions、Azure Functions。ただし、セットアッププロセスはプロバイダーによって異なる場合があります。 AWS LambdaのChrome-Aws-Lambdaなどの操り人形師のカスタムビルドを使用する必要があるかもしれません。サーバーレス関数では、いくつかの戦略を使用できます。まず、複数の呼び出しでブラウザインスタンスを再利用します。次に、すべてのネットワークリクエストが終了したことを確認するために、「networkIdle0」waituntilオプションを使用します。第三に、画像、CSS、フォントなどの操り人形師の不必要な機能を無効にしてページの読み込みをスピードアップします。簡単です。 「page.screenshot（）」関数を使用して、現在のページのスクリーンショットを使用できます。スクリーンショットタイプ（JPEGまたはPNG）、品質、および完全なページまたはビューポートのみを含めるかどうかなどのオプションを指定できます。

  Puppeteerを使用してサーバーレス関数でフォームの送信を自動化できますか？

  はい、Puppeteerを使用してサーバーレス関数のフォーム提出を自動化できます。 「page.type（）」関数を使用して入力フィールドと「page.click（）」関数を入力して、ボタンまたはリンクをクリックします。フォームの提出後、操り人形師を使用して結果のページをナビゲートし、必要なデータを抽出できます。 JavaScriptで生成されたコンテンツをレンダリングできるため、サーバーレス関数の動的Webサイト。 「page.evaluate（）」関数を使用して、ページのコンテキストでJavaScriptコードを実行し、必要なデータを抽出できます。 🎜>

  ナビゲーションとページのハンドリングサーバーレス関数の操り人形師とのリダイレクトは、「page.waitfornavigation（）」関数を使用して実行できます。この関数は、ページが新しいURLに移動するか、リロードするのを待ちます。 「page.click（）」関数と組み合わせて使用​​して、リンクまたはボタンをクリックした後にページがナビゲートするのを待ちます。 🎜>

  はい、操り人形師を使用して、サーバーレス関数でWebアプリケーションをテストできます。 Puppeteerは、ブラウザオートメーション用の高レベルのAPIを提供します。これは、エンドツーエンドテストに最適です。ユーザーのインタラクションをシミュレートし、結果のページ状態を確認し、スクリーンショットを撮ってアプリケーションの動作を視覚的に検証することもできます。サーバーレス関数の操り人形師とのセッションは、「page.cookies（）」および「page.setcookie（）」関数を使用して実行できます。これらの関数を使用して、それぞれCookieを取得および設定できます。これは、セッションを維持したり、さまざまなCookieでアプリケーションの動作をテストするのに役立ちます。

以上がPuppeteer＆ServerLess関数を使用してリンクプレビューターを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。