1、拥有前后端项目，虚拟机（能联网）

检测虚拟机是否有网络

第一步

ip addr

第二步

ping www.baidu.com

2、下载nginx

2、1官网下载

nginx: download，选择需要的版本，建议用稳定版

2、2存进虚拟机中

将下载好的nginx-1.22.1.tar.gz文件放到虚拟机中，通过xftp或者其他工具（放在哪个位置都可以，自己找得到就行）

3、安装使用nginx所需环境

依次执行以下命令，安装需要的包文件

yum install gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel

4、安装和配置nginx

4.1、解压nginx压缩包

tar -zxvf nginx-1.22.1.tar.gz

4.2、进入解压后的压缩包

输入 ls 查看会有一个configure 文件，在此目录下，依次执行以下命令

./configure

make

make install

4.3、进入默认安装地址

cd /usr/local/nginx

里面有这些文件

进入sbin文件

cd sbin

运行nginx

./nginx

浏览器输入你虚拟机的ip地址，会进入下图所示页面，表示运行成功

5、配置nginx

5、1上传前端文件

npm run build

打包前端代码（我这里是vue）放进以下目录，建议放这里

5、2进入以下目录配置conf文件

主要修改的是35行的server文件

server {
        # 需要监听的端口，前端页面在80端口展示（可以改）
        listen       80;
        # 一样写，不用改
        server_name  localhost;
        # 需要的
        location / {
            # 前端dist文件所在目录
            root   html/dist;
            # 照抄
            index  index.html index.htm;
            # 防止路由刷新404，照抄
            try_files $uri $uri/ @router;
        }
        # 照抄
        location @router{
            rewrite ^.*$ /index.html last;
        }
        # 后面会解释
        location /api/ {
            # 后端接口地址
            proxy_pass http://xxxxxx:8000/;
            # 重写路径
            rewrite ^.+api/?(.*)$ /$1 break;
        }

        #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   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }

5、3配置说明

这是我的前端反向代理配置

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

})

后端没有/api开头的接口，前端的反向代理是把带有/api的请求代理到8000端口，因为用了rewrite重写了/api为空字符串，所以真正访问的接口没有/api

前端的baseurl带有/api

后端接口没有/api

就这么写

location /api/ {
            # 后端接口地址
            proxy_pass http://xxxxxx:8000/;
            # 重写路径
            rewrite ^.+api/?(.*)$ /$1 break;
        }

5、4配置完conf文件后

重新启动nginx

./nginx //启动nginx
./nginx -s stop //终⽌nginx
./nginx -s reload //重新加载nginx.conf配置⽂件

记得打开端口，或者关闭防火墙

nginx下载安装到部署上线（保姆级别教程）