Nginx 部署 Ant Design pro

利用Ant Design pro開發的項目，如何用Nginx部署呢？

第一步：把項目打包，打包命令如下：

npm run build

運行完畢會在項目目錄下生成dist文件夾。

第二步：想要測試打包好的代碼是否可以正常運行，安裝serve，如下命令

npm i serve -g

serve安裝完畢，利用serve運行打包好的代碼，運行命令：

serve dist

測試完畢，代碼可以正常運行。

第三步：用Nginx進行部署。

1.下載Nginx：http://nginx.org/en/download.html

我的部署在windows系統上，所以下載的windows 版本  nginx-1.16.0，下載完畢解壓，如下圖

 

2.把打包好的dist文件夾復制到html文件夾下。

3.打開conf文件夾，找到nginx.conf文件，打開編輯里面的內容如下，並保存

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
    #前端訪問接口
    listen 5000;
    # gzip config
    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]\.";

    root /usr/share/nginx/html;

    location / {
        # 用於配合 browserHistory使用
        root html/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;

        # 如果有資源，建議使用 https + http2，配合按需加載可以獲得更好的體驗
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;

    }
    location /api {
        # proxy_pass  http://127.0.0.1:3999;   后台服務地址
        proxy_pass  http://127.0.0.1:3999;   
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   Host              $http_host;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

}

4.在nginx.exe目錄下打開cmd窗口，運行命令：nginx -c conf/nginx.conf   如下圖，nginx服務就開啟成功了，現在可以在瀏覽器打開地址：http://localhost:5000/,查看我們部署的網站了