安装node和npm
sudo apt update
apt install nodejs
node --version
npm --version
npx create-react-app my-app
替换src文件夹和package.json文件
cd my-app
npm install
如果安装这一步报错,运行
npm install --legacy-peer-deps
即可
npm start
cd src
node server.js
node imageServer.js
npx create-react-app admin-app
cd admin-app
npm install
PORT=3001 npm start
这里创建一个用户名为admin,密码为admin,姓名为管理员,管理员权限为true的用户,环境为部署所在服务器的localhost:8989 实际创建中,用户名和密码要尽可能复杂
curl -X POST -H "Content-Type: application/json" -d '{"username": "admin", "password": "admin", "name": "admin", "is_admin": true}' http://localhost:8989/user/create
my-app:3000 -> 15711 admin-app:3001 -> 15712 server.js:8989 -> 15789
所以要部署时需要根据自己的情况进行修改,需要修改的地方为:
app.use(cors({
origin: ['http://localhost:3000', 'http://localhost:3001', 'https://www.xihelin.com:15711', 'https://www.xihelin.com:15712'],
credentials: true
}));
const files = req.files.map(file => `https://www.xihelin.com:15789/uploads/${file.filename}`);
const corsOptions = {
origin: ['http://localhost:3000', 'http://localhost:3001', 'https://www.xihelin.com:15711', 'https://www.xihelin.com:15712'],
credentials: true,
};
const response = await axios.post('https://www.xihelin.com:15789/submit', formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
timeout: 60000, // Add a timeout limit for axios request. 5000ms in this case
});
try {
const response = await axios.post('https://www.xihelin.com:15789/user/login', { username, password });
if (response.data.success) {
onLogin();
setCookie('username', response.data.name, { path: '/' }); // 登录成功后,设置username cookie
} else {
setError(true);
}
} catch (error) {
setError(true);
}
const response = await axios.get('https://www.xihelin.com:15789/data', { withCredentials: true });
await axios.delete(`https://www.xihelin.com:15789/data/${id}`, { withCredentials: true });
// Then fetch data again after delete to keep the list updated
const response = await axios.get('https://www.xihelin.com:15789/data', { withCredentials: true });
const response = await axios.get('https://www.xihelin.com:15789/users', { withCredentials: true });
await axios.delete(`https://www.xihelin.com:15789/user/${id}`);
await axios.post('https://www.xihelin.com:15789/user/create', newUser);
将上面的链接修改为自己的域名和转发的端口
安装serve来运行build文件夹
npm install -g serve
对两个文件夹中的build文件夹,使用命令:
serve -s my-app/build -l 3000
和
serve -s admin-app/build -l 3001
仍然要手动运行后端文件server.js和imageServer.js
cd my-app/src
node server.js
node imageServer.js