Nginx static website deployment and debugging
- 1) npm manage js vuecli
Npm run build package and deploy - 2)Traditional html+css directly introduce js, traditional static, and
copy it directly.
Static website dynamic debugging-development stage
-
The vuecli project can start debugging with npm run dev
-
The traditional mode of importing js development cannot be debugged directly in the server mode.You need to install the live-server server.This server is very simple as a node module.
npm install -g live-server
live-server --port=6002
Nginx configures virtual hosts to forward different directories with different domain names or ports (front-end projects)
- Virtual hosting, also called "website space", is to divide a physical server running on the Internet into multiple "virtual" servers. Virtual host technology has greatly promoted the application and popularization of network technology. At the same time, the rental service of virtual host has become a new economic form in the Internet age.
Configure virtual host based on port
(1) Upload a static website: the
front-end traditional project under nginx/html_xxx The
front-end vuecli project is packaged and uploaded to nginx/vuecli_xxx
(2) Modify the Nginx configuration file: 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) Access test: Reload Nginx reload
address bar and enter http://localhost:82
address bar and enter http://localhost:83
Configure virtual host based on domain name
- Domain name and IP binding:
One domain name corresponds to one ip address, and one ip address can be bound by multiple domain names.
For local testing, you can modify the hosts file (C:\Windows\System32\drivers\etc)
to configure the mapping relationship between domain name and ip. If the corresponding relationship between domain name and ip is configured in the hosts file, there is no need to go to the dns server. Specify the binding rule IP domain name and then confirm. After the domain name is pointed, modify the nginx configuration file
Hosts
127.0.0.1 app_html_xxx
127.0.0.1 admin_vuecli_xxx
(1) Upload a static website: the
front-end traditional project under nginx/html_xxx The
front-end vuecli project is packaged and uploaded to nginx/vuecli_xxx
(2) Modify Nginx Configuration file: 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 as a reverse proxy-different domain names or addresses are forwarded to different servers
- Static projects can deploy multiple projects through virtual hosts, but dynamic tomcat websites will not work, and nginx cannot interpret and run.
Reverse proxy configuration
Modify the Nginx configuration file: 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;
}
}
The rules of reverse proxy can be distinguished by different domain names, and can also be distinguished by different uris.
Resolve cross-domain:
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;
}
}