繁体   English   中英

配置 Nginx 为 Angular 的 Static 文件提供服务,并为 express 提供反向代理

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM