(vue前端+java后台)使用nginx服务项目部署

一、部署vue项目(pc端、移动端)->nginx服务

    1.vue项目打包:

        ①打开【项目目录/config/index.js】文件,修改如下:


修改config/index.js文件

        ②在项目根目录下执行【npm build】进行打包,在dist/下生成所需的文件如下:

            将他们zip打包为mobile.zip或其他。



    2.将vue项目部署到linux

        ①项目位置:【cd /home/wwwroot/】(可以放置到其他位置)

        ②如果使用xshell工具,可通过【rz -y】命令上传本地文件到服务端

        🌂将刚刚1中的mobile.zip放置到该目录下,通过【unzip -o mobile.zip -d ./mobile】命令解压。

二、java接口项目->tomcat服务

        ①将java项目打为war包

        ②放到/usr/local/tomcat80/webapps/(tomcat服务的相关目录)下

        🌂启动tomcat服务

            cd /usr/local/tomcat80/bin

            ./shutdown.sh  #停止服务

            ./startup.sh  #启动服务

        ④查看日志

            cd /usr/local/tomcat80/logs

            tail -f catalina.out

三、nginx服务配置

        ①配置mobile和pc的适配

# HTTPS server

    server {

        listen      443 ssl ;

        server_name  localhost;

        ssl_certificate      2433377_wm25.pgscn.net.pem;

        ssl_certificate_key  2433377_wm25.pgscn.net.key;

        ssl_session_cache    shared:SSL:1m;

        ssl_session_timeout  5m;

        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;

        ssl_prefer_server_ciphers  on;

        server_name  localhost;

        charset utf-8;

        access_log  logs/host.access.log;

        location / {

                      # root html/pc;  #html/pc路径前没有/,是相对路径,为/usr/local/nginx/下的文件,也就是nginx的安装路径

                        root /home/wwwroot/pc;#绝对路径

                    if ( $http_user_agent ~ "(MIDP)|(WAP)|(UP.Browser)|(Smartphone)|(Obigo)|(Mobile)|(AU.Browser)|(wxd.Mms)|(WxdB.Browser)|(CLDC)|(UP.Link)|(KM.Browser)|(UCWEB)|(SEMC\-Browser)|(Mini)|(Symbian)|(Palm)|(Nokia)|(Panasonic)|(MOT\-)|(SonyEricsson)|(NEC\-)|(Alcatel)|(Ericsson)|(BENQ)|(BenQ)|(Amoisonic)|(Amoi\-)|(Capitel)|(PHILIPS)|(SAMSUNG)|(Lenovo)|(Mitsu)|(Motorola)|(SHARP)|(WAPPER)|(LG\-)|(LG/)|(EG900)|(CECT)|(Compal)|(kejian)|(Bird)|(BIRD)|(G900/V1.0)|(Arima)|(CTL)|(TDG)|(Daxian)|(DAXIAN)|(DBTEL)|(Eastcom)|(EASTCOM)|(PANTECH)|(Dopod)|(Haier)|(HAIER)|(KONKA)|(KEJIAN)|(LENOVO)|(Soutec)|(SOUTEC)|(SAGEM)|(SEC\-)|(SED\-)|(EMOL\-)|(INNO55)|(ZTE)|(iPhone)|£¨HUAWEI£©|(Android)|(Windows CE)|(Wget)|(Java)|(curl)|(Opera)" ){

              # root  html/mobile;

              root /home/wwwroot/mobile;  #适配到移动端的

            }

            if ( $http_user_agent ~ "(iPad)|(Pad)|(IPAD)|(PAD)"){

                #root html/pc;

                root /home/wwwroot/pc;#适配到pc端的

            }

            index  index.html index.htm;

            try_files $uri $uri/ /index.html;   #解决项目刷新时候404的问题,找不到文件就指向项目下的index.html文件重新路由

        }


        ②vue项目访问java接口->nginx代理转发

    location /api/ {  #当遇到/api/时,跳转到如下路径

          proxy_pass 'http://127.0.0.1:9090/polycom_wemeet/';#9090是tomcat的服务端口,polycom_wemeet是二中的java项目

        }

        location /wx/ {

            proxy_pass 'http://127.0.0.1:8640/';

        }

    🌂二维码图片路径配置

        location /cf_qrcode/{ #当访问 ip:port://cf_qrcode/img1.png,会指向 /home/wwwroot/cf_qrcode/img1.png

                root /home/wwwroot/;

                autoindex on;

        }

        error_page  404              /index.html;

        # redirect server error pages to the static page /50x.html

        #

        error_page  500 502 503 504  /50x.html;

        location = /50x.html {

            root  html;

        }

    }

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。