Bina Pratonton Pautan dengan Fungsi Puppeteer & Serverless

Dalam tutorial ini, kami akan melihat bagaimana kami dapat menggunakan fungsi tanpa pelayan bersama aplikasi front-end kami dan membuat API yang menghasilkan imej dan merebut metadata dari pautan.

Dengan fungsi tanpa pelayan, pemaju boleh membuat dan melaksanakan ciri-ciri dan fungsi moden dalam aplikasi mereka tanpa melalui kesakitan menubuhkan dan menguruskan pelayan back-end. Fungsi ini dihoskan dan digunakan oleh syarikat pengkomputeran awan.

Fungsi Netlify Membuat membuat dan menggunakan fungsi tanpa pelayan mudah untuk aplikasi yang dihoskan di Netlify.

Takeaways Key

Gunakan fungsi dalang dan netlify untuk membina pratonton pautan tanpa pelayan yang mengambil metadata dan tangkapan skrin dari URL.

• Mula dengan menyediakan aplikasi Vue 3 dengan CSS Tailwind untuk gaya, memastikan reka bentuk moden dan responsif.
• Melaksanakan fungsi Netlify untuk mengendalikan proses backend seperti penciptaan API tanpa menguruskan pelayan, meningkatkan skalabilitas dan kemudahan penempatan.
• Gunakan dalang dalam fungsi Netlify untuk mengautomasikan tugas penyemak imbas, seperti menangkap tangkapan skrin dan mengekstrak metadata dari laman web.
• menggunakan aplikasi di Netlify, memanfaatkan penggunaan berterusan dari repositori Git untuk kemas kini dan penyelenggaraan yang diperkemas.
• Meningkatkan pengalaman pengguna dengan menggabungkan komponen VUE yang berinteraksi dengan fungsi tanpa pelayan untuk memaparkan pratonton pautan secara dinamik pada frontend.
Prasyarat

untuk mengikuti bersama dengan tutorial ini, anda perlu mengenali JavaScript, Vue.js, Git, GitHub, dan Netlify. Anda juga harus mempunyai editor teks - seperti kod VS) dengan Vetur dipasang (untuk Intellisense) - dan versi nod baru -baru ini dipasang pada mesin anda. Anda boleh memasang nod di sini. Anda boleh menyemak versi nod anda dengan menjalankan nod arahan -vin terminal anda.

Anda juga harus mempunyai akaun di Netlify. Anda boleh membuat satu jika anda belum lagi.

Apa yang kita sedang bina

Untuk menunjukkan bagaimana kami dapat dengan mudah menyediakan fungsi tanpa pelayan dengan aplikasi front-end kami, kami akan membina aplikasi dengan komponen pratonton pautan tersuai.

Komponen ini menghantar permintaan dengan URL ke fungsi tanpa pelayan kami. Fungsi itu kemudian menggunakan dalang untuk mendapatkan metadata dari tapak sasaran menggunakan URL dan untuk menghasilkan tangkapan skrin tapak.

Fungsi ini menghantar metadata dan tangkapan skrin kembali ke komponen pada bahagian depan kami untuk memaparkannya sebagai pratonton pautan dalam aplikasi.

Berikut adalah pautan ke projek contoh yang digunakan di Netlify. Dan inilah repo github untuk mengikuti.

Buat dan sediakan aplikasi Vue

Kami akan membuat aplikasi Vue 3 menggunakan Vue CLI. Kami juga akan memasang dan menyediakan CSS Tailwind, rangka kerja CSS pertama yang menyediakan kelas yang boleh kami gunakan untuk aplikasi kami tanpa perlu menulis banyak CSS tersuai.

Pasang dan sediakan Vue

dengan cepat perancah aplikasi Vue, kami akan menggunakan Vue CLI. Untuk memasang Vue CLI, jalankan:

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

Setelah CLI telah dipasang, kita boleh membuat projek dengan menjalankan:

vue create link-previewer

Ini akan mendorong kami untuk memilih pratetap untuk pemasangan kami. Kami akan memilih "Ciri Pilih Secara Manual" supaya kami dapat memilih ciri -ciri yang kami perlukan. Berikut adalah pilihan yang saya pilih:

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>

