雪庐小酒学ExtJS:ExtJS6.2 项目部署 Java+Nginx
一、 简单介绍
这个是纯ExtJS 前端，后台是使用Java写的。使用的前后台分离，数据是以json格式进行传递。这里具体的细节我就不讲了。我这里只写一下项目部署到服务器，由于真正的部署是使用sencha命令进行打包，发布，那个我还不是太明白，这里只是简单的把我在电脑上的代码环境进行了配置，服务器也是测试使用的。各位暂且先看着，之后我解决了打包问题，就对这片文章进行后续的更新。
二、 服务器设置
首先，我使用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
三、 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我也是刚接触，如果有什么问题，或者不足，写在评论中，我会及时跟进。
