javascript - 如何在 AWS Amplify 上为 react/redux 应用程序运行代理
问题描述
我最近为我的React 应用程序实现了代理(在 Express.js 中),以在发出请求时隐藏 API URL。当我在本地主机上运行代理和应用程序时,它一直运行良好。现在我已准备好将我的应用程序部署到AWS Amplify,我对如何让我的代理在那里运行有点困惑,因为我没有从 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 App 中提出请求的方式
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/**/*
PS:我也"proxy": "http://localhost:5000"
添加到我的 Package.json
编辑 :
我尝试使用像PM2这样的后台任务管理器在构建脚本中运行后期构建,但这仍然不起作用(尽管它在本地运行)
解决方案
我最终在客户端和服务器之间建立了一个代理 lambda 作为我的 API 网关(中间人)。我也有代理拒绝任何不是来自我的网站的请求。
推荐阅读
- python - 我可以将 colab 项目保存在谷歌驱动器上并上传并稍后开始吗?
- php - Codeigniter 如何停止页面重新加载循环?当我使用会话 set_flashdata 时?它会循环
- opengl - 如何在 .obj 模型上正确重复纹理?
- c# - 我有这个存储过程,我想在表单的标签上显示存储过程的返回值
- svg - SVG中元素的z顺序渲染不正确的问题
- python - 使用广播从 3 维数组中减去一维数组(标量列表)
- php - 如何让 file_get_contents 返回当前会话?
- python - AWS Lambda - Python - 在 S3 上传的打包 zip 函数中读取 csv 文件
- php - 为什么在使用codeigniter php中的分页单击下一页时数据没有从数据库中显示
- php - 尝试在 IIS 中复制时拒绝 php 权限访问