Selepas memilih pilihan ini, kami akan ditanya sama ada kami mahu menyimpan pilihan sebagai pratetap untuk kegunaan kemudian. Pilih y (ya) atau n (tidak) dan teruskan dengan pemasangan.

Jalankan CD Link-Previewer untuk memasuki projek yang baru dibuat.

Pasang dan sediakan css tailwind

Untuk memasang Tailwind, kami akan menggunakan keserasian Postcss 7 membina, kerana tailwind bergantung kepada postcss 8-yang pada masa penulisan belum disokong oleh Vue 3. Nyahpasang sebarang pemasangan tailwind sebelumnya dan pasang semula keserasian membina keserasian :

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

Buat fail konfigurasi tailwind

Seterusnya, menjana fail tailwind.config.js dan postcss.config.js:

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

Ini akan membuat fail tailwind.config.js minimum di akar projek.

Konfigurasi tailwind untuk mengeluarkan gaya yang tidak digunakan dalam pengeluaran

Dalam fail tailwind.config.js, konfigurasikan pilihan pembersihan dengan laluan ke semua halaman dan komponen supaya tailwind boleh menggoncang gaya yang tidak digunakan dalam pengeluaran membina:

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

Sertakan tailwind dalam fail CSS

Buat fail ./src/assets/css/main.css dan gunakan Arahan @TailWind untuk memasukkan asas, komponen, dan gaya utiliti Tailwind:

<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>

Tailwind akan menukar arahan ini pada masa membina dengan semua gaya yang dihasilkannya berdasarkan sistem reka bentuk yang dikonfigurasikan.

Akhirnya, pastikan fail CSS diimport dalam fail ./src/main.js:

<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>

Dan itu sahaja, kita boleh menjalankan pelayan kami:

<span>npm run serve
</span>

Sekarang bahawa aplikasi sedang berjalan, jika kita pergi ke URL yang disediakan, kita harus melihat aplikasi Demo lalai untuk Vue dan melihat bahawa gaya asas preflight Tailwind telah digunakan.

Pasang Tailwind CSS IntelliSense Extension

Untuk pengalaman pembangunan yang lebih lancar, pasang Extension IntelliSense CSS Tailwind untuk kod vs.

Struktur aplikasi asas

Berikut adalah gambaran keseluruhan folder projek kami seperti:

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

Pengenalan Cepat untuk Netlify Fungsi

Fungsi Netlify adalah produk Netlify yang memudahkan proses membuat dan menggunakan fungsi tanpa pelayan. Menurut halaman rumah produk, ia digunakan untuk:

menggunakan kod sisi pelayan yang berfungsi sebagai titik akhir API, berjalan secara automatik sebagai tindak balas kepada peristiwa, atau memproses pekerjaan yang lebih kompleks di latar belakang.

Fail Fungsi Netlify asas mengeksport kaedah pengendali dengan sintaks berikut:

vue create link-previewer

Netlify menyediakan parameter peristiwa dan konteks apabila fungsi dipanggil/dipanggil. Apabila titik akhir fungsi dipanggil, pengendali menerima objek acara seperti ini:

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>

Parameter konteks, sebaliknya, termasuk maklumat mengenai konteks di mana fungsi itu dipanggil.

Dalam fungsi, kami mengembalikan objek dengan dua sifat penting:

• statuscode, iaitu 200 dalam kes ini
• badan, iaitu objek objek.

Fungsi ini akan dipanggil dari laman web kami di /.netlify/functions/hello dan kejayaan, ia akan mengembalikan 200 kod status dan mesej, "Hello, World!".

Sekarang kita mempunyai idea bagaimana fungsi Netlify berfungsi, mari kita lihat mereka dalam amalan.

Membuat fungsi Netlify pertama kami

Untuk membuat fungsi Netlify pertama kami, kami akan membuat fungsi fail baru/hello.js dalam direktori projek dan masukkan yang berikut:

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

Sebaik sahaja kami telah membuat fail fungsi, kami perlu membuat beberapa konfigurasi yang diperlukan agar kami menjalankan fungsi kami secara tempatan.

Sediakan konfigurasi Netlify

