GitLab Incubation Engineering, 9 Feb 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Incubation Engineering Jamstack -- Weekly Demo February 9th 2022

Description

More: on JS Runtimes on GitLab: https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/32

All updates: https://gitlab.com/gitlab-org/incubation-engineering/jamstack/meta/-/issues/5

A

Hi everyone thank you for joining me for the gitlab drumstick incubation engineering update this week. Do you remember how I talked about remix a couple of videos ago? Well that one didn't? Let me go so I created a proof of concept app this week. I wanted to see how easy it is to deploy a remix app on an edge server using gitlab ci cd spoiler. It was surprisingly easy.

A

Note, I'm not the first one to do this, even for the relatively new remix framework. I already found a few blog posts that tell you how to do it. I just wanted to do it again to get a feel for the user journey.

A

I'm just going to do it again in this video to draw to show you to let you know what I'm talking about.

A

So, let's start by setting up a new remix app. Let's run this remix cli to create me a new project with npx create remix at latest. This will run me through the setup.

A

The steps required, let's use a folder named remix 2, since I already have a remix one.

A

Now it's asking me: where do you want to deploy, and this is the first important bit already I can scroll down here and see they have an option for cloudflare workers. So this is what I'm going to select.

A

See with cloudflare workers, you can run a javascript server with a runtime environment like remix, on an edge server. The same way cdns for static files are set up, so it's really close to the user wherever they are located in the world.

A

The only thing is that cloudflare obviously needs to interact with your js routing requests and so on so for remix to be able to work with a request event as it's coming from cloudflare. It needs an adapter.

A

Also, there is a setup file, that's required by cloudflare, so we can't just deploy a plain remix app on cloudflare and hope for the best, but I mean this is almost as good they're offering the cloudflare worker template that we selected earlier. That comes with the adapter and the required setup files. I mean this is amazing, so we have this folder now and if we do it, if we just do it npm run start, we can already see the app working locally.

A

This is actually using mini flare. So basically it's running the cloudflare worker environment on your local machine.

A

Now, as an intermediate step, we would probably use the cloudflare cli. It's called wrangler on our local machine to deploy a first version of this app on cloudflare but hey. This is a gitlab video and we're all about ci cd, so I'll skip this step and go straight to the gitlab setup.

A

So let's create a new project for this in gita.

A

Next, we have to actually commit and push our code to gitlab.

A

Now, let's set up our ci cd, this is done using the gitlab ci yaml file that will be committed to the reaper.

A

That file doesn't come with the remix template. Unfortunately, but it's easy to set up and I'm gonna walk you through it.

A

First, let's use a node.js docker image for the interaction, because we're going to need npm to build and deploy the application will have two stages build and deploy. Now, let's define the build job. It's part of the build stage install our dependencies run the build now we're putting the build folder into our artifacts, which means that'll be available in the next pipeline stage.

A

We also have to keep our node modules for our deployment dependencies now. The next stage will then use cloudflare's cli to deploy our build app to the cloudflare worker.

A

It doesn't come pre-installed on the node image, obviously, but we'll just run it with npx which will auto install or to install that cli before running. So this is now our publish command. Now this file is already done. Looking good just one thing missing like how does the publish command know what cloudflare account to use and how do we authenticate at cloudflare?

A

Well, it's simple. We will use an api token. We obviously don't want to commit that so we'll set it up as an environment where I will, let's go step by step. First, we'll login to our cloudflare account. Don't worry. First 100 000 requests to a worker are free at this time, so it should be safe to just try it out for a bit, let's navigate to works. I already have a few since I've tried all this before, but it could also be empty. No problem on the right hand. Side is your account number.

A

So, let's copy that now we'll go back to gitlab, open up project, go to settings ci cd and expand the variable section.

A

Let's click add variable and enter cf underscore account underscore id in all in upper case, let's enter the account id that we just copied as a value make sure the variable is not protected at this time we don't care about masking for the accounted id at least now. Let's do the same thing for the api token, um just a little bit more setup required go to cloudflare click api tokens.

A

Now we need to generate one first, at least, um let's click create token select the edit cloudflare workers template that has all the required configuration already set up just two things. We need to do here. One I'll select, my own account for the account resources for now and all zones for the zones.

A

Okay done click create token, and now we can copy that.

A

Okay back to the gitlab ui create another variable. This time called cf underscore api under scott token paste the value we just created this one. We want to be masked. Okay, add now the beautiful thing about gitlab, ci cd.

A

These variables will simply be present inside the drop, so we don't need to set anything else up now when wrangler the cloudflare api runs inside the build container, it will read the values of those environment variables and know the account and create a worker or update it. If it already exists, that's really neat right.

A

Okay, so all that's left to do is to commit this gitlab ci yaml file. Let's do this.

A

Now we'd see just see what happens. The pipeline has been created now, it's deployed, so the job output gives us the url, where the app should be running. Let's click that ta-da here's our first remix app running completely on edge.

A

Now, if I want to make any change to the app, for example, let's just update the title here commit and it will immediately trigger a new build and deploy.

A

Here it is just by committee.

A

So this will work very very similarly with other js runtimes that have a cloudflare work. Adapter, for example, sveltkit does have one and if I'm not mistaking soda's next js and nux js.

A

Now, I'm not just making instruction videos here at gitlab. My job is actually to try to make a product better for this kind of use case.

A

So in the long term, I would love to take all this setup work off the user's shoulders.

A

I think, having the option to run js runtimes on cloudflare workers is a great opportunity to offer serverless deployment straight from the gitlab ui, like I imagine, gitlab, detecting that this repo is a remix app and offering a single button that will create an environment which it runs just straight away with the adapter and everything, but that does need a lot of intricate work, uh most of it very specific to the framework that's being used.

A

um So it's a long term goal initially.

A

I think that we can do very easily is to streamline the setup process for users that have or want to create their own cloudflare account just like we're doing it with google cloud and what tree is doing in that space like we can use the cloudflare api to set up an account and obtain the api token so that the user doesn't have to and going from there. We then can keep abstracting the various steps involved to set up that app.

A

So I think there are my next steps. Just let me know if you have any feedback to this or any additional ideas.

A

I hope you enjoyed this video. In any case, I hope to see you next week and bye, bye.