关于自己Nginx的使用（ant design pro 部署）

news2024/11/25 0:48:39

一原因

工作需要部署 ant design pro 框架开发的前端程序，并且需要有用到代理。就选择了nginx部署。

二使用nginx部署 ant design pro 框架程序

1. 前端项目打包

（1）打包命令：npm run build 或者 yarn bulid

（2）打包完成后，会在项目目录出现dist文件夹，如下图：

（3）测试打包好的代码是否可以正常运行

① 安装serve。安装命令：npm i serve -g

② 运行测试命令：serve dist 。运行结果如下，说明打包成功。

2. 使用nginx部署

（1）下载nginx，并解压。nginx下载地址：http://nginx.org/en/download.html。

（2）将打包好的项目中的dist文件夹放到nginx中html文件夹下。

（3）找到config文件夹中的nginx.conf，并修改（下面配置文件是自己项目配置，具体的配置，需要看项目需要（主要是代理方面location中））。

# 全局块
worker_processes  1;

#event块
events {
    worker_connections  1024;
}

#http块
http {

    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #server 块 (可以有多个，对应不同的服务)
    server {
        #前端访问端口
        listen 5000;

        gzip on;
        gzip_min_length 1k;
        gzip_comp_level 9;
        gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
        gzip_vary on;
        gzip_disable "MSIE [1-6]\.";

        #location块
        location / {
            root html/dist;
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        # 配置自己的代理
        #  /aidss/api/system/：配置需要代理接口
        #proxy_pass：配置需要寻找的目标服务器

        location /aidss/api/system/ {
 	        proxy_pass http://192.168.1.56:8080;
            proxy_set_header   X-Forwarded-Proto $scheme;
            proxy_set_header   Host              $http_host;
            proxy_set_header   X-Real-IP         $remote_addr;
        }
       
    }

}

（4）启动nginx服务

① 使用命令启动：

在nginx.exe目录下打开cmd窗口。运行命令：nginx -c conf/nginx.conf ，nginx服务就开启成功了，因为我们在配置文件中配置的端口为5000，所以，可以在浏览器打开地址：http://localhost:5000/,访问到我们部署的网站。