Deploy vue.js Quasar App with Azure Portal - azure

I am trying to deploy my Quasar app through Azure Portal. I have created a web app service, connected my github repo through the Deployment centre, and ran the build and deploy github workflow successfully (note: my npm run build calls quasar build which the Quasar docs describe). When I use FileZilla to access my server, I see my entire app along with the dist/spa folder under site/wwwroot so I believe the build worked correctly. Unfortunately, when I try to access my app through the browser, I am welcomed with the default Azure webapp page rather than my app.
Default Azure WebApp Page
I am unsure why my files are not being served. I have deployed a very simple Nuxt.js app in the past using the same approach and managed to deploy it relatively quickly. Perhaps nuxt.js does something under the hood that I am not aware about.
Any leads will be greatly appreciated.

Related

Deploy Next.Js React App to Azure App Service

I created an Azure App Service running Node 16 on Linux. I ran next build and moved all files and folders that were generate inside the .next folder to the Azure App Service. Unfortunately, the app isn't running. I feel like I am missing some configurations or startup commands on Azure to successfully run the app. I would appreciate some help from somone that was able to deploy a NextJs app on Azure App Services. All other articles that I found were not able to solve my problem. This might be due to changes on the Azure platform.

NestJs deployed to Azure Linux Web App wont start

I have spent many days but still can not get this to work.
I have setup a deployment pipeline for NextJS I have the dist folder and I'm also copying the node modules folder etc. The build pipeline works, makes a package which is then deployed to a Azure Linux Web App.
Problem is can not hit the application
I look into the logs and I can see the app has started but for some reason the container fails and the site never works.
I'm pulling my hair out here I have tried everything, read every guide I can find but nothing seems to work. Help me stack-bi-wan-overflow your my only hope.
As you have confirmed in your comment , Converting this to answer to help other community members.
To achieve the above requirement make sure that you have used express instead of using fastify . As fastify must have different network configuration which can not connect with container.
For more information please refer the below links:-
SO THREAD: nestjs to azure windows app service - web.config settings & Angular CLI app not running when deploying to Linux App Service
Blog:- Deploy and run Nest js app to azure

Why can't I access my Azure website after successful deployment

I build a website with React and I deployed it on Azure. I build it and then deployed the build folder with vs code on Azure. The process is actually very easy using VS Code and the Azure extension. It is explained well here.
So far so good, everything worked fine. Now I needed to deploy the same app (the same build folder) but in another webApp. Basically, I needed to have separate versions of the app. So, I did the same things I did the first time (create webapp on Azure -> deploy with VS Code). However, I can't see my website when I go to the url. All I see is the default generated webapp, which is a dummy html page.
It looks something like this:
Hey, Node developers!
Your app service is up and running.
Time to take the next step and deploy your code.
I am seeking to understand this: I deployed the same build folder. I didn't change anything. I can't see my website (I thought it may take some time but I waited for nine hours now)
Things I've tried:
deploy again and again
restart the app on azure
stop and rerun the app on azure
go to the URL on incognito mode
I searched a lot and I've seen some answers that it can be about some path or file in the Azure configurations. However, I don't have anything in my configurations. Here are screenshots of my app configurations on Azure
here is my app configurations (when I go to configurations on Azure)
and these are the general configurations/settings
here is the deployment slots:
The message you are getting is the standard message when the app service is created but nothing is deployed.
Possible explainations are:
the app is being deployed to a different site
the app is being deployed to the same site but a different slot
the deployment is failing
your application is not listening on the port provided by the PORT environment variable
Recently I got into same issue,
Check you node version in package.json. I used this,
"engines": {
"node": "^12.16.3"
}
Azure web service was on Linux server. Startup commnand required in Azure General Settings -> Stack Settings
pm2 serve /home/site/wwwroot --no-daemon
You can also look at the log metrics after deploying or start the service. It will provide you info on the issue.

Migrate database when deploying to Azure App Service

I'm using the ASP.NET Core & Angular startup template from ASP.NET Boilerplate with Multi-Tenancy disabled: 1 database with a single tenant(Default).
I'm also using TeamCity to build/test/publish the projects available in the startup template so I end up with 3 NuGet packages that are getting pushed to Octopus Deploy:
API (Host project, ASP.NET Core Web Application)
Migrator (Console application, capable of migrating the database(s))
UI (Angular App)
I want to deploy this setup to Azure with Octopus Deploy(self hosted, v2018.9.0) in the following way using 2 App Services(Host & UI) and 1 Azure SQL database(Host):
Take the UI and API applications offline, displaying a friendly maintenance message while updating the projects.
Migrate the database using the Migrator package
Deploy the API application package
Deploy the UI application package
Put the API application online, maybe some more tests to check that it's working correctly
Put the UI application online.
If all this was on-prem, I would have no questions. It's the Azure part that I can't figure out because I don't know how to do these things on Azure via Octopus Deploy:
Put an Azure App Service offline/online (using an app_offline.htm file)
Deploy the Migrator package to the API Azure App Service in a special folder(so that I don't overwrite the API deployment) and run the migrator: dotnet [migrator.dll] -q
I tried using the Octopus Deploy "Deploy an Azure Web App" but this step won't let me also deploy the migrator package and run it before the API package is deployed. Or does it? I don't know how.
I tried using the "Run an Azure PowerShell script" but this executes on the Octopus Deploy server and not on the Azure App Service environment right?
Maybe there are other, even better, approaches deploying this setup to Azure?
You can use App service slots to swap in/out version of your logical applications. When you swap there's a warming up that occurs and no loss of traffic.
So basically deploy to backup slot, then swap production with backup slot.
For the db I don't think your strategy is valid. There are some assumptions you are making that will not make your life easy. I would look at handling the db deployment separately with no breaking changes but that's my opinion.
I'm not familiar with Octopus or TeamCity so I won't go into details about those.

Deploying Aurelia application to Azure

I have followed all the steps here to deploy my Aurelia application to Azure, however I am getting the following error when I try to access the application URL:
You do not have permission to view this directory or page.
My application is essentially the same as the skeleton app and has no server.js or node.js file.
Can anybody point me in the right direction on how to deploy my application?
According the intrdocution:
Aurelia is a next generation UI framework.
Which means that the Aurelia is a fronted javascript library, and a Node.js server application, which should be based on a HTML+CSS application architecture. Need a index.html file in the root directory of your application at least. You can make a complete Aurelia application as mentioned at http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/quick-start/1, and deploy it to Azure.
Furthermore, we can leverage Custom Deployment Script to bundle the Javascript sources via gulp or babel, you can refer the answer of Custom startup command for Node.js app on Azure with Babel 6 for details.

Resources