تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Creating Browser Function0:00

We've got Hello World out of the way, let's create a function where we can drive a headless Chrome browser on Lambda from Laravel. It's kind of crazy. We'll start in the same place that we always start, and that is by creating a new class. We'll just call this one, let's call this one Browser. And again, we need to extend our Lambda function, implement those method stubs. We'll start out with package. Historically, we've been doing it this way, where we just kind of say what files are needed. There is another way to do it, and that would be to say package make, and this gives you a whole set of helpful methods that you can use to fine-tune what is being sent to Lambda.

There is another way to do it, and that would be to say php artisan make:package, and this gives you a whole set of helpful methods that you can use to fine-tune what is being sent to Lambda. In our case, we'll set the base path to Sidecar, and we'll make a new folder in a second called Browser. That's our new base path that everything is relative to, and we'll include everything in that folder. So we're just going to send the whole thing. It's kind of nice to set the base path, because then in your handler, instead of saying Sidecar Browser index at handler, the base path is already set, so we just get to say index at handler.

Adding Function Files1:19

Browser index at handler, the base path is already set, so we just get to say index at handler. It doesn't matter too much. It is kind of nice. We'll go out to our root directory and create a new directory called Browser. We'll put our index.js in there. I'm also going to put a new package.json in there. I'm just going to put an empty object. In our hello world example, we just shipped a single file. That's not super realistic.

In our hello world example, we just shipped a single file. That's not super realistic. Usually you have a whole bunch of supporting files, and in the case of Node, you have Node modules always. I don't want to install all of my Lambda-specific Node modules out here at the root level where my Laravel app lives. I want to install them inside the function that requires them. I basically don't want to muddy or pollute my app with stuff that doesn't actually belong in my app. That's why we created this new package.json at this different level, and I'll show you

Installing Chrome Dependencies2:23

in my app. That's why we created this new package.json at this different level, and I'll show you how that works in one second. The package that we're going to install is called chrome-aws-lambda. These fine people have taken Chrome and compiled it for AWS Lambda and GCF, but obviously we care about Lambda. This is the Chromium binary already built for the environment, so we don't have to worry about that. We're going to take the npm install command, and remember, we're not doing it at this level. We're not doing it at the serverless level.

We're going to take the npm install command, and remember, we're not doing it at this level. We're not doing it at the serverless level. Where we want to go is we want to change into sidecar browser. You'll see there's our index.js and our package. We want to install it there. If we look again, you see now we have a node_modules directory at that level instead of polluting our global node_modules. There's one more package that's required, and that's Puppeteer, and this is what does the actual interfacing with the Chrome browser. We'll install that, and we're good to go.

Writing the JS Handler3:23

the actual interfacing with the Chrome browser. We'll install that, and we're good to go. You'll see our package.json has changed, and it now includes the two modules that we installed. Let's move on to the index. What are we actually going to put in the index? We have to start with the JavaScript handler. We named ours handler right here, index at handler, so we need to name our function handler as well. Put it on the global exports object, and then do something. Right here is where we're going to do something.

Put it on the global exports object, and then do something. Right here is where we're going to do something. This repo actually has a great example of the something that we can do, so we're just going to copy that. We'll paste completely over our handler and just use theirs for now. The first thing they've done is require Chrome, which makes enough sense. You can see that their function signature looks a little bit different. They pass through these two other arguments. We'll refactor this in a second, but it's totally fine for now. They also use a fat arrow, totally fine.

We'll refactor this in a second, but it's totally fine for now. They also use a fat arrow, totally fine. Coming into the method body, they launch Chrome with a couple of arguments. They open a new page or a new tab, and then go to example.com. We'll change ours to laravel.com. They grab the page title, close the browser, and then return the page title back to the caller, which in our case is going to be Sidecar. We're going to refactor this, but for now, this is totally fine. This should launch a Chrome browser, navigate to laravel.com, and give us the title back. We need to register our function in the Sidecar configuration.

Deploying and Testing4:53

This should launch a Chrome browser, navigate to laravel.com, and give us the title back. We need to register our function in the Sidecar configuration. I'm just going to turn this guy off because we don't need it right now. Browser class, go back to our root directory, php artisan. That's now deployed. If you look over here, you can see we're definitely shipping node_modules. Most of this, honestly, most of this is that we're shipping the actual Chrome binary, but Sidecar manages all that for you. It zipped it up. It put it in your S3 bucket and then shipped it over to Lambda, so we're all good to go.

It zipped it up. It put it in your S3 bucket and then shipped it over to Lambda, so we're all good to go. Let's update our web.php and change this from Hello World to Browser. We're not going to pass over any information at this point. We're just going to execute. You can see the last result is Hello from Python. If we refresh, now this is going to take a second, but if we refresh, we should see the title of laravel.com. There we go. Laravel, the PHP framework for web artisans.

There we go. Laravel, the php framework for web artisans. Is that correct? The php framework for web artisans. That is correct. Looking at the handler, you'll notice that they also provided us a way to drive it from outside of the function. Let's go ahead and do that as well. In web php, let's pass through URL is equal to laracasts.com. Refresh the browser.

Improving Performance Settings6:46

This request took eight seconds, which is unbelievably long. That's not going to work. There are a couple of ways to make it faster. The easiest way is to increase the memory. In our function class, we can simply bump the memory up. By default, you can check the parent class. It delegates to your configuration file. If we check the configuration file and search for memory, that delegates to your .env, but if it's not there, which it likely isn't, it's going to be 512. This is 512 megabytes.

Headless ChromeAutomation

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