雪庐小酒学ExtJS:ExtJS6.2 项目部署 Java+Nginx

1、  简单介绍

这个是纯ExtJS 前端，后台是使用Java写的。使用的先后台分离，数据是以json格式进行传递。这里具体的细节我就不讲了。我这里只写一下项目部署到服务器，因为真正的部署是使用sencha命令进行打包，发布，那个我还不是太明白，这里只是简单的把我在电脑上的代码环境进行了配置，服务器也是测试使用的。各位暂且先看着，以后我解决了打包问题，就对这片文章进行后续的更新。

2、  服务器设置

首先，我使用7-ZIP把项目打包压缩成tar.gz格式的压缩包。

sinze6.2. tar.gz –这个是压缩好的文件的名称

而后经过SecureCRT 软件将该文件上传到Linux相应的文件夹中。我这里是由于要使用Nginx作反向代理，因此将该文件上传到了Linux的文件夹：

/data/

下面而后使用Linux命令tar –zxvf sinze6.2. tar.gz解压造成的目录为sinze6.2 因此最终，前端文件存在文件夹路径为：

/data/sinze6.2

这个很重要，由于作Nginx配置的时候须要使用。

 

Tomcat设置

因为后台的操做以及数据交互，都须要经过Tomcat来实现，因此。将Java项目部署在Tomcat文件夹下的webapps中便可。这里我就不解说了，若是须要请写在评论上面我后续再补上。

固然我Tomcat默认选择监听的是8080 端口。

这里就须要注意的是，笔者使用的是阿里云的服务器，因此除了要在防火墙上开放8080 port以外，还须要在阿里云后台开放安全组。必须得是TCP的由于我访问使用的是http协议。具体怎么开放安全组，网上有不少。若是须要补上请在文章下面评论，我后续补上。

注意：

个人阿里云镜像使用的是

 

 

 

这家的镜像，而他作的动态静态资源分离。以下为他的部署说明

JAVA应用部署说明
默认镜像是作了动静分离，即nginx处理静态资源（jss、ccc、图片等），其他的交给tomcat处理。
默认（未绑定域名）对应网站根目录/data/wwwroot/default（不是webapps），部署代码时建议将war包解压（好比example.war，解压命令：jar xf example.war ，注意权限必须为www），将其中代码放到对应网站根目录。
• 若是上传代码以后目录结构为:/data/wwwroot/default/WEB-INF，访问地址为：http://IP
• 若是上传代码以后目录结构为:/data/wwwroot/default/example/WEB-INF，访问网站地址为：http://IP/example。

注意：

war包也能够不解压即上传到对应网站根目录，但必须注意访问路径和静态资源目录问题。若是访问网站时，静态资源加载不了，多是缘由是作了动静分离静态资源直接有nginx处理，请确认nginx是否能找到相关静态资源（nginx网站根目录:/data/wwwroot/default）
若是vhost.sh绑定了域名，如www.example.com，工具会自动生成对应根目录:/data/wwwroot/www.example.com ，请将代码放入此目录。
Tomcat参数请修改: /usr/local/tomcat/bin/setenv.sh

 

 

结果形成了我访问的URL一直出现问题，

 

由于我Nginx设置的缘由（没有办法不这样设置）致使项目内全部的请求都会增长一个文件夹路径如上图所示，不得已，我直接将sinze6.2 目录放在了data下面。这才造成了如上文中前端项目的路径：/data/sinze6.2

 

3、  Nginx配置

配置的修改是在nginx.conf 中进行的，其余部分不须要修改，只需修改server中的内容便可，我这里为了方便起见，直接在http下面新增了一个server 与原有的server进行并列处理。具体配置以下：

 

user www www;
worker_processes auto;

error_log /data/wwwlogs/error_nginx.log crit;
pid /var/run/nginx.pid;
worker_rlimit_nofile 51200;

events {
  use epoll;
  worker_connections 51200;
  multi_accept on;
}

