配置 Nginx 為 Angular 的 Static 文件提供服務，並為 express 提供反向代理

Question

我對 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 文件工作正常，但代理不工作）

Answer 1

在容器上下文中， 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