kami akan membuat fail netlify.toml di akar folder projek kami yang akan memberitahu Netlify di mana untuk mencari fungsi kami:

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

Netlify kini akan mencari dan menggunakan fungsi dalam folder Fungsi pada masa membina.

Pasang Netlify CLI

Untuk menjalankan fungsi kami secara tempatan tanpa perlu menggunakan Netlify, kami perlu memasang Netlify CLI. CLI membolehkan kami menggunakan projek kami dengan beberapa ciri Netlify yang hebat di dalam negara.

Untuk memasang CLI, pastikan anda mempunyai versi Node.js 10 atau lebih baru, kemudian jalankan:

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

Ini memasang Netlify CLI secara global, jadi kami boleh menjalankan perintah Netlify dari mana -mana direktori. Untuk mendapatkan versi, penggunaan, dan sebagainya, kita boleh menjalankan:

<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>

Jalankan aplikasi dengan Netlify Dev

Untuk menjalankan projek kami secara tempatan dengan Netlify CLI, hentikan pelayan dev (jika aktif), kemudian jalankan:

<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>

Dan inilah yang harus kita lihat:

Jika anda melihat dengan teliti, anda akan melihat beberapa perkara yang berlaku di sana:

• Netlify cuba menyuntik pembolehubah persekitaran dari fail .env kami ke dalam proses binaan, yang kemudiannya dapat diakses oleh fungsi Netlify kami. Dalam kes ini, kami tidak mempunyai fail .env, jadi ia memuatkan lalai yang ditakrifkan dalam proses.

• Kedua, ia memuat atau menggunakan fungsi kami yang terletak di direktori fungsi. Pelayan Fungsi dikerahkan pada port yang berbeza dan rawak - 36647.

• Akhir sekali, ia secara automatik mengesan apa rangka kerja aplikasi yang dibina dengan dan menjalankan proses binaan yang diperlukan untuk menggunakan aplikasi. Dalam kes ini, anda dapat melihat "Memulakan Netlify Dev dengan Vue.js". Ia juga menyokong Rangka Kerja React dan lain -lain.

netlify kemudian memulakan pelayan pembangunan kami di http: // localhost: 8888.

Sekarang pelayan kami telah bermula dan fungsi kami dimuatkan, kami boleh memanggil/memanggilnya. Secara lalai, kami boleh mengakses fungsi kami menggunakan laluan ini: /.netlify/functions/.

Satu perkara penting yang perlu diperhatikan ialah kita tidak perlu menentukan port di mana pelayan fungsi kami sedang berjalan. Kami boleh menggunakan laluan lalai di atas untuk berkomunikasi dengan pelayan Fungsi kami. Netlify secara automatik menyelesaikan URL dan pelabuhan di belakang tabir.

Jika kita menghantar permintaan GET ke http: // localhost: 8888/.netlify/fungsi/hello, kita harus mendapat respons {"mesej": "Hello, World!"}.

hebat! Fungsi tanpa pelayan pertama kami berfungsi!

Buat Fungsi Pratonton API

Sekarang fungsi Netlify kami berfungsi, kita boleh mula membina API pratonton. Berikut adalah rundown cepat tentang apa yang akan dilakukan API fungsi kami:

ia menerima URL sasaran yang akan dihantar dari hujung depan

ia melewati data kepada dalang
dalang kemudian melancarkan contoh penyemak imbas tanpa kepala
dalang membuka halaman baru dalam penyemak imbas dan menavigasi ke url sasaran
dalang kemudian mengekstrak kandungan tag dan untuk perihalan halaman sasaran
ia menangkap tangkapan skrin halaman
ia menghantar data tangkapan skrin kembali ke hujung depan
• Sekarang kita mempunyai idea asas tentang apa yang akan dilakukan oleh API fungsi kita, kita boleh mula membuat fungsi. Mari kita mulakan dengan memasang dan menyediakan dalang untuk fungsi Netlify.

Pasang dan konfigurasikan dalang

Puppeteer adalah perpustakaan nod yang menyediakan API peringkat tinggi untuk mengawal pelayar krom tanpa kepala atau kromium. Ia juga boleh dikonfigurasikan untuk menggunakan krom atau kromium penuh (tidak berkepala). Anda boleh melakukan kebanyakan perkara yang boleh anda lakukan secara manual dalam penyemak imbas menggunakan dalang. Lebih banyak mengenai dalang boleh didapati dalam dokumentasi dalang.

Untuk memulakan dengan Dalang, kami akan memasangnya dalam projek kami.

dalang untuk pembangunan dan pengeluaran tempatan

Puppeteer memuat turun versi Chromium baru -baru ini (~ 170MB MacOS, ~ 282MB Linux, ~ 280MB Windows) yang dijamin berfungsi dengan API.

kita tidak boleh menggunakan pakej dalang penuh untuk pengeluaran. Ini kerana fungsi Netlify mempunyai saiz maksimum 50MB, dan pakej kromium terlalu besar.

Terima kasih kepada artikel yang sangat berguna ini oleh IRE Aderinokun, kita masih boleh bekerja dengan dalang di dalam negara dan dalam pengeluaran. Inilah yang perlu kita lakukan:

Pasang dalang sebagai kebergantungan pembangunan * untuk penggunaan tempatan:

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

Bagi dalang untuk bekerja di dalam negara dan dalam pengeluaran, kita perlu memasang dalang-core dan krom-AWS-Lambda sebagai

kebergantungan pengeluaran .

Anda boleh menyemak perbezaan antara dalang dan dalang-teras di sini. Perbezaan utama, bagaimanapun, adalah bahawa dalang-teras tidak secara automatik memuat turun Chromium apabila dipasang.

Oleh kerana teras dalang tidak memuat turun penyemak imbas, kami akan memasang Chrome-AWS-Lambda, "Binari Kromium untuk AWS Lambda dan Google Cloud Fungsi" yang boleh kita gunakan dalam fungsi Netlify kami. Ini adalah pakej yang akan berfungsi dalam pengeluaran:

vue create link-previewer

Sekarang kami telah memasang pakej kami, mari buat fungsi kami.

Gunakan penyemak imbas yang sudah dipasang untuk dalang

Jika dalang memasang pelayar penuh untuk bekerja dengan tempatan akan menjadi isu, yang mungkin disebabkan oleh rangkaian perlahan atau kebimbangan jalur lebar. Terdapat penyelesaian, iaitu menggunakan penyemak imbas Chrome atau Chromium yang sudah dipasang untuk dalang.

Apa yang kita perlukan adalah jalan ke penyemak imbas di mesin tempatan kami. Kami akan menggunakan ini sebagai executablePath kami, yang akan kami lulus kepada kaedah dalang.launch (). Ini memberitahu Dalang di mana untuk mencari fail yang boleh dilaksanakan pelayar.

Jika anda tidak tahu di mana untuk mencari laluan yang boleh dilaksanakan, buka penyemak imbas anda dan pergi ke Chrome: // versi/untuk memaparkan versi Chrome.

Salin jalan dan buat fail .env dalam akar projek.

Untuk mendapatkan kandungan fail .env, kami akan memasang pakej lain - dotenv:

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>

Sekarang kita telah berjaya memasang pakej, mari kita buat fungsi Netlify.

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

Buat fungsi Generate-Preview

Buat fail baru, ./functions/generate-preview.js:

Dalam kod di atas, kami melakukan beberapa perkara. Pertama, kami memperoleh sasaran dari muatan permintaan dalam event.body. Ini akan dihantar dengan permintaan pos.

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

Seterusnya, kami melancarkan penyemak imbas menggunakan pakej Chrome-AWS-Lambda. Kami melakukan ini menggunakan kaedah dalang.launch (). Kaedah ini mengambil objek sebagai hujah dengan beberapa sifat pilihan. Harta penting yang kami lalui kepada kaedah ini ialah ExecutablePath.

kami menetapkan executablePath ke process.env.excecutable_path || menunggu chromium.executablePath yang membolehkan pakej untuk mencari pelayar tanpa kepala yang ada untuk dilancarkan.

