雪廬小酒學ExtJS:ExtJS6.2 項目部署 Java+Nginx

時間 2019-11-08

標籤小酒 extjs extjs6.2 項目部署 java+nginx java nginx 欄目 Java 简体版

原文原文鏈接

1、簡單介紹

這個是純ExtJS 前端，後臺是使用Java寫的。使用的先後臺分離，數據是以json格式進行傳遞。這裏具體的細節我就不講了。我這裏只寫一下項目部署到服務器，因爲真正的部署是使用sencha命令進行打包，發佈，那個我還不是太明白，這裏只是簡單的把我在電腦上的代碼環境進行了配置，服務器也是測試使用的。各位暫且先看着，以後我解決了打包問題，就對這片文章進行後續的更新。javascript

2、服務器設置

首先，我使用7-ZIP把項目打包壓縮成tar.gz格式的壓縮包。css

sinze6.2. tar.gz –這個是壓縮好的文件的名稱html

而後經過SecureCRT 軟件將該文件上傳到Linux相應的文件夾中。我這裏是由於要使用Nginx作反向代理，因此將該文件上傳到了Linux的文件夾：前端

/data/java

下面而後使用Linux命令tar –zxvf sinze6.2. tar.gz解壓造成的目錄爲sinze6.2 因此最終，前端文件存在文件夾路徑爲：node

/data/sinze6.2nginx

這個很重要，由於作Nginx配置的時候須要使用。web

Tomcat設置json

因爲後臺的操做以及數據交互，都須要經過Tomcat來實現，因此。將Java項目部署在Tomcat文件夾下的webapps中便可。這裏我就不解說了，若是須要請寫在評論上面我後續再補上。api

固然我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下的項目中以下所示：

須要注意的是這三項，必須按照上面的配置來，不然會報錯。程序運行會出現異常。

此時，便可完成服務器的簡單部署，用來測試項目是沒有問題的。

整體來講須要注意幾點：

開放Linux相應的端口好比8080 ，8090等，根據須要進行。
Nginx的設置必定不要有問題，儘可能按章上面的配置進行。
ExtJS的文件路徑要設置正確。因爲ExtJS 本質上都是js因此直接訪問ExtJS項目的文件夾就能打開相應的項目。因此Nginx的root必定要設置正確我就是這裏被坑了好久。
另外，ExtJS我也是剛接觸，若是有什麼問題，或者不足，寫在評論中，我會及時跟進。