http {
  include mime.types;
  default_type application/octet-stream;
  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 1024m;
  client_body_buffer_size 10m;
  sendfile on;
  tcp_nopush on;
  keepalive_timeout 120;
  server_tokens off;
  tcp_nodelay on;

  fastcgi_connect_timeout 300;
  fastcgi_send_timeout 300;
  fastcgi_read_timeout 300;
  fastcgi_buffer_size 64k;
  fastcgi_buffers 4 64k;
  fastcgi_busy_buffers_size 128k;
  fastcgi_temp_file_write_size 128k;
  fastcgi_intercept_errors on;

  #Gzip Compression
  gzip on;
  gzip_buffers 16 8k;
  gzip_comp_level 6;
  gzip_http_version 1.1;
  gzip_min_length 256;
  gzip_proxied any;
  gzip_vary on;
  gzip_types
    text/xml application/xml application/atom+xml application/rss+xml application/xhtml+xml image/svg+xml
    text/javascript application/javascript application/x-javascript
    text/x-json application/json application/x-web-app-manifest+json
    text/css text/plain text/x-component
    font/opentype application/x-font-ttf application/vnd.ms-fontobject
    image/x-icon;
  gzip_disable "MSIE [1-6]\.(?!.*SV1)";

  #If you have a lot of static files to serve through Nginx then caching of the files' metadata (not the actual files' contents) can save some latency.
  open_file_cache max=1000 inactive=20s;
  open_file_cache_valid 30s;
  open_file_cache_min_uses 2;
  open_file_cache_errors on;

######################## default ############################
  server {
    listen 80;
    server_name  localhost;
    access_log /data/wwwlogs/access_nginx.log combined;
    root /data/wwwroot/default;
  
    index index.html index.htm index.jsp;
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    location /nginx_status {
      stub_status on;
      access_log off;
      allow 127.0.0.1;
      deny all;
    }
    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
      expires 30d;
      access_log off;
    }
    location ~ .*\.(js|css)?$ {
      expires 7d;
      access_log off;
    }
    #location ~ {
    #  proxy_pass http://127.0.0.1:8080;
    #  include proxy.conf;
    #}
    location /api/{
        proxy_redirect off;
        #proxy_buffer_size 64k;
        #proxy_buffers   32 32k;
        #proxy_busy_buffers_size 128k;
        proxy_set_header Host $host;
        proxy_set_header X-Real_IP $remote_addr;
        proxy_set_header REMOTE-HOST $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 

        proxy_pass http://ip:8080/项目名/;
        proxy_cookie_path /项目名/ /;
        proxy_cookie_path /项目名 /;
        proxy_intercept_errors on;
        client_max_body_size 512m;
    }
    location ~ /\.ht {
      deny all;
    }
  }
########################## vhost #############################
  include vhost/*.conf;
########################## saikul ############################
server{
        listen 8090;
        server_name localhost2;
        root   /data/sinze6.2;

     location /api/{
                proxy_redirect off;
                proxy_set_header Host $host;
                proxy_set_header X-Real_IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 

                proxy_pass http://ip:8080/项目名/;
                proxy_cookie_path /项目名/ /;
                proxy_cookie_path /项目名 /;
                proxy_intercept_errors on;
                client_max_body_size 512m;
             }
             #access_log /var/log/nginx/access_investorportal.log;
       }
}

　　

 

监听 8090端口location /api/{} 意味着，请求的url为 /api/…… 的URL都会被连接到整个location中。

如上所示：

    Root 为Nginx静态资源根目录，这里我设置成了前端的资源文件夹路径。

    然后台请求则被导向了tomcat的webapps下的项目中以下所示：

 

须要注意的是这三项，必须按照上面的配置来，不然会报错。程序运行会出现异常。

此时，便可完成服务器的简单部署，用来测试项目是没有问题的。

整体来讲须要注意几点：

1. 开放Linux相应的端口好比8080 ，8090等，根据须要进行。
2. Nginx的设置必定不要有问题，尽可能按章上面的配置进行。
3. ExtJS的文件路径要设置正确。因为ExtJS 本质上都是js因此直接访问ExtJS项目的文件夹就能打开相应的项目。因此Nginx的root必定要设置正确我就是这里被坑了好久。
4. 另外，ExtJS我也是刚接触，若是有什么问题，或者不足，写在评论中，我会及时跟进。