Setelah penyemak imbas dilancarkan, kami membuka halaman baru dalam penyemak imbas menggunakan kaedah penyemak imbas.newPage (). Kami juga menetapkan viewport penyemak imbas yang dikehendaki untuk halaman menggunakan kaedah Page.SetViewPort ().

Perhatikan bahawa kami menggunakan kata kunci menunggu semasa menjalankan sebarang fungsi. Ini kerana dalang berfungsi secara tidak segerak dan beberapa fungsi mungkin mengambil sedikit masa sebelum mereka melaksanakan.

kita juga boleh melakukan perkara -perkara seperti menentukan ciri media halaman dengan dalang menggunakan kaedah.emulatemediaFeatures (), yang mengambil pelbagai objek ciri media. Begitulah cara kami menetapkan skema warna yang lebih suka menjadi gelap.

Dapatkan data meta dan tangkapan skrin

Seterusnya, kami akan menavigasi ke URL sasaran dan dapatkan tajuk, keterangan dan tangkapan skrin kami:

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

Dalam kod di atas, kami menggunakan blok trycatch untuk membungkus kod kami supaya, jika ada yang salah, bermula dari menunggu halaman.goto (TargetUrl), yang menavigasi ke URL sasaran, kami dapat menangkap ralat dan Hantar ke hujung depan kami. Kesalahan mungkin berlaku melalui menyediakan URL yang tidak sah.

Jika URL adalah sah, kami mendapat tajuk menggunakan halaman. Kami lulus dalam pemilih CSS - Ketua> Tajuk - dari tag tajuk sebagai hujah pertama. Kami juga meluluskan fungsi EL => el.TextContent sebagai hujah kedua, di mana EL adalah parameter yang kami lalui ke fungsi dan merupakan elemen tajuk. Kita kini boleh mendapatkan nilai menggunakan Title.TextContent.

Perhatikan bahawa semua ini dibungkus dalam kurungan (()) dan kami mempunyai || null selepas halaman. $ eval. Ini supaya tajuk diberikan null jika halaman. $ Eval () gagal mendapatkan tajuk halaman.

Untuk mendapatkan deskripsi halaman, kami akan menggunakan kaedah Page.Evaluuate (), yang membolehkan kami menjalankan beberapa JavaScript sisi klien dan mengembalikan nilai kepada pemboleh ubah yang ditetapkan-Deskripsi.

Kami lulus fungsi sebagai dan argumen ke kaedah page.evaluuate (). Dalam fungsi kami menggunakan dokumen.QuerySelector untuk mendapatkan pelbagai deskripsi meta, seperti untuk penerangan lalai, dan Untuk keterangan OpenGraph.

Selepas mendapatkan unsur -unsur, kami menggunakan pengendali ternary untuk mendapatkan kandungan dan menambahkannya ke objek penerangan jika unsur -unsur wujud, atau batal jika elemen tidak wujud.

Sebaik sahaja kami mendapat penerangan, kami mengambil tangkapan skrin halaman menggunakan kaedah.screenshot () dan menutup penyemak imbas dengan penyemak imbas.close ().

Akhirnya, kami menghantar butiran halaman dalam harta badan objek JSON dengan status status 200. Jika ralat berlaku di mana -mana langkah sebelumnya, ia ditangkap di blok tangkapan dan kami menghantar status status 400 dan Mesej ralat sebaliknya.

menguji dan menggunakan fungsi

Mari menguji fungsi kami menggunakan penguji API. Anda boleh memasang penguji API Postman atau Talend dalam penyemak imbas anda atau gunakan pelanjutan klien Thunder, penguji API untuk kod vs.

anda juga boleh menggunakan curl:

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

Jalankan fungsi menggunakan perintah netlify dev.

kami boleh menghantar permintaan menggunakan port untuk pelayan fungsi atau lalai: port 8888 untuk pelayan dev Netlify untuk menghantar permintaan ke fungsi kami. Saya akan menggunakan http: // localhost: 8888/.netlify/functions/generate-preview untuk menghantar permintaan pos dengan objek yang mengandungi targeturl dalam badan:

vue create link-previewer

Apabila kami menghantar permintaan, inilah respons yang kami dapat.

kami mendapat objek JSON yang mengandungi data pratonton kami:

Sekarang fungsi tanpa pelayan kami berfungsi, mari kita lihat bagaimana kita boleh menggunakannya di hujung depan kita.

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>

Membina fungsi pratonton pautan pada klien

Untuk berinteraksi dengan fungsi Generate-Preview kami, kami perlu menghantar permintaan pos yang mengandungi Targeturl kami.

Kami akan membuat komponen LinkPreview yang akan memaparkan pautan biasa. Komponen ini akan diluluskan URL sasaran mereka sebagai alat peraga. Sebelum komponen dipasang dalam aplikasi, ia akan menghantar permintaan pos dengan TargetUrl ke fungsi tanpa pelayan kami, dapatkan data pratonton, dan paparkannya apabila kita melayang pada pautan.

Membuat komponen pratonton pautan

Pertama, mari buat komponen pratonton pautan kami Src/Components/LinkPreviewer.vue.

Dalam <script> kami, kami akan mendapatkan data pratonton pautan dengan menghantar permintaan ke fungsi tanpa pelayan kami dan simpan data dalam objek PreviewData. Kami akan menggunakan ini kemudian dalam templat kami untuk memaparkan data: </script>

Dalam kod di atas, kami mendapat TargetUrl sebagai prop yang akan dimasukkan ke dalam komponen kami.

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

Dalam persediaan (), kami lulus alat peraga sebagai hujah agar kami dapat mengakses alat komponen seperti TargetUrl.

Kemudian, kami membuat objek peviewData reaktif menggunakan ref: const previewData = ref ({}). Dalam fungsi GeneratePreview () baru, kami menggunakan Fetch untuk menghantar permintaan pos yang mengandungi TargetUrl ke fungsi tanpa pelayan kami. Fungsi ini mengembalikan tindak balas atau batal jika ralat berlaku.

Seterusnya, untuk menjalankan fungsi sebelum komponen dipasang, kami menggunakan cangkuk OnBeForemount (). Kami lulus fungsi async sebagai hujah. Dalam fungsi ini, kami menetapkan previewData.Value kepada fungsi GeneratePreview (). Deskripsi (DESC, OG, Twitter) kemudiannya diperoleh dari sifat penerangan.

Untuk mendapatkan keterangan yang akan dipaparkan dalam pratonton, kami akan menetapkan previewData.Value.Description to (Desc || og || twitter || ""). Dengan cara ini, harta pertama dengan nilai akan diberikan kepada keterangan.

Lakukan ini untuk memaparkan data pratonton dalam templat kami:

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

Dalam kod di atas, untuk memaparkan imej kami-yang pada dasarnya merupakan rentetan Base64-kita perlu lulus rentetan bersama-sama dengan data seperti jenis imej dan pengekodan ke atribut SRC- "".

Itu sahaja untuk komponen LinkPreviewer.vue kami. Mari kita lihat dalam tindakan. Dalam ./src/views/home.vue:

vue create link-previewer

Di dalam fail home.vue kami, kami pada dasarnya menggunakan pelbagai pautan Demolinks untuk menjadikan senarai komponen LinkPreviewer, yang kami lalui ke prop TargetUrl komponen.

kami juga mempunyai elemen , yang kami gunakan untuk menambah lebih banyak komponen LinkPreviewer ke senarai.

inilah aplikasi mudah kami sekarang.

manis! Aplikasi kami berfungsi. Oleh kerana kami telah berjalan secara tempatan menggunakan Netlify CLI, mari kita lihat bagaimana kami boleh menggunakan Netlify menggunakan CLI.

Menggunakan aplikasi untuk Netlify

Sebelum kami menggunakan aplikasi kami untuk meniup, kami perlu membina aplikasi kami untuk pengeluaran:

Ini akan membina aplikasi kami dan membuat dist/ folder yang boleh kami gunakan untuk pengeluaran.

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>

Seterusnya, kita perlu log masuk ke akaun Netlify kami:

ini akan log anda ke dalam akaun Netlify anda di penyemak imbas anda.

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

Selepas membenarkan permohonan, kami boleh menghubungkan projek kami ke laman web baru. Netlify akan bertanya kepada kami sekumpulan soalan:

