Проблема с портом 8080 веб-приложения автоматического развертывания Azure

Я использую Azure для автоматического развертывания из моей промежуточной ветки приложения React/Vite. Но я продолжаю получать эту ошибку

2024-07-30T15:16:13.774Z ERROR - Container my-app-staging-front_0_e908af59 for site clear-me-staging-front has exited, failing site start
2024-07-30T15:16:13.839Z ERROR - Container my-app-staging-front_0_e908af59 didn't respond to HTTP pings on port: 8080, failing site start. See container logs for debugging.

Осмотревшись в поисках решения, я добавил переменную среды внутри Azure, выполнив WEBSITES_PORT=8080, а также я изменил файл vite.config.js:

import path from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import checker from 'vite-plugin-checker';

// ----------------------------------------------------------------------

export default defineConfig({
  plugins: [
    react(),
    checker({
      eslint: {
        lintCommand: 'eslint "./src/**/*.{js,jsx,ts,tsx}"',
      },
      overlay: {
        initialIsOpen: false,
      },
    }),
  ],
  resolve: {
    alias: [
      {
        find: /^~(.+)/,
        replacement: path.join(process.cwd(), 'node_modules/$1'),
      },
      {
        find: /^src(.+)/,
        replacement: path.join(process.cwd(), 'src/$1'),
      },
    ],
  },
  server: {
    port: 8080,
  },
  preview: {
    port: 8080,
  },
});

Вот файл my-app-staging-front.yml

# Docs for the Azure Web Apps Deploy action: https://github.com/Azure/webapps-deploy
# More GitHub Actions for Azure: https://github.com/Azure/actions

name: Build and deploy Node.js app to Azure Web App - my-app-staging-front

on:
  push:
    branches:
      - staging
  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js version
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: npm install, build, and test
        run: |
          npm install
          npm run build --if-present
          npm run test --if-present

      - name: Zip artifact for deployment
        run: zip release.zip ./* -r

      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: release.zip

  deploy:
    runs-on: ubuntu-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Unzip artifact for deployment
        run: unzip release.zip

      - name: 'Deploy to Azure Web App'
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'my-app-staging-front'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_SOMESECRETNUMBERS }}
          package: .

И, наконец, мой скрипт в package.json:

  "scripts": {
    "dev": "vite --mode development",
    "start": "vite preview",
    "build": "vite build",
    "build:dev": "vite build --mode development",
    "build:staging": "vite build --mode staging",
    "build:prod": "vite build --mode production",
    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
    "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
    "rm:all": "rm -rf node_modules .next out dist build",
    "re:start": "yarn rm:all && yarn install && yarn dev",
    "re:build": "yarn rm:all && yarn install && yarn build",
    "re:build-npm": "npm run rm:all && npm install && npm run build",
    "dev:host": "vite --host",
    "dev:dev": "vite --mode development",
    "dev:staging": "vite --mode staging",
    "dev:prod": "vite --mode production"
  },

У меня заканчиваются идеи о том, что добавить/изменить, чтобы он заработал, или, по крайней мере, получить более подробную информацию о причине этой ОШИБКИ.

заранее спасибо

P.S. Кроме того, если кто-нибудь знает, почему развертывание занимает 30 минут, мне это тоже поможет.

Попробуйте использовать эту команду в команде запуска `pm2 serve /home/site/wwwroot/<путь к вашей папке сборки/dist> --spa --no-daemon

Vivek Vaibhav Shandilya 31.07.2024 12:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
51
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Приложение React с Vite по умолчанию запускается на порту 5173.

Чтобы обслуживать React с интерфейсным приложением Vite в службе приложений Azure в Linux, вам необходимо обслуживать его, выполнив команду pm2 serve /home/site/wwwroot --spa --no-daemon.

Это сработало для меня.

OUTPUT:

pm2 serve /home/site/wwwroot --spa --no-daemon обслуживает приложение порт 8080

Да, это сработало! Большое спасибо! Я также разделил время развертывания на 3, заменив «run: zip Release.zip ./* -r» на «run: zip -r Release.zip dist» в моем файле yml, следуя логике того, что вы мне дали!

Yohav Rn 01.08.2024 21:05

Другие вопросы по теме