Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

mikeyGlitz
mikeyGlitz

Posted on

     

Developing a NextJS app on OpenFaaS

Prerequisites

The instructions covered in this article require the following tools to be installed before proceeding.

Personally, I prefer to leverageVS Code Remote Containers to create portable development environments. Below you'll find thedevcontainer.json and theDockerfile to put inside your project's.devcontainer folder.

{"name":"<appname>","build":{"dockerfile":"Dockerfile",//Update'VARIANT'topickanAlpineversion:3.11,3.12,3.13,3.14"args":{"VARIANT":"3.14","DOCKER_GID":"1001","NODE_VERSION":"14"}},//Set*default*containerspecificsettings.jsonvaluesoncontainercreate."settings":{},"mounts":["source=/var/run/docker.sock,target=/var/run/docker.sock,type=bind","source=${env:HOME}${env:USERPROFILE}/.kube,target=/home/vscode/.kube,type=bind"],//AddtheIDsofextensionsyouwantinstalledwhenthecontaineriscreated.//NotethatsomeextensionsmaynotworkinAlpineLinux.Seehttps://aka.ms/vscode-remote/linux."extensions":["ms-kubernetes-tools.vscode-kubernetes-tools","ms-azuretools.vscode-docker"],//Use'forwardPorts'tomakealistofportsinsidethecontaineravailablelocally.//"forwardPorts":[],//Use'postCreateCommand'toruncommandsafterthecontaineriscreated.//"postCreateCommand":"uname -a",//Replacewhenusingaptrace-baseddebuggerlikeC++,Go,andRust//"runArgs":["--init","--cap-add=SYS_PTRACE","--security-opt","seccomp=unconfined"],"runArgs":["--init"],//Commentoutconnectasrootinstead.Moreinfo:https://aka.ms/vscode-remote/containers/non-root."remoteUser":"vscode"}
Enter fullscreen modeExit fullscreen mode

Creating the OpenFaaS Deployment

The first step in deploying an application to OpenFaas is to deploy the OpenFaaS platform to Kubernetes. I useHelm andTerraform to create the OpenFaaS deployment.
OpenFaaS provides ahelm chart

provider"kubernetes"{config_context="docker-desktop"config_path="~/.kube/config"}provider"helm"{kubernetes{config_context="docker-desktop"config_path="~/.kube/config"}}variable"openfaas_password"{type=stringdescription="OpenFaaS admin password"}resource"kubernetes_namespace""ns_openfaas_fn"{metadata{name="openfaas-fn"}}resource"kubernetes_namespace""ns_openfaas"{metadata{name="openfaas"}}resource"kubernetes_secret""sec_openfaas_creds"{metadata{name="basic-auth"namespace="openfaas"}data={"basic-auth-user: "admin",    "basic-auth-password": var.openfaas_password  }}resource "helm_release" "rel_openfaas" {  name = "openfaas"  namespace = "openfaas"  chart = "openfaas"  repository = "https://openfaas.github.io/faas-netes/"set{name="functionNamespace"value="openfaas-fn"}set{name="generateBasicAuth"value="false"}set{name="basic_auth"value="true"}set{name="serviceType"value="ClusterIP"}set{name="ingressOperator.create"value="true"}}
Enter fullscreen modeExit fullscreen mode

The terraform script can be deployed with the following commands:

terraform initterraform plan-varopenfaas_password='<openfaas_password>'--out out.planterraform apply out.plan
Enter fullscreen modeExit fullscreen mode

The terraform script performs the following operations:

  1. Creates theopenfaas namespace
  2. Creates theopenfaas-fn namespace
  3. Creates a Kubernetes secret with thebasic-auth credentials
  4. Deploys the OpenFaaS helm template
    • Creates the OpenFaaS stack
    • Disables the generation of a randomized admin password -- instead preferring thebasic-auth secret we created earlier
    • Deploys the OpenFaaS ingress operator which enables us to ingress our functions using a Custom Resource Definition (CRD)

Initializing the NextJS function

To create the function which will serve NextJS once we deploy it to OpenFaaS, the Docker template will need to be created.

faas-cli template store pull dockerfilefaas-cli new <appname>--lang dockerfile
Enter fullscreen modeExit fullscreen mode

Thedockerfile template is created in a new folder which will be named the same value that was used for<appname> in the snippet above.

Next, the NextJS app will be initialized

npx create-next-app tmp-<appname>--ts# ts is optional. I like Typescriptmvtmp-<appname>/* <appname>/*# Relocate all files into the openfaas function folderrm-rf tmp-<appname># temporary folder is no longer needed
Enter fullscreen modeExit fullscreen mode

We have the basis for our NextJS OpenFaas function. The container template files need to be tweaked to work properly.

Update.dockerignore to exclude all unnecessary files from the Docker build

node_modules.next__tests__coveragedocs
Enter fullscreen modeExit fullscreen mode

UpdateDockerfile to properly build the NextJS application into an OpenFaaS function

# This template was adapted from the original node-express template# https://github.com/openfaas-incubator/node10-express-templateFROMopenfaas/of-watchdog:0.8.2aswatchdogFROMnode:14-alpineasshipCOPY --from=watchdog /fwatchdog /usr/bin/fwatchdogRUNchmod +x /usr/bin/fwatchdogRUNaddgroup-S app&& adduser-S-g app appENV NPM_CONFIG_LOGLEVEL warnRUNmkdir-p /home/appWORKDIR /home/appRUNyarnCOPY . /home/app/# Build the server# remove the dev dependenciesRUNyarn&& yarn build\&& npm prune--productionRUNchown-R app:app /home/app&&chmod777 /tmpUSER appENV cgi_headers="true"ENV fprocess="yarn start"ENV mode="http"ENV upstream_url="http://127.0.0.1:3000"ENV exec_timeout="10s"ENV write_timeout="15s"ENV read_timeout="15s"EXPOSE 8080HEALTHCHECK --interval=3s CMD [ -e /tmp/.lock ] || exit 1CMD ["fwatchdog"]
Enter fullscreen modeExit fullscreen mode

With all the configuration completed, you should be able to deploy the function to OpenFaaS

faas-cli login# Prompt for username and passwordfaas-cli up-f <appname>.yml# Deploy he function
Enter fullscreen modeExit fullscreen mode

References

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

  • Location
    Richmond, VA
  • Education
    BS Computer Science
  • Work
    Lead Software Engineer at Capital One Finance
  • Joined

More frommikeyGlitz

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp