1. 下载nginx

   http://nginx.org/download/nginx-1.17.10.zip
   注1:此版本为window版本

2. 解压软件至指定目录

例如:D:\tools\nginx-1.17.10

3. 打开cmd容器,切换到nginx安装根目录,即可执行相关命令进行操作

  start nginx.exe         //启动nginx
   nginx.exe -s stop      //快速停止nginx
   nginx.exe -s reload    //重新加载nginx
   nginx.exe -s quit      //完整停止nginx

   注1:nginx默认使用80端口,这就是绝大多数网站对外的端口,网站其它端口应该都在防火墙的保护之下
   注2:windows下nginx启动一闪而过且nginx启动失败,原因:有可能是80端口被占用的缘故,修改nginx端口即可
   注3:如何修改nginx的端口号?
        找到配置文件nginx_home/conf/nginx.conf
        server {
          #listen       80;     #默认端口
          listen        8088;   #自定义端口
          ...
          ...
        }
   注4:nginx.conf文件中,#号为注解,代码必须以;号结尾~~~~~~重要~~~~~~~~重要~~~~~~~~重要~~~~~~~~

4. 发布SPA项目以及虚拟域名设置


   1. 打包SPA项目,将打包后的dist目录复制到D:\tools\nginx-1.17.10\html,并更名为crm,最终SPA项目根目录为
      D:\tools\nginx-1.17.10\html\crm

   2. 修改server节点
      server {
        listen       80;            #监听80端口,可以改成其他端口
        #server_name  localhost;    #当前服务的域名(虚拟域名也可以)
    server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
    root         html/crm;      #将要访问的网站的根目录,nginx节点会自动继承父节点的配置

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

    location / {
                #root         html/crm;    #将要访问的网站的根目录
            #该句代码是为解决history路由不能跳转的问题,在vue-router官网有介绍 
        try_files $uri $uri/  /index.html;
    }
      }

      注1:通过虚拟域名访问,还要修改window的hosts文件添加虚拟域名映射,文件位置如下:
           C:\Windows\System32\drivers\etc\hosts
           另外,此文件有可能出现由于当前用户权限不够,出现无法修改的情况?解决方案
           将此文件复制到d硬盘任一目录,修改后,再复制替换          

5. tomcat集群配置

 #服务器的集群配置
   upstream  tomcat_list{  #服务器集群名字
       server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思,权重越大,分配的概率越大。
       #server    172.17.0.4:8080  weight=2; #服务器2   weight是权重的意思,权重越大,分配的概率越大
   } 

   注1:upstream节点是http节点的儿子,与server节点是兄弟关系,不要搞错了

6. nginx动静分离


   1.修改spa项目的api/actions的server将其修改为生产阶段,并添加一个/api前缀
     export default {
    //服务器
    //'SERVER': 'http://localhost:8080/crm',//开发阶段
    'SERVER': 'http://www.zking.com/api/crm',//生产阶段改为服务器的域名,并添加/api前缀
       .....
    } 

 2.前缀“/api”的作用
   location  ^~/api/ {
        #^~/api/表示匹配前缀是api的请求,proxy_pass的结尾有/, 则会把/api/*后面的路径直接拼接到后面,即移除api
    proxy_pass http://tomcat_list/;
   }

    
   http://www.zking.com/api/crm/sys/userLogin.action?username=zs&password=123


   127.0.0.1:8080/crm/sys/userLogin.action?username=zs&password=123
   172.17.0.2:8080/crm/sys/userLogin.action?username=zs&password=123 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