雪庐小酒学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我也是刚接触,如果有什么问题,或者不足,写在评论中,我会及时跟进。