Azure 自动部署前端 Web 应用程序端口 8080 问题

Question

我正在使用 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 分钟来部署它也会对我有帮助。

Answer 1

React 与 Vite 应用程序默认在

5173

端口上运行。

要在 Linux 上的 Azure 应用服务中通过 Vite 前端应用程序提供 React，您需要通过运行命令

pm2 serve /home/site/wwwroot --spa --no-daemon

来提供服务。

这对我有用。

OUTPUT

：

pm2 serve /home/site/wwwroot --spa --no-daemon

为应用程序提供服务 端口8080