How to run NextJS application on Azure

How to run NextJS application on Azure

Last month I faced the challenge of running NextJS on Azure web apps.

Last month I faced the challenge of running NextJS on Azure web apps.

As I mentioned in one of my previous blogs, Azure is an excellent piece of “software,” but you are likely to experience _plenty _of bugs while you are on the road to install your “not .NET application.”

I hope the following tutorial will help you avoid some of my mistakes.

Before the start, there are two things to consider:

1) Vercel (the creator of NextJS) strongly recommends using their own hosting. It’s understandable since providing hosting for NextJS is probably their primary model of monetization. But it also means their documentation doesn’t focus on other cloud providers.

2) The second problem turned out to be the lack of documentation for Azure. Microsoft doesn’t have a really great tutorial on installing NextJs on Azure — I can imagine why. It is not really their responsibility. They just provide hosting and more sophisticated services built on top of that. Supporting the NextJS (and other Javascript frameworks) has not been their main goal so far.

Well, I needed to pull out all the stops to succeed with it. I didn’t find any working or up-to-date tutorials. So, I came up with the following plan:

1) Use the Linux Web App

2) Take advantage of the fact that the directory “site” is *persisted and stays connected *to the docker container when it starts. That is important because it means that all you need to do manually is to install the NextJS server package once.

3) Then, we are allowed to deploy a built application (everything in path .next except for the folder “_cache_”).

The main benefit is that you will *accelerate *the deployment and get a simplified continuous integration pipeline. You do not have to cope with “_npm install/yarn_” every time.

Let’s look at how to set it up. I assume that you have already created a new Linux Web App in Azure.

  1. In Azure portal, create FTP credentials

2. Connect to the FTP server and upload a file “package.json” with your NextJS application.

3. Then open SSH

4. There, run npm install in site or whatever package manager you prefer.

Note: It was pretty surprising that I had to repeat this step several times because SSH occasionally disconnects without any warning. Really frustrating, as you might imagine.

5. After that, upload your built application (usually just the “.next” folder)

6. Set “WEBSITES_PORT” to your port on where your application runs. In older tutorials, you may see a setting called “PORT” — it works the same, but this setting has been deprecated, and it is not granted that it will work in the future.

X) Continous intergration(CI)

CI was the major culprit. I decided to put off elaborating the topic for my next post. It was a horrible experience which is why it definitely deserves its own post :).

Additional notes or advice:

  • Be patient. It sometimes seems that a restart of the application did not work.
  • Connection to the SSH terminal is getting lost regularly. I had to run yarn a few times before it finished.
  • Log stream — I don’t really understand why log messages are, from time to time, sorted randomly instead of being displayed by the time of their creation. So don’t be confused a look at the date of creating.
  • In addition, you might experience the error:
  • “ yarn-metadata.json: Unexpected end of JSON input.”
  • To fix it, just run: “yarn cache clean.”
  • A notorious message from yarn:
  • “There appears to be trouble with your network connection. Retrying…”
  • You can prolong the timeout of yarn, so to get rid of the message, call yarn install like this:
  • yarn install — network-timeout 1000000
  • And finally, sometimes you will see this message when trying to open SSH:

nextjs azure

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How to set up Azure Data Sync between Azure SQL databases and on-premises SQL Server

In this article, you learn how to set up Azure Data Sync services. In addition, you will also learn how to create and set up a data sync group between Azure SQL database and on-premises SQL Server.

Analyze Azure Cosmos DB data using Azure Synapse Analytics

This article will help you understand how to analyze Azure Cosmos DB data using Azure Synapse Analytics.

Getting Started With Azure Event Grid Viewer

In the article, we will go to the next step to create a subscription and use webhook event handlers to view those logs in our Azure web application.

Azure Automation: Automate Azure SQL Database indexes and statistics maintenance

This article will show how to automate Azure SQL Database index and statistics maintenance.

How to access an Azure SQL database from Azure Data Lake Analytics

In this article, we will learn to access data in an Azure SQL database from Azure Data Lake Analytics.