![](/img/trans.png)
[英]How to serve static files (CSS, …) with multiples Express app + NGINX as reverse proxy server
[英]Configure Nginx to serve Static files of Angular and also reverse proxy for express
我对 Nginx 非常陌生,想用它来服务 static angular 文件,还代理到后端快速服务器。 我还在对接前端(使用 nginx)和后端。
在前端,我只有一个按钮,它发出请求并从 express 获取一些数据。 每次我尝试这个时,我都会收到一个糟糕的网关错误。
出了点问题,但我没有经验来解决它,请帮忙。
这是简单项目设置的链接: https://github.com/stabkara/nginx-app
前端
dockerfile
# Stage 1: Compile and Build angular codebase
# Use official node image as the base image
FROM node:latest as build
# Set the working directory
WORKDIR /usr/src/app
# Add the source code to app
COPY ./ /usr/src/app/
# Install all the dependencies
RUN npm install
# Generate the build of the application
RUN npm run build
# Stage 2: Serve app with nginx server
# Use official nginx image as the base image
FROM nginx:latest
# Copy the build output to replace the default nginx contents.
COPY --from=build /usr/src/app/dist/nginx-app /usr/share/nginx/html
COPY /nginx.conf /etc/nginx/conf.d/default.conf
# Expose port 80
EXPOSE 80
nginx.conf
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
location / {
root /usr/share/nginx/html;
try_files $uri $uri/ /index.html =404;
}
location /api {
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:3000/api;
}
}
单击按钮后执行的请求
test() {
this.http.get(environment.apiUrl + '/array').subscribe((data) => console.log(data))
}
environment.prod.ts (猜这里可能是错误)
export const environment = {
production: true,
apiUrl: '/api'
};
后端
dockerfile
FROM node:16
# Create app directory
WORKDIR /usr/src/app
# Install app dependencies
# A wildcard is used to ensure both package.json AND package-lock.json are copied
# where available (npm@5+)
COPY package*.json ./
RUN npm install
# If you are building your code for production
# RUN npm ci --only=production
# Bundle app source
COPY . .
EXPOSE 3000
CMD [ "node", "index.js" ]
index.js
const express = require("express");
const app = express();
var cors = require("cors");
const router = express.Router();
const routes = require("./routes")(router, {});
app.use("/api", routes);
app.use(cors());
// Setting the server to listen at port 3000
app.listen(3000, function (req, res) {
console.log("Server is running at port 3000");
});
路线
module.exports = (app) => {
app.get("/", function (req, res) {
res.json({
number: 1,
});
});
// Defining get request at '/multiple' route
app.get("/multiple", function (req, res) {
res.json({
number: 1,
name: "John",
gender: "male",
});
});
// Defining get request at '/array' route
app.get("/array", function (req, res) {
res.json([
{
number: 1,
name: "John",
gender: "male",
},
{
number: 2,
name: "Ashley",
gender: "female",
},
]);
});
return app;
};
我希望你能帮助我。 太棒了,在此先感谢! (服务 static 文件工作正常,但代理不工作)
在容器上下文中, localhost
指的是容器本身。 因此,当您在 nginx 配置中,proxy_pass 到http://localhost:3000/api
时,您将请求发送到 nginx 容器。
您想将其发送到后端容器。 如果您在链接的存储库中使用 docker-compose 文件,那么您可以使用容器的服务名称作为它们的主机名。 因此,如果您将 proxy_pass 更改为
proxy_pass http://backend:3000/api;
它应该将请求传递到后端容器。
我做了一个非常简单的例子来说明你不久前想做的事情。 如果您仍然无法正常工作,请随时查看。 https://github.com/kodedylf/docker-node-nginx
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.