Question

我是React JS的新手。我正在尝试使用nginx配置，

这是我的文件

nginx.conf

# auto detects a good number of processes to run
worker_processes auto;

#Provides the configuration file context in which the directives that affect connection processing are specified.
events {
    # Sets the maximum number of simultaneous connections that can be opened by a worker process.
    worker_connections 8000;
    # Tells the worker to accept multiple connections at a time
    multi_accept on;
}


http {
    # what times to include
    include       /etc/nginx/mime.types;
    # what is the default one
    default_type  application/octet-stream;

    # Sets the path, format, and configuration for a buffered log write
    log_format compression '$remote_addr - $remote_user [$time_local] '
        '"$request" $status $upstream_addr '
        '"$http_referer" "$http_user_agent"';

    server {
        # listen on port 80
        listen 80;
        # save logs here
        access_log /var/log/nginx/access.log compression;

        # where the root here
        root /var/www;
        # what file to server as index
        index index.html index.htm;

        location / {
            # First attempt to serve request as file, then
            # as directory, then fall back to redirecting to index.html
            try_files $uri $uri/ /index.html;
        }



        # Media: images, icons, video, audio, HTC
        location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
        expires 1M;
        access_log off;
        add_header Cache-Control "public";
        }

        # Javascript and CSS files
        location ~* \.(?:css|js)$ {
            try_files $uri =404;
            expires 1y;
            access_log off;
            add_header Cache-Control "public";
        }

        # Any route containing a file extension (e.g. /devicesfile.js)
        location ~ ^.+\..+$ {
            try_files $uri =404;
        }
    }
}

因此，当我遇到请求时，我也会收到405错误

我在这里尝试的是我想对运行在不同端口上的服务器进行API调用。所以我尝试了这种方式。但是现在我无法做到这一点。

任何人都可以告诉我我需要更改的地方吗？

Answer 1

您代理了您的API网址吗？

{
...
,
  "proxy": "localhost_or_url: your_port",
  "scripts": {
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

顺便说一句，请记住，您需要运行生产版本的应用程序，以便可以通过nginx为其提供服务

Answer 2

为您的应用程序创建nginx配置

~/.vim/after/syntax/markdown.vim

minlines=

为您的后端api创建nginx配置

sudo nano /etc/nginx/sites-available/your_domain.com

server {
    listen 80;
    listen [::]:80;
    server_name your-domain.com;
    access_log /var/log/nginx/your-domain.access.log;
    root /var/www;
    # what file to server as index
    index index.html index.htm;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to redirecting to index.html
        try_files $uri $uri/ /index.html;
    }
}

创建符号链接以启用应用程序。

sudo nano /etc/nginx/sites-available/api.your_domain.com

server { listen 80; listen [::]:80; server_name api.your-domain.com; access_log /var/log/nginx/api.your-domain.access.log; root /var/www; # what file to server as index index index.html index.htm; location / { proxy_pass http://127.0.0.1:8081/; } }

检查错误。

sudo ln -s /etc/nginx/sites-available/your_domain.com /etc/nginx/sites-enabled/

重启nginx

sudo ln -s /etc/nginx/sites-available/api.your_domain.com /etc/nginx/sites-enabled/

将react build文件复制到nginx -t（它应该有一个index.html文件）

确保后端在端口8081上运行。

将Api调用从react应用发送到sudo service nginx restart

结合使用ngInx和react js

2 个答案: