"Encountering Server Unavailability Issue while Deploying Vue App to Azure App Service on Linux

Working on developing a web app with Vue and Azure App Service on Linux has been successful locally. However, encountering a "Service Unavailable" error when attempting to build it on the server.

The project is utilizing NUXT, with the port currently set at 3000. Considering changing it to process.env.PORT instead but unsure of the procedure.

Below are the logs:

2017-12-28 23:51:19.987 INFO - Container logs 
... (log continuation)

Any help or insights would be greatly appreciated! Thank you!

Answer №1

Setting up an Azure App Service on Windows requires:

  • A server.js file
  • An accurate npm start task in your packages.config.

server.js

You can refer to an older basic version or the new 1.x examples for different node servers. These examples demonstrate how to use

const port = process.env.PORT || 3000
, where process.env.PORT is a default environment variable set by Azure.

You may also consider adding an app setting in the portal for your app named PORT to override the default environment variable if needed, although Azure likely hosts on specific ports they are familiar with and expose willingly.

npm start task

Execute node server.js, or simply remove the task altogether as Azure (particularly on Windows) automatically runs it.

Automated deployments I configured git deployment for my app to deploy automatically when I push commits to the master branch. I had to create a custom post-deployment script to execute the necessary npm tasks. You can follow my gist instructions for guidance. While written for Windows, you can adapt a default post-deploy Linux script and include the required customizations as I did.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to import from a .storybook.ts file in Vue with TypeScript and Storybook, including how to manage Webpack configurations

I'm currently utilizing Vue with TypeScript in Storybook. Unfortunately, there are no official TypeScript configurations available for using Vue with Storybook. How can I set up Webpack so that I am able to import from another .storybook.ts file with ...

Issue with Dropzone not functioning correctly within Vue transition modal

I've implemented a dropzone function in the mounted function, which works perfectly when the dropzone is outside of a modal in the view. However, when I try to use it within a modal with a transition effect, it doesn't work. Any suggestions on ho ...

Efficiently transferring JSON files to Azure Cosmos DB using Java Code in bulk

I need help with creating a JSON file using JAVA. The file will have multiple JSONs in it. My goal is to automatically import this file into Azure Cosmos DB once it's been generated. Is there a Java-based solution for achieving this task? Thank you ...

What is the best way to simulate an external class using jest?

My Vue page code looks like this: <template> // Button that triggers the submit method </template> <script> import { moveTo } from '@/lib/utils'; export default { components: { }, data() { }, methods: { async ...

The Open Graph feature in Vue 3 is only functioning properly on the homepage, with issues occurring on other routes

My VueJS website is up and running on GitHub pages, but I have encountered a problem with the open graph settings. They are placed in the <head> section inside /index.html. Here's a snippet of the code: <head> <meta name="descrip ...

Determining when props are updated in Vue.js 2 when passing an object as a prop

Let's say there is an array feedsArray, with a sample value like this: this.feedsArray = [ { id: 1, type: 'Comment', value: 'How are you today ?' }, { id: 2, type: 'Meet', name: 'Daily ...

Performing function in Vue.js when a change occurs

I recently started developing a Vue.js component that includes an input field for users to request a specific credit amount. My current goal is to create a function that will log the input amount to the console in real-time as it's being typed. Ultima ...

Ways to stop user authentication in Firebase/Vue.js PRIOR to email verification

I am currently working on a Vue.js and Firebase authentication interface with an email verification feature. The setup is such that the user cannot log in until they click the verification link sent to the email address provided during the login process. ...

Utilizing V-If and V-Else for Data Value Interpolation - A Guide

In my app, there's a paragraph that users can translate with the click of a button. I use props (props.row.text) and data (this.data.translatedText) to display the text. The data property is initially empty/null, leading to a "data is null" error in ...

VueJS together with Firebase: The guide to password validation

I am currently working on a web form developed using VueJS that enables authenticated users to modify their passwords. The backend system relies on Firebase, and I am facing a challenge in validating the user's current password before initiating the p ...

Vue3 project encountering issues with Typescript integration

When I created a new application using Vue CLI (Vue3, Babel, Typescript), I encountered an issue where the 'config' object on the main app object returned from the createApp function was not accessible. In VS Code, I could see the Typescript &ap ...

Format certain data in Laravel as JSON

When working with my vue.js application and Laravel, I encounter json request error messages. These error messages have a specific structure like the example below: { "error": { "description": [ "The description field is required." ], ...

When text with delimiters is pasted into a Vuetify combobox, why aren't the chips separated correctly by the delimiters?

I'm attempting to create a Vuetify combobox with chips that automatically split the input based on predefined delimiters, such as ,. This means that if I paste the text a,b,c, the component should convert them into three separate chips: a, b, and c. H ...

Create a prototype class in NuxtJS Vue

What is the correct way to set a class to prototype in Vue NuxtJS? I have created a plugin Here is my nuxt.config.js file: plugins: [ { src: "~/plugins/global.js" }, ], The global.js file contains: import Vue from "vue"; import CustomStore from "dev ...

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

I am facing conflicts between vue-tsc and volar due to version discrepancies. How can I resolve this problem?

My vsCode is alerting me about an issue: ❗ The Vue Language Features (Volar) plugin is using version 1.0.9, while the workspace has vue-tsc version 0.39.5. This discrepancy may result in different type checking behavior. vue-tsc: /home/tomas/Desktop/tes ...

Implementing pagination in Nuxt using asyncData

Wondering if it's possible to implement pagination using asyncData in Nuxt? Here is the code snippet I have: <template> <v-container fluid> <v-row> <v-col v-for="sessao in sessoes" :key=" ...

I am attempting to rebuild Vuex's Getting Started example by utilizing multiple components, yet I am struggling to understand how to call root methods from within these components

The project I'm working on can be found here. It is a simple one, but for the purpose of learning, I divided it into index and four js files (parent, child, root, and store). My challenge lies in figuring out how to call the increment and decrement ro ...

The attribute 'y' is not found within the data type 'number'

Currently working on a project using Vue.js, Quasar, and TypeScript. However, encountering errors that state the following: Property 'y' does not exist on type 'number | { x: number[]; y: number[]; }'. Property 'y' does not ...

Set the text for the "Select All Items" option in the PrimeVue Multiselect component to be customized

With PrimeVue, you have the option to include a header in the Multiselect component. This header appears above the checkbox used to select all items. To customize the appearance of the header, you can use the following CSS solution: div.customClassName .p ...