nginx部署前端项目react，vue项目

前段时间请手把自己的nodejs项目部署到上去之后(可以看我之前的文章)，最近又把自己react项目部署了上去，有一说一是真的好玩。

node部署请移步

react和vue部署方式一样的，需要打包项即可

首先你得有以下所需

• 需要有自己的服务器
• 自己的后端代码，已经部署上去的（如果你使用的是nodejs可以看我之前发布的nodejs部署文章，来进行发布）
• 基础的配置我就不一一列举出来了，那我们就开始

第一步：下载nginx压缩包，以及所需的环境

用wget命令下载包

wget -c http://nginx.org/download/nginx-1.14.2.tar.gz

解压该包

tar -zxvf nginx-1.14.2.tar.gz

进入你解压的目录下 运行  ./configure   使用默认配置

./configure 

编译安装nginx

首先在当前目录

make

如果make报错这个

make: *** No rule to make target `build', needed by `default'. Stop 

yum -y install gcc-c++ 

yum -y install pcre pcre-devel
yum -y install zlib zlib-devel
yum -y install openssl openssl-devel  

就可以了

然后回车，如果编译出错，请检查是否前面的环境安装都没有问题。
编译成功之后，就可以安装了，输入以下指令：

make install  

第二步：开始部署

（1）首先把打包的文件放到home下

（2）配置nginx.conf

worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    server {
        listen       8083;  #  配置的前端服务端口
        server_name  localhost;
        location / {
            root /home/front/dist;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;   # 解决刷新页面变成404问题的代码
           }
        location  ^~/api/ {	  # 配置nginx 的反向代理
	            rewrite  ^/api/(.*)$  /$1 break;  # 重写地址
                proxy_pass   http://106.13.xx.xxx:8888;  # 配置的后端端口
                }       
         location = /50x.html {
             root   html;
         }

    }
}

nginx命令   

首先cd到nginx-1.14.2 下的objs 下

启动nginx

nginx 

快速停止nginx服务

./nginx -s stop

优雅的停止服务，即处理完毕当前的任务后退出

./nginx -s quit

重新加载配置文件

./nginx -s reload 

 到这差不多就结束了

记得在服务器上开放端口以及加安全组

 打开防火墙

1.开启防火墙
systemctl start firewalld.service
2.重启防火墙
systemctl restart firewalld.service
3.开放80端口
firewall-cmd --permanent --add-port=80/tcp （–permanent永久生效，没有此参数重启后就失效）
 

完美使用，完结撒花

新增nginx配置项

api 是服务端口， wsapi 是websocket，想要了解更多ws配置的可以看我这个文章，前端 webSocket配置代理_vue websocket 代理配置-优快云博客

server {
    listen 80;  # 监听80端口上的HTTP请求
    server_name localhost;  # 设置服务器名称为localhost
    client_max_body_size 1024m;  # 限制客户端请求体的最大大小为1024MB

    location / {
        root /opt/hkw-ids2000/front/ids-front/dist;  # 设定根目录为静态文件的存放路径
        index index.html index.htm;  # 指定默认的首页文件
        try_files $uri $uri/ /index.html;  # 尝试访问请求的文件，如果文件不存在，则返回index.html（用于单页应用）
    }

    location /api {
        rewrite ^.+api/?(.*)$ /$1 break;  # 移除/api前缀并重写请求路径
        # proxy_pass http://192.168.0.177:7000/;  # 被注释掉的行，备用的后端服务器地址
        # proxy_pass http://localhost:7000/;  # 被注释掉的行，备用的后端服务器地址
        proxy_pass http://localhost:7000/;  # 将请求转发到后端服务器localhost:7000
        proxy_set_header Host $host;  # 保留原始请求中的Host头
        proxy_set_header Cookie $http_cookie;  # 保留原始请求中的Cookie头
        proxy_set_header X-Real-IP $remote_addr;  # 传递客户端真实IP地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递客户端IP地址链
        proxy_redirect default;  # 使用默认规则处理后端服务器的重定向
        add_header Access-Control-Allow-Origin *;  # 允许所有来源的跨域请求
        add_header Access-Control-Allow-Headers X-Requested-With;  # 允许跨域请求使用X-Requested-With头
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;  # 允许跨域请求使用GET, POST和OPTIONS方法
    }

    location /wsapi {
        rewrite /wsapi/(.*) /$1 break;  # 移除/wsapi前缀并重写请求路径
        #proxy_pass http://192.168.0.177:7000/;  # 被注释掉的行，备用的后端服务器地址
        proxy_pass http://localhost:7000/;  # 将请求转发到后端服务器localhost:7000
        proxy_http_version 1.1;  # 使用HTTP/1.1协议
        proxy_set_header Host $host;  # 保留原始请求中的Host头
        proxy_set_header X-Real-IP $remote_addr;  # 传递客户端真实IP地址
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 传递客户端IP地址链
        proxy_read_timeout 120s;  # 设置读取后端服务器响应的超时时间为120秒
        proxy_set_header Upgrade websocket;  # 用于升级到WebSocket协议
        proxy_set_header Connection Upgrade;  # 设置连接为Upgrade以支持WebSocket
    }

    error_page 500 502 503 504 /50x.html;  # 指定500、502、503和504错误页面的路径
    location = /50x.html {
        root html;  # 指定错误页面的根目录
    }
}