Docker Nginx 部署 React 的一些问题

​​docker pull nginx 拉取镜像​​

​​docker images​​ 查看镜像

docker run -d -p 9002:80 \
--restart=always \
--name nginx-web \
-v /home/react/www:/usr/share/nginx/html \
-v /home/react/conf/nginx.conf:/etc/nginx/nginx.conf \
-v /home/react/logs:/var/log/nginx nginx \
复制代码

-p 9002:80： 将容器的 80 端口映射到主机的 8082 端口. ​​9002​​随便设置只要未被占用--restart=always ：自动重启 --name ：将容器命名为

-v /home/nginx/www:/usr/share/nginx/html将我们自己创建的 www 目录挂载到容器的 /usr/share/nginx/html。

-v /home/nginx/conf/nginx.conf:/etc/nginx/nginx.conf将我们自己创建的 nginx.conf 挂载到容器的 /etc/nginx/nginx.conf。

-v /home/nginx/logs:/var/log/nginx将我们自己创建的 logs 挂载到容器的 /var/log/nginx。

​​docker ps ​​ 查看容器

把react build 下文件放到宿主机 ​​/home/nginx/www​​ 目录下

在浏览器里面输入 http://ip:9002 就能看到首页了

但是请求后台会报错，因为前后端分离产生跨域问题，开发环境使用​​http-proxy-middleware​​解决跨域问题，​​http-proxy-middleware​​是node服务的中间件，打包后不在使用node服务，所以nginx服务器要做反向代理配置。

​​docker cp 容器Id:/etc/nginx/nginx.conf /home/react/conf/​​ 拷贝容器中nginx.conf配置文件到宿主机的/home/react/conf

nginx.conf内容如下

user  nginx;
worker_processes  auto;

error_log  /var/log/nginx/error.log notice;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;
 server{
       listen 9002;
       charset utf-8;
       server_name 192.168.112.135;

       location /api/ {
          proxy_pass http://192.168.112.135:8080;
          proxy_redirect default;
       }
    }
    include /etc/nginx/conf.d/*.conf;
}
复制代码

注意最后一行​​include /etc/nginx/conf.d/*.conf;​​ 这个是server配置反向代理，如果要把server直接写到nginx.conf里要把这个删掉，或者直接单独一个配置文件，修改引用路径。

server {
    listen       80;
    server_name  localhost;
    #access_log  /var/log/nginx/host.access.log  main;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }

    location /api/ {
              proxy_pass http://192.168.1.203:8082/;
    }

    location /react/traffic {
        proxy_pass http://192.168.1.142:9003/react/traffic;
        try_files  $uri $uri/ /index.html;
        #rewrite "^/react/traffic(.*)$" $1 break;
    }

    location /react/signIn {
        proxy_pass http://192.168.1.142:9003/react/signIn;
        try_files  $uri $uri/ /index.html;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}
复制代码

nginx配置文件修改后要重启nginx才会生效 直接重启容器就可以

跳转端口会丢失，百度说加这句​​proxy_set_header Host $host:$server_port​​就不会丢失端口，不能解决我的端口丢失问题，后来发现是在是在react使用window.location.href = '/react/traffic'进行跳转导致，使用这样跳转就不会存在端口丢失问题。

首页进入页面正常，刷新之后出现404，添加​​try_files $uri $uri/ /index.html;​​