nginx部署ant-design-pro

前言

記錄一下安裝部署nginx+ant-design-pro的過程

nginx安裝

nginx的安裝直接看官網的，可以是源碼編譯安裝（百度搜索出來的大多是這種安裝方式，例如：https://www.cnblogs.com/xxoome/p/5866475.html） ，也可以是yum直接安裝最新穩定版1.16.1，安裝步驟也可以直接用官網的，

1. 雲平台准備centos機器
   centos7.6.1810_base-kvm-50g-none 這個模板投遞一台機器，yum remove firewalld NetworkManager -y 關閉防火牆，
2. 安裝nginx
   https://nginx.org/en/linux_packages.html#RHEL-CentOS 這個是官方文檔，先創建repo鏡像地址文件：/etc/yum.repos.d/nginx.repo，內容為：

   [nginx-stable]
   name=nginx stable repo
    baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
    gpgcheck=1
    enabled=1
    gpgkey=https://nginx.org/keys/nginx_signing.key
    module_hotfixes=true
   
    [nginx-mainline]
    name=nginx mainline repo
    baseurl=http://nginx.org/packages/mainline/centos/$releasever/$basearch/
    gpgcheck=1
    enabled=0
    gpgkey=https://nginx.org/keys/nginx_signing.key
    module_hotfixes=true
   

   然后，執行命令：sudo yum install yum-utils安裝前置的依賴包，接着安裝nginx包：sudo yum install nginx這樣就安裝好了目前的最新穩定版nginx，瀏覽器訪問ip:80能訪問到nginx的頁面。啟動命令：/usr/sbin/nginx，重新加載配置並啟動命令：/usr/sbin/nginx -s reload，停止命令：/usr/sbin/nginx -s stop

部署ant-design-pro前端程序

前端工程通過跑npm run build來執行vue-cli-service build編譯工程到dist目錄下，把編譯好的dist目錄下內容上傳到 /usr/share/nginx/html 目錄下,默認安裝好nginx的配置文件是：/etc/nginx/nginx.conf，這個配置文件加載的是：/etc/nginx/conf.d/default.conf，參考：https://pro.loacg.com/docs/deploy 文檔中nginx的配置修改default.conf文件，添加了location /的配置和location /MonitorCenter的配置，后端地址配置在proxy_pass的值中，如圖：

更多參考文檔

• 官方文檔（能按照文檔來學習是最好的）：https://nginx.org/en/docs/
• 一篇介紹nginx的中文blog：https://blog.csdn.net/qq_33454884/article/details/89212702
• docker部署nginx文檔： https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx