Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/clement-joye/serverless-gatsby-strapi-azure-aci

Deploy Strapi and Gatsby in a serverless fashion via Azure Container Instances while keeping the benefits of Live Preview
https://github.com/clement-joye/serverless-gatsby-strapi-azure-aci

Last synced: 15 days ago
JSON representation

Deploy Strapi and Gatsby in a serverless fashion via Azure Container Instances while keeping the benefits of Live Preview

Awesome Lists containing this project

README 

        
# Introduction



Template for running Strapi and Gatsby as serverless instances with Azure container Instances (ACI) while still benefiting from Live Preview feature.

The project is divived in four parts:  

- **Strapi v4** docker image wrapped in a **node.js** application.

- **Gatsby v4** docker image containing the code of our static web application and run with **gatsby develop**. This is basically our staging environment.

- Powershell Azure function starting/stopping the ACI (Http Trigger)

- Terraform script 



The flow is simple:

- When a users/editors needs to access **Strapi** and **Gatsby**, they send a request to an **Azure function**.  

- The Azure function does the work of **starting** ACIs for Strapi and Gatsby and returns an html code that will query Azure periodically for the status of the ACIs (Pending, running, Stopped..)  

- Once the ACI is ready and running, a button appears on the page that indicates to the user that Strapi is ready.

- The instances stays up for as long as the user needs it, and only once Strapi remains idle for a specific amount of time (default value set to **30 min**), the node.js application running Strapi sends a request to an Azure function that takes care of **stopping** the ACI.



As Strapi does not handle ssl, a **reverse proxy** is deployed in front of Strapi (**Caddy** web server) as a sidecar container.

Same thing is done for Gatsby.



> **NB**: In a production scenario, this solution needs to be complemented by adding a static web app built for production (or any other way you would normally deploy Gatsby online).



# Prerequisites



- Prior knowledge of the following are recommended:

- Strapi,

- Gatsby, 

- Azure platform, 

- Terraform.



The deployment without Terraform is possible as well, but not covered here.  



In order to start off, you will need to have the following:

- Terraform installed locally

- An Azure subscription with admin rights

- A service principal with Contributor role (required for the Azure functions)

- A container registry, preferably private (I use Azure Container Registry (ACR) in this template but any other should work as well)

- Node.js v12 or v14 (preferred for Strapi v4)  

- npm v6 or yarn

- Docker

- Powershell (including az cli)

- DB Browser (SQLite)



# Installation



- Clone git repository



## Strapi



- Open a command line in the root of the solution:

```

cd strapi-aci

yarn install

yarn build

yarn develop

```



After that an SQLite file should be present in ```./strapi-aci/tmp/``` folder.

Open the file with **DB Browser (SQLite)** and run the pragma command:

> PRAGMA journal_mode=WAL;  



This step will run the SQLite instance in **WAL** mode (Write Ahead Logging) and is **necessary** in order to run SQLite on an Azure File Share with Strapi in ACI.



**NB**: Make sure that your strapi instance is working properly after that. If that works you should see that the ```tmp``` folder now contains 3 different files when Strapi performs read/write operations.



## Gatsby



- Open a command line in the root of the solution:

```

cd gatsby-swa

npm install

```



# Variable edits



First of all, edit the data in the following files so they relate to your context/environment:

- ```./terraform/terraform.tfvars```

- ```./strapi-aci/.env``` (set proper keys for ```APP_KEYS, API_TOKEN_SALT, ADMIN_JWT_SECRET``` and ```JWT_SECRET``` based on .env.example)

- ```./strapi-aci/build.dev.ps1```

- ```./strapi-aci/build.prod.ps1```

- ```./strapi-aci/run.dev.ps1```

- ```./strapi-aci/config/middlewares.js``` (to allow your function app query Strapi endpoint)

- ```./gatsby-swa/build.dev.ps1```

- ```./gatsby-swa/build.prod.ps1```

- ```./gatsby-swa/run.dev.ps1```



# Docker image



Once this is done, and the prerequite above fulfilled, you can now build your docker images for Strapi and Gatsby via the following PowerShell scripts:

- build.dev.ps1: for local development

- build.prod.ps1: for storing in your container registry.



**NB**: The PowerShell scripts assume that you are using ACR as container registry, but this is easily adaptable to another provider.  



# Deployment



Once our images are built, you are now ready to deploy!



```

cd ./terraform

terraform init

terraform plan -out=plan

terraform apply plan

```



After a few minutes, if everything went well, you should now have a resource group created with the following resources:

- Strapi Container Instance

- Gatsby Container Instance

- App Service Plan

- Function App

- Storage Account



You can then connect to your Storage Account, and copy/paste your local SQLite file (located in ```strapi-aci/tmp/data.db```) into the ```aci-strapi-db-prod``` file share (use Azure Storage Explorer, az cli or alternatively Azure ui).



That's it, you just deployed Strapi / Gatsby in a serverless way via ACI.



Finally, last operation is to deploy our Azure Function code to the Function App located in ```./azure-function``` folder. You can do this with VS Code with the ```Azure Functions``` extension or via Azure Function Core Tools cli, that is up to you.



Once this is done, you can now call your Azure function to start up the ACI, and you should be redirected within a couple of minutes to your newly created Strapi instance. 



# Working locally



You have the possibility to test your Strapi installation in a few different ways:

- using ```yarn develop``` to start Strapi in the conventional way on your local host

- using ```npm run start-node``` to start ```index.js``` which in turn starts Strapi as well.

- using ```Docker``` and your latest image built with ```Dockerfile.dev```. See ```run.dev.ps1``` to start a container in your respective environment.  



For Gatsby, almost the same applies.

- using ```gatsby develop``` to start gatsby in the conventional way for local development

- using ```Docker``` and your latest image built with ```Dockerfile.dev```. See ```run.dev.ps1``` to start a container in your respective environment.  



**NB**: I did not create a Docker compose in this repo to reverse proxy our Strapi docker container.



# Issues / Suggestions



Please file issues or suggestions on the issues page on github, or even better, submit a pull request. Feedback is always welcome!



# References



Thanks to Johan Gyger for his very useful article on how to set up a **Caddy web server** reverse proxy with ACI via Terraform : https://itnext.io/automatic-https-with-azure-container-instances-aci-4c4c8b03e8c9  

Thanks to Simen Daehlin for his article regarding **Docker with Strapi V4**: https://blog.dehlin.dev/docker-with-strapi-v4



# Publication



The following [Medium post](https://medium.com/@clementjoye/deploying-gatsby-with-strapi-with-live-preview-capability-using-a-serverless-architecture-c331ce2f89ff) is related to this GitHub repo.



# License

Copyright © 2022-present Clément Joye



MIT