Implementación y depuración de sitios web estáticos de Nginx
- 1) npm administrar js vuecli
Npm ejecutar el paquete de compilación e implementar - 2) El html + css tradicional introduce directamente js, estático tradicional y lo
copia directamente.
Etapa de desarrollo de depuración dinámica de sitios web estáticos
-
El proyecto vuecli puede comenzar a depurar con npm run dev
-
En el modo tradicional de importación de desarrollo js, es imposible depurar directamente en el modo servidor. Necesita instalar el servidor live-server. Este servidor es muy simple como módulo de nodo.
npm install -g live-server
live-server --port=6002
Nginx configura hosts virtuales para reenviar diferentes directorios con diferentes nombres de dominio o puertos (proyectos de front-end)
- El alojamiento virtual, también llamado "espacio del sitio web", consiste en dividir un servidor físico que se ejecuta en Internet en varios servidores "virtuales". La tecnología de host virtual ha promovido en gran medida la aplicación y popularización de la tecnología de red. Al mismo tiempo, el servicio de alquiler de host virtual se ha convertido en una nueva forma económica en la era de Internet.
Configurar el host virtual según el puerto
(1) Cargue un sitio web estático: el
proyecto tradicional de front-end en nginx / html_xxx El
proyecto vuecli de front-end está empaquetado y cargado en nginx / vuecli_xxx
(2) Modifique el archivo de configuración de 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) Prueba de acceso: Vuelva a cargar la
barra de direcciones de recarga de Nginx e ingrese http: // localhost: 82
barra de direcciones e ingrese http: // localhost: 83
Configurar el host virtual según el nombre de dominio
- Nombre de dominio y vinculación de IP:
un nombre de dominio corresponde a una dirección de IP, y una dirección de IP puede estar vinculada por varios nombres de dominio.
Para las pruebas locales, puede modificar el archivo de hosts (C: \ Windows \ System32 \ drivers \ etc)
para configurar la relación de mapeo entre el nombre de dominio y la ip. Si la relación correspondiente entre el nombre de dominio y la ip está configurada en el archivo de hosts, no es necesario ir al servidor dns. Especifique el nombre de dominio IP de la regla de vinculación y luego confirme. Después de señalar el nombre de dominio, modifique el archivo de configuración nginx
Hosts
127.0.0.1 app_html_xxx
127.0.0.1 admin_vuecli_xxx
(1) Cargue un sitio web estático: el
proyecto tradicional de front-end en nginx / html_xxx,
empaque el proyecto vuecli de front-end y cárguelo a nginx / vuecli_xxx
(2) Modificar el archivo de configuración de 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 como proxy inverso: diferentes nombres de dominio o direcciones se reenvían a diferentes servidores
- Los proyectos estáticos pueden implementar varios proyectos a través de hosts virtuales, pero los sitios web dinámicos de tomcat no funcionarán y nginx no puede interpretar ni ejecutar.
Configuración de proxy inverso
Modifique el archivo de configuración de 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;
}
}
Las reglas del proxy inverso se pueden distinguir por diferentes nombres de dominio y también pueden distinguirse por diferentes uris.
Resolver dominios cruzados:
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;
}
}