xm cloud deployment to azure static web app. | Error: Backend call failure | server error | System.InvalidOperationException: at Mono.Unix.UnixFileSystemInfo.AssertValid

Deploy Sitecore headless JSS Next.js app to azure static web app

Prem Prem on 7/9/2023 1:06:50 PM

We are working on XM Cloud project, where Sitecore projects is XM Cloud Portal and its frontend is in Next.js in local, It is headless SXA projects with JSS and SXA template current version of Sitecore JSS.

We have requirement to deploy the Sitecore JSS with Next.js app to Azure Cloud. We planned to deploy the the JSS Next.js app to azure static web app.

For deployment POC I created on Sitecore JSS Next.js app using Sitecore JSS CLI,

You can create the Sitecore headless next.js app using JSS CLI, follow the link : Sitecore Jss Next.js app setup

but for this POC I am trying to deploy the XMCloud starter kit given by Sitecore.

You can find it my Github account. repo xmcloudstarterkit here.

Steps:

1. Download or clone the xmcloudstarter kit.

2. Open it in vs code and run command: npm install

3. Install latest Sitecore JSS CLI command: npm install -g @sitecore-jss/sitecore-jss-cli

4. Create headless SXA site in xm cloud portal and publish

5. replace some necessary values of .env file like: SITECORE_API_KEY,GRAPH_QL_ENDPOINT, JSS_APP_NAME, FETCH_WITH with your actual xm cloud portal values.

6. run the nextjs starter kit in connected mode : jss start:connected

It will lunch in localhost 3000.

Now Cause Our purpose is to deploy to azure static webapp.

I build the nextjs app with command: npm run build

then I created the repository name xmcstarterkit in github and pushed to code to main branch.

I created azure static web app with linux os. for detail visit the link: create azure static web app

Steps:

1. Open azure portal https://portal.azure.com/

2. Create a resource group

3. open resource group and search azure static app

4. create azure static app and minimum possible configurations, in my case i chose the linux os with minimum service plan.

5. choose the deployment option github and choose the repo of xmcloud starterkit.

6. Choose the app location, artifact location and api location(better to keep it default for now)

7. finish the creating azure static web app.

8. It will create Github action automatically.

Need a little work around:

my github actions for sitecore jss next.js

Issues you may get:

---End of Oryx build logs---

Finished building app with Oryx

An unknown exception has occurred

---End of Oryx build logs---

Finished building app with Oryx

[WARNING] Api Directory Location: 'api' could not be found. Azure Functions will not be created.

An unknown exception has occurred

---End of Oryx build logs---

Oryx built the app folder but was unable to determine the location of the app artifacts. Please specify the app artifact location.

Solution: For my case I added these in Github CI Action-

app_location: "/" # App source code path


          api_location: "" # Api source code path - optional


          app_artifact_location: "public"


          output_location: "" # Built app content directory - optional

Next I updated "PUBLIC_URL", "SITECORE_API_KEY" ,"JSS_EDITING_SECRET" ,"JSS_APP_NAME", "GRAPH_QL_ENDPOINT", the the .evn file and pushed to github repo again.

then I updated the azure static web app configuration app settting with following values:

{
    "name": "FETCH_WITH",
    "value": "GraphQL"
  },

  {
    "name": "GRAPH_QL_ENDPOINT",
    "value": "https://edge.sitecorecloud.io/api/graphql/v1"
  },

  {
    "name": "JSS_APP_NAME",
    "value": "nextjs-sitecorjss"
  },

  {
    "name": "JSS_EDITING_SECRET",
    "value": "54zaKx4VAg2iuagTSsvZGM"
  },

  {
    "name": "PUBLIC_URL",
    "value": "https://azuestaticjssdemoxx.azurestaticapps.net"
  },

  {
    "name": "serverSideRenderingEngineApplicationUrl",
    "value": "https://azuestaticjssdemoxx.azurestaticapps.net"
  },

  {
    "name": "serverSideRenderingEngineEndpointUrl",
    "value": "https://azuestaticjssdemoxx.azurestaticapps.net/ api/editing/render"
  },

  {
    "name": "SITECORE_API_HOST",
    "value": "xm cloud portal content editor url"
  },

  {
    "name": "SITECORE_API_KEY",
    "value": "ssapi key from xm portal"
  }

I updated the these values in Sitecore xmc portal also and published and deployed.

I tried to access the jss azure static web url , getting issue.

Backend call failure

I created the created the app insights for azure static web app to track errors.

find the issue like below:

System.InvalidOperationException:
   at 
Mono.Unix.UnixFileSystemInfo.AssertValid
 (Mono.Posix.NETStandard, Version=1.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51)
   at Microsoft.Azure.WebJobs.Script.Workers.
Http.HttpWorkerProcess.AssignUserExecute
PermissionsIfNotExists (Microsoft.Azure.WebJobs.Script, Version=4.21.0.0, Culture=neutral, PublicKeyToken=null: /src/azure-functions-host/src/WebJobs.Script/Workers

/Http/HttpWorkerProcess.cs:75

If you ever faced this issue with next.js app deployment into azure , need your suggestions or advise. you can leave comments here.

See More articles about Sitecore XM Cloud development click here

0 Comments on this post

Comments(0)||Login to Comments

see more..

MYPIBLOGs

Deploy Sitecore headless JSS Next.js app to azure static web app

Comments(0)||Login to Comments

Categories