使用 Git (Linux) Web 应用程序进行 Azure 部署

Question

您好，这是我第一次使用 azure 托管项目。我收到一条错误消息，提示我有应用程序错误。 [应用程序错误]

正如日志所示，所有部署均成功，但我收到错误。我该怎么办呢？我缺少什么。我使用 React 作为前端，Node 作为后端。我还使用 Git Actions 进行部署。下图是我的文件夹结构 [文件夹结构]

公共文件夹是我的前端所在的位置。

我还没有使用任何容器，因为我不知道如何使用它。

我尝试重新上传项目，但仍然遇到相同的错误。请帮我解决这个问题

Answer 1

我尝试了Node.js作为后端、React作为前端的示例代码，并将其部署到Azure App Service（Linux）上；成功了。

将这些代码行包含在您的index.js 文件中。

const path = require('path');

app.use(express.static(path.resolve(__dirname, '../client/build')));

app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});

下面是完整的index.js文件。

服务器/index.js：

const express = require("express");
const cors = require('cors');
const path = require('path');
const PORT = process.env.PORT || 3001;
const app = express();
app.use(cors());
app.use(express.static(path.resolve(__dirname, '../client/build')));
app.get("/api", (req, res) => {
    res.json({ message: "Hello from server!" });
});
app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, '../client/build', 'index.html'));
});
app.listen(PORT, () => {
    console.log(`Server listening on ${PORT}`);
});

在 package.json 中包含以下代码行：

  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
  "engines": {
    "node": "^18"
  },

这是完整的 package.json 文件。

package.json:

{
  "name": "react-node-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server/index.js",
    "build": "cd client && npm install && npm run build"
  },
  "engines": {
    "node": "^18"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "cors": "^2.8.5",
    "express": "^4.19.2"
  }
}

客户端/App.js：

import React from "react";
import logo from "./logo.svg";
import "./App.css";
function App() {
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    fetch("http://localhost:3001/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </div>
  );
}
export default App;

我将完整的应用程序部署到单个 Azure 应用程序服务。下面是我的 GitHub 工作流程文件。

工作流程：

name: Build and deploy Node.js app to Azure Web App - kanodejsreactapp
on:
  push:
    branches:
      - main
  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: '18.x'
      - name: Install backend dependencies
        run: npm install
      - name: Install frontend dependencies and build client
        run: |
          cd client
          npm install
          chmod +x node_modules/.bin/react-scripts
          npm run build
      - name: Move build files to server directory
        run: mv client/build server/build
      - name: Zip artifact for deployment
        run: zip -r release.zip ./*
      - 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
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'kanodejsreactapp'
          slot-name: 'Production'
          package: .
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_<Secret_key> }}

Azure 应用服务输出：