Nginx静态网站部署与调试
- 1)npm管理js vuecli
Npm run build 打包并部署 - 2)传统html+css直接引入js 传统静态
直接拷贝就ok
静态网站动态调试-开发阶段
-
vuecli项目可以npm run dev启动调试
-
传统导入js开发的模式,没法直接服务器方式调试,需要安装 live-server服务器,这个服务器很简单就是node一个模块.
npm install -g live-server
live-server --port=6002
Nginx配置虚拟主机 不同域名或端口转发不同的目录(前端项目)
- 虚拟主机,也叫“网站空间”,就是把一台运行在互联网上的物理服务器划分成多个“虚拟”服务器。虚拟主机技术极大的促进了网络技术的应用和普及。同时虚拟主机的租用服务也成了网络时代的一种新型经济形式。
基于端口配置虚拟主机
(1)上传静态网站:
前端传统项目项目 nginx/html_xxx下
前端vuecli项目 打包后 上传至 nginx/vuecli_xxx 下
(2)修改Nginx 的配置文件:conf/nginx.conf
server {
listen 8081;
server_name localhost;
location / {
root html_xxx;
index index.html;
}
}
server {
listen 80;
server_name localhost;
location / {
root vuecli_xxx;
index index.html;
}
}
(3)访问测试: 重新加载Nginx reload
地址栏输入http://localhost:82
地址栏输入http://localhost:83
基于域名配置虚拟主机
- 域名与IP绑定:
一个域名对应一个 ip 地址,一个 ip 地址可以被多个域名绑定。
本地测试可以修改 hosts 文件(C:\Windows\System32\drivers\etc)
可以配置域名和 ip 的映射关系,如果 hosts 文件中配置了域名和 ip 的对应关系,不需要走dns 服务器。指定绑定规则 IP 域名 然后确定。做好域名指向后,修改nginx配置文件
Hosts
127.0.0.1 app_html_xxx
127.0.0.1 admin_vuecli_xxx
(1)上传静态网站:
前端传统项目项目 nginx/html_xxx下
前端vuecli项目 打包后 上传至 nginx/vuecli_xxx 下
(2)修改Nginx 的配置文件:conf/nginx.conf
server {
listen 80;
server_name app_html_xxx;
location / {
root html_xxx;
index index.html;
}
}
server {
listen 80;
server_name admin_vuecli_xxx;
location / {
root vuecli_xxx;
index index.html;
}
}
Nginx作为反向代理-不同域名或者不同地址转发给不同服务器
- 静态项目可以通过虚拟主机实现多个项目的部署,但动态tomcat网站就不行,nginx无法解释运行.
反向代理配置
修改Nginx 的配置文件:conf/nginx.conf
server {
listen 80;
server_name java_web;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:6002; #访问域名为java_web都交给6002处理
index index.html index.htm;
}
}
server {
listen 80;
server_name admin.com;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
proxy_pass http://127.0.0.1:8082; #访问域名为 admin.com都交给8082处理
index index.html index.htm;
}
}
反向代理的规则可以通过域名的不同来进行区别,也可以通过uri的不同来进行区别。
解决跨域:
server {
listen 80;
server_name admin.mall.com;
location / {
# 检查域名后缀
if ($http_origin ~ \.mall\.com) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
add_header Access-Control-Max-Age 1728000;
}
# options请求不转给后端,直接返回204
# 第二个if会导致上面的add_header无效,这是nginx的问题,这里直接重复执行下
if ($request_method = OPTIONS) {
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods GET,POST,DELETE,PUT,OPTIONS;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,U-TOKEN;
add_header Access-Control-Max-Age 1728000;
return 204;
}
# 其他请求代理到后端
proxy_set_header Host $host;
proxy_redirect off;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Scheme $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_pass http://localhost:8081;
}
}
后台运行XXX-1.0.0.jar 并将日志写到output.log 中
nohup java -jar XXX-1.0.0.jar 2>&1 >output.log &