如何在 AWS Amplify 上运行代理 react/redux 应用程序

Question

我最近为我的 React App 实现了 Proxy（在 Express.js 中）以隐藏 API URL's 在提出请求时。当我运行它是本地主机上的代理和应用程序时，它一直运行良好。既然我已准备好将我的应用程序部署到 AWS Amplify，我对如何让代理到 [=69] 有点困惑=] 因为我没有从 CLI 手动启动应用程序和代理。我需要使用 EC2 实例 还是可以使用 Amplify 来实现？

任何帮助将不胜感激！

这是我的项目目录的样子：

这就是我的 Server.js 的样子：

const express = require('express'); 
const bodyParser = require('body-parser');
const app = express(); 
const axios = require('axios');
var cors = require('cors')
app.use(cors())
app.use(bodyParser.urlencoded({
    extended: false
 }));

const BASE_URL = 'https://my-aws-lambda-base-url/dev'
const port = process.env.PORT || 5000; 


app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header(
      "Access-Control-Allow-Headers",
      "Origin, X-Requested-With, Content-Type, Accept"
    );
    next();
  });

app.listen(port, () => console.log(`Listening on port ${port}`)); 

  app.use('/contact', require('body-parser').json(), async (req, res) => {
  
    
    try {
      
      await axios.post(`${BASE_URL}/contact`, {

              Email : req.body.Email,
              type :  req.body.type,
              Message : req.body.Message,
              Phone : req.body.Phone    
          },
           {
            headers: {
                
                'Content-Type': 'application/json',
            }
        },
          
          ).then(function(response) { 
    
      const result = response.data

      console.log(result)
      if(result && result.Message)  {

        res.setHeader('Content-Type', 'application/json');
        res.send(JSON.stringify(result))
      }
      
  }).catch((e)=> {
  
            console.log(e)  
    res.send(false)
         
  })
} catch (error) {
     
  console.log(error)
  res.send(false)
}
 });

这就是我在我的 React 应用程序中发出请求的方式

export  async function sendContact(request){

    try {
        

        if(!request.Phone)
            request.Phone = false

        if(request.textMe){
            request.type = "BOTH"
        }
        else{
            request.type = "EMAIL"
        }    
            let result ;
           await fetch('/contact', {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    Email : request.Email,
                    type : request.type,
                    Message : request.Message,
                    Phone : request.Phone
                 }) 
                }
                
                ).then(async response => 
                    await response.json()
                ).then(data => 
                         result = data 
                ).catch((e)=> { 
                    notifyError(e.response.data.Message) 
                    return false           
                })
        console.log(result)
    return result

} catch (error) {
        
    console.log(error)
}
              
}

最后，这是来自 Amplify 的我的应用程序构建脚本

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm i
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

P.S : 我也有 "proxy": "http://localhost:5000" 添加到我的 Package.json

编辑：

我尝试使用 PM2 之类的后台任务管理器来运行 post 在构建脚本中构建，但仍然无效（尽管它在本地有效）

Answer 1

我最终启动了一个代理 lambda 作为我的客户端和服务器之间的 API 网关（中间人）。我也有代理拒绝任何不是来自我网站的请求。

如何在 AWS Amplify 上运行代理 react/redux 应用程序

How to run proxy for react/redux application on AWS Amplify

javascript

yaml

express

reactjs

aws-amplify

如何在 AWS Amplify 上 运行 代理 react/redux 应用程序

How to run proxy for react/redux application on AWS Amplify

javascript

yaml

express

reactjs

aws-amplify

如何在 AWS Amplify 上运行代理 react/redux 应用程序