Apa yang anda mahu lakukan? Pilih "Buat & Konfigurasikan Tapak Baru".

pasukan? Pilih .
• Pilih nama laman web yang unik? Pilih .
• Sila berikan direktori penerbitan (seperti "awam" atau "dist" atau "."). Masukkan Dist.
selepas ini, Netlify akan memuat naik fail kami dan menggunakannya ke laman web baru kami.
menggunakan menggunakan github

Sebagai alternatif, kami boleh membuat keputusan untuk menggunakan laman web kami dari GitHub. Apa yang perlu anda lakukan ialah log masuk ke GitHub, membuat repositori baru, dan menyalin URL ke repo kami yang baru dibuat.

Kami kemudian menjalankan arahan berikut dalam folder projek kami:

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

NOTA: Anda mungkin tidak dapat menolak repo anda dari terminal anda kerana isu pengesahan, dan anda mungkin mendapat mesej dari git seperti ini: "Sokongan untuk pengesahan kata laluan dikeluarkan pada 13 Ogos 2021. Sila gunakan token akses peribadi. " Ini bermakna anda perlu membuat token akses peribadi (pat) dan menggunakannya untuk log masuk. Untuk melakukan itu, pergi ke tetapan token GitHub dan menghasilkan token baru. Pilih semua kebenaran yang anda mahukan. Pastikan anda dapat mengakses repos. Selepas menjana tepuk anda, salin dan simpan di suatu tempat. Kemudian cuba git push -u Origin Main Command sekali lagi dan tampal di tepuk anda apabila diminta untuk kata laluan anda.

Sebaik sahaja kami telah menolak projek itu ke GitHub, pergi ke Netlify untuk membuat tapak baru dari GitHub.

ikuti langkah -langkah untuk memilih repositori dan masukkan tetapan binaan untuk projek anda. Untuk projek Vue kami, perintah binaan adalah npm run binaan, dan direktori deploy adalah dist.

Selepas itu, klik pada tapak penyebaran.

Netlify akan menggunakan laman web ini, dan kami boleh melihat pratonton laman web kami dengan mengklik pada pautan yang disediakan. Kita dapat melihat fungsi kita dengan pergi ke fungsi dari menu atas.

anda boleh memilih fungsi untuk melihat lebih banyak maklumat dan log.

manis!

Berikut adalah pautan ke demo yang digunakan di Netlify: https://lnkpreviewr.netlify.app

Kesimpulan

Kami telah dapat membuat dan menggunakan fungsi tanpa pelayan dengan Netlify menggunakan fungsi Netlify. Kami juga melihat bagaimana kita boleh berinteraksi dengan fungsi dari hujung depan Vue kami. Kali ini, kami menggunakan tangkapan skrin dan mendapatkan data dari laman web lain dan membina komponen pratonton pautan dengannya, tetapi kami boleh melakukan lebih banyak lagi. Dengan fungsi tanpa pelayan, kita boleh berbuat lebih banyak di hujung depan tanpa perlu bersusah payah menubuhkan pelayan back-end.

Bacaan dan sumber selanjutnya

Berikut adalah beberapa sumber dan kandungan yang saya dapati berguna dan saya fikir anda juga akan:

• Projek GitHub Repo
• tutorial - Netlify Functions
• dan berjalan dengan fungsi tanpa pelayan - Jamstack Explorers (Netlify.com)
• Bermula dengan Docketeer Google Developer
• cara menggunakan dalang dalam fungsi Netlify-AWS-Lambda
• Cara menggunakan dalang untuk mengautomasikan Chrome dalam API dengan Netlify Fungsi tanpa pelayan - Space Jelly

Soalan Lazim (Soalan Lazim) Mengenai Fungsi Puppeteer dan Serverless

Bagaimana saya boleh debug kod dalang saya dalam fungsi tanpa pelayan?

Debugging code dalang dalam fungsi tanpa pelayan boleh menjadi agak rumit kerana sifat seni bina tanpa pelayan. Walau bagaimanapun, anda boleh menggunakan fungsi "Console.log" untuk mencetak nilai dan menjejaki pelaksanaan kod anda. Anda juga boleh menggunakan fungsi "page.on ('konsol', msg => console.log (msg.text ()))" untuk log semua output konsol dari penyemak imbas. Ingat untuk memeriksa log dalam papan pemuka penyedia fungsi tanpa pelayan anda.

Bagaimana saya boleh mengendalikan kesilapan dalam dalang dalam fungsi tanpa pelayan? . Anda boleh menggunakan blok cuba untuk mengendalikan kesilapan. Di blok tangkapan, anda boleh log mesej ralat dan secara pilihan menghantar respons dengan mesej ralat. Dengan cara ini, anda boleh mengesan dan menyelesaikan sebarang isu yang mungkin timbul. AWS Lambda, Fungsi Cloud Google, dan fungsi Azure. Walau bagaimanapun, proses persediaan mungkin berbeza -beza bergantung kepada pembekal. Anda mungkin perlu menggunakan binaan dalang seperti Chrome-AWS-Lambda untuk AWS Lambda. Dalam fungsi tanpa pelayan, anda boleh menggunakan beberapa strategi. Pertama, gunakan semula contoh penyemak imbas merentasi pelbagai doa. Kedua, gunakan pilihan 'NetworkIdle0' Waituntil untuk memastikan semua permintaan rangkaian selesai. Ketiga, melumpuhkan ciri -ciri yang tidak perlu dalam dalang seperti imej, css, dan fon untuk mempercepat pemuatan halaman.

Bagaimana saya boleh mengambil tangkapan skrin dengan dalang dalam fungsi tanpa pelayan? adalah mudah. Anda boleh menggunakan fungsi "Page.Screenshot ()" untuk mengambil tangkapan skrin halaman semasa. Anda boleh menentukan pilihan seperti jenis tangkapan skrin (JPEG atau PNG), kualiti, dan sama ada untuk memasukkan halaman penuh atau hanya viewport.

Bolehkah saya menggunakan dalang untuk mengautomasikan penyerahan borang dalam fungsi tanpa pelayan? Anda boleh menggunakan fungsi "Page.Type ()" untuk mengisi medan input dan fungsi "Page.Click ()" untuk mengklik butang atau pautan. Selepas penyerahan borang, anda boleh menggunakan dalang untuk menavigasi halaman yang dihasilkan dan mengeluarkan data yang anda perlukan. Laman web dinamik dalam fungsi tanpa pelayan kerana ia boleh menjadikan kandungan yang dihasilkan oleh JavaScript. Anda boleh menggunakan fungsi "Page.Evaluuate ()" untuk menjalankan kod JavaScript dalam konteks halaman dan mengeluarkan data yang anda perlukan. 🎜>

Pengendalian navigasi dan halaman pengalihan dengan dalang dalam fungsi tanpa pelayan boleh dilakukan dengan menggunakan fungsi "Page.WaitFORNavigation ()". Fungsi ini menunggu halaman untuk menavigasi ke URL baru atau tambah nilai. Anda boleh menggunakannya bersempena dengan fungsi "Page.Click ()" untuk menunggu halaman untuk menavigasi selepas mengklik pautan atau butang.

Bolehkah saya menggunakan dalang untuk menguji aplikasi web saya dalam fungsi tanpa pelayan?

Ya, anda boleh menggunakan dalang untuk menguji aplikasi web anda dalam fungsi tanpa pelayan. Puppeteer menyediakan API peringkat tinggi untuk automasi penyemak imbas, yang sesuai untuk ujian akhir-ke-akhir. Anda boleh mensimulasikan interaksi pengguna, periksa keadaan halaman yang dihasilkan, dan juga mengambil tangkapan skrin untuk mengesahkan tingkah laku aplikasi anda secara visual. dan sesi dengan dalang dalam fungsi tanpa pelayan boleh dilakukan menggunakan fungsi "Page.Cookies ()" dan "Page.SetCookie ()". Anda boleh menggunakan fungsi ini untuk mendapatkan dan menetapkan kuki, masing -masing. Ini berguna untuk mengekalkan sesi atau menguji tingkah laku aplikasi anda dengan kuki yang berbeza.

Atas ialah kandungan terperinci Bina Pratonton Pautan dengan Fungsi Puppeteer & Serverless. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!