我正在使用Nginx，两个服务两个静态网站（实际）。
http://example.com应该为站点A服务，而http://example.com/b应该为站点B服务。
这是我的Nginx配置
server {
listen 80;
listen [::]:80;
server_name example.com;
location / {
alias /var/www/html/site_a/;
try_files $uri /index.html;
}
location /b {
alias /var/www/html/site_b/;
try_files $uri $uri/ /index.html;
}
}
如果请求网址为http://example.com/，则返回site_a / index.html。
如果请求网址为http://example.com/b/，则返回site_b / index.html。
如果请求网址为http://example.com/b/abc，则返回 site_a / index.html 。
需要进行哪些更改，以便http://example.com/b/ *始终返回site_b / index.html？
答案 0 :(得分：0)
我找到了解决方法Nginx location configuration (subfolders)。
像 class Topping extends React.Component {
constructor(props) {
super(props);
this.addToppingAction = this.addToppingAction.bind(this);
this.handleDelete = this.handleDelete.bind(this);
this.state = {
toppings: [],
topping: "",
price: 0
};
}
onChange = e => {
this.setState({ [e.target.name]: e.target.value });
};
componentDidMount() {
this.getTopping();
}
getTopping() {
axios
.get("/topping/")
.then(res => {
this.setState({
toppings: res.data
});
})
.catch(err => console.log(err));
}
addToppingAction(e) {
e.preventDefault();
const pizza = {
name: this.state.topping,
price: this.state.price
};
axios
.post("/topping/add", pizza)
.then(res => {
notifications.addNotification({
message: res.data.topping,
type: "success",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 2000
}
});
this.getTopping();
this.setState({ topping: "", price: 0 });
})
.catch(err =>
notifications.addNotification({
message: err.data,
type: "danger",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 2000
}
})
);
}
handleDelete(topping) {
if (window.confirm("Delete Topping?" + topping.name)) {
axios
.get("/topping/delete/" + topping._id)
.then(res => {
notifications.addNotification({
message: res.data,
type: "success",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 5000
}
});
this.getTopping();
})
.catch(err => {});
} else {
notifications.addNotification({
message: "action Cancelled",
type: "danger",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 5000
}
});
}
}
render() {
const { topping, toppings, price } = this.state;
const columns = [
{ dataField: "_id", text: "ID", hidden: true },
{ dataField: "name", text: "Toppings" },
{ dataField: "price", text: "price" },
{
dataField: "databasePkey",
text: "Remove",
editable: false,
formatter: (cellContent, sizes) => {
return (
<button
className="btn btn-danger btn-xs"
onClick={() => this.handleDelete(sizes)}
>
x
</button>
);
}
}
];
const cellEditProps = {
mode: "click",
blurToSave: true,
beforeSaveCell(oldValue, newValue, row, column, done) {
if (window.confirm("Apply Changes?")) {
axios
.post("/topping/update/" + row._id, row)
.then(res => {
notifications.addNotification({
message: res.data,
type: "success",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 5000
}
});
})
.catch(err => {
console.log(err);
notifications.addNotification({
message: "Update Error",
type: "danger",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 5000
}
});
});
done(); contine to save the changes
} else {
notifications.addNotification({
message: "action Cancelled",
type: "danger",
insert: "top",
container: "bottom-right",
dismiss: {
duration: 5000
}
});
done(false); reject the changes
}
return { async: true };
}
};
return (
<div className="row">
<div className="col-12 col-md-4">
<h5>Add Topping</h5>
<Form onSubmit={this.addToppingAction} className="pb-4">
<div className="form-group">
<label className="col-form-label" htmlFor="topping">
Topping
</label>
<input
type="text"
name="topping"
value={topping}
onChange={this.onChange}
placeholder="Topping"
className="form-control"
/>
</div>
<div className="form-group">
<label className="col-form-label" htmlFor="price">
Price
</label>
<input
type="number"
step="0.1"
name="price"
value={price}
onChange={this.onChange}
placeholder="Price"
className="form-control"
/>
</div>
<button className="btn btn-outline-secondary" type="submit">
Add Toppings
</button>
</Form>
</div>
<div className="col-12 col-md-8">
<h5>Click to edit Topping</h5>
<BootstrapTable
keyField="_id"
data={toppings}
columns={columns}
cellEdit={cellEditFactory(cellEditProps)}
/>
</div>
</div>
);
}
}
export default Topping;
和alias这样的外观无法正常